Dark mode now automatically supported, modularizing the sass files, using css variables now as well, and a new npm watch command

package.json

@@ -12,7 +12,8 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "sass --no-source-map src/scss/theme.scss dist/site.css && cp src/index.html dist/index.html && cp -R src/img dist && cp -R src/icons dist",
-    "prod": "sass --no-source-map src/scss/theme.scss dist/site.css && cp src/index.html dist/index.html && cp -R src/img dist && cp -R src/icons dist"
+    "prod": "sass --no-source-map src/scss/theme.scss dist/site.css && cp src/index.html dist/index.html && cp -R src/img dist && cp -R src/icons dist",
+    "watch": "sass --no-source-map --watch src/scss/theme.scss dist/site.css"
   },
   "repository": {
     "type": "git",

src/index.html

@@ -15,7 +15,7 @@
                     Andrew Gioia,
                 </span>
                 <span class="what">
-                    dad, designer, &amp; co-founder at <a href="https://teachboost.com" target="blank">TeachBoost</a>,
+                    dad, designer, &amp; co-founder at <a href="https://teachboost.com" class="shine" target="blank">TeachBoost</a>,
                 </span>
                 <span class="where">
                     living &amp; tinkering in Pittsburgh.

src/scss/_dark.scss

@@ -0,0 +1,26 @@
+// dark mode preference
+@media (prefers-color-scheme: dark) {
+    body {
+        background: var(--bg-dark);
+    }
+    main {
+        border-top-color: var(--border-dark);
+
+        h1 {
+            color: var(--text-dark);
+
+            span.who {
+                color: var(--text-dark-hl);
+            }
+
+            a {
+                color: var(--link-tb-dark);
+            }
+        }
+    }
+    footer {
+        a.github {
+            color: var(--link-gh-dark);
+        }
+    }
+}

src/scss/_media.scss

@@ -0,0 +1,28 @@
+// media queries
+
+@media only screen and (min-width: $screen-tablet) {
+    main {
+        padding-right: 12vmin;
+    }
+}
+@media only screen and (min-width: $screen-laptop) {
+    main {
+        padding-right: 24vmin;
+        h1 {
+            //line-height: 1.15
+        }
+    }
+}
+@media only screen and (min-width: $screen-display) {
+    main {
+        padding-right: 32vmin;
+    }
+}
+@media only screen and (min-width: $screen-full) {
+    main {
+        padding-right: 50vmin;
+        h1 {
+            //line-height: 1.1;
+        }
+    }
+}

src/scss/_variables.scss

@@ -0,0 +1,22 @@
+// global variables
+
+$version:               '1.0.3';
+$bg-light:              #f3f3f1;
+$bg-dark:               #21252b;
+$border-light:          #fff;
+$border-dark:           #353b45;
+$font-color-navy:       #002953;
+$font-color-navier:     #032140;
+$font-color-gray:       #d6d7df;
+$font-color-white:      #fff;
+$font-family-base:      -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+$font-size-base:        16px;
+$link-tb-normal:        #0069ff;
+$link-tb-dark:          #29baff;
+$link-gh-normal:        #24292e;
+$link-gh-dark:          #f1f1f1;
+$screen-mobile:         640px;
+$screen-tablet:         768px;
+$screen-laptop:         1024px;
+$screen-display:        1280px;
+$screen-full:           1440px;

src/scss/theme.scss

@@ -3,27 +3,35 @@
 // normalize
 @import "../../node_modules/normalize.css/normalize";
 
-// variables
+// sass variables
-$version:           '1.0.3';
+@import "variables";
-$bg-light:          #f3f3f1;
+
-$font-color-navy:   #002953;
+// css variables
-$font-family-base:  -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+:root {
-$font-size-base:    16px;
+    --bg-normal:        #{$bg-light};
-$screen-mobile:     640px;
+    --bg-dark:          #{$bg-dark};
-$screen-tablet:     768px;
+    --border-normal:    #{$border-light};
-$screen-laptop:     1024px;
+    --border-dark:      #{$border-dark};
-$screen-display:    1280px;
+    --text-normal:      #{$font-color-navy};
-$screen-full:       1440px;
+    --text-normal-hl:   #{$font-color-navier};
+    --text-dark:        #{$font-color-gray};
+    --text-dark-hl:     #{$font-color-white};
+    --font-base:        #{$font-size-base};
+    --link-tb-normal:   #{$link-tb-normal};
+    --link-tb-dark:     #{$link-tb-dark};
+    --link-gh-normal:   #{$link-gh-normal};
+    --link-gh-dark:     #{$link-gh-dark};
+}
 
 // icons
 @import "icons";
 
 // fit and finish
 body {
-    background: $bg-light;
+    background: var(--bg-normal);
     display: flex;
     flex-direction: column;
-    font-size: $font-size-base;
+    font-size: var(--font-base);
     height: 100vh;
     justify-content: space-between;
     overflow: hidden;
@@ -31,26 +39,27 @@ body {
 }
 
 main {
-    border-top: 1vmin solid #fff;
+    border-top: 1vmax solid var(--border-normal);
-    padding: 6vmin;
+    padding: 5vmin 6vmin 0;
 
     h1 {
-        color: $font-color-navy;
+        color: var(--text-normal);
         font-family: $font-family-base;
         font-size: 4rem; // basic fallback
         font-size: 10vmin; // premium fallback
-        font-size: max(10vmin, 24px);
+        font-size: max(10vmin, 26px);
         font-weight: 700;
-        line-height: 1.15;
+        line-height: max(11vmin, 32px);
         margin: 0;
 
         span.who {
+            color: var(--text-normal-hl);
             display: block;
             font-weight: 900;
         }
 
         a {
-            color: #0069ff;
+            color: var(--link-tb-normal);
             text-decoration: none;
         }
     }
@@ -61,16 +70,16 @@ footer {
     display: flex;
     flex-direction: row;
     justify-content: start;
-    padding: 6vmin;
+    padding: 5vmin 6vmin;
 
     a {
         font-size: 3rem; // basic fallback
         font-size: 5vmin; // premium fallback
-        font-size: max(5vmin, 32px);
+        font-size: max(8vmin, 36px);
         margin-right: 4vmin;
 
         &.github {
-            color: #24292e;
+            color: var(--link-gh-normal);
         }
 
         &.mastodon {
@@ -114,14 +123,8 @@ a {
 
 }
 
+// schemes
+@import "dark";
+
 // media queries
-@media only screen and (min-width: $screen-display) {
+@import "media";
-    main {
-        padding-right: 20vmin;
-    }
-}
-@media only screen and (min-width: $screen-full) {
-    main {
-        padding-right: 32vmin;
-    }
-}