academicpages#137 start progress on themes

steshinoki · Feb 1, 2025 · 438e61c · 438e61c
1 parent 1ebab2b
commit 438e61c
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 11 deletions.
diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -8,10 +8,13 @@ html {
 }
 
 body {
+  /* Set via _themes.scss */
+  color: var(--global-text-color);
+  background-color: var(--global-gb-color);
+
   margin: 0;
   padding: $masthead-height 0 0;
   padding-bottom: 9em;
-  color: $text-color;
   font-family: $global-font-family;
   line-height: 1.5;
 
@@ -64,7 +67,7 @@ p {
 u,
 ins {
   text-decoration: none;
-  border-bottom: 1px solid $text-color;
+  border-bottom: 1px solid var(--global-text-color);
   a {
     color: inherit;
   }
@@ -87,7 +90,7 @@ abbr[title],
 abbr[data-original-title] {
   text-decoration: none;
   cursor: help;
-  border-bottom: 1px dotted $text-color;
+  border-bottom: 1px dotted var(--global-text-color);
 }
 
 /* blockquotes */
@@ -236,7 +239,7 @@ figure {
 
 figcaption {
   margin-bottom: 0.5em;
-  color: mix(#fff, $text-color, 25%);
+  color: var(--global-fig-caption-color);
   font-family: $caption-font-family;
   font-size: $type-size-6;
 

diff --git a/_sass/_forms.scss b/_sass/_forms.scss
@@ -17,7 +17,7 @@ form {
     margin-bottom: 5px * 2;
     *margin-left: -7px;
     padding: 0;
-    color: $text-color;
+    color: var(--global-text-color);
     border: 0;
     border-bottom: 1px solid mix(#fff, #000, 80%);
     white-space: normal;
@@ -58,7 +58,7 @@ textarea {
 label {
   display: block;
   margin-bottom: 0.25em;
-  color: $text-color;
+  color: var(--global-text-color);
   cursor: pointer;
 
   small {
@@ -79,7 +79,7 @@ select {
   width: 100%;
   padding: 0.25em;
   margin-bottom: 0.5em;
-  color: $text-color;
+  color: var(--global-text-color);
   background-color: #fff;
   border: 1px solid mix(#fff, #000, 80%);
   border-radius: $border-radius;

diff --git a/_sass/_navigation.scss b/_sass/_navigation.scss
@@ -175,7 +175,7 @@
 .greedy-nav {
   position: relative;
   min-width: 250px;
-  background: $background-color;
+  background: var(--global-bg-color);
 
   a {
     display: block;

diff --git a/_sass/_reset.scss b/_sass/_reset.scss
@@ -7,7 +7,7 @@
 html {
   /* apply a natural box layout model to all elements */
   box-sizing: border-box;
-  background-color: $background-color;
+  background-color: var(--global-bg-color);
   font-size: 16px;
 
   @include breakpoint($medium) {

diff --git a/_sass/_themes.scss b/_sass/_themes.scss
@@ -0,0 +1,16 @@
+/* ==========================================================================
+   THEMES
+   ========================================================================== */
+
+/* Default light theme for the site */
+$gray                       : #7a8288;
+$dark-gray                  : mix(#000, $gray, 40%);
+$darker-gray                : mix(#000, $gray, 60%);
+$light-gray                 : mix(#fff, $gray, 50%);
+$lighter-gray               : mix(#fff, $gray, 90%);
+
+:root {
+    --global-bg-color: #fff;
+    --global-text-color: #{$dark-gray};
+    --global-fig-caption-color: mix(#fff,  #{$dark-gray}, 25%);
+}
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -62,10 +62,8 @@ $light-gray                 : mix(#fff, $gray, 50%);
 $lighter-gray               : mix(#fff, $gray, 90%);
 
 $body-color                 : #fff;
-$background-color           : #fff;
 $code-background-color      : #fafafa;
 $code-background-color-dark : $light-gray;
-$text-color                 : $dark-gray;
 $border-color               : $lighter-gray;
 
 $primary-color              : #7a8288;

diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -11,6 +11,8 @@
 */
 
 @import "vendor/breakpoint/breakpoint"; // media query mixins
+
+@import "themes";
 @import "variables";
 @import "mixins";
 @import "vendor/susy/susy";