From 53eefddc2ed38bc5167fe45ebf0c3461f52e1fff Mon Sep 17 00:00:00 2001
From: flupe <lucas@escot.me>
Date: Wed, 17 Mar 2021 23:32:59 +0100
Subject: [PATCH] first pass at dark theme

---
 content/assets/theme.css | 134 +++++++++++++++++++++------------------
 src/Posts.hs             |   6 +-
 2 files changed, 73 insertions(+), 67 deletions(-)

diff --git a/content/assets/theme.css b/content/assets/theme.css
index f326042..87f4d82 100644
--- a/content/assets/theme.css
+++ b/content/assets/theme.css
@@ -3,22 +3,40 @@
   --lighter: #fff;
   --light:   #fff;
   --mild:    #d8dee9;
-  --dark:    #4c566a;
+  /* --dark:    #4c566a; */
   --darker:  #434c5e;
   --black:   #3b4252;
   --blacker: #2e3440;
   --yellow:  #f8c325;
   --red:     #ee4242;
   --pink:    #de59a8;
+
+  --background: #eee;
+  --text-strong: #434c5e;
+  --text:       #4c566a;
+  --dark:       #d8dee9;
+  --darker:     #4c566a;
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #3b4252;
+    --dark:       #3b4252;
+    --darker:     #000;
+    --text-strong: #fff;
+    --text:        #d8dee9;
+    --text-faded:  #9ea6b5;
+  }
+}
+
+
 body {
-  font: 16px Inter, sans-serif, "é";
+  font: 16px "Inter UI", sans-serif;
   line-height: 1.54;
   margin: 0;
   height: 100vh;
-  color: var(--dark);
-  background: var(--light);
+  color: var(--text);
+  background: var(--background);
   display: flex;
   flex-direction: column;
   hyphens: auto;
@@ -26,6 +44,10 @@ body {
   counter-reset: section;
 }
 
+@media (prefers-color-scheme: dark) {
+  body {font-weight: 300}
+}
+
 main span.draft {
   display: inline-block;
   text-transform: uppercase;
@@ -37,19 +59,15 @@ main span.draft {
   vertical-align: middle;
 }
 
-h1, h2, h3 { color: var(--darker) }
+h1, h2, h3 { color: var(--darkr) }
 
-main > section {
-  counter-reset: subsection;
-}
-
-main :first-child {
-  margin-top: 0;
-}
+main > section { counter-reset: subsection }
+main :first-child { margin-top: 0 }
 
 main ::selection {
   background: var(--yellow);
   color: var(--black);
+  font-weight: 400;
 }
 
 a.footnote-ref sup::before { content: '[' }
@@ -70,26 +88,26 @@ a.footnote-ref sup::after  { content: ']' }
 }
 
 a {
-  color: var(--blacker);
+  color: inherit;
   font-weight: 500;
-  text-decoration: none
 }
+
 a:hover {text-decoration: underline}
+
 hr {
   border: none;
   height: 2px;
-  background: var(--mild);
+  background: var(--dark);
   margin: 2.5em 0;
 }
 
-#pidx { list-style: none }
+#pidx { list-style: none; padding: 0 }
 #pidx li {line-height: 1.6em}
 #pidx li > span {
-  font: 13px monospace;
+  font-family: monospace;
+  font-size: 14px;
   margin-right: 1em;
-  padding: .1em .5em;
-  border-radius: 3px;
-  background: #eaeaef;
+  opacity: 0.7;
 }
 
 details summary {
@@ -98,9 +116,14 @@ details summary {
   border-radius: 3px;
 }
 
-strong {color: var(--darker)}
+strong {
+  color: var(--text-strong);
+  font-weight: 500;
+}
 
-#hd {background: var(--dark) }
+#hd {
+  margin: 1em 0 0;
+}
 
 #hd > section {
   max-width: var(--width);
@@ -120,7 +143,6 @@ strong {color: var(--darker)}
 
 #hd nav a {
   margin: 0 0 0 1.2rem;
-  color: var(--light);
   text-decoration: none;
   text-transform: uppercase;
   font-weight: 500;
@@ -133,7 +155,12 @@ main, #ft, .breadcrumb {
   max-width: var(--width);
   box-sizing: border-box;
   width: 100%;
-  margin: 0 auto;
+  margin: 0em auto;
+}
+
+main {
+  padding: 0 1em;
+  margin: 2em auto;
 }
 
 p > span.display {
@@ -145,7 +172,6 @@ p > span.display {
 main {flex-grow: 1 }
 
 h1, h2, h3, h4 { font-weight: 500 }
-strong {font-weight:600}
 
 main header h1 {margin: 0}
 main header p {margin: 0}
@@ -154,34 +180,42 @@ main header {margin: 0 0 2em}
 main ul li { padding: 0 0 0 0 }
 main ul { padding: 0 0 0 1.5em }
 
+main ul.projects a { text-decoration: none }
+
 main ul.projects {
   padding: 0;
   margin: 2.5em 0 0;
   list-style: none;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  grid-gap: 1em;
+  grid-gap: 1.5em;
 }
 
 main ul.projects li {
-  background: #fafafb;
   border-radius: 5px;
 }
 
 main ul.projects > li > a {
   display: flex;
   color: inherit;
-  padding: .5em 1em 1em;
   transition: .2s background
 }
 
-ul.projects li a p { font-weight: 400 }
+main ul.projects li a p {
+  font-weight: 300;
+  opacity: 0.7;
+  font-size: .9em;
+  margin: 0;
+}
 
 main ul.projects > li img {
   width: 40px;
   margin: .5em 1em 0 0;
 }
 
+main ul.projects > li h2  { margin: 0; font-size: 1em }
+
+
 header.project { display: flex }
 header.project img {
   width: 40px;
@@ -194,27 +228,10 @@ header.project ul li {
   display: inline-block;
   padding: .3em .5em;
   font-family: monospace;
-  background: #eceff4;
   border-radius: 3px;
   margin: 0 1em 0 0;
 }
 
-main ul.projects > li a:hover { background: #f2f4f7; text-decoration: none }
-main ul.projects > li h2  { margin: 0; font-size: 1.3em; color: var(--black) }
-main ul.projects > li p   { margin: 0 }
-main ul.projects li ul  { padding: .5em 0 }
-main ul.projects li ul li {
-  display: inline-block;
-  font-family: monospace;
-  font-size: 13px;
-  background: #fff;
-  border-radius: 3px;
-  list-style: none;
-  line-height: 2em;
-  padding: 0 .5em;
-}
-main ul.projects li ul li+li { margin: 0 0 0 1em }
-
 main blockquote {
   font: 16px serif;
   font-style: italic;
@@ -238,7 +255,6 @@ pre.Agda a {font-weight: inherit; text-decoration: none}
 pre.Agda a[href]:hover { background: var(--yellow) }
 
 code, pre.sourceCode, pre.Agda {
-  background: #eceff4; 
   border-radius: 3px;
 }
 
@@ -249,14 +265,6 @@ code {
 
 pre > code {display: block}
 
-#ft svg {
-  margin-left: .6em;
-  vertical-align: middle;
-  cursor: pointer;
-  opacity: .7;
-}
-#ft svg:hover {opacity:1}
-
 pre.sourceCode {
   margin:2em 0;
   padding: .8em 0;
@@ -308,7 +316,7 @@ section.visual.tiny {
 }
 
 section.visual figure { margin: 0 }
-section.visual.tiny figure { margin: 0; border-radius: 5px; overflow: hidden; }
+section.visual.tiny figure { margin: 0; overflow: hidden; }
 figure img {
   max-width: 100%;
   height: auto;
@@ -374,10 +382,13 @@ table.books tr td {
 table.books tr td:first-child {
   font-style: italic;
   text-align: right;
-  color: var(--blacker);
+  color: var(--text-faded);
   font-weight: 500;
 }
 
+table.books tr td:nth-child(3),
+table.books tr td:last-child  {text-align: center;color: var(--yellow)}
+
 .breadcrumb {
   padding-bottom: 0;
   padding-top: 1em;
@@ -389,9 +400,8 @@ table.books tr td:first-child {
   cursor: default;
 }
 
-main > header h1   {line-height: 1.3}
-main > header p    {font-style: italic; padding-left: .5em; margin: .2em 0 0 }
-main > header time {font-weight: 500 }
+main > header h1   {line-height: 1.3  }
+main > header time {
+  opacity: 0.6;
+}
 
-table.books tr td:nth-child(3),
-table.books tr td:last-child  {text-align: center;color: var(--yellow)}
diff --git a/src/Posts.hs b/src/Posts.hs
index b849470..fa9e341 100644
--- a/src/Posts.hs
+++ b/src/Posts.hs
@@ -130,11 +130,8 @@ renderPost :: UTCTime -> Text -> Text -> Html ()
 renderPost date title content =
     outerWith def { Config.title = title, Config.route = PostRoute } do
         header_ do
+            p_ do time_ $ toHtml (showDate date)
             h1_ $ toHtml title
-            p_ do
-                "Posted on "
-                time_ $ toHtml (showDate date)
-                "."
         toHtmlRaw content
 
 
@@ -153,7 +150,6 @@ renderIndex imgs posts content =
 
         p_ [class_ "right"] $ a_ [href_ "/visual.html"] "→ View more visual work"
 
-        h2_ "Latest posts"
         ul_ [ id_ "pidx" ] $ forM_ posts \post ->
             li_ do
                 span_ $ fromString $ showDate (postDate post)