From 3f827564b44e72a0d8be98947121ebcc9754c488 Mon Sep 17 00:00:00 2001 From: rhiannon morris Date: Sun, 15 Sep 2024 17:50:10 +0200 Subject: [PATCH] new theme --- style/counters.css | 36 ++++-- style/page.css | 260 +++++++++++++++++++++++++++----------------- templates/foot.html | 8 +- templates/head.html | 3 - templates/post.html | 9 +- 5 files changed, 198 insertions(+), 118 deletions(-) diff --git a/style/counters.css b/style/counters.css index 5e8d356..6821348 100644 --- a/style/counters.css +++ b/style/counters.css @@ -1,5 +1,19 @@ -:root { - --section-prefix: ''; +@counter-style circled { + system: fixed; + symbols: "\2460" "\2461" "\2462" "\2463" "\2464" "\2465" "\2466" "\2467" + "\2468" "\2469" "\246A" "\246B" "\246C" "\246D" "\246E" "\246F" + "\2470" "\2471" "\2472" "\2473"; + speak-as: numbers; + suffix: " "; +} + +@counter-style inv-circled { + system: fixed; + symbols: "\278A" "\278B" "\278C" "\278D" "\278E" "\278F" "\2790" "\2791" + "\2792" "\2793" "\24EB" "\24EC" "\24ED" "\24EE" "\24EF" "\24F0" + "\24F1" "\24F2" "\24F3" "\24F4"; + speak-as: numbers; + suffix: " "; } main :is(h1, h2, h3, h4, h5, h6):not(.unnumbered)::before { @@ -9,40 +23,46 @@ main :is(h1, h2, h3, h4, h5, h6):not(.unnumbered)::before { main h1:not(.unnumbered) { counter-increment: h1; } main h1 { counter-reset: h2 h3 h4 h5 h6; } main h1:not(.unnumbered)::before { - content: var(--section-prefix) counter(h1); + content: counter(h1, inv-circled); } +main h1.unnumbered::before { + content: "\2B8A "; +} + +/* main h2:not(.unnumbered) { counter-increment: h2; } main h2:not(.unnumbered)::before { - content: var(--section-prefix) counter(h1) '.' counter(h2); + content: counter(h1) '.' counter(h2); } main h2 { counter-reset: h3 h4 h5 h6; } main h3:not(.unnumbered) { counter-increment: h3; } main h3 { counter-reset: h4 h5 h6; } main h3:not(.unnumbered)::before { - content: var(--section-prefix) counter(h1) '.' counter(h2) '.' counter(h3); + content: counter(h1) '.' counter(h2) '.' counter(h3); } main h4:not(.unnumbered) { counter-increment: h4; } main h4 { counter-reset: h5 h6; } main h4:not(.unnumbered)::before { - content: var(--section-prefix) + content: counter(h1) '.' counter(h2) '.' counter(h3) '.' counter(h4); } main h5:not(.unnumbered) { counter-increment: h5; } main h5 { counter-reset: h6; } main h5:not(.unnumbered)::before { - content: var(--section-prefix) + content: counter(h1) '.' counter(h2) '.' counter(h3) '.' counter(h4) '.' counter(h5); } main h6:not(.unnumbered) { counter-increment: h6; } main h6:not(.unnumbered)::before { - content: var(--section-prefix) + content: counter(h1) '.' counter(h2) '.' counter(h3) '.' counter(h4) '.' counter(h5) '.' counter(h6); } +*/ diff --git a/style/page.css b/style/page.css index 273113e..f71857f 100644 --- a/style/page.css +++ b/style/page.css @@ -1,93 +1,108 @@ +@import url(counters.css); @import url(fonts/schola/schola.css); @import url(fonts/muller/muller.css); @import url(fonts/junius/junius.css); @import url(fonts/pragmatapro/pragmatapro.css); :root { - --root-col: hsl(30deg, 5%, 26%); - --fg-col: hsl(336deg, 17%, 11%); - --bg-col: hsl(40deg, 91%, 98%); - --link-col: hsl(355deg, 52%, 48%); - --ipa-font: JuniusX; + + --light: #feb; + --dark: #325; + --mid: #83869e; + --red1: #f42; + --red2: #d16; + + --fg: var(--dark); + --bg: var(--light); + --accent: var(--red1); + --other-accent: var(--red2); } :root { - background: var(--root-col); + background: var(--bg); + color: var(--fg); - font-family: schola; - font-size: 16pt; - - height: 100vh; + font-family: PragmataPro; + font-size: 13pt; } -body { - background: url(paper.png), var(--bg-col); - background-blend-mode: multiply; - color: var(--fg-col); - box-shadow: 0 0 5em var(--fg-col); +@media (prefers-color-scheme: dark) { + :root { + --fg: var(--light); + --bg: var(--dark); + --accent: var(--red2); + --other-accent: var(--red1); + } +} + +:root, body { margin: 0; padding: 0; } + +main { + border-bottom: 2px dotted var(--fg); max-width: 50em; min-height: 100%; - margin: 0 auto; - padding: 1em 2em 3em; + margin: 1em auto 0; + padding: 0.5em 2em; + + line-height: 150%; box-sizing: border-box; } header { text-align: center; + text-wrap: balance; + background: var(--fg); + color: var(--bg); + --accent: var(--other-accent); + padding: 1em; } header h1 { font-size: 250%; - font-weight: 200; - margin-top: 0; -} - -h1, h2, h3, h4, h5, h6 { - margin: 1em 0 0.25em; - font-family: Muller; - clear: both; + margin: 0; } +/* h1, h2, h3, h4, h5, h6 { */ h1 { - font-size: 150%; - font-weight: 300; -} + margin: 1em 0 0.25em; -h2 { - font-size: 140%; - font-weight: 300; -} + font-weight: normal; + font-variant-east-asian: full-width; + -moz-font-feature-settings: "fwid"; + -webkit-font-feature-settings: "fwid"; + font-feature-settings: "fwid"; -h3 { - font-size: 130%; - font-weight: 300; -} + clear: both; -h4 { - font-size: 120%; - font-weight: 300; -} - -h5 { - font-size: 110%; - font-weight: 400; -} - -h6 { font-size: 100%; - font-weight: 600; } -header h1 { - margin-bottom: 0.5rem; +h1 { font-size: 125%; } +h2 { font-size: 125%; } +h3 { font-size: 120%; } +h4 { font-size: 110%; } +h5 { font-size: 100%; } +h6 { font-size: 100%; } + +main h1 { + background: var(--fg); + color: var(--bg); + padding: 0.25rem 0.75rem; + margin-bottom: 1rem; +} + +main :is(h2, h3, h4, h5, h6) { + padding: 0.25rem 0.75rem; + border-bottom: 2px dotted var(--fg); + margin-bottom: 1rem; } hr { - border: 1px solid var(--root-col); - width: 80%; + border: none; + border-bottom: 2px dotted var(--fg); height: 0; } @@ -96,21 +111,21 @@ pre + hr { } .meta { + margin-top: 1rem; display: flex; - column-gap: 1em; + column-gap: 2em; align-items: baseline; justify-content: center; } header .date { - font-size: 80%; - font-weight: 400; - font-style: italic; - margin-top: 0; -} + font-variant-east-asian: normal; + -moz-font-feature-settings: normal; + -webkit-font-feature-settings: normal; + font-feature-settings: normal; + font-size: 100%; -.tags { - font-size: 80%; + margin: 0; } .tags ul { @@ -155,8 +170,10 @@ header .date { a { - color: var(--link-col); + color: inherit; + text-decoration: 2px dotted underline var(--accent); } +a:hover { color: var(--accent); } b, strong { font-weight: 600; @@ -167,15 +184,15 @@ dfn { font-weight: 500; } -ul li { - list-style: '— '; -} +ul li { list-style: '❀ '; } +.post-list li { list-style: '✒ '; } +.tag-list li { list-style: ' '; } /* a tag in pragmatapro */ table { margin: auto; border-spacing: 0; - border-top: 2px solid var(--root-col); - border-bottom: 2px solid var(--root-col); + border-top: 2px solid var(--fg); + border-bottom: 2px solid var(--fg); } th { @@ -183,7 +200,7 @@ th { } thead th { - border-bottom: 1px solid var(--root-col); + border-bottom: 1px solid var(--fg); } td, th { @@ -193,7 +210,7 @@ td, th { code { font-family: PragmataPro; - font-size: 90%; + font-size: inherit; } pre { @@ -201,13 +218,13 @@ pre { width: min-content; margin: 0.5em auto; padding: 0.5em 0.8em; - border: 1px solid var(--root-col); + border: 1px solid var(--fg); background: hsla(0deg, 0%, 100%, 40%); } .ipa, .lang, .ebnf-t { - font-family: var(--ipa-font); + /* font-family: var(--ipa-font); */ font-feature-settings: "ccmp", "calt", "liga", "loca", "mark", "mkmk", "ss01"; @@ -218,26 +235,30 @@ pre { text-underline-offset: 0.125em; } -.ipa { - font-weight: 500; +.lang, .ebnf-t { font-weight: 500; } + +.abbr-list dt { + font-family: PragmataPro; + font-weight: normal; } -.lang, .ebnf-t { - font-weight: 700; -} - -.gloss .abbr { - font-size: 70%; - font-weight: bold; +.gloss .abbr, .abbr-list dt { + font-variant: all-small-caps; } .scr { height: 1.5em; vertical-align: -40%; - padding-right: 0.5ex; + margin-right: 0.5ex; + padding: 2px; + background: var(--light); } -.gloss .scr { +.gloss-split, .gloss-gloss { + font-size: 80%; +} + +:is(.gloss, .bigscr) .scr { height: 2em; } @@ -294,22 +315,20 @@ blockquote { font-size: 125%; } -main nav { - text-align: center; - font-size: 125%; -} - -#toc > h2 { - font-size: 120%; - font-weight: 300; -} #toc > ul { columns: 2; margin-left: 2em; margin-right: 2em; + > li { list-style: circled; } } +figure img { + max-width: 100%; +} +figure img:not(.scr) { + border: 3px solid currentcolor; +} figure:not(.left) { text-align: center; } @@ -337,23 +356,31 @@ figure li { figcaption { font-size: 80%; font-style: italic; - margin: auto; + margin: 0 auto; } :not(.floating) > figcaption { width: 75%; } - -dt { font-weight: 500; float: left; clear: left; } -dd { margin-left: 4em; } +figcaption:first-child { margin-bottom: 0.5em; } +figcaption:last-child { margin-top: 0.5em; } dt { + font-weight: 500; + display: inline; break-after: avoid; } dd { + margin-left: 1em; + display: inline; break-before: avoid; } +dd::after { + content: ''; + display: block; +} + u u { text-decoration: double underline; } @@ -384,14 +411,30 @@ u u { footer { clear: both; - margin: 1.5em auto 1em; - padding-top: 0.5em; + margin: 1.5em auto 3em; font-size: 80%; font-weight: 500; text-align: center; } +footer ul::before { + margin: 0; + content: '➸ '; +} + +footer ul::after { + margin: 0; + content: ' 🐌︎'; +} + +footer li { + display: inline; + list-style: none; +} +footer li + li::before { content: ' · '; } + + .ebnf { border: none; } @@ -446,10 +489,10 @@ blockquote { aside { margin: 0.5em 3em; - padding-left: 1em; } aside:not(.no-line) { - border-left: 2px solid var(--root-col); + padding-left: 1em; + border-left: 2px solid var(--fg); } aside > details summary { @@ -538,15 +581,29 @@ aside.floating :last-child { margin-bottom: 0; } } */ +math[display=block] { + border: 2px dotted var(--fg); + + padding: 1em 3em; + margin: auto; + width: min-content; + +} +.rulebox math[display=block] { + border: none; + padding: 0; +} + .texdefs { display: none; } .rulebox { float: right; - border: 1px solid var(--root-col); + border: 1px solid var(--fg); background: #ffffff66; padding: .4em 1.2em; + margin-left: 3em; } /* the last thing in the :is is for priority fuckery */ @@ -562,3 +619,8 @@ mark { background: #fbc; padding: 0 0.35ch; } + +.light { + background: var(--light); + color: var(--dark); +} diff --git a/templates/foot.html b/templates/foot.html index 566fc81..2af6f48 100644 --- a/templates/foot.html +++ b/templates/foot.html @@ -1,8 +1,10 @@ $if(hide-footer)$$else$ $endif$ diff --git a/templates/head.html b/templates/head.html index 0622dab..0f587d5 100644 --- a/templates/head.html +++ b/templates/head.html @@ -3,9 +3,6 @@ -$if(show-toc)$ - -$endif$ $for(css)$ $endfor$ diff --git a/templates/post.html b/templates/post.html index e525826..ef4a570 100644 --- a/templates/post.html +++ b/templates/post.html @@ -6,7 +6,7 @@ $head()$ $endif$
$if(date)$ -

$date$

+ $date$ $endif$ $if(tags)$ $endif$
-
- +
$if(show-toc)$ +
$endif$ -
$body$