From 12af27c0b7364e04d1c9960bcdae03348d987a8a Mon Sep 17 00:00:00 2001
From: Rhiannon Morris <rhi@rhiannon.website>
Date: Wed, 4 Nov 2020 19:06:04 +0100
Subject: [PATCH] style stuff

---
 style/page.css | 108 +++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 104 insertions(+), 4 deletions(-)

diff --git a/style/page.css b/style/page.css
index abb250e..5a3d59a 100644
--- a/style/page.css
+++ b/style/page.css
@@ -5,7 +5,7 @@
 @import url(counters.css);
 
 :root {
-  --root-col: hsl(0deg, 2%, 19%);
+  --root-col: hsl(30deg, 5%, 26%);
   --fg-col:   hsl(336deg, 17%, 11%);
   --bg-col:   hsl(40deg, 91%, 98%);
   --link-col: hsl(355deg, 52%, 48%);
@@ -17,7 +17,7 @@
   background: var(--root-col);
 
   font-family: Muller;
-  font-size: 18pt;
+  font-size: 15pt;
 
   height: 100vh;
 }
@@ -26,8 +26,9 @@ body {
   background: url(paper.png), var(--bg-col);
   background-blend-mode: multiply;
   color: var(--fg-col);
+  box-shadow: 0 0 5em var(--fg-col);
 
-  max-width: 42em;
+  max-width: 50em;
   min-height: 100%;
   margin: 0 auto;
   padding: 1em 2em 3em;
@@ -35,7 +36,6 @@ body {
   box-sizing: border-box;
 }
 
-
 header {
   text-align: center;
 }
@@ -92,6 +92,33 @@ ul li {
   list-style: '— ';
 }
 
+table {
+  margin: auto;
+  border-spacing: 0;
+  border-top: 2px solid var(--root-col);
+  border-bottom: 2px solid var(--root-col);
+}
+
+th {
+  font-weight: 500;
+  border-bottom: 1px solid var(--root-col);
+}
+
+td, th {
+  padding: 0 0.5em;
+  vertical-align: text-bottom;
+}
+
+code {
+  font-family: PragmataPro;
+  font-size:   90%;
+}
+
+pre {
+  width: min-content;
+  margin: auto;
+}
+
 
 .ipa, .lang {
   font-family: var(--ipa-font);
@@ -100,3 +127,76 @@ ul li {
 .lang {
   font-weight: 500;
 }
+
+.abbr {
+  font-size: 70%;
+  font-weight: 500;
+}
+
+#toc > h2 {
+  font-size: 120%;
+  font-weight: 300;
+}
+#toc > ul {
+  columns: 2;
+  margin-left:  2em;
+  margin-right: 2em;
+}
+
+figure {
+  text-align: center;
+}
+figure table {
+  display: inline-table;
+  margin: 0.5em 0.5em;
+}
+.gloss {
+  border: none;
+  text-align: left;
+}
+.gloss-lang, .gloss-pron, .gloss-split {
+  font-family: var(--ipa-font);
+  line-height: 115%;
+}
+
+figure ul {
+  text-align: left;
+  margin-left: 5em;
+  margin-right: 5em;
+  columns: 2;
+}
+figure li {
+  break-inside: avoid;
+}
+
+dt { font-weight: 500; float: left; clear: left; }
+dd { margin-left: 4em; }
+
+dt {
+  break-after: avoid;
+}
+
+dd {
+  break-before: avoid;
+}
+
+.twocol {
+  columns: 2;
+}
+.threecol {
+  columns: 3;
+}
+.twocol :first-child, .threecol :first-child {
+  margin-top: 0;
+}
+
+footer {
+  border-top: 1px solid var(--root-col);
+  width: 80%;
+  margin: 2em auto 1em;
+  padding-top: 0.5em;
+
+  font-size: 80%;
+  font-weight: 500;
+  text-align: center;
+}