rhi/blog
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

new theme

Browse source
This commit is contained in:
rhiannon morris 2024-09-15 17:50:10 +02:00
parent f5ac91e29c
commit 3f827564b4
5 changed files with 198 additions and 118 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
style/counters.css
View file

@ -1,5 +1,19 @@
:root { @counter-style circled {
--section-prefix: ''; 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 { 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:not(.unnumbered) { counter-increment: h1; }
main h1 { counter-reset: h2 h3 h4 h5 h6; } main h1 { counter-reset: h2 h3 h4 h5 h6; }
main h1:not(.unnumbered)::before { 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) { counter-increment: h2; }
main h2:not(.unnumbered)::before { 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 h2 { counter-reset: h3 h4 h5 h6; }
main h3:not(.unnumbered) { counter-increment: h3; } main h3:not(.unnumbered) { counter-increment: h3; }
main h3 { counter-reset: h4 h5 h6; } main h3 { counter-reset: h4 h5 h6; }
main h3:not(.unnumbered)::before { 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:not(.unnumbered) { counter-increment: h4; }
main h4 { counter-reset: h5 h6; } main h4 { counter-reset: h5 h6; }
main h4:not(.unnumbered)::before { main h4:not(.unnumbered)::before {
content: var(--section-prefix) content:
counter(h1) '.' counter(h2) '.' counter(h3) '.' counter(h4); counter(h1) '.' counter(h2) '.' counter(h3) '.' counter(h4);
} }
main h5:not(.unnumbered) { counter-increment: h5; } main h5:not(.unnumbered) { counter-increment: h5; }
main h5 { counter-reset: h6; } main h5 { counter-reset: h6; }
main h5:not(.unnumbered)::before { main h5:not(.unnumbered)::before {
content: var(--section-prefix) content:
counter(h1) '.' counter(h2) '.' counter(h3) '.' counter(h4) '.' counter(h1) '.' counter(h2) '.' counter(h3) '.' counter(h4) '.'
counter(h5); counter(h5);
} }
main h6:not(.unnumbered) { counter-increment: h6; } main h6:not(.unnumbered) { counter-increment: h6; }
main h6:not(.unnumbered)::before { main h6:not(.unnumbered)::before {
content: var(--section-prefix) content:
counter(h1) '.' counter(h2) '.' counter(h3) '.' counter(h4) '.' counter(h1) '.' counter(h2) '.' counter(h3) '.' counter(h4) '.'
counter(h5) '.' counter(h6); counter(h5) '.' counter(h6);
} }
*/

260
style/page.css
View file

@ -1,93 +1,108 @@
@import url(counters.css);
@import url(fonts/schola/schola.css); @import url(fonts/schola/schola.css);
@import url(fonts/muller/muller.css); @import url(fonts/muller/muller.css);
@import url(fonts/junius/junius.css); @import url(fonts/junius/junius.css);
@import url(fonts/pragmatapro/pragmatapro.css); @import url(fonts/pragmatapro/pragmatapro.css);
:root { :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; --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 { :root {
background: var(--root-col); background: var(--bg);
color: var(--fg);
font-family: schola; font-family: PragmataPro;
font-size: 16pt; font-size: 13pt;
height: 100vh;
} }
body { @media (prefers-color-scheme: dark) {
background: url(paper.png), var(--bg-col); :root {
background-blend-mode: multiply; --fg: var(--light);
color: var(--fg-col); --bg: var(--dark);
box-shadow: 0 0 5em var(--fg-col); --accent: var(--red2);
--other-accent: var(--red1);
}
}
:root, body { margin: 0; padding: 0; }
main {
border-bottom: 2px dotted var(--fg);
max-width: 50em; max-width: 50em;
min-height: 100%; min-height: 100%;
margin: 0 auto; margin: 1em auto 0;
padding: 1em 2em 3em; padding: 0.5em 2em;
line-height: 150%;
box-sizing: border-box; box-sizing: border-box;
} }
header { header {
text-align: center; text-align: center;
text-wrap: balance;
background: var(--fg);
color: var(--bg);
--accent: var(--other-accent);
padding: 1em;
} }
header h1 { header h1 {
font-size: 250%; font-size: 250%;
font-weight: 200; margin: 0;
margin-top: 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 1em 0 0.25em;
font-family: Muller;
clear: both;
} }
/* h1, h2, h3, h4, h5, h6 { */
h1 { h1 {
font-size: 150%; margin: 1em 0 0.25em;
font-weight: 300;
}
h2 { font-weight: normal;
font-size: 140%; font-variant-east-asian: full-width;
font-weight: 300; -moz-font-feature-settings: "fwid";
} -webkit-font-feature-settings: "fwid";
font-feature-settings: "fwid";
h3 { clear: both;
font-size: 130%;
font-weight: 300;
}
h4 {
font-size: 120%;
font-weight: 300;
}
h5 {
font-size: 110%;
font-weight: 400;
}
h6 {
font-size: 100%; font-size: 100%;
font-weight: 600;
} }
header h1 { h1 { font-size: 125%; }
margin-bottom: 0.5rem; 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 { hr {
border: 1px solid var(--root-col); border: none;
width: 80%; border-bottom: 2px dotted var(--fg);
height: 0; height: 0;
} }
@ -96,21 +111,21 @@ pre + hr {
} }
.meta { .meta {
margin-top: 1rem;
display: flex; display: flex;
column-gap: 1em; column-gap: 2em;
align-items: baseline; align-items: baseline;
justify-content: center; justify-content: center;
} }
header .date { header .date {
font-size: 80%; font-variant-east-asian: normal;
font-weight: 400; -moz-font-feature-settings: normal;
font-style: italic; -webkit-font-feature-settings: normal;
margin-top: 0; font-feature-settings: normal;
} font-size: 100%;
.tags { margin: 0;
font-size: 80%;
} }
.tags ul { .tags ul {
@ -155,8 +170,10 @@ header .date {
a { a {
color: var(--link-col); color: inherit;
text-decoration: 2px dotted underline var(--accent);
} }
a:hover { color: var(--accent); }
b, strong { b, strong {
font-weight: 600; font-weight: 600;
@ -167,15 +184,15 @@ dfn {
font-weight: 500; font-weight: 500;
} }
ul li { ul li { list-style: '❀ '; }
list-style: '— '; .post-list li { list-style: '✒ '; }
} .tag-list li { list-style: ' '; } /* a tag in pragmatapro */
table { table {
margin: auto; margin: auto;
border-spacing: 0; border-spacing: 0;
border-top: 2px solid var(--root-col); border-top: 2px solid var(--fg);
border-bottom: 2px solid var(--root-col); border-bottom: 2px solid var(--fg);
} }
th { th {
@ -183,7 +200,7 @@ th {
} }
thead th { thead th {
border-bottom: 1px solid var(--root-col); border-bottom: 1px solid var(--fg);
} }
td, th { td, th {
@ -193,7 +210,7 @@ td, th {
code { code {
font-family: PragmataPro; font-family: PragmataPro;
font-size: 90%; font-size: inherit;
} }
pre { pre {
@ -201,13 +218,13 @@ pre {
width: min-content; width: min-content;
margin: 0.5em auto; margin: 0.5em auto;
padding: 0.5em 0.8em; padding: 0.5em 0.8em;
border: 1px solid var(--root-col); border: 1px solid var(--fg);
background: hsla(0deg, 0%, 100%, 40%); background: hsla(0deg, 0%, 100%, 40%);
} }
.ipa, .lang, .ebnf-t { .ipa, .lang, .ebnf-t {
font-family: var(--ipa-font); /* font-family: var(--ipa-font); */
font-feature-settings: font-feature-settings:
"ccmp", "calt", "liga", "loca", "mark", "mkmk", "ss01"; "ccmp", "calt", "liga", "loca", "mark", "mkmk", "ss01";
@ -218,26 +235,30 @@ pre {
text-underline-offset: 0.125em; text-underline-offset: 0.125em;
} }
.ipa { .lang, .ebnf-t { font-weight: 500; }
font-weight: 500;
.abbr-list dt {
font-family: PragmataPro;
font-weight: normal;
} }
.lang, .ebnf-t { .gloss .abbr, .abbr-list dt {
font-weight: 700; font-variant: all-small-caps;
}
.gloss .abbr {
font-size: 70%;
font-weight: bold;
} }
.scr { .scr {
height: 1.5em; height: 1.5em;
vertical-align: -40%; 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; height: 2em;
} }
@ -294,22 +315,20 @@ blockquote {
font-size: 125%; font-size: 125%;
} }
main nav {
text-align: center;
font-size: 125%;
}
#toc > h2 {
font-size: 120%;
font-weight: 300;
}
#toc > ul { #toc > ul {
columns: 2; columns: 2;
margin-left: 2em; margin-left: 2em;
margin-right: 2em; margin-right: 2em;
> li { list-style: circled; }
} }
figure img {
max-width: 100%;
}
figure img:not(.scr) {
border: 3px solid currentcolor;
}
figure:not(.left) { figure:not(.left) {
text-align: center; text-align: center;
} }
@ -337,23 +356,31 @@ figure li {
figcaption { figcaption {
font-size: 80%; font-size: 80%;
font-style: italic; font-style: italic;
margin: auto; margin: 0 auto;
} }
:not(.floating) > figcaption { :not(.floating) > figcaption {
width: 75%; width: 75%;
} }
figcaption:first-child { margin-bottom: 0.5em; }
dt { font-weight: 500; float: left; clear: left; } figcaption:last-child { margin-top: 0.5em; }
dd { margin-left: 4em; }
dt { dt {
font-weight: 500;
display: inline;
break-after: avoid; break-after: avoid;
} }
dd { dd {
margin-left: 1em;
display: inline;
break-before: avoid; break-before: avoid;
} }
dd::after {
content: '';
display: block;
}
u u { u u {
text-decoration: double underline; text-decoration: double underline;
} }
@ -384,14 +411,30 @@ u u {
footer { footer {
clear: both; clear: both;
margin: 1.5em auto 1em; margin: 1.5em auto 3em;
padding-top: 0.5em;
font-size: 80%; font-size: 80%;
font-weight: 500; font-weight: 500;
text-align: center; 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 { .ebnf {
border: none; border: none;
} }
@ -446,10 +489,10 @@ blockquote {
aside { aside {
margin: 0.5em 3em; margin: 0.5em 3em;
padding-left: 1em;
} }
aside:not(.no-line) { aside:not(.no-line) {
border-left: 2px solid var(--root-col); padding-left: 1em;
border-left: 2px solid var(--fg);
} }
aside > details summary { 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 { .texdefs {
display: none; display: none;
} }
.rulebox { .rulebox {
float: right; float: right;
border: 1px solid var(--root-col); border: 1px solid var(--fg);
background: #ffffff66; background: #ffffff66;
padding: .4em 1.2em; padding: .4em 1.2em;
margin-left: 3em;
} }
/* the last thing in the :is is for priority fuckery */ /* the last thing in the :is is for priority fuckery */
@ -562,3 +619,8 @@ mark {
background: #fbc; background: #fbc;
padding: 0 0.35ch; padding: 0 0.35ch;
} }
.light {
background: var(--light);
color: var(--dark);
}

8
templates/foot.html
View file

@ -1,8 +1,10 @@
$if(hide-footer)$$else$ $if(hide-footer)$$else$
<footer> <footer>
<hr> <ul>
<a href=/index.html>all posts</a> · <li><a href=/index.html>all posts</a>
<a href=/all-tags.html>all tags</a> <li><a href=/all-tags.html>all tags</a>
<li><a href=/rss.xml>rss</a>
</ul>
</footer> </footer>
$endif$ $endif$

3
templates/head.html
View file

@ -3,9 +3,6 @@
<meta charset=utf-8> <meta charset=utf-8>
<link rel=stylesheet href=/style/page.css> <link rel=stylesheet href=/style/page.css>
$if(show-toc)$
<link rel=stylesheet href=/style/counters.css>
$endif$
$for(css)$ $for(css)$
<link rel=stylesheet href=/style/$css$> <link rel=stylesheet href=/style/$css$>
$endfor$ $endfor$

9
templates/post.html
View file

@ -6,7 +6,7 @@ $head()$
$endif$ $endif$
<div class=meta> <div class=meta>
$if(date)$ $if(date)$
<h2 class=date>$date$</h2> <span class=date>$date$</span>
$endif$ $endif$
$if(tags)$ $if(tags)$
<nav class=tags> <nav class=tags>
@ -19,18 +19,17 @@ $head()$
</nav> </nav>
$endif$ $endif$
</div> </div>
<hr>
</header> </header>
<main>
$if(show-toc)$ $if(show-toc)$
<nav id=toc> <nav id=toc>
<h2>contents</h2> <h1 class=unnumbered>contents</h1>
$table-of-contents$ $table-of-contents$
</nav> </nav>
<hr>
$endif$ $endif$
<main>
$body$ $body$
</main> </main>