@import url(fonts/inter/inter.css); @import url(fonts/ftaurebesh/ftaurebesh.css); :root { font-size: 16px; font-size: clamp(16px, 8px + 1.5vw, 24px); box-sizing: border-box; display: flex; flex-direction: column; min-height: 100vh; flex-grow: 1; padding: 0; line-height: 1.5; } body { --c-highlight: hsl(0 0% 100% / 87.5%); --c-dark: hsl(217 17% 21%); --c-accent: white; /* --c-accent: hsl(14 62% 53%); */ --c-body-background: hsl(0 0% 85%); --c-text-background-light: hsl(0 0% 95% / 60%); --c-text-light: var(--c-highlight); --c-text-dark: var(--c-dark); --ratio: 1.333; --s-5: calc(var(--s-4) / var(--ratio)); --s-4: calc(var(--s-3) / var(--ratio)); --s-3: calc(var(--s-2) / var(--ratio)); --s-2: calc(var(--s-1) / var(--ratio)); --s-1: calc(var(--s0) / var(--ratio)); --s0: 1rem; --s1: calc(var(--s0) * var(--ratio)); --s2: calc(var(--s1) * var(--ratio)); --s3: calc(var(--s2) * var(--ratio)); --s4: calc(var(--s3) * var(--ratio)); --s5: calc(var(--s4) * var(--ratio)); --content-width: clamp(75vw, 40rem, 100vw - 3rem); --inset: calc(50vw - var(--content-width) / 2); } body[data-theme="dark"] { background-color: var(--c-body-background); } [data-theme="dark"] { --c-highlight: hsl(60 20% 30% / 50%); --c-dark: hsl(217 9% 8%); --c-accent: hsl(220 20% 35%); --c-body-background: hsl(220 50% 5%); --c-text-background-light: hsl(220 40% 10% / 40%); --c-text-light: hsl(60 50% 86.67%); --c-text-dark: hsl(60 50% 86.67%); } @media (prefers-color-scheme: dark) { body[data-theme="auto"] { background-color: var(--c-body-background); } [data-theme="auto"] { --c-highlight: hsl(60 20% 30% / 50%); --c-dark: hsl(217 9% 8%); --c-accent: hsl(220 20% 35%); --c-body-background: hsl(220 50% 5%); --c-text-background-light: hsl(220 40% 10% / 40%); --c-text-light: hsl(60 50% 86.67%); --c-text-dark: hsl(60 50% 86.67%); } } ::selection { background: var(--c-highlight); color: var(--c-text-dark); } *, :after, :before { box-sizing: inherit; font-family: inherit; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); text-decoration-thickness: 0.1rem; } body { position: relative; display: flex; flex-direction: column; z-index: 1; flex-grow: 1; padding: 0; margin: 0; font-family: Inter, sans-serif; background-color: var(--c-body-background); color: var(--c-text-dark); } a { color: inherit; } a[href] { text-decoration-line: underline; box-decoration-break: clone; } a[href]:hover, a[href]:focus-visible, label:hover, label:focus-visible, label:has(input:focus-visible), .nav-toggle-button:has(input[type="radio"]:checked) { background-color: var(--c-accent); text-decoration: none; box-shadow: 0 0 0 0.2rem var(--c-accent); } main p img { max-width: 100%; } section { margin-top: 1rem; } .footnote-item:target, .footnote-ref :target { animation: ping 1s ease-out; &, a { text-decoration-color: var(--c-accent); } } .footnotes-sep { position: relative; z-index: -1; margin: 4rem -1rem -4rem; height: 4.1rem; border: none; background-image: radial-gradient(ellipse farthest-side at 50% 0%, var(--c-highlight), transparent); opacity: 0.5; } @keyframes ping { 0% { border-radius: 50%; background-color: var(--c-accent); box-shadow: var(--c-accent) 0 0 1rem 4rem; } 100% { border-radius: 50%; background-color: transparent; box-shadow: transparent 0 0 0rem 0rem; } 100% { border-radius: initial; } } li::marker { color: color-mix(in srgb, currentcolor 50%, transparent); } aside { display: inline-block; margin-left: 1ch; font-size: var(--s-1); } ul.collection { padding-left: 0; > li { list-style-type: none; + li { margin-top: 1rem; } } } p { margin: 0; + p { margin-top: 1lh; } } blockquote { position: relative; margin: 1lh 0; padding: 0 1em; border-left: 1px solid var(--c-accent); &::after { content: ''; position: absolute; z-index: -1; top: -0.5lh; bottom: -0.5lh; left: -0.1em; width: 10rem; background: radial-gradient(ellipse farthest-side at 0% 50%, var(--c-highlight), transparent); opacity: 0.5; } } sup { font-size: var(--s-1); margin-top: -0.2em; } body > header { color: var(--c-text-dark); padding: 0 var(--inset) 0.5rem; border-radius: 0.5rem 0.5rem 0 0; margin-bottom: 0.5rem; } body > header > nav { display: flex; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 1ch; } .nav-categories > a { white-space: nowrap; & + a { margin-left: 0.5em; } } .nav-toggles { margin-left: auto; font-size: var(--s-1); } @media print { :root { font-size: 10pt; } body { --c-highlight: white --c-dark: white; --c-accent: black; --c-body-background: white; --c-text-light: black; --c-text-dark: black; --content-width: 100vw; } body { background: none; } h1, h2, h3, h4 { opacity: 0.75; } body > header > nav { display: none; } a[href^="http"]::after { content: " (" attr(href) ")"; } } body > footer { text-align: center; font-size: var(--s-1); margin: auto var(--inset) 0 auto; padding-top: 4rem; } .header-meta { display: flex; flex-direction: row; flex-wrap: wrap; font-size: var(--s-1); > * + *::before { content: "-"; padding: 0 0.5ch; } } label { cursor: pointer; text-decoration-line: underline; > input[type="radio"] { visibility: hidden; position: fixed; bottom: 110%; } } .nav-toggle-button { margin-left: 0.5ch; margin-right: 0.5ch; position: relative; z-index: 0; } [data-language="aurebesh"] { font-family: FTAurebesh; line-height: 1.25; ul:not(.collection) > li { list-style-type: square; } } [data-language="english"] { font-family: Inter; } h1, h2, h3, h4 { position: relative; font-weight: 700; text-shadow: 0 0 0.2em var(--c-highlight); &:hover .header-anchor { opacity: 1; } &::after { opacity: 0.5; content: ''; position: absolute; z-index: -1; bottom: 0; left: -4rem; height: 4em; width: 30rem; max-width: 100%; /* outline: 1px solid red; */ background: radial-gradient(ellipse farthest-side at 50% 100%, var(--c-highlight), transparent); } } main { h1, h2, h3, h4 { clear: both; margin-bottom: 0.25lh; } padding: 0 var(--inset); } h1 { font-size: var(--s3); } h2 { font-size: var(--s2); } h3 { font-size: var(--s1); } .header-anchor { position: absolute; transform: translateX(-100%); margin-left: -0.2ch; opacity: 0; transition: opacity ease-in 0.1s; &::before { content: "#"; } } .item-summary { margin-bottom: 1rem; } p > code { display: inline-block; font-family: "Commit Mono", monospace; background-color: var(--c-text-background-light); padding: 0.1em; margin: -0.1em; border-radius: 0.5em; }