dark mode

11 files changed, 83 insertions, 24 deletions

diff --git a/layouts/shortcodes/picture.html b/layouts/shortcodes/picture.html
new file mode 100644
index 0000000..fca9ba1
--- /dev/null
+++ b/layouts/shortcodes/picture.html
@@ -0,0 +1,6 @@
+{{ $_hugo_config := `{ "version": 1 }` }}
+{{ $img := .Get "img" }}
+{{ $class := .Get "class" }}
+{{ $widths := .Get "widths" }}
+
+{{ partial "picture" (dict "img" $img "class" $class "widths" $widths) }}
\ No newline at end of file
diff --git a/src/styles/_root.scss b/src/styles/_root.scss
index 1828495..cf1b10b 100644
--- a/src/styles/_root.scss
+++ b/src/styles/_root.scss
@@ -1,7 +1,8 @@
 :root {
-  --primary: #336ed2;
+  --primary: #1976d2;
   --primary-txt: #fff;
 
+
   --accent: grey;
   --accent-txt: #fff;
 
@@ -9,6 +10,7 @@
   --base-text: #424242;
   --base-secondary-text: #636363;
   --link-secondary-text: #424242;
+  --toc-text: var(--primary);
 
   --darken-1: rgba(0, 0, 0, .125);
   --darken-2: rgba(0, 0, 0, .25);
@@ -101,3 +103,29 @@
   --footer-bg: #222;
   --footer-fg: #8a8a8a;
 }
+
+
+// Dark theme
+@media (prefers-color-scheme: dark) {
+
+  :root {
+    --base: #222;
+    --base-text: #ddd;
+    --primary: #0d47a1;
+
+    --toc-text: #64b5f6;
+
+    --color-hero: #181818;
+
+    --lighten-1: rgba(0, 0, 0, .125);
+    --lighten-2: rgba(0, 0, 0, .25);
+    --lighten-3: rgba(0, 0, 0, .5);
+
+    --darken-1: hsla(0, 100%, 100%, .125);
+    --darken-2: hsla(0, 100%, 100%, .25);
+    --darken-3: hsla(0, 100%, 100%, .5);
+
+    --footer-bg: #000;
+    --footer-fg: #777;
+  }
+}
\ No newline at end of file
diff --git a/src/styles/pages/_faq.scss b/src/styles/pages/_faq.scss
index 59a78d2..fdc17b2 100644
--- a/src/styles/pages/_faq.scss
+++ b/src/styles/pages/_faq.scss
@@ -8,14 +8,24 @@
     }
   }
 
+  .hero .description {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+
   main h1, #TableOfContents, main .content {
     max-width: var(--theJdrSize);
     margin: 0 auto;
   }
 
+  main .content {
+    margin-top: 1rem;
+  }
+
   .content {
+
     h1, h2, h3, h4, h5, h6 {
-      color: var(--primary);
+      color: var(--toc-text);
     }
 
     h3, h4, h5, h6, & > ul, & > ol, & > p {
diff --git a/src/styles/pages/_home.scss b/src/styles/pages/_home.scss
index e412733..82de0f0 100644
--- a/src/styles/pages/_home.scss
+++ b/src/styles/pages/_home.scss
@@ -116,8 +116,7 @@
       text-align: center;
 
       .youtube-player {
-        border: 4px solid white;
-        background-color: black;
+        border: 4px solid var(--base, white);
       }
     }
 
diff --git a/src/styles/partials/_base.scss b/src/styles/partials/_base.scss
index 35bbe2b..3bc4b29 100644
--- a/src/styles/partials/_base.scss
+++ b/src/styles/partials/_base.scss
@@ -47,7 +47,7 @@ a, a:visited {
 
 .content {
   a, a:visited {
-    color: var(--primary);
+    color: var(--toc-text);
   }
 }
 
diff --git a/src/styles/partials/_buttons.scss b/src/styles/partials/_buttons.scss
index 0d98adf..e93f0fc 100644
--- a/src/styles/partials/_buttons.scss
+++ b/src/styles/partials/_buttons.scss
@@ -91,3 +91,11 @@ a.goto-top {
   color: var(--primary-txt);
   border-radius: 50%;
 }
+
+@media (prefers-color-scheme: dark) {
+  button,
+  a.btn, span.btn,
+  input[type=button], input[type=reset], input[type=submit] {
+    background: none;
+  }
+}
\ No newline at end of file
diff --git a/src/styles/partials/_footer.scss b/src/styles/partials/_footer.scss
index 63792ce..bf92f2c 100644
--- a/src/styles/partials/_footer.scss
+++ b/src/styles/partials/_footer.scss
@@ -1,4 +1,4 @@
-body > footer {
+body>footer {
   background-color: var(--footer-bg);
   color: var(--footer-fg);
   font-weight: 200;
@@ -25,13 +25,12 @@ body > footer {
       margin-right: var(--space-2);
     }
 
-    & > div {
+    &>div {
       display: flex;
       align-items: center;
-      margin-bottom: 1rem;
 
       ul.social-list {
-        font-size: 1.75em;
+        font-size: 1.5em;
         padding: 0;
         margin: 0;
         list-style: none;
@@ -51,7 +50,8 @@ body > footer {
       filter: grayscale(1);
       transition: filter var(--animation);
 
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         opacity: 1;
         filter: grayscale(0);
       }
@@ -68,6 +68,7 @@ body > footer {
     .email a {
       display: flex;
       align-items: center;
+
       .icon {
         width: 1em;
         height: 1em;
@@ -80,7 +81,6 @@ body > footer {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
-    margin-top: var(--space-4);
 
     section {
       margin: var(--space-2) var(--space-4);
@@ -108,12 +108,15 @@ body > footer {
         flex-direction: column;
         list-style: none;
         padding: 0;
-        margin: var(--space-3) 0;
+        margin: var(--space-1) 0;
         font-weight: 100;
-        font-size: 0.9rem;
 
         li {
-          margin: var(--space-1) 0;
+          margin: var(--space-2) 0;
+
+          a {
+            padding: var(--space-3) 0;
+          }
         }
       }
     }
@@ -124,12 +127,12 @@ body > footer {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    margin-top: var(--space-4);
 
     @include mq($until: md) {
       flex-direction: column;
       align-items: start;
-      > * {
+
+      >* {
         margin: var(--space-2) 0;
       }
     }
@@ -140,3 +143,9 @@ body > footer {
     }
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  .follow a.social {
+    filter: grayscale(0.75);
+  }
+}
\ No newline at end of file
diff --git a/src/styles/partials/_header.scss b/src/styles/partials/_header.scss
index 083c8ed..ebda78d 100644
--- a/src/styles/partials/_header.scss
+++ b/src/styles/partials/_header.scss
@@ -14,7 +14,7 @@ body > header {
     align-items: center;
   }
 
-  box-shadow: 0 var(--space-1) var(--space-1) var(--darken-3);
+  box-shadow: 0 var(--space-1) var(--space-1) rgba(0, 0, 0, .5);
   background: var(--primary);
   color: var(--primary-txt);
 
@@ -22,6 +22,7 @@ body > header {
     padding: var(--space-2) 0;
     img {
       height: calc(var(--toolbar-height) - (2 * var(--space-2)));
+      filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, .5));
     }
   }
 
@@ -101,7 +102,7 @@ body > header {
 
       &.external {
         opacity: 1;
-        background: var(--darken-2);
+        background: rgba(0, 0, 0, .25);
       }
     }
 
diff --git a/src/styles/partials/_jumbo.scss b/src/styles/partials/_jumbo.scss
index 7648522..527e327 100644
--- a/src/styles/partials/_jumbo.scss
+++ b/src/styles/partials/_jumbo.scss
@@ -11,7 +11,7 @@
     max-width: 100%;
     width: var(--jumbo-logo-width, 400px);
     height: auto;
-    filter: drop-shadow(0px 2px 2px var(--darken-3));
+    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, .5));
   }
 
   p {
diff --git a/src/styles/partials/_partners.scss b/src/styles/partials/_partners.scss
index be58855..db407fe 100644
--- a/src/styles/partials/_partners.scss
+++ b/src/styles/partials/_partners.scss
@@ -27,10 +27,8 @@
     align-items: stretch;
     justify-content: center;
 
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-origin: content-box;
+    background-color: ghostwhite;
+
     box-shadow: var(--box-shadow-1);
     transition: box-shadow var(--animation);
     cursor: pointer;
diff --git a/src/styles/partials/_table_of_contents.scss b/src/styles/partials/_table_of_contents.scss
index 66eea5b..6c4bbf5 100644
--- a/src/styles/partials/_table_of_contents.scss
+++ b/src/styles/partials/_table_of_contents.scss
@@ -8,7 +8,7 @@
     padding: var(--space-1) 0;
 
     a {
-      color: var(--primary);
+      color: var(--toc-text);
       text-decoration: none;
 
       &:focus, &:hover {