Add light theme

3 files changed, 231 insertions, 34 deletions

diff --git a/docs/style.css b/docs/style.css
index dae8b33..32bbce4 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -7,15 +7,34 @@
 *:focus, *::selection {
   background-color: inherit;
   outline: none !important;
-  color: #ededed;
+}
+@media (prefers-color-scheme: dark) {
+  *:focus, *::selection {
+    color: #ededed;
+  }
+}
+@media (prefers-color-scheme: light) {
+  *:focus, *::selection {
+    color: black;
+  }
 }
 
 body {
-  background-color: #131313;
-  color: lightgray;
   font-family: Arial, Helvetica, sans-serif;
   line-height: 1.6;
 }
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #131313;
+    color: lightgray;
+  }
+}
+@media (prefers-color-scheme: light) {
+  body {
+    background-color: lightgray;
+    color: #131313;
+  }
+}
 
 header {
   text-align: center;
@@ -38,7 +57,16 @@ nav {
   justify-content: space-evenly;
   align-items: center;
   padding: 0em 2em;
-  background-color: #131313;
+}
+@media (prefers-color-scheme: dark) {
+  nav {
+    background-color: #131313;
+  }
+}
+@media (prefers-color-scheme: light) {
+  nav {
+    background-color: lightgray;
+  }
 }
 
 main {
@@ -74,7 +102,16 @@ main .about-me {
 footer {
   text-align: center;
   font-size: 0.8em;
-  background-color: #333;
+}
+@media (prefers-color-scheme: dark) {
+  footer {
+    background-color: #333;
+  }
+}
+@media (prefers-color-scheme: light) {
+  footer {
+    background-color: #f0f0f0;
+  }
 }
 
 a {
@@ -83,7 +120,16 @@ a {
 }
 a:hover {
   border-color: #a29d7f;
-  color: #ededed;
+}
+@media (prefers-color-scheme: dark) {
+  a:hover {
+    color: #ededed;
+  }
+}
+@media (prefers-color-scheme: light) {
+  a:hover {
+    color: black;
+  }
 }
 
 h3 {
@@ -93,9 +139,19 @@ h3 {
 
 .card {
   padding: 2em;
-  background-color: #333;
   border-radius: 0.3em;
-  border: 1px solid #131313;
+}
+@media (prefers-color-scheme: dark) {
+  .card {
+    background-color: #333;
+    border: 1px solid #131313;
+  }
+}
+@media (prefers-color-scheme: light) {
+  .card {
+    background-color: #f0f0f0;
+    border: 1px solid lightgray;
+  }
 }
 .card ul {
   list-style: none;
@@ -104,9 +160,18 @@ h3 {
   padding: 0.5em;
 }
 .card ul li span {
-  background-color: #131313;
   padding: 0.2em;
 }
+@media (prefers-color-scheme: dark) {
+  .card ul li span {
+    background-color: #131313;
+  }
+}
+@media (prefers-color-scheme: light) {
+  .card ul li span {
+    background-color: lightgray;
+  }
+}
 .card.work-card {
   display: flex;
   flex-direction: column;
@@ -118,11 +183,20 @@ h3 {
   flex-flow: row wrap;
 }
 .card.work-card .info span {
-  background-color: #131313;
   padding: 0.5em;
   margin: 0 0.5em 0.5em;
   font-size: 0.8em;
 }
+@media (prefers-color-scheme: dark) {
+  .card.work-card .info span {
+    background-color: #131313;
+  }
+}
+@media (prefers-color-scheme: light) {
+  .card.work-card .info span {
+    background-color: lightgray;
+  }
+}
 .card.work-card:hover {
   border: 1px solid #a29d7f;
 }
@@ -153,38 +227,83 @@ h3 {
 }
 .works-filter label {
   margin-left: 2em;
-  color: lightgray;
+}
+@media (prefers-color-scheme: dark) {
+  .works-filter label {
+    color: lightgray;
+  }
+}
+@media (prefers-color-scheme: light) {
+  .works-filter label {
+    color: #131313;
+  }
 }
 .works-filter select {
-  background-color: #333;
   color: #a29d7f;
   border: none;
   text-align: center;
   padding: 0.2em;
 }
+@media (prefers-color-scheme: dark) {
+  .works-filter select {
+    background-color: #333;
+  }
+}
+@media (prefers-color-scheme: light) {
+  .works-filter select {
+    background-color: #f0f0f0;
+  }
+}
 
 .works-description {
   margin: 2em 1em;
   padding: 1em;
-  border: 1px solid #333;
   font-size: 0.9em;
 }
+@media (prefers-color-scheme: dark) {
+  .works-description {
+    border: 1px solid #333;
+  }
+}
+@media (prefers-color-scheme: light) {
+  .works-description {
+    border: 1px solid #f0f0f0;
+  }
+}
 
 .download-button {
-  border: 1px solid #333;
   padding: 0.5em;
   margin: 0.5em 3em;
   font-size: 0.8em;
   color: #a29d7f;
 }
+@media (prefers-color-scheme: dark) {
+  .download-button {
+    border: 1px solid #333;
+  }
+}
+@media (prefers-color-scheme: light) {
+  .download-button {
+    border: 1px solid #f0f0f0;
+  }
+}
 
 .story-text p {
   padding: 2em;
   margin: 2em 1em;
-  background-color: #333;
   line-height: 1.8rem;
   font-size: 0.9em;
 }
+@media (prefers-color-scheme: dark) {
+  .story-text p {
+    background-color: #333;
+  }
+}
+@media (prefers-color-scheme: light) {
+  .story-text p {
+    background-color: #f0f0f0;
+  }
+}
 @media screen and (min-width: 480px) {
   .story-text p {
     line-height: 2rem;
diff --git a/docs/style.css.map b/docs/style.css.map
index 30dbeb0..b348fc5 100644
--- a/docs/style.css.map
+++ b/docs/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../sass/style.scss"],"names":[],"mappings":"AAKA;EACI;EACA;EACA;EAMA;;AALA;EACI;EACA;EACA;;;AAKR;EACI,kBAlBe;EAmBf,OAjBS;EAkBT;EACA;;;AAGJ;EACI;EACA;;AACA;EACI;EACA;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA,kBA7Ce;;;AAgDnB;EACI;EACA;;AACA;EACI;EACA;EACA;;AACA;EAJJ;IAKQ;;;AAEJ;EAPJ;IAQQ;;;AAGR;EACI;EACA;EACA;;AACA;EAJJ;IAKQ;;;;AAKZ;EACI;EACA;EACA,kBA1EQ;;;AA6EZ;EACI;EACA;;AACA;EACI,cA/EO;EAgFP;;;AAIR;EACI;EACA,OAtFW;;;AAyFf;EACI;EACA,kBA7FQ;EA8FR;EACA;;AAEA;EACI;;AACA;EACI;;AACA;EACI,kBAvGG;EAwGH;;AAKZ;EACI;EACA;EACA;EAcA;;AAbA;EACI;EACA;;AACA;EACI,kBArHG;EAsHH;EACA;EACA;;AAGR;EACI;;AAGJ;EAlBJ;IAmBQ;;;AAEJ;EArBJ;IAsBQ;;;AAEJ;EAxBJ;IAyBQ;;;;AAKZ;EACI;EACA;;AACA;EAHJ;IAIQ;;;AAEJ;EACI;EACA,OAjJK;;AAmJT;EACI,kBArJI;EAsJJ,OApJO;EAqJP;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA,OAvKW;;;AA2KX;EACI;EACA;EACA,kBAhLI;EAiLJ;EACA;;AACA;EANJ;IAOQ;IACA;;;AAEJ;EAVJ;IAWQ;IACA","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../sass/style.scss"],"names":[],"mappings":"AAMA;EACI;EACA;EACA;EAYA;;AAXA;EACI;EACA;;AACA;EAHJ;IAIQ;;;AAEJ;EANJ;IAOQ;;;;AAOZ;EAUI;EACA;;AAVA;EADJ;IAEQ,kBA1BK;IA2BL,OAxBM;;;AA0BV;EALJ;IAMQ,kBA3BM;IA4BN,OA/BK;;;;AAsCb;EACI;EACA;;AACA;EACI;EACA;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;AACA;EALJ;IAMQ,kBA5DK;;;AA8DT;EARJ;IASQ,kBA5DM;;;;AAiEd;EACI;EACA;;AACA;EACI;EACA;EACA;;AACA;EAJJ;IAKQ;;;AAEJ;EAPJ;IAQQ;;;AAGR;EACI;EACA;EACA;;AACA;EAJJ;IAKQ;;;;AAKZ;EACI;EACA;;AACA;EAHJ;IAIQ,kBA/FU;;;AAiGd;EANJ;IAOQ,kBAjGgB;;;;AAsGxB;EACI;EACA;;AACA;EACI,cAxGO;;AAyGP;EAFJ;IAGQ;;;AAEJ;EALJ;IAMQ;;;;AAMZ;EACI;EACA,OArHW;;;AAwHf;EACI;EACA;;AACA;EAHJ;IAIQ,kBA/HU;IAgIV;;;AAEJ;EAPJ;IAQQ,kBAlIgB;IAmIhB;;;AAIJ;EACI;;AACA;EACI;;AACA;EAQI;;AAPA;EADJ;IAEQ,kBA/IP;;;AAiJG;EAJJ;IAKQ,kBA/IN;;;AAuJV;EACI;EACA;EACA;EAmBA;;AAlBA;EACI;EACA;;AACA;EAOI;EACA;EACA;;AARA;EADJ;IAEQ,kBAnKP;;;AAqKG;EAJJ;IAKQ,kBAnKN;;;AA0KN;EACI;;AAGJ;EAvBJ;IAwBQ;;;AAEJ;EA1BJ;IA2BQ;;;AAEJ;EA7BJ;IA8BQ;;;;AAKZ;EACI;EACA;;AACA;EAHJ;IAIQ;;;AAEJ;EACI;;AACA;EAFJ;IAGQ,OAnME;;;AAqMN;EALJ;IAMQ,OAzMC;;;AA4MT;EAOI,OA/MO;EAgNP;EACA;EACA;;AATA;EADJ;IAEQ,kBA7MM;;;AA+MV;EAJJ;IAKQ,kBA/MY;;;;AAwNxB;EACI;EACA;EACA;;AACA;EAJJ;IAKQ;;;AAEJ;EAPJ;IAQQ;;;;AAKR;EACI;EACA;EACA;EACA,OAvOW;;AAwOX;EALJ;IAMQ;;;AAEJ;EARJ;IASQ;;;;AAMJ;EACI;EACA;EACA;EACA;;AACA;EALJ;IAMQ,kBA3PM;;;AA6PV;EARJ;IASQ,kBA7PY;;;AAgQhB;EAZJ;IAaQ;IACA;;;AAEJ;EAhBJ;IAiBQ;IACA","file":"style.css"}
\ No newline at end of file
diff --git a/sass/style.scss b/sass/style.scss
index 9599128..f3c4f1c 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -1,6 +1,7 @@
-$background-color: #131313;
-$box-color: #333;
-$font-color: lightgray;
+$dark-color: #131313;
+$secondary-color: #333;    
+$light-secondary-color: #f0f0f0;
+$light-color: lightgray;
 $accent-color: #a29d7f;
 
 * {
@@ -10,14 +11,27 @@ $accent-color: #a29d7f;
     &:focus, &::selection {
         background-color: inherit;
         outline: none !important;
-        color: lighten($color: $font-color, $amount: 10);
+        @media (prefers-color-scheme: dark) {
+            color: lighten($color: $light-color, $amount: 10);
+        }
+        @media (prefers-color-scheme: light) {
+            color: darken($color: $dark-color, $amount: 10);
+        }
+
     }
     letter-spacing: 0.02em;
 }
 
 body {
-    background-color: $background-color;
-    color: $font-color;
+    @media (prefers-color-scheme: dark) {
+        background-color: $dark-color;
+        color: $light-color;
+    }
+    @media (prefers-color-scheme: light) {
+        background-color: $light-color;
+        color: $dark-color;
+    }
+
     font-family: Arial, Helvetica, sans-serif;
     line-height: 1.6;
 }
@@ -43,7 +57,13 @@ nav {
     justify-content: space-evenly;
     align-items: center;
     padding: 0em 2em;
-    background-color: $background-color;
+    @media (prefers-color-scheme: dark) {
+        background-color: $dark-color;
+    }
+    @media (prefers-color-scheme: light) {
+        background-color: $light-color;
+    }
+
 }
 
 main {
@@ -73,7 +93,13 @@ main {
 footer {
     text-align: center;
     font-size: 0.8em;
-    background-color: $box-color;
+    @media (prefers-color-scheme: dark) {
+        background-color: $secondary-color;
+    }
+    @media (prefers-color-scheme: light) {
+        background-color: $light-secondary-color;
+    }
+
 }
 
 a {
@@ -81,7 +107,13 @@ a {
     color: inherit;
     &:hover {
         border-color: $accent-color;
-        color: lighten($color: $font-color, $amount: 10);
+        @media (prefers-color-scheme: dark) {
+            color: lighten($color: $light-color, $amount: 10);
+        }
+        @media (prefers-color-scheme: light) {
+            color: darken($color: $dark-color, $amount: 10);
+        }
+
     }
 }
 
@@ -92,16 +124,29 @@ h3 {
 
 .card {
     padding: 2em;
-    background-color: $box-color;
     border-radius: 0.3em;
-    border: 1px solid $background-color;
+    @media (prefers-color-scheme: dark) {
+        background-color: $secondary-color;
+        border: 1px solid $dark-color;
+    }
+    @media (prefers-color-scheme: light) {
+        background-color: $light-secondary-color;
+        border: 1px solid $light-color;
+    }
+
     
     ul {
         list-style: none;
         li {
             padding: 0.5em;
             span {
-                background-color: $background-color;
+                @media (prefers-color-scheme: dark) {
+                    background-color: $dark-color;
+                }
+                @media (prefers-color-scheme: light) {
+                    background-color: $light-color;
+                }
+
                 padding: 0.2em;
             }
         }
@@ -115,7 +160,12 @@ h3 {
             display: flex;
             flex-flow: row wrap;
             span {
-                background-color: $background-color;
+                @media (prefers-color-scheme: dark) {
+                    background-color: $dark-color;
+                }
+                @media (prefers-color-scheme: light) {
+                    background-color: $light-color;
+                }
                 padding: 0.5em;
                 margin: 0 0.5em 0.5em;
                 font-size: 0.8em;
@@ -145,10 +195,20 @@ h3 {
     }
     label {
         margin-left: 2em;
-        color: $font-color;
+        @media (prefers-color-scheme: dark) {
+            color: $light-color;
+        }
+        @media (prefers-color-scheme: light) {
+            color: $dark-color;
+        }
     }
     select {
-        background-color: $box-color;
+        @media (prefers-color-scheme: dark) {
+            background-color: $secondary-color;
+        }
+        @media (prefers-color-scheme: light) {
+            background-color: $light-secondary-color;
+        }
         color: $accent-color;
         border: none;
         text-align: center;
@@ -159,25 +219,43 @@ h3 {
 .works-description {
     margin: 2em 1em;
     padding: 1em;
-    border: 1px solid $box-color;
     font-size: 0.9em;
+    @media (prefers-color-scheme: dark) {
+        border: 1px solid $secondary-color;
+    }
+    @media (prefers-color-scheme: light) {
+        border: 1px solid $light-secondary-color;
+    }
+
 }
 
 .download-button {
-    border: 1px solid $box-color;
     padding: 0.5em;
     margin: 0.5em 3em;
     font-size: 0.8em;
     color: $accent-color;
+    @media (prefers-color-scheme: dark) {
+        border: 1px solid $secondary-color;
+    }
+    @media (prefers-color-scheme: light) {
+        border: 1px solid $light-secondary-color;
+    }
+
 }
 
 .story-text {
     p {
         padding: 2em;
         margin: 2em 1em;
-        background-color: $box-color;
         line-height: 1.8rem;
         font-size: 0.9em;
+        @media (prefers-color-scheme: dark) {
+            background-color: $secondary-color;
+        }
+        @media (prefers-color-scheme: light) {
+            background-color: $light-secondary-color;
+        }
+
         @media screen and (min-width: 480px) {
             line-height: 2rem;
             margin: 2em;