new theme
This commit is contained in:
parent
f5ac91e29c
commit
3f827564b4
5 changed files with 198 additions and 118 deletions
|
|
@ -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);
|
||||
}
|
||||
|
||||
*/
|
||||
|
|
|
|||
260
style/page.css
260
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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
$if(hide-footer)$$else$
|
||||
<footer>
|
||||
<hr>
|
||||
<a href=/index.html>all posts</a> ·
|
||||
<a href=/all-tags.html>all tags</a>
|
||||
<ul>
|
||||
<li><a href=/index.html>all posts</a>
|
||||
<li><a href=/all-tags.html>all tags</a>
|
||||
<li><a href=/rss.xml>rss</a>
|
||||
</ul>
|
||||
</footer>
|
||||
$endif$
|
||||
|
||||
|
|
|
|||
|
|
@ -3,9 +3,6 @@
|
|||
<meta charset=utf-8>
|
||||
|
||||
<link rel=stylesheet href=/style/page.css>
|
||||
$if(show-toc)$
|
||||
<link rel=stylesheet href=/style/counters.css>
|
||||
$endif$
|
||||
$for(css)$
|
||||
<link rel=stylesheet href=/style/$css$>
|
||||
$endfor$
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ $head()$
|
|||
$endif$
|
||||
<div class=meta>
|
||||
$if(date)$
|
||||
<h2 class=date>$date$</h2>
|
||||
<span class=date>$date$</span>
|
||||
$endif$
|
||||
$if(tags)$
|
||||
<nav class=tags>
|
||||
|
|
@ -19,18 +19,17 @@ $head()$
|
|||
</nav>
|
||||
$endif$
|
||||
</div>
|
||||
<hr>
|
||||
</header>
|
||||
|
||||
|
||||
<main>
|
||||
$if(show-toc)$
|
||||
<nav id=toc>
|
||||
<h2>contents</h2>
|
||||
<h1 class=unnumbered>contents</h1>
|
||||
$table-of-contents$
|
||||
</nav>
|
||||
<hr>
|
||||
|
||||
$endif$
|
||||
<main>
|
||||
$body$
|
||||
</main>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue