:root{color-scheme:light dark;--colour-blue:#129ed9;--colour-yellow:#fee601;--colour-magenta:#ea18e6;--colour-orange:orangered;--colour-black:#1f2227;--colour-blacker:#1c1b22;--colour-white:#fff;--colour-black-half:#1f222788;--colour-white-half:#fffc;--colour-reader-white:#e6e6e6;--colour-link:var(--colour-blue);--colour-link-hover:#3056a9;--colour-link-active:var(--colour-orange);--colour-link-visited:#6a60b0;--colour-link-visited-hover:#534fa3;--colour-rainbow:linear-gradient(90deg,rgba(232, 102, 102, 1) 0%, rgba(255, 171, 3, 1) 20%, rgba(104, 242, 80, 1) 40%, rgba(76, 237, 218, 1) 60%, rgba(136, 132, 232, 1) 80%, rgba(242, 48, 220, 1) 100%);--colour-rainbow-dark:linear-gradient(90deg,rgba(212, 110, 110, 1) 0%, rgba(242, 237, 141, 1) 20%, rgba(139, 240, 121, 1) 40%, rgba(110, 234, 220, 1) 60%, rgba(164, 162, 229, 1) 80%, rgba(237, 83, 219, 1) 100%);--font-header:bd-supper, system-ui, sans-serif;--font-body:mundial, system-ui, sans-serif;--font-code:aglet-mono, monospace;line-height:1.6;font-size:18px}html{&:not(.dark) { --colour-background:var(--colour-white); --colour-text-body:var(--colour-black); --header-rainbow:var(--colour-rainbow); & body > header { background-color:var(--colour-white-half); color:var(--colour-blue); } #front-matter { background-color:#0000003f; } & body article { blockquote,pre,code { background-color:var(--colour-reader-white); } } #toggleMoon { display:inline-block; } #toggleSun { display:none; } } &.dark { --colour-background:var(--colour-blacker); --colour-text-body:var(--colour-reder-white); --header-rainbow:var(--colour-rainbow-dark); --colour-link:var(--colour-blue); --colour-link-hover:var(--colour-magenta); --colour-link-visited:#ad4aff; --colour-link-visited-hover:var(--colour-magenta); color:var(--colour-reader-white); & body > header { background-color:var(--colour-black-half); color:var(--colour-yellow); } & body article { blockquote,pre,code { background-color:var(--colour-black); } } #front-matter { background-color:#0000003f; } #toggleMoon { display:none; } #toggleSun { display:inline-block; } }}body{background-color:var(--colour-background);color:var(--colour-text-body)}.transi body{transition:color .25s ease-in-out,background-color .25s ease-in-out}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-body)}h1{font-family:var(--font-header);color:var(--colour-blue);background:#d46e6e;background-image:var(--header-rainbow);background-clip:text;background-size:100%;background-repeat:repeat;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-moz-background-clip:text;-moz-text-fill-color:transparent;text-shadow:none !important}.h1::selection,h1::selection{background:0 0;background-clip:initial;-webkit-background-clip:initial;-moz-background-clip:initial;color:#fff}::selection{background:var(--article-selection-bg,#345171)}::-moz-selection{background:var(--article-selection-bg,#345171)}.h1::selection,h1::selection{background:var(--article-selection-bg,#345171);color:#fff;-webkit-text-fill-color:#fff;-moz-text-fill-color:#fff}pre,code{font-family:var(--font-code)}@keyframes rainbow{from{background-position-x:0}to{background-position-x:768px}}input#toggle-menu{display:none}@media(min-width:38rem){body{& > header { padding: 1rem; font-size: 26px; div#small-menu-button { display: none; } }}}@media(max-width:38rem){html:not(.dark)>body>header ul{background-color:var(--colour-white-half)}body{& > header { padding: 0.5rem; font-size: 26px; div#small-menu-button { display: block; height: 1em; width: 1em; & * { cursor: pointer; } &:has(input#toggle-menu[type="checkbox"]:checked) label { #menu-icon-close { display: inline-block; } #menu-icon-open { display: none; } } &:has(input#toggle-menu[type="checkbox"]:not(:checked)) label { #menu-icon-close { display: none; } #menu-icon-open { display: inline-block; } } } div#small-menu-button:has(input#toggle-menu[type="checkbox"]:checked) ~ nav { opacity: 1; visibility: visible; } nav { opacity: 0; visibility:hidden; position:absolute; top: 100%; left:0; width:100%; ul { flex-direction: column; backdrop-filter: blur(4px) brightness(50%); background-color: var(--colour-black-half); align-items: end; padding: 0.75rem 2rem; } } } main { &.main-home { & #home-content { & #hero-logo { flex-direction: column; } } } }}}body{display:flex;flex-direction:column;align-items:center;min-height:100vh;& > header { transition: padding 0.3s ease; backdrop-filter: blur(4px) brightness(50%); position: fixed; z-index: 100; min-width: 100%; top: 0; left: 0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; font-family: var(--font-header); & > a { display: flex; align-items: center; gap: 16px; cursor: pointer; text-decoration: none; color: inherit; img { width: auto; height: 1.5em; border-radius: 50%; outline: 0px solid var(--colour-magenta); outline-offset: 0px; transition: outline 0.5s ease-out, outline-offset 0.4s ease-out, background-color 0.25s ease-out; } &:hover { color: var(--colour-magenta); img { background-color: var(--colour-magenta); outline: 8px solid transparent; outline-offset: 5px; transition-delay: 0s; } } &:not(:hover) { img { transition: background-color 0.25s ease-out; } } } nav { ul { display: flex; gap: 1rem; list-style: none; li { min-width: 1.25rem; a { font-size: 0.75em; text-decoration: none; color: inherit; &:hover { color: var(--colour-magenta); border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8" width="12" height="8"><path fill="none" stroke="magenta" stroke-width="2" d="M0,7c3,0,3-6,6-6s3,6,6,6"/></svg>') 0 0 100% repeat; border-width: 0 0px 8px; border-style: solid; } } svg { vertical-align: middle; cursor: pointer; } } } } } & > footer { min-width: 100%; text-align: center; font-size: 0.9rem; padding-top: 2rem; padding-bottom: 2rem; display: flex; flex-direction: column; gap: 2rem; canvas#waveCanvas { display: block; width: 100%; height: 50px; } a { color: inherit; text-decoration: underline; } .socials { display: flex; gap: 1rem; justify-content: center; svg { height: 1rem; } } }}main{flex:1;padding:1rem;margin-top:4rem;max-width:50rem;width:100%;a { color:var(--colour-link); border-radius:2px; text-decoration:none; &:visited { color:var(--colour-link-visited) } &:visited:hover { color:var(--colour-link-visited-hover) } &:hover { color:var(--colour-link-hover); text-decoration:underline; } &:active { color: var(--colour-link-active); text-decoration:underline; } } hr { height: 1rem; background-image: url('/mr-zigzag.svg'); background-size: 0.75rem; background-repeat: repeat-x; border: none; width:100%; } &.main-home { max-width: unset; padding: unset; width: 100%; min-height: 100vh; position: relative; overflow: hidden; #starCanvas { position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); z-index: 0; pointer-events: none; width: 100%; min-width: 1020px; height: auto; } #home-content { z-index: 1; position: relative; padding: 1rem; max-width: 50rem; margin: auto; display: flex; flex-direction: column; gap: 1rem; align-items: center; #hero-logo { display: flex; flex-direction: row; align-items: center; justify-content: center; text-align: center; gap: 1rem; img { max-width: 10rem; height:auto; } div { display: flex; flex-direction:column; justify-content: center; align-items: center; gap: 0rem; h1 { font-size: 3rem; margin: none; line-height:1; } p { margin: none; } } } #front-matter { border-radius: 0.5rem; padding: 1rem 2rem 2rem 2rem; max-width: 35rem; width: 100%; backdrop-filter: blur(2px); & > p { text-align: center; } h2 { font-size: 1rem; } & > div { &.featured-post { margin-bottom: 1rem; } h3 { font-size: 1rem; } & > div { display: flex; flex-direction: row; justify-content: space-between; gap: 1em; time { font-size: 0.85em; } } & > p { padding-left: 1rem; font-size: 0.9em; } } hr { max-width: 20rem; width: 90%; margin: 1rem auto; border: 0.5px solid white; height: unset; background-image: unset; } } } }}article{header { margin: 3rem 0 2rem; h1 { font-size: 2rem; margin-bottom: 0.5rem; } } footer { margin-top: 2rem; font-size: 0.875rem; color: gray; text-align: center; } p { margin-bottom: 1rem; } h2, h3 { margin-top: 2rem; margin-bottom: 0.5rem; } ul, ol { margin-left: 1.5rem; margin-bottom: 1rem; } blockquote { margin: 1rem 0; padding: 1rem 2rem; font-style: italic; font-size: 1.25em; border-radius: 5px; } div.highlight { max-width: calc(100vw - 2rem); } code { padding: 0.2em 0.4em; border-radius: 4px; } pre { padding: 1em; overflow-x: auto; border-radius: 5px; code { background: none; padding: 0; } } figure { margin: 2rem 0; text-align: center; img { max-width: 100%; height: auto; border-radius: 8px; } figcaption { font-size: 0.9rem; color: gray; margin-top: 0.5rem; } } table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; th, td { border: 1px solid #ccc; padding: 0.5rem; text-align: left; } }}hr.index-page{margin:1rem 0}.article-list{margin:1rem 0;&:not(:last-child) { padding-bottom:2rem; border-bottom:1px solid; } h2 { font-size:1.25rem; } p { padding-left:1rem; time { font-style:italic; } }}