diff options
Diffstat (limited to 'style.css')
| -rw-r--r-- | style.css | 370 |
1 files changed, 334 insertions, 36 deletions
diff --git a/style.css b/style.css index c8067aa..1d06d84 100644 --- a/style.css +++ b/style.css @@ -1,49 +1,347 @@ +/* Taken from https://tug.org/~mseven/style.css */ + +:root { + --color-light:hsl(32, 98%, 92%); + --color-light-semi:hsl(32, 35%, 65%); + --color-light-faded:hsl(32, 20%, 40%); + --color-dark:hsl(32, 80%, 8%); + --color-dark-semi:hsl(32, 35%, 28%); + --color-dark-faded:hsl(32, 20%, 60%); + --color-blue:hsl(213, 90%, 33%); + --color-purple:hsl(280, 90%, 37%); + --color-light-blue:hsl(213, 85%, 75%); + --color-light-purple:hsl(280, 84%, 75%); + --heading-ratio:0.7071067811865476; + --heading-base:2.5rem; + --linespread:1.3; + --margin-big:1rem; + --margin-small:0.5rem; + --base-font-size:1.125rem; + --page-margin:15px; + --max-page-width:55rem; + --margin-width:calc((100vw - var(--max-page-width)) / 2) +} +@media (max-width:55rem) { + :root { + --margin-width:var(--page-margin) + } +} +:root { + --color-background:var(--color-light); + --color-text:var(--color-dark); + --color-link:var(--color-blue); + --color-link-followed:var(--color-purple); + --color-faded:var(--color-dark-faded); + --color-semi:var(--color-dark-semi) +} +@media (prefers-color-scheme:dark) { + :root { + --color-background:var(--color-dark); + --color-text:var(--color-light); + --color-link:var(--color-light-blue); + --color-link-followed:var(--color-light-purple); + --color-faded:var(--color-light-faded); + --color-semi:var(--color-light-semi) + } + img.dark, + svg { + filter:invert(1) hue-rotate(180deg) saturate(140%)!important + } +} +*, +::after, +::before { + box-sizing:border-box; + text-rendering:optimizeLegibility +} +[hidden] { + display:none!important +} +[hidden][aria-hidden=false] { + position:absolute; + display:initial!important; + clip:rect(0,0,0,0); + clip-path:inset(100%) +} html { - font-family: sans-serif; - max-width: 50em; - margin: 0 auto; - line-height: 1.2; - border-color: black; - color: black; - background-color: white; + color:var(--color-text); + background-color:var(--color-background) } - -hr { - background-color: black; - border-width: 0; - height: 1px; +a:link, +a:visited { + color:var(--color-link); + text-decoration:none +} +a:visited { + color:var(--color-link-followed) +} +a:hover, +code .token.url { + text-decoration:underline } - body { - margin: 0.7em; + display:grid; + justify-items:center; + margin:var(--page-margin); + font-size:var(--base-font-size); + font-family:"Segoe UI",ui-sans-serif,system-ui,sans-serif; + line-height:var(--linespread); + hyphens:auto; + font-variant-ligatures:common-ligatures contextual; + font-kerning:normal } - -.copyright { - color: #002855; - background-color: #E7F4F8; - border: solid 1px #002855; - padding: 2px; +body * { + min-width:0 +} +:focus-visible { + border-radius:4px; + outline:2px solid var(--color-text); + outline-offset:2px +} +::selection { + background-color:var(--color-faded) +} +:root, +pre { + scrollbar-width:thin; + scrollbar-color:var(--color-faded) var(--color-background) +} +:is(:root, +pre)::-webkit-scrollbar { + width:8px; + height:8px +} +:is(:root, +pre)::-webkit-scrollbar-track { + background:var(--color-background) +} +:is(:root, +pre)::-webkit-scrollbar-thumb { + background-color:var(--color-faded) +} +h1 { + text-align:center; + margin-bottom:0; + margin-top:1rem; + font-size:max(var(--heading-base),var(--base-font-size)); + padding-bottom:.1em; + border-bottom:1px solid var(--color-faded) +} +h2 { + font-size:max(calc(var(--heading-base)*var(--heading-ratio)),var(--base-font-size)) +} +h2, +h3, +h4, +h5 { + margin-top:var(--margin-big); + margin-bottom:var(--margin-small) +} +h1, +h2, +h3 { + font-weight:700 +} +h3 { + font-size:max(calc(var(--heading-base)*var(--heading-ratio)*var(--heading-ratio)),var(--base-font-size)) +} +h4, +h5 { + font-weight:500 +} +h4 { + font-size:max(calc(var(--heading-base)*var(--heading-ratio)*var(--heading-ratio)*var(--heading-ratio)),var(--base-font-size)); + font-style:italic +} +h5 { + font-size:calc(var(--base-font-size)*.9); + color:var(--color-semi) +} +:is(h1, +h2, +h3, +h4, +h5)+* { + margin-top:0 +} +p { + margin-top:var(--margin-small); + margin-bottom:var(--margin-small); + position:relative +} +code { + font-family:ui-monospace,Consolas,Inconsolata,"Roboto Mono","Fira Mono",monospace; + overflow-wrap:anywhere; + hyphens:none +} +article, +body nav, +footer, +header, +section { + display:block; + width:100%; + max-width:var(--max-page-width) +} +code.block { + display:block; + max-width:100% +} +footer { + margin-top:1em; + padding-top:0; + border-top:1px solid var(--color-faded) +} +footer ul { + display:flex; + flex-wrap:wrap; + justify-content:flex-end; + margin:0; + padding:0 +} +footer ul li { + display:inline; + list-style-type:none +} +footer ul li:first-of-type { + margin-right:auto +} +footer li:not(:last-child):not(:first-child)::after { + content:" • " +} +abbr { + text-decoration:none; + font-variant-caps:all-small-caps; + font-variant-numeric:oldstyle-nums; + font-size:1.075em +} +svg { + width:100%; + height:fit-content; + max-height:90vh; + padding:1rem; + background-color:hsla(0,0%,100%,0%); + filter:invert(0) hue-rotate(0deg) saturate(120%); + transition:all 250ms ease-out +} +img.dark:hover, +svg:hover { + background-color:hsla(0,0%,100%,100%); + filter:invert(0) hue-rotate(0deg) saturate(100%)!important; + transition:all 250ms ease-in +} +pre { + max-width:calc(100vw - var(--page-margin)*2); + overflow-x:auto; + hyphens:none; + margin:calc(2*var(--margin-small))0 +} +pre.scroll { + overflow-y:auto; + max-height:90vh +} +th { + text-align:right; + font-weight:400 +} +thead th { + font-weight:700 +} +td, +th { + padding:0 1ch +} +dd { + margin-bottom:var(--margin-small) +} +/* +li { + margin-bottom:var(--margin-small) +} +*/ +figure { + display:flex; + align-items:center; + justify-content:center; + flex-direction:column +} +figcaption, +nav ul ul ul li { + font-style:italic +} +@media (min-width:70em) { + span.sidenote { + float:left; + font-size:80%; + text-align:right; + position:absolute; + --sidenote-width:calc(var(--margin-width) - 1rem - var(--page-margin)); + width:var(--sidenote-width); + left:calc(-1*var(--sidenote-width) - 1rem); + top:0 + } +} +@media (max-width:70em) { + span.sidenote { + display:block; + font-size:80%; + margin-top:1em; + margin-left:3em + } +} +nav li { + list-style:none +} +nav>ul, +ul.inline { + padding-left:0 +} +nav ul ul ul li, +ul.inline>li { + display:inline; + list-style-type:none +} +@media (min-width:55rem) { + nav ul ul ul li, + ul.inline>li { + white-space:nowrap + } +} +:is(nav ul ul ul li, +ul.inline>li):not(:first-child)::before { + content:" • " +} +dd>p { + margin-top:0 +} +dl.bold>dt, +summary { + font-weight:500 +} +header p { + font-style:italic; + position:absolute; + right:var(--margin-width) +} +summary { + list-style-position:outside } -a.link {color: #0000A0;} -a.visited {color: #A000A0;} -a.active {color: #00A000;} -#nav {list-style-type: none; padding: 0; margin: 0;} -#nav li {display: inline; margin-right: 1em;} -iframe { - border: 1px solid; +slot:not([name]) { + display: none; } - -table { - border: 1px solid; - border-collapse: collapse; +:host([open]) slot:not([name]) { + display: revert; } -table td { - border: 1px solid; - text-align: left; - padding: 0px 3.5px; - height: 1.25rem; +summary { + display: list-item; + counter-increment: list-item 0; + list-style: disclosure-closed inside; +} +:host([open]) summary { + list-style-type: disclosure-open; } + |