@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("jetbrains-mono.woff2") format("woff2"); } * { box-sizing: border-box; } :root { --font: "JetBrains Mono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace; --background-color: #fefefe; --main-text-color: #333; --dim-text-color: #888; --dimmer-text-color: #bababa; --dimmest-text-color: #ddd; --link-color: #000; --theme: #d57100; --code-background: color-mix(in srgb, var(--theme), transparent 90%); } .dark { --background-color: #222; --main-text-color: #ccc; --dim-text-color: #666; --dimmer-text-color: #444; --dimmest-text-color: #333; --link-color: #fff; } html { color-scheme: light dark; } body { font: 15px/1.6 var(--font); color: var(--main-text-color); margin: 5vw; background: var(--background-color); } main { max-width: 80ch; } .container { display: flex; flex-direction: column; gap: 2rem; } /* Links */ a, a:visited { color: var(--link-color); } a:hover { color: var(--theme); } p a[href^="http"]::after { content: "✈︎"; vertical-align: super; text-decoration: none; display: inline-block; } a.logo { transition: border-color 0.3s; border: 2px solid var(--main-text-color); border-radius: 0.35rem; padding: 0.25rem; text-decoration: none; } a.logo:hover { border-color: var(--theme); } a#theme-toggle, a.header-link { display: block; text-decoration: none; justify-self: end; margin-left: auto; } body a#theme-toggle { font-size: 1.25rem; /* Pictogram too small :< */ } body a#theme-toggle::after { content: "☽"; color: #35d; display: inline-block; transform-origin: top center; will-change: transform, opacity; /* animation: 2s linear infinite alternate star; */ animation: star 2.6s cubic-bezier(0.5, 0.05, 0.1, 0.95) infinite; } body.dark a#theme-toggle::after { content: "☀"; display: inline-block; position: relative; z-index: 2; color: orange; transform-origin: center; will-change: transform, opacity; animation: sun 6s linear infinite; } a#scroll-top { margin-left: auto; height: 24px; width: 24px; display: inline-block; text-align: center; vertical-align: middle; background: var(--link-color); color: var(--background-color); text-decoration: none; } .last-generated { display: inline-block; margin-left: 1rem; font-family: monospace; font-size: 0.75rem; line-height: initial; } /* Elements */ img { max-width: 100%; } /* img helpers */ img.inline { display: inline-block; max-height: 1em; } #gallery { display: flex; flex-direction: row; gap: 2px; } #gallery .lqip { width: 32px; height: 32px; border: 1px solid #eee; outline: 1px solid #222; } blockquote { border-left: 2px solid; padding: 0.5rem 1rem; margin: 2rem 0; } code { color: var(--theme); } mark.redacted { color: var(--link-color); background-color: initial; position: relative; z-index: 1; &::before { content: ""; position: absolute; inset: 2px 0 0; z-index: 2; background-color: var(--link-color); transform: skewX(10deg) skewY(-2deg); border-radius: 12px; } } pre { background: var(--code-background); border-radius: 0.3rem; margin: 0.5rem 0; padding: 0.5rem; overflow: auto; } pre > code { background: none; border: none; padding: 0; } :not(pre) > code { background: var(--code-background); padding: 0.1rem 0.25rem; border-radius: 0.25rem; } ul li, ol li { margin-top: 0.5rem; list-style-position: inside; } ol { padding-left: 0; } ul { padding-left: 0; list-style: none; } li > ul { padding-left: 1rem; } article ul:not(.entrylist) li::before { content: "* "; font-size: 1.2em; } li:has(> input[type="checkbox"])::marker { content: ""; } .footnote li p { display: inline; } h1, h2, h3, h4, h5 { color: var(--link-color); } h1 { font-size: 1.1rem; } header h1 { margin: 0; flex: 1; } header h1::before { content: " / "; } h2 { font-size: 1.05rem; } h3 { font-size: 1rem; } h4 { font-size: 0.9rem; } section.year h4 { display: inline-block; margin: 0 0.5rem 0 0; } header { margin-bottom: 4rem; display: flex; gap: 0.5rem; align-items: center; } .icons { margin-top: 2rem; display: flex; align-items: center; } .icons a { height: 24px; } .entrylist { list-style-type: none; padding-left: 0; } .entrylist .description { color: var(--dimmer-text-color); } .entrylist li { position: relative; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 1ch; } .entrylist a { overflow: hidden; white-space: nowrap; } .entrylist li > * { background: var(--background-color); } .entrylist li:not(:last-child) { margin-bottom: 0.5rem; } .entrylist .entry-bucket { font-size: 0.7em; text-transform: uppercase; border: 1px solid; border-radius: 3px; padding: 0 2px; } aside { font-size: 0.85rem; color: var(--dim-text-color); } /* Admonition Style */ .admonition { border: 2px solid var(--main-text-color); border-radius: 4px; margin-bottom: 1rem; } .admonition p { padding: 0 1rem; } p.admonition-title { font-weight: bold; text-transform: uppercase; border-bottom: 2px solid; border-color: inherit; padding-bottom: 1rem; } :is(.admonition.important, .admonition.warning) .admonition-title::before { content: "⚠️"; padding-right: 1ch; } :is(.admonition.note, .admonition.information) .admonition-title::before { content: "ℹ️"; padding-right: 1ch; } /* End Admonition */ /* Journal */ section.journal { display: flex; flex-direction: column; gap: 2rem; } section.year li { transition: all 0.3s ease-in-out; } section.year:has(li:hover) li:not(:hover) { opacity: 0.3; } /* Projects */ section.projects { display: flex; flex-direction: column; gap: 0.5rem; } .project { display: flex; flex-direction: row; align-content: center; align-items: center; gap: 1rem; } .project .border, .entrylist li .border { display: flex; flex-grow: 1; border-bottom: 1px solid; border-color: var(--dimmest-text-color); } .g { transition: opacity 0.1s, filter 0.2s; color: var(--dim-text-color); filter: blur(3px); opacity: 0.5; } li[data-tags]::before { color: var(--background-color); display: inline-block; position: absolute; left: -1rem; content: "●"; } li[data-tags*="important"]::before { color: var(--link-color); } /* RELATED ENTRIES */ details.related-entries { padding: 0.5rem 1rem; grid-column: span 2; display: block !important; /* [TODO] Move this to entry-info and remove the important override */ summary { list-style: none; &::-webkit-details-marker { display: none !important; } &::marker { display: none; } &::before { content: "[>] "; display: inline-block; margin-right: 1ch; } } &[open] summary::before { content: "[⋁] "; } } /* END RELATED ENTRIES */ /* ENTRY INFO */ section.entry-info { --info-border: 1px solid var(--dim-text-color); display: grid; grid-template-columns: 1fr 1fr; border-left: var(--info-border); border-top: var(--info-border); color: var(--dim-text-color); > * { display: grid; grid-template-columns: 1fr 3fr; border-right: var(--info-border); border-bottom: var(--info-border); > span { padding: 0.5rem 1rem; } & [class^="entry-"]:not(:last-child) { border-right: var(--info-border); } } } /* END ENTRY INFO */ /* Table */ table { position: relative; border-collapse: collapse; width: max(80rem, 100%); table-layout: fixed; border: 2px solid var(--main-text-color); border-radius: 4px; overflow-x: auto; } thead { position: sticky; top: 0; } thead::after { content: ""; display: block; border-block-end: 2px solid var(--main-text-color); position: absolute; bottom: 0; left: 0; right: 0; } tfoot { border-block: 2px solid var(--main-text-color); } th, td { border: 1px solid var(--dimmest-text-color); vertical-align: baseline; } td { padding: 1em; } tbody tr:first-child td { border-block-start: 0; } thead th { vertical-align: bottom; background: var(--background-color); } /* END TABLE */ /* EXPANDO */ div.expando ul { display: table; margin: 0; padding: 0; li { display: inline; padding: 0; margin: 0; + li.unexpanded { margin-left: 0.5ch; } > ul { display: none; &.expanded { display: inline; } } } } /* END EXPANDO */ /* TOC */ div.toc ul { li { &::before { content: ""; } > ul { border-left: 2px solid var(--dimmest-text-color); li { position: relative; } li::before { display: block; content: "–"; position: absolute; left: -1rem; width: 10px; color: var(--dimmest-text-color); } } } } /* END TOC */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.5rem); } } /* END NOW SECTION */ /* BANNER */ .news-banner { border: 1px solid color-mix(in srgb, var(--background-color), transparent 30%); outline: 1px solid var(--dimmer-text-color); border-radius: 3px; padding: 0 6px; text-transform: uppercase; display: grid; grid-template-columns: 30px 100%; overflow: hidden; height: 2em; gap: 1ch; background: color-mix(in srgb, blue, transparent 90%); margin-bottom: 1em; } .banner-content { animation: scroller 10s infinite; animation-timing-function: cubic-bezier(0.85, 0.01, 0.19, 0.99); } @keyframes scroller { 0% { transform: translateY(0); } 33% { transform: translateY(-1.6em); } 66% { transform: translateY(-3.2em); } 100% { transform: translateY(-4.8em); } } /* END BANNER */ /* SMALL SCREEN ADJUSTMENTS */ @media screen and (width <= 600px) { body { margin: 1rem; font-size: 14px; } th, td { padding: 0.5rem; } section.entry-info { grid-template-columns: 1fr; > * { grid-column: span 1; } } } /* END SMALL SCREEN ADJUSTMENTS */ /* ANIMATIONS */ @keyframes sun { 0% { transform: rotate(0deg) scale(1); } 100% { transform: rotate(360deg) scale(1); } } @keyframes star { 0% { transform: rotate(-18deg); } 50% { transform: rotate(18deg); } 100% { transform: rotate(-18deg); } } /* END ANIMATIONS */ /* TEMP */ .entry-popup-description { position: absolute; left: 0; right: 0; top: 2rem; margin: 0 auto; max-width: fit-content; text-align: center; backdrop-filter: blur(6px); opacity: 0; display: none; transition: opacity 0.3s; border: 1px solid color-mix(in srgb, var(--link-color), transparent 80%); z-index: 10; padding: 1ch 2ch; color: var(--main-text-color); background: color-mix( in srgb, var(--background-color), transparent 25% ) !important; } .entrylist li:hover > .entry-popup-description { display: block; opacity: 1; }