blog/style/page.css

@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 {
  --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(--bg);
  color: var(--fg);

  font-family: PragmataPro;
  font-size: 13pt;
}

@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: 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: 200%;
  margin: 0;
}

/* h1, h2, h3, h4, h5, h6 { */
h1 {
  margin: 1em 0 0.25em;

  font-weight: normal;
  font-variant-east-asian: full-width;
  -moz-font-feature-settings: "fwid";
  -webkit-font-feature-settings: "fwid";
  font-feature-settings: "fwid";

  clear: both;

  font-size: 100%;
}

h1 small {
  font-variant-east-asian: normal;
  -moz-font-feature-settings: normal;
  -webkit-font-feature-settings: normal;
  font-feature-settings: normal;
}


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: none;
  border-bottom: 2px dotted var(--fg);
  height: 0;
}

pre + hr {
  margin-top: 1.5em;
}

.meta {
  margin-top: 1rem;
  display: flex;
  column-gap: 2em;
  align-items: baseline;
  justify-content: center;
}

header .date {
  font-variant-east-asian: normal;
  -moz-font-feature-settings: normal;
  -webkit-font-feature-settings: normal;
  font-feature-settings: normal;
  font-size: 100%;

  margin: 0;
}

.tags ul {
  display: inline;
  padding: 0;
}

.tags li {
  list-style: none;
  display: inline;
}

.tags li + li {
  margin-left: 0.75ex;
}

.tag-list {
  columns: 2;
}

.post-list .date, .tag-list .count {
  font-size: 85%;
}

.post-list li + li {
  margin-top: 0.5em;
}

.post-desc {
  margin: 0;
  font-size: small;
  font-style: italic;
  line-height: 125%;
}

.post-desc p {
  margin: 0;
}
.post-desc p + p {
  margin-top: .5em;
}


a {
  color: inherit;
  text-decoration: 2px dotted underline var(--accent);
}
a:hover { color: var(--accent); }

b, strong {
  font-weight: 600;
}

dfn {
  font-style: normal;
  font-weight: 500;
}

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(--fg);
  border-bottom: 2px solid var(--fg);
}

th {
  font-weight: 500;
}

thead th {
  border-bottom: 1px solid var(--fg);
}

td, th {
  padding: 0 0.5em;
  vertical-align: text-bottom;
}


pre, code {
  font-family: PragmataPro;
  font-size:   inherit;
}

pre, :not(pre) > code {
  background:  hsla(0deg 0% 100% / 40%);
  border:      2px dotted color-mix(in srgb, currentcolor 75%, transparent);
}

@media (prefers-color-scheme: dark) {
  pre, :not(pre) > code { background: hsla(0deg 0% 00% / 30%); }
}

:not(pre) > code { padding: 0 5px; }

pre {
  clear:   both;
  width:   min-content;
  margin:  0.5em auto;
  padding: 0.5em 0.8em;
}


.ipa, .lang, .ebnf-t {
  /* font-family: var(--ipa-font); */

  font-feature-settings:
    "ccmp", "calt", "liga", "loca", "mark", "mkmk", "ss01";
  /* ss01 to use modern Þþð design, others to make juniusx go brrr
   * maybe i can just turn loca off but idk what other regional forms
   * it does that i actually want */

  text-underline-offset: 0.125em;
}

.lang, .ebnf-t { font-weight: 500; }

.abbr-list dt {
  font-family: PragmataPro;
  font-weight: normal;
}

.gloss .abbr, .abbr-list dt {
  font-variant: all-small-caps;
}

.scr {
  height: 1.5em;
  vertical-align: -40%;
  margin-right: 0.5ex;
  padding: 2px;
  background: var(--light);
}

.gloss-split, .gloss-gloss {
  font-size: 80%;
}

:is(.gloss, .bigscr) .scr {
  height: 2em;
}

:is(.splash, .example) .scr {
  height: unset;
  display: block;
  margin: auto;
}

.example {
  margin: auto;
}

.example .text {
  display: block;
  text-align: center;
  width: 80%;
  margin: 0.75em auto 0;
}

blockquote {
  font-style: italic;
}


.letter-list {
  margin: 1.25em auto 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 80%;
  row-gap: 0.5em;
  column-gap: 1.5em;
}

.letter-list + .letter-list {
  margin-top: 2.5em;
}

.letter-list .lang {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.letter-list .scr {
  height: 3em;
  margin-left: 0.5em;
}

.letter-list .text {
  font-size: 125%;
}


#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;
}
figure:not(.left) table {
  display: inline-table;
}
figure table {
  margin: 1em 0.5em;
}
.gloss {
  border: none;
  text-align: left;
}

figure ul {
  text-align: left;
  margin-left: 5em;
  margin-right: 5em;
  columns: 2;
}
figure li {
  break-inside: avoid;
}

figcaption {
  font-size: 80%;
  font-style: italic;
  margin: 0 auto;
}
:not(.floating) > figcaption {
  width: 75%;
}
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;
}

:is(.twocol, .threecol):not(:is(ul, ol) *) {
  margin-top: 1em;
}
.twocol {
  columns: 2;
}
.threecol {
  columns: 3;
}
.twocol :first-child, .threecol :first-child {
  margin-top: 0;
}

.twocol-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  margin: 1em 0;
}

.twocol-grid .gloss {
  margin-left: 0;
}

footer {
  clear: both;
  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;
}

.ebnf td {
  padding: 0 0.15em;
}

.ebnf-nt {
  font-weight: 500;
  color: hsl(155deg, 80%, 30%);
  white-space: nowrap;
}

.ebnf-punc {
  color: hsl(25deg, 40%, 30%);
}

.ebnf-sub, .ebnf-brack {
  color: hsl(210deg, 80%, 35%);
  font-weight: 500;
}

.ebnf-brack {
  padding: 0 0.05em;
}

.ebnf-s {
  font-style: italic;
  color: hsl(330deg, 80%, 30%);
}

blockquote {
  max-width: 70%;
  border-left: 1px solid black;
  padding-left: 1em;
  margin: auto;
}


.note, aside {
  font-size: 90%;
}

.note {
  font-style: italic;
}

:is(h1, h2) .note {
  font-size: 75%;
}

aside {
  margin: 0.5em 3em;
}
aside:not(.no-line) {
  padding-left: 1em;
  border-left: 2px solid var(--fg);
}

aside > details summary {
  font-weight: 600;
}

aside :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0.25em;
  font-weight: 600;
}
aside h1 { font-size: 115%; }
aside :is(h2, h3, h4, h5, h6) { font-size: 100%; }

:is(aside, figure).floating {
  max-width: 33%;
}
aside.floating {
  padding: 0.25em 0.75em;
  margin: 0.15em 1em 0;
}
figure.floating {
  margin: 0 0.5em;
}

aside.floating :first-child { margin-top: 0; }
aside.floating :last-child { margin-bottom: 0; }

.kw { color: hsl(300deg, 60%,  30%); }
.pp { color: hsl(343deg, 100%, 40%); /* font-weight: 500; */ }
.dt { color: hsl(173deg, 100%, 24%); /* font-weight: 500; */ }
.fu, .at { color: hsl(34deg,  100%, 30%); /* font-weight: 500; */ }
.va { color: hsl(203deg, 100%, 30%); /* font-weight: 500; */ }
.cf { color: hsl(276deg, 75%,  35%); /* font-weight: 500; */ }
.op { color: hsl(220deg, 40%,  33%); }
.co { color: hsl(221deg, 10%,  39%); /* font-style: italic; */ }
.bu { color: hsl(120deg, 85%,  25%); }
.st, .fl, .dv, .bn, .sc, .ss { color: hsl(143deg, 100%, 20%); }
.wa { color: hsl(350deg, 80%,  25%); text-decoration: wavy 1.5px underline; }
.al { color: hsl(350deg, 80%,  25%); }
.cn { color: hsl(343deg, 100%, 30%); }

@media (prefers-color-scheme: dark) {
  .kw { color: hsl(300deg, 60%,  80%); }
  .pp { color: hsl(343deg, 100%, 85%); /* font-weight: 500; */ }
  .dt { color: hsl(193deg, 60%, 74%); /* font-weight: 500; */ }
  .fu, .at { color: hsl(34deg,  100%, 70%); /* font-weight: 500; */ }
  .va { color: hsl(203deg, 100%, 75%); /* font-weight: 500; */ }
  .cf { color: hsl(276deg, 75%,  85%); /* font-weight: 500; */ }
  .op { color: hsl(220deg, 40%,  70%); }
  .co { color: hsl(221deg, 10%,  80%); /* font-style: italic; */ }
  .bu { color: hsl(120deg, 55%,  75%); }
  .st, .fl, .dv, .bn, .sc, .ss { color: hsl(143deg, 70%, 80%); }
  .wa { color: hsl(350deg, 80%,  77%); text-decoration: wavy 1.5px underline; }
  .al { color: hsl(350deg, 80%,  77%); }
  .cn { color: hsl(343deg, 80%, 70%); }
}

.floating {
  float: right;
  margin: 0.5em 1em 0.5em 2em;
}

.floating.left {
  float: left;
  margin: 0.5em 2em 0.5em 1em;
}

.shaped {
  /* maybe one day... */
  /* shape-outside: attr(src url); */
  shape-margin: 1em;
}

.shadow { filter: drop-shadow(5px 5px 8px #0006); }

.pixel {
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.emoji {
  height: 1em;
  width:  1em;
  vertical-align: -0.1em;
}


.citation {
  font-size: 90%;
}

#refs {
  margin-top: 0.75em;
}
.csl-entry {
  margin-left: 2em;
  text-indent: -2em;
}
/*
.csl-entry {
  display: grid;
  grid-template-columns: 4ch auto;
  grid-gap: 1ex;
}
.csl-left-margin {
  justify-self: end;
}
*/

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(--fg);
  background: #ffffff66;
  padding: .4em 1.2em;
  margin-left: 3em;
}

/* the last thing in the :is is for priority fuckery */
.rulebox :is(p, .math, mjx-container, #asd) {
  margin: 0;
  padding: 0;
}

.clear { clear: both; }

mark {
  mix-blend-mode: multiply;
  background: #fbc;
  padding: 0 0.35ch;
}

.light {
  background: var(--light);
  color: var(--dark);
}