move varibales

theme/css/general.css

@@ -1,6 +1,391 @@
 /* Base styles and content styles */
 
-@import 'variables.css';
+/* variables: teemporarily moved from variables.css */
+
+/* Globals */
+
+:root {
+    --sidebar-width: 20vw;
+    --sidebar-resize-indicator-width: 8px;
+    --sidebar-resize-indicator-space: 2px;
+    --page-padding: 16px;
+    --content-max-width: 750px;
+    /* --menu-bar-height: 130px; */
+    --mono-font: "Iosevka", "Source Code Pro", Consolas, "Ubuntu Mono", Menlo,
+      "DejaVu Sans Mono", monospace, monospace;
+    --code-font-size: 14px; /* please adjust the ace font size accordingly in editor.js */
+
+    --k-black: #161512;
+    --k-darkgray: #22211f;
+    --k-orange: #f25221;
+    --k-honey: #ffd4ae;
+    --k-white: #fff5d9;
+    --k-beige: #e2dac4;
+}
+
+  /* Themes */
+
+.light {
+    --bg: var(--k-white);
+    --page-bg: var(--k-beige);
+    --bg-bg: var(--k-beige);
+    --fg: var(--k-black); 
+
+    --sidebar-bg: var(--k-honey); 
+    --sidebar-fg: var(--k-darkgray);
+    --sidebar-non-existant: var(--k-white);
+    --sidebar-active: var(--k-orange);
+    --sidebar-spacer: var(--k-beige);
+
+    --scrollbar: var(--sidebar-fg);
+
+    --icons: var(--k-darkgray);
+    --icons-hover: var(--k-black);
+
+    --links: var(--k-orange);
+
+    --inline-code-color: var(--k-darkgray);
+
+    --theme-popup-bg: var(--k-beige);
+    --theme-popup-border: var(--k-darkgray);
+    --theme-hover: var(--k-white);
+
+    --quote-bg: var(--k-white);
+    --quote-border: var(--k-beige);
+
+    --warning-border: var(--k-orange);
+
+    --table-border-color: var(--k-darkgray);
+    --table-header-bg: var(--k-white);
+    --table-alternate-bg: var(--k-white);
+
+    --searchbar-border-color: var(--k-black);
+    --searchbar-bg: var(--k-white);
+    --searchbar-fg: var(--k-darkgray);
+    --searchbar-shadow-color: transparent;
+    --searchresults-header-fg: var(--k-darkgray);
+    --searchresults-border-color: var(--k-black);
+    --searchresults-li-bg: var(--k-beige);
+    --search-mark-bg: var(--k-orange);
+
+    --color-scheme: light;
+}
+
+.dark {
+    --bg: var(--k-darkgray);
+    --page-bg: var(--k-black);
+    --bg-bg: var(--k-beige);
+    --fg: var(--k-beige);
+
+    --sidebar-bg: var(--k-black);
+    --sidebar-fg: var(--k-beige);
+    --sidebar-non-existant: var(--k-orange);
+    --sidebar-active: var(--k-orange);
+    --sidebar-spacer: var(--k-beige);
+
+    --scrollbar: var(--sidebar-fg);
+
+    --icons: var(--k-beige);
+    --icons-hover: var(--k-white);
+
+    --links: var(--k-orange);
+
+    --inline-code-color: var(--k-white);
+
+    --theme-popup-bg: var(--k-darkgray);
+    --theme-popup-border: var(--k-beige);
+    --theme-hover: var(--k-darkgray);
+
+    --quote-bg: var(--k-darkgray);
+    --quote-border: var(--k-beige);
+
+    --warning-border: var(--k-orange);
+
+    --table-border-color: var(--k-beige);
+    --table-header-bg: var(--k-darkgray);
+    --table-alternate-bg: var(--k-darkgray);
+
+    --searchbar-border-color: var(--k-beige);
+    --searchbar-bg: var(--k-darkgray);
+    --searchbar-fg: var(--k-beige);
+    --searchbar-shadow-color: transparent;
+    --searchresults-header-fg: var(--k-white);
+    --searchresults-border-color: var(--k-beige);
+    --searchresults-li-bg: var(--k-darkgray);
+    --search-mark-bg: var(--k-orange);
+
+    --color-scheme: dark;
+}
+
+.wynn {
+    --bg: #441fa5; /* Deep violet */
+    --fg: #f6f6f2; /* Off-white */
+
+    --sidebar-bg: #9473ba; /* Muted purple */
+    --sidebar-fg: #f6f6f2; /* Off-white for clear contrast */
+    --sidebar-non-existant: #bd766e; /* Warm taupe */
+    --sidebar-active: #890002; /* Dark red */
+    --sidebar-spacer: #7e99ff; /* Soft blue */
+
+    --scrollbar: var(--sidebar-fg);
+
+    --icons: #ffc089; /* Light peach */
+    --icons-hover: #db84ad; /* Soft pink */
+
+    --links: #ffcb69; /* Bright nectar gold */
+
+    --inline-code-color: #f6f6f2; /* Off-white */
+
+    --theme-popup-bg: #2b3a42; /* Dark slate */
+    --theme-popup-border: #354f58; /* Deep forest green */
+    --theme-hover: #5a4d8e; /* Lighter violet for a subtle yet harmonious contrast */
+
+    --quote-bg: #441fa5; /* Deep violet */
+    --quote-border: #9473ba; /* Muted purple */
+
+    --warning-border: #f07327; /* Bright orange */
+
+    --table-border-color: #bd766e; /* Warm taupe */
+    --table-header-bg: #7e99ff; /* Soft blue */
+    --table-alternate-bg: #9473ba; /* Muted purple */
+
+    --searchbar-border-color: #f07327; /* Bright orange */
+    --searchbar-bg: #ffc089; /* Light peach */
+    --searchbar-fg: #f6f6f2; /* Off-white */
+    --searchbar-shadow-color: #db84ad; /* Soft pink */
+    --searchresults-header-fg: #bd766e; /* Warm taupe */
+    --searchresults-border-color: #09090a; /* Muted purple */
+    --searchresults-li-bg: #441fa5; /* Deep violet */
+    --search-mark-bg: #890002; /* Dark red */
+
+    --color-scheme: dark;
+}
+
+.gnucci {
+    --bg: #2a1b17; /* Deep espresso */
+    --fg: #b7c6cc; /* Soft slate gray */
+
+    --sidebar-bg: #462a15; /* Dark walnut */
+    --sidebar-fg: #c78919; /* Burnt orange */
+    --sidebar-non-existant: #ae9a89; /* Muted taupe */
+    --sidebar-active: #b7c6cc; /* Soft slate gray for better contrast */
+    --sidebar-spacer: #31667a; /* Ocean teal */
+
+    --scrollbar: var(--sidebar-fg);
+
+    --icons: #c06346; /* Rusty red */
+    --icons-hover: #b7c6cc; /* Soft slate gray */
+
+    --links: #ffcb69;
+
+    --inline-code-color: #c78919; /* Burnt orange */
+
+    --theme-popup-bg: #19281f; /* Dark pine green */
+    --theme-popup-border: #31667a; /* Ocean teal */
+    --theme-hover: #2a1b17; /* Deep espresso */
+
+    --quote-bg: #462a15; /* Dark walnut */
+    --quote-border: #672c2c; /* Deep burgundy */
+
+    --warning-border: #c06346; /* Rusty red */
+
+    --table-border-color: #ae9a89; /* Muted taupe */
+    --table-header-bg: #31667a; /* Ocean teal */
+    --table-alternate-bg: #19281f; /* Dark pine green */
+
+    --searchbar-border-color: #c78919; /* Burnt orange */
+    --searchbar-bg: #ae9a89; /* Muted taupe */
+    --searchbar-fg: #b7c6cc; /* Soft slate gray */
+    --searchbar-shadow-color: #672c2c; /* Deep burgundy */
+    --searchresults-header-fg: #c06346; /* Rusty red */
+    --searchresults-border-color: #044241; /* Dark forest green */
+    --searchresults-li-bg: #462a15; /* Dark walnut */
+    --search-mark-bg: #c78919; /* Burnt orange */
+
+    --color-scheme: dark;
+}
+
+.harmony {
+    --bg: #f4f9f4; /* Light mint green */
+    --fg: #5d4037; /* Rich brown */
+
+    --sidebar-bg: #fff3e0; /* Soft peach */
+    --sidebar-fg: #6d4c41; /* Darker brown */
+    --sidebar-non-existant: #cfd8dc; /* Light grey */
+    --sidebar-active: #ffb74d; /* Warm orange */
+    --sidebar-spacer: #e0f2f1; /* Pale turquoise */
+
+    --scrollbar: var(--sidebar-fg);
+
+    --icons: #8d6e63; /* Earthy rose */
+    --icons-hover: #ffccbc; /* Light coral */
+
+    --links: #007bff; /* Bright blue */
+
+    --inline-code-color: #d35400; /* Pumpkin orange */
+
+    --theme-popup-bg: #eceff1; /* Very light grey */
+    --theme-popup-border: #b0bec5; /* Cool grey */
+    --theme-hover: #f8fdfa; /* Very light mint */
+
+    --quote-bg: #e8f5e9; /* Pale green */
+    --quote-border: #a5d6a7; /* Medium green */
+
+    --warning-border: #ff7043; /* Bright coral */
+
+    --table-border-color: #b0bec5; /* Cool grey */
+    --table-header-bg: #eceff1; /* Very light grey */
+    --table-alternate-bg: #e8f5e9; /* Pale green */
+
+    --searchbar-border-color: #8d6e63; /* Earthy rose */
+    --searchbar-bg: #ffccbc; /* Light coral */
+    --searchbar-fg: #5d4037; /* Rich brown */
+    --searchbar-shadow-color: #b0bec5; /* Cool grey */
+    --searchresults-header-fg: #6d4c41; /* Darker brown */
+    --searchresults-border-color: #cfd8dc; /* Light grey */
+    --searchresults-li-bg: #fff3e0; /* Soft peach */
+    --search-mark-bg: #ffb74d; /* Warm orange */
+
+    --color-scheme: light;
+}
+
+.classic-dark {
+    --bg: #0a2239; /* Dark navy blue, instead of Soft sky blue */
+    --fg: #cad2d3; /* Soft mist grey, contrasting Deep ocean blue */
+
+    --sidebar-bg: #345b29; /* Deep forest green, darker than Light leaf green */
+    --sidebar-fg: #d4e2d4; /* Pale mint green, contrast for Dark green */
+    --sidebar-non-existant: #5c6975; /* Darker shade of Muted stone grey */
+    --sidebar-active: #bf2f2f; /* Darker shade of Vibrant flower red */
+    --sidebar-spacer: #434343; /* Dark grey, instead of Very light grey */
+
+    --scrollbar: var(--sidebar-fg);
+
+    --icons: #563f31; /* Darker Earthy brown */
+    --icons-hover: #b38600; /* Darker, more subdued Nectar gold */
+
+    --links: #b34700; /* Darker, more subdued Bright coral */
+
+    --inline-code-color: #a04000; /* Darker, Burnt orange, instead of Pumpkin orange */
+
+    --theme-popup-bg: #404040; /* Dark grey, instead of Light grey */
+    --theme-popup-border: #5a5a5a; /* Darker Medium grey */
+    --theme-hover: #4f4f4f; /* Darker Soft grey */
+
+    --quote-bg: #3a3a3a; /* Dark grey, instead of Very light grey */
+    --quote-border: #525252; /* Darker Light grey */
+
+    --warning-border: #994515; /* Darker, earthier shade of Pumpkin orange */
+
+    --table-border-color: #525252; /* Darker Light grey */
+    --table-header-bg: #404040; /* Dark grey, instead of Light grey */
+    --table-alternate-bg: #3a3a3a; /* Dark grey, instead of Very light grey */
+
+    --searchbar-border-color: #4f4f4f; /* Dark grey, instead of Medium grey */
+    --searchbar-bg: #363636; /* Dark grey, instead of Soft grey */
+    --searchbar-fg: #d4e2d4; /* Pale mint green, contrasting Deep ocean blue */
+    --searchbar-shadow-color: #5a5a5a; /* Darker Medium grey */
+    --searchresults-header-fg: #d4e2d4; /* Pale mint green, contrast for Dark green */
+    --searchresults-border-color: #525252; /* Darker Light grey */
+    --searchresults-li-bg: #404040; /* Dark grey, instead of Light grey */
+    --search-mark-bg: #b38600; /* Darker, more subdued Nectar gold */
+
+    --color-scheme: dark;
+}
+
+.meadow {
+    --bg: #8db495; /* Sage green */
+    --fg: #bf4315; /* Terracotta */
+
+    --sidebar-bg: #9b72aa; /* Soft purple */
+    --sidebar-fg: #4a235a; /* Darker purple */
+    --sidebar-non-existant: #a8b88d; /* Olive */
+    --sidebar-active: #ecb910; /* Sunflower yellow */
+    --sidebar-spacer: #e8d58e; /* Beige */
+
+    --scrollbar: var(--sidebar-fg);
+
+    --icons: #31667a; /* Deep sea teal */
+    --icons-hover: #d78d27; /* Amber */
+
+    --links: #31667a; /* Deep sea teal */
+
+    --inline-code-color: #d78d27; /* Amber */
+
+    --theme-popup-bg: #98a944; /* Olive green */
+    --theme-popup-border: #70887c; /* Sea green */
+    --theme-hover: #a8b88d; /* Olive */
+
+    --quote-bg: #8db495; /* Sage green */
+    --quote-border: #70887c; /* Sea green */
+
+    --warning-border: #c83237; /* Crimson */
+
+    --table-border-color: #a8b88d; /* Olive */
+    --table-header-bg: #98a944; /* Olive green */
+    --table-alternate-bg: #e8d58e; /* Beige */
+
+    --searchbar-border-color: #bf4315; /* Terracotta */
+    --searchbar-bg: #e8d58e; /* Beige */
+    --searchbar-fg: #bf4315; /* Terracotta */
+    --searchbar-shadow-color: #31667a; /* Deep sea teal */
+    --searchresults-header-fg: #70887c; /* Sea green */
+    --searchresults-border-color: #a8b88d; /* Olive */
+    --searchresults-li-bg: #8db495; /* Sage green */
+    --search-mark-bg: #d78d27; /* Amber */
+
+    --color-scheme: dark;
+}
+
+@media (prefers-color-scheme: dark) {
+    .light.no-js {
+        --bg: hsl(200, 7%, 8%);
+        --fg: #98a3ad;
+
+        --sidebar-bg: #292c2f;
+        --sidebar-fg: #a1adb8;
+        --sidebar-non-existant: #505254;
+        --sidebar-active: #3473ad;
+        --sidebar-spacer: #393939;
+
+        --scrollbar: var(--sidebar-fg);
+
+        --icons: #43484d;
+        --icons-hover: #b3c0cc;
+
+        --links: #2b79a2;
+
+        --inline-code-color: #c5c8c6;
+
+        --theme-popup-bg: #141617;
+        --theme-popup-border: #43484d;
+        --theme-hover: #1f2124;
+
+        --quote-bg: hsl(234, 21%, 18%);
+        --quote-border: hsl(234, 21%, 23%);
+
+        --warning-border: #ff8e00;
+
+        --table-border-color: hsl(200, 7%, 13%);
+        --table-header-bg: hsl(200, 7%, 28%);
+        --table-alternate-bg: hsl(200, 7%, 11%);
+
+        --searchbar-border-color: #aaa;
+        --searchbar-bg: #b7b7b7;
+        --searchbar-fg: #000;
+        --searchbar-shadow-color: #aaa;
+        --searchresults-header-fg: #666;
+        --searchresults-border-color: #98a3ad;
+        --searchresults-li-bg: #2b2b2f;
+        --search-mark-bg: #355c7d;
+    }
+}
+
+@media only screen and (max-width: 600px) {
+    html {
+        --sidebar-width: 50vw !important;
+    }
+}
 
 :root {
     /* Browser default font-size is 16px, this way 1 rem = 10px */