style: add support for more color schemes

toggle between light & dark variants

5 files changed, 313 insertions, 210 deletions

diff --git a/static/css/code/syntax-highlight.css b/static/css/code/syntax-highlight.css
new file mode 100644
index 0000000..f44cfe4
--- /dev/null
+++ b/static/css/code/syntax-highlight.css
@@ -0,0 +1,210 @@
+/*
+
+Swiches between code colors based on theme
+and binds color scheme values to highlightJS & CodeFlask
+defaults to light theme.
+
+*/
+
+:root {
+  --code-background: var(--code-background-light); 
+  --code-token-base: var(--code-token-base-light);
+  --code-token-punctuation: var(--code-token-punctuation-light);
+  --code-token-operator: var(--code-token-operator-light); 
+  --code-token-keyword: var(--code-token-keyword-light);
+  --code-token-boolean: var(--code-token-boolean-light);
+  --code-token-number: var(--code-token-number-light);
+  --code-token-type: var(--code-token-type-light);
+  --code-token-function-name: var(--code-token-function-name-light);
+  --code-token-function-param: var(--code-token-function-param-light);
+  --code-token-attribute: var(--code-token-attribute-light);
+  --code-token-string: var(--code-token-string-light);
+  --code-token-function: var(--code-token-function-light);
+  --code-token-comment: var(--code-token-comment-light);  
+}
+
+html.theme-light {
+  --code-background: var(--code-background-light); 
+  --code-token-base: var(--code-token-base-light);
+  --code-token-punctuation: var(--code-token-punctuation-light);
+  --code-token-operator: var(--code-token-operator-light); 
+  --code-token-keyword: var(--code-token-keyword-light);
+  --code-token-boolean: var(--code-token-boolean-light);
+  --code-token-number: var(--code-token-number-light);
+  --code-token-type: var(--code-token-type-light);
+  --code-token-function-name: var(--code-token-function-name-light);
+  --code-token-function-param: var(--code-token-function-param-light);
+  --code-token-attribute: var(--code-token-attribute-light);
+  --code-token-string: var(--code-token-string-light);
+  --code-token-function: var(--code-token-function-light);
+  --code-token-comment: var(--code-token-comment-light);  
+}
+
+html.theme-dark {
+  --code-background: var(--code-background-dark); 
+  --code-token-base: var(--code-token-base-dark);
+  --code-token-punctuation: var(--code-token-punctuation-dark);
+  --code-token-operator: var(--code-token-operator-dark); 
+  --code-token-keyword: var(--code-token-keyword-dark);
+  --code-token-boolean: var(--code-token-boolean-dark);
+  --code-token-number: var(--code-token-number-dark);
+  --code-token-type: var(--code-token-type-dark);
+  --code-token-function-name: var(--code-token-function-name-dark);
+  --code-token-function-param: var(--code-token-function-param-dark);
+  --code-token-attribute: var(--code-token-attribute-dark);
+  --code-token-string: var(--code-token-string-dark);
+  --code-token-function: var(--code-token-function-dark);
+  --code-token-comment: var(--code-token-comment-dark);  
+}
+
+/*
+
+highlightJS mappings
+
+*/
+
+pre.hljs {
+  background: var(--code-background);
+}
+.hljs {
+  color: var(--color-token-base);
+}
+.hljs-punctuation { /* and operators */
+  color: var(--code-token-punctuation);
+}
+.hljs-variable,
+.hljs-name {
+  color: var(--code-token-base);
+}
+.hljs-function-param {
+  font-weight: bold;
+  font-style: italic;
+  color: var(--color-token-base);
+}
+.hljs-operator {
+  color: var(--code-token-operator);
+}
+.hljs-keyword {
+  color: var(--code-token-keyword);
+}
+.hljs-boolean {
+  color: var(--code-token-boolean);
+}
+.hljs-number {
+  color: var(--code-token-number);
+}
+.hljs-type {
+  color: var(--code-token-type);
+}
+.hljs-function.function-name {
+  color: var(--code-token-function-name);
+}
+.hljs-function.function-call {
+  font-style: italic;
+}
+.hljs-function.function-params {
+  color: var(--code-token-function);
+}
+.hljs-attribute {
+  color: var(--code-token-attribute);
+  font-style: italic;
+}
+.hljs-string {
+  color: var(--code-token-string);
+}
+.hljs-comment {
+  color: var(--code-token-comment);
+  font-style: italic
+}
+.hljs-module {
+  font-weight: bold;
+}
+/* 
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link,
+.hljs-meta,
+.hljs-selector-id,
+.hljs-title {
+  color: var(--code-token-function);
+}
+.hljs-built_in,
+.hljs-title.class_,
+.hljs-class .hljs-title {
+  color: var(--code-token-function);
+} */
+.hljs-emphasis {
+  font-style: italic
+}
+.hljs-strong {
+  font-weight: bold
+}
+.hljs-link {
+  text-decoration: underline
+}
+
+/*
+
+CodeFlask mappings
+
+*/
+
+.codeflask .codeflask__textarea {
+  color: var(--code-background); /* Prevents rendering artifacts in dark mode */
+  caret-color: var(--code-token-base); /* Makes the text input cursor visible in dark mode */
+}
+
+.codeflask {
+  background: var(--code-background);
+  color: var(--code-token-base);
+}
+.codeflask .token.punctuation {
+  color: var(--code-token-punctuation);
+}
+.codeflask .token.keyword {
+  color: var(--code-token-keyword);
+}
+.codeflask .token.operator {
+  color: var(--code-token-operator);
+}
+.codeflask .token.string {
+  color: var(--code-token-string);
+}
+.codeflask .token.comment {
+  color: var(--code-token-comment);
+}
+.codeflask .token.function {
+  color: var(--code-token-function);
+}
+.codeflask .token.boolean {
+  color: var(--code-token-boolean);
+}
+.codeflask .token.number {
+  color: var(--code-token-number);
+}
+.codeflask .token.selector {
+  color: var(--code-token-selector);
+}
+.codeflask .token.property {
+  color: var(--code-token-property);
+}
+.codeflask .token.tag {
+  color: var(--code-token-tag);
+}
+.codeflask .token.attr-value {
+  color: var(--code-token-attr-value);
+}
+
+/* Add color transitions to fit with theme switching */
+
+.hljs,
+.codeflask .codeflask__textarea {
+  transition: background 150ms linear 0s, color 150ms linear 0s;
+}
+
+.hljs,
+.hljs *,
+.codeflask .codeflask__textarea
+.codeflask .codeflask__textarea * {
+  transition: color 150ms linear 0s;
+}
\ No newline at end of file
diff --git a/static/css/fonts.css b/static/css/fonts.css
new file mode 100644
index 0000000..1f07a2e
--- /dev/null
+++ b/static/css/fonts.css
@@ -0,0 +1,28 @@
+@font-face {
+  font-family: "Lexend";
+  font-display: swap;
+  font-weight: 400;
+  src: url("https://gleam.run/fonts/Lexend.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Lexend";
+  font-display: swap;
+  font-weight: 700;
+  src: url("https://gleam.run/fonts/Lexend-700.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Outfit";
+  font-display: swap;
+  src: url("https://gleam.run/fonts/Outfit.woff") format("woff");
+}
+
+:root {
+  --font-family-normal: "Outfit", sans-serif;
+  --font-family-title: "Lexend", sans-serif;
+
+  --font-size-normal: calc(var(--gap) * 1.5);
+  --font-size-small: calc(var(--gap) * 1.2);
+  --font-size-extra-small: calc(var(--gap));
+}
\ No newline at end of file
diff --git a/static/css/layout.css b/static/css/layout.css
new file mode 100644
index 0000000..6b6d1ac
--- /dev/null
+++ b/static/css/layout.css
@@ -0,0 +1,10 @@
+:root {
+  --gap: 0.75rem;
+  --gap-double: calc(2 * var(--gap));
+  --gap-triple: calc(3 * var(--gap));
+  --gap-quad: calc(4 * var(--gap));
+  --gap-half: calc(0.5 * var(--gap));
+  --gap-quarter: calc(0.25 * var(--gap));
+  
+  --navbar-height: calc(var(--gap-double) + 20px);
+}
\ No newline at end of file
diff --git a/static/css/theme.css b/static/css/theme.css
new file mode 100644
index 0000000..4d12e42
--- /dev/null
+++ b/static/css/theme.css
@@ -0,0 +1,52 @@
+/*
+
+Derives app colors for both dark & light themes from common.css variables
+
+*/
+
+:root {
+  --hot-pink: #d900b8;
+  --light-pink: #fff8fe;
+  --gray-light: #dfdfdf;
+
+  --drop-shadow: 0 0 var(--gap-quarter) var(--color-background), var(--gap) var(--gap) 0 var(--color-drop-shadow), inset 0 0 0 1px var(--color-accent-muted); 
+
+  --color-navbar-background: var(--faff-pink);
+  --color-navbar-text: var(--light-theme-text);
+  --color-navbar-link: var(--light-theme-text);
+
+  --color-accent: var(--faff-pink);
+  --color-accent-light: var(--light-pink);
+  --color-accent-hot: var(--hot-pink);
+  --color-accent-dark: var(--unexpected-aubergine);
+}
+
+html.theme-light {
+  --color-background: var(--light-theme-background);
+  --color-background-dim: var(--light-theme-background-dim);
+  --color-text: var(--light-theme-text);
+  --color-text-secondary: var(--light-theme-text-secondary);
+  --color-link: var(--light-theme-text);
+  --color-link-decoration: var(--faff-pink);
+  --color-code: var(--light-theme-code);
+  --color-divider: var(--faff-pink);
+  --color-drop-shadow: var(--gray-light);
+  --color-accent-muted: var(--color-accent-light);
+  --color-text-accent: var(--color-accent-dark);
+  color-scheme: light;
+}
+
+html.theme-dark {
+  --color-background: var(--dark-theme-background);
+  --color-background-dim: var(--dark-theme-background-dim);
+  --color-text: var(--dark-theme-text);
+  --color-text-secondary: var(--dark-theme-text-secondary);
+  --color-link: var(--dark-theme-text);
+  --color-link-decoration: var(--faff-pink);
+  --color-code: var(--dark-theme-code);
+  --color-divider: var(--unexpected-aubergine);
+  --color-drop-shadow: var(--color-background-dim);
+  --color-accent-muted: var(--color-accent-dark);
+  --color-text-accent: var(--color-accent);
+  color-scheme: dark;
+}
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index 0a8b26d..13fbd0e 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,85 +1,3 @@
-@font-face {
-  font-family: "Lexend";
-  font-display: swap;
-  font-weight: 400;
-  src: url("https://gleam.run/fonts/Lexend.woff2") format("woff2");
-}
-
-@font-face {
-  font-family: "Lexend";
-  font-display: swap;
-  font-weight: 700;
-  src: url("https://gleam.run/fonts/Lexend-700.woff2") format("woff2");
-}
-
-@font-face {
-  font-family: "Outfit";
-  font-display: swap;
-  src: url("https://gleam.run/fonts/Outfit.woff") format("woff");
-}
-
-:root {
-  --font-family-normal: "Outfit", sans-serif;
-  --font-family-title: "Lexend", sans-serif;
-
-  --font-size-normal: calc(var(--gap) * 1.5);
-  --font-size-small: calc(var(--gap) * 1.2);
-  --font-size-extra-small: calc(var(--gap));
-
-  --gap: 0.75rem;
-  --gap-double: calc(2 * var(--gap));
-  --gap-triple: calc(3 * var(--gap));
-  --gap-quad: calc(4 * var(--gap));
-  --gap-half: calc(0.5 * var(--gap));
-  --gap-quarter: calc(0.25 * var(--gap));
-  --navbar-height: calc(var(--gap-double) + 20px);
-
-  --hot-pink: #d900b8;
-  --light-pink: #fff8fe;
-  --gray-light: #dfdfdf;
-
-  --drop-shadow: 0 0 var(--gap-quarter) var(--color-background), var(--gap) var(--gap) 0 var(--color-drop-shadow); 
-
-  --color-navbar-background: var(--faff-pink);
-  --color-navbar-text: var(--light-theme-text);
-  --color-navbar-link: var(--light-theme-text);
-
-  --color-accent: var(--faff-pink);
-  --color-accent-light: var(--light-pink);
-  --color-accent-hot: var(--hot-pink);
-  --color-accent-dark: var(--unexpected-aubergine);
-}
-
-html.theme-light {
-  --color-background: var(--light-theme-background);
-  --color-background-dim: var(--light-theme-background-dim);
-  --color-text: var(--light-theme-text);
-  --color-text-secondary: var(--light-theme-text-secondary);
-  --color-link: var(--light-theme-text);
-  --color-link-decoration: var(--faff-pink);
-  --color-code: var(--light-theme-code);
-  --color-divider: var(--faff-pink);
-  --color-drop-shadow: var(--gray-light);
-  --color-accent-muted: var(--color-accent-light);
-  --color-text-accent: var(--color-accent-dark);
-  color-scheme: light;
-}
-
-html.theme-dark {
-  --color-background: var(--dark-theme-background);
-  --color-background-dim: var(--dark-theme-background-dim);
-  --color-text: var(--dark-theme-text);
-  --color-text-secondary: var(--dark-theme-text-secondary);
-  --color-link: var(--dark-theme-text);
-  --color-link-decoration: var(--faff-pink);
-  --color-code: var(--dark-theme-code);
-  --color-divider: var(--unexpected-aubergine);
-  --color-drop-shadow: var(--blacker);
-  --color-accent-muted: var(--color-accent-dark);
-  --color-text-accent: var(--color-accent);
-  color-scheme: dark;
-}
-
 * {
   box-sizing: border-box;
 }
@@ -161,7 +79,7 @@ a code {
 .navbar .nav-right {
   display: flex;
   align-items: center;
-  gap: 1em;
+  gap: var(--gap-double);
 }
 
 html.theme-dark .theme-button.-dark {
@@ -183,6 +101,7 @@ html.theme-light .theme-button.-light {
   gap: 0.25em;
   font-size: inherit;
   color: inherit;
+  cursor: pointer;
 }
 
 .theme-button svg {
@@ -286,130 +205,6 @@ html.theme-light .theme-button.-light {
 .mb-0 {
   margin-bottom: 0;
 }
-
-/*
- * CodeFlask editor themes based on the Atom One highlight.js theme used in Gleam package docs sites.
- */
-
-.codeflask .codeflask__textarea {
-  color: var(
-    --color-background
-  ); /* Prevents rendering artifacts in dark mode */
-  caret-color: var(
-    --color-text
-  ); /* Makes the text input cursor visible in dark mode */
-}
-
-/* CodeFlask light theme */
-
-html.theme-light .codeflask {
-  background: var(--color-background);
-  color: var(--color-text);
-}
-
-html.theme-light .codeflask .token.punctuation {
-  color: #383a42;
-}
-
-html.theme-light .codeflask .token.keyword {
-  color: #a626a4;
-}
-
-html.theme-light .codeflask .token.operator {
-  color: #383a42;
-}
-
-html.theme-light .codeflask .token.string {
-  color: #50a14f;
-}
-
-html.theme-light .codeflask .token.comment {
-  color: #a0a1a7;
-}
-
-html.theme-light .codeflask .token.function {
-  color: #986801;
-}
-
-html.theme-light .codeflask .token.boolean {
-  color: #986801;
-}
-
-html.theme-light .codeflask .token.number {
-  color: #986801;
-}
-
-html.theme-light .codeflask .token.selector {
-  color: #986801;
-}
-
-html.theme-light .codeflask .token.property {
-  color: #986801;
-}
-
-html.theme-light .codeflask .token.tag {
-  color: #383a42;
-}
-
-html.theme-light .codeflask .token.attr-value {
-  color: #383a42;
-}
-
-/* CodeFlask dark theme */
-
-html.theme-dark .codeflask {
-  background: var(--color-background);
-  color: #d19a66;
-}
-
-html.theme-dark .codeflask .token.punctuation {
-  color: #abb2bf;
-}
-
-html.theme-dark .codeflask .token.keyword {
-  color: #c678dd;
-}
-
-html.theme-dark .codeflask .token.operator {
-  color: #abb2bf;
-}
-
-html.theme-dark .codeflask .token.string {
-  color: #98c379;
-}
-
-html.theme-dark .codeflask .token.comment {
-  color: #5c6370;
-}
-
-html.theme-dark .codeflask .token.function {
-  color: #61aeee;
-}
-
-html.theme-dark .codeflask .token.boolean {
-  color: #61aeee;
-}
-
-html.theme-dark .codeflask .token.number {
-  color: #d19a66;
-}
-
-html.theme-dark .codeflask .token.selector {
-  color: #d19a66;
-}
-
-html.theme-dark .codeflask .token.property {
-  color: #d19a66;
-}
-
-html.theme-dark .codeflask .token.tag {
-  color: #abb2bf;
-}
-
-html.theme-dark .codeflask .token.attr-value {
-  color: #abb2bf;
-}
-
 /*
  * utility classes
  */
@@ -458,6 +253,14 @@ html.theme-dark .codeflask .token.attr-value {
   text-decoration-color: var(--color-accent);
  }
 
+ .navbar .link, .navbar.link:hover {
+  background: none;
+ }
+
+ .link.padded {
+  padding: calc(var(--gap-quarter) * 0.5) var(--gap-quarter) 0;
+ }
+
 
 /*
  * /everything page
@@ -629,7 +432,7 @@ main#everything {
   margin-right: var(--gap);
   margin-top: var(--gap-double);
   position: relative;
-  background: var(--color-background-dim);
+  background: var(--code-background);
   transition: background 150ms linear 0s, box-shadow 150ms linear 0s;
   box-shadow: var(--drop-shadow);
 }
@@ -820,13 +623,13 @@ main#everything {
 @media all and (orientation: portrait) {
   /* adjust padding and sticky element positions when a link is clicked */
   
-  #everything:has(*:target) #everything-lessons {
+  /* #everything:has(*:target) #everything-lessons {
     padding-top: var(--navbar-height);
   }
 
   #everything:has(*:target) #everything-contents {
     padding-top: calc(var(--navbar-height) + var(--gap));
-  }
+  } */
 
   
 }