mHEADmain

1 files changed, 205 insertions, 24 deletions

diff --git a/src/content/style.css b/src/content/style.css
index dbd7967..6fad5bf 100644
--- a/src/content/style.css
+++ b/src/content/style.css
@@ -1,41 +1,90 @@
 :root {
-  --color-fg: black;
-  --color-bg: white;
-  --color-2nd-fg: #555555;
-  --color-2nd-bg: #f5f5f5;
-  --color-pre-border: hsla(0, 100%, 0%, 30%);
+  --color-fg: #171D1A;
+  --color-bg: #F3F5F3;
+  --color-2nd-fg: #4A5651;
+  --color-2nd-bg: #E9EDEA;
+  --color-3rd-fg: #6F7B76;
+  --color-line: #CBD3CE;
+  --color-line-soft: #DDE3DF;
+  --color-accent: #1F6F5B;
+  --color-accent-soft: #D8E9E2;
+  --color-ochre: #9A6B1F;
+  --color-code-bg: #E6EBE8;
+  --color-pre-border: #CBD3CE;
 
   --link-url: url(img/link/light.svg);
 
+  /* The generic families and nothing else: a named face is a
+     dependency that is either installed or silently is not, and
+     the ones worth naming here are Windows and macOS fonts that
+     are absent on the systems this site is built for.  The reader
+     has already chosen these three; the hierarchy is in which of
+     them is used where, not in which face answers. */
+  --font-body: sans-serif;
+  --font-display: serif;
+  --font-mono: monospace;
+
   color:            var(--color-fg);
   background-color: var(--color-bg);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --color-fg: white;
-    --color-bg: black;
-    --color-2nd-fg: #aaaaaa;
-    --color-2nd-bg: #222222;
-    --color-pre-border: hsla(50, 100%, 70%, 10%);
+    --color-fg: #E4EAE7;
+    --color-bg: #121716;
+    --color-2nd-fg: #A7B3AE;
+    --color-2nd-bg: #19201E;
+    --color-3rd-fg: #7E8A85;
+    --color-line: #2C3733;
+    --color-line-soft: #222B28;
+    --color-accent: #5CC2A2;
+    --color-accent-soft: #1B3A31;
+    --color-ochre: #D9A85A;
+    --color-code-bg: #1C2522;
+    --color-pre-border: #2C3733;
 
     --link-url: url(img/link/dark.svg);
   }
+}
 
-  a {
-    color: hsl(211, 100%, 60%);
-    &:visited {
-      color: hsl(242, 100%, 80%);
-    }
-  }
+a {
+  color: var(--color-accent);
+}
+
+a:visited {
+  color: var(--color-accent);
 }
 
+
 /* General declarations */
 
 body {
   margin: 0px auto;
   padding: 1%;
-  max-width: 750px;
+  max-width: 68ch;
+  font-family: var(--font-body);
+  font-size: 17px;
+  line-height: 1.6;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-display);
+  font-weight: 500;
+  line-height: 1.2;
+  text-wrap: balance;
+}
+
+h1 { font-size: 39px; }
+h2 { font-size: 31px; }
+h3 { font-size: 25px; }
+h4, h5, h6 { font-size: 20px; }
+
+code, pre, .mono {
+  font-family: var(--font-mono);
+}
+
+code {
+  background-color: var(--color-code-bg);
 }
 
 .icon {
@@ -52,28 +101,106 @@ header {
   padding: 12px 0px 12px 0px;
 }
 
-nav .nav-row {
+/* The home link is the logo.  It shares the row with the rest of
+   the navigation rather than sitting on a line above it, so the
+   nav and its list are both rows and everything centres on the
+   same line. */
+nav, nav ol {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
   flex-wrap: wrap;
+  align-items: center;
 }
 
+nav ol {
+  list-style: none;
+  margin: 0px;
+  padding: 0px;
+}
+
+
 nav a {
   font-size: 18px;
   margin: 12px;
   text-decoration: none;
 }
 
-nav ul, nav li {
-  display: inline;
+/* Twice the logo's own 16-unit grid, so every square it is drawn
+   from lands on whole pixels. */
+nav a img {
+  width: 32px;
+  height: 32px;
+}
+
+/* The languages are a second tier of navigation, not more of the
+   first: smaller, and away to the end of the row.  The one being
+   read is not a link, so it is dimmed to say so. */
+nav ol.languages {
+  margin-left: auto;
 }
 
-nav ul li a {
+nav ol.languages a, nav ol.languages li {
+  font-family: var(--font-mono);
   font-size: 14px;
   margin: 6px;
 }
 
+/* The language being read is the one worth seeing, so it is the
+   only one at full strength.  Whether one of the others has been
+   followed before says nothing about where it goes, so visited
+   and unvisited look alike. */
+nav ol.languages li {
+  color: var(--color-fg);
+}
+
+nav ol.languages a,
+nav ol.languages a:visited {
+  color: var(--color-2nd-fg);
+}
+
+nav ol.languages a:hover {
+  color: var(--color-fg);
+}
+
+
+/* A collection's name on the front page heads the list under it
+   rather than inviting a click, so it is set as a heading and only
+   says it is a link when pointed at. */
+h2.collection a {
+  color: var(--color-fg);
+  text-decoration: none;
+}
+
+h2.collection a:hover {
+  text-decoration: underline;
+}
+
+
+/* What the site says about itself, under the navigation on every
+   page --- the header's counterpart to the licence line at the
+   foot of it. */
+#tagline {
+  margin: 0px 12px 6px 12px;
+  font-size: 14px;
+  color: var(--color-2nd-fg);
+}
+
+
+/* A published recording */
+
+#media video, #media audio {
+  width: 100%;
+  max-width: 100%;
+}
+
+/* Both ways down are filenames, which want the same face as any
+   other filename does. */
+#media-links {
+  font-family: var(--font-mono);
+  font-size: 14px;
+  color: var(--color-2nd-fg);
+}
+
 
 /* Article bodies */
 
@@ -138,7 +265,7 @@ pre.lineno {
   border: 1px solid;
   border-color: var(--color-pre-border);
   border-radius: 10px;
-  background-color: var(--color-2nd-bg);
+  background-color: var(--color-code-bg);
 }
 
 pre {
@@ -192,7 +319,7 @@ div.header-anchor:hover img {
 .plaintext {
   margin: auto auto 0 auto;
   text-align: right;
-  font-family: monospace;
+  font-family: var(--font-mono);
 }
 
 a.anchor {
@@ -212,3 +339,57 @@ h2:hover a.anchor {
 .line-through {
   text-decoration: line-through;
 }
+
+
+/* Messages from the mailing list, rendered on the page they
+   answer.  They take the secondary background so a thread reads as
+   something quoted onto the page rather than as more of the page,
+   which is the one thing the archive's own rendering makes obvious
+   at a glance. */
+#comments .message {
+  background-color: var(--color-2nd-bg);
+  border: 1px solid;
+  border-color: var(--color-pre-border);
+  border-radius: 10px;
+  padding: 0.5rem 1rem;
+  margin-bottom: 1rem;
+}
+
+/* A reply sits under what it answers.  The depth is capped because
+   a long exchange nests further than a narrow screen has room for,
+   and past a few levels the indentation stops telling you anything
+   the order does not. */
+#comments .message[data-depth="1"] { margin-left: 1rem; }
+#comments .message[data-depth="2"] { margin-left: 2rem; }
+#comments .message[data-depth="3"] { margin-left: 3rem; }
+#comments .message[data-depth="4"] { margin-left: 4rem; }
+#comments .message:not([data-depth="0"]):not([data-depth="1"]):not([data-depth="2"]):not([data-depth="3"]):not([data-depth="4"]) {
+  margin-left: 5rem;
+}
+
+#comments .message-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0 1rem;
+  font-size: 0.9em;
+}
+
+#comments .from {
+  font-weight: bold;
+}
+
+#comments .date, #comments .reply {
+  color: var(--color-2nd-fg);
+}
+
+#comments .message-body {
+  background-color: transparent;
+  border: none;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 40rem) {
+  #comments .message[data-depth] { margin-left: 0; }
+}