style: add support for more color schemes

toggle between light & dark variants

4 files changed, 300 insertions, 0 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