diff --git a/ash.css b/ash.css index fdf6ac7..e24712a 100644 --- a/ash.css +++ b/ash.css @@ -1,69 +1,78 @@ -/* Ash palette - all colors used in the application come from this file */ +/* Generic color system - simple to customize for other themes. + Each color has light/dark variants interpolated from the base color. */ + :root { - /* Base surfaces */ - --ash-void: #100f12; - --ash-panel: #1c1b1f; - --ash-raised: #29282c; - --ash-border: #3a383d; - --ash-mid: #54514f; - --ash-ash: #6d6a63; - --ash-stone: #999187; - --ash-icon: #b0a89a; - --ash-bone: #e6dfd1; - --ash-chalk: #f3ede1; + /* Surface grays (darkest to lightest) */ + --black: #100f12; + --black-light: #161320; + --black-dark: #080710; + + --dark: #1c1b1f; + --dark-light: #232125; + --dark-dark: #14131a; + + --gray-darker: #29282c; + --gray-darker-light: #323035; + --gray-darker-dark: #1e1d22; + + --gray-dark: #3a383d; + --gray-dark-light: #47463f; + --gray-dark-dark: #2a282d; + + --gray: #54514f; + --gray-light: #605e59; + --gray-dark: #44443f; + + --gray-light: #6d6a63; + --gray-light-light: #83807d; + --gray-light-dark: #605e59; + + --stone: #999187; + --stone-light: #a59d91; + --stone-dark: #837f7d; + + --icon: #b0a89a; + --icon-light: #cac3b9; + --icon-dark: #97908a; + + --bone: #e6dfd1; + --bone-light: #ede9d9; + --bone-dark: #c8c2b6; + + --chalk: #f3ede1; + --chalk-light: #fbf7eb; + --chalk-dark: #d8d3c8; /* Accent colors */ - --ash-ember: #e0914f; - --ash-gold: #d6b46a; - --ash-blood: #c15c46; - --ash-rust: #a86a48; - --ash-rot: #b47e99; - --ash-moss: #8f9a5c; - --ash-steel: #7c9aa1; - --ash-steel-light: #a3bcc1; - --ash-violet: #a585ac; + --orange: #e0914f; + --orange-light: #e7a76f; + --orange-dark: #b5773b; - /* Light variants (interpolated 50% to next lighter) */ - --ash-void-light: #161320; - --ash-panel-light: #232125; - --ash-raised-light: #323035; - --ash-border-light: #47463f; - --ash-mid-light: #615e59; - --ash-ash-light: #83807d; - --ash-stone-light: #a59d91; - --ash-icon-light: #cac3b9; - --ash-bone-light: #ede9d9; - --ash-chalk-light: #fdfaeb; + --yellow: #d6b46a; + --yellow-light: #e3c483; + --yellow-dark: #b6914d; - /* Dark variants (interpolated 50% to next darker) */ - --ash-void-dark: #080710; - --ash-panel-dark: #16151a; - --ash-raised-dark: #232226; - --ash-border-dark: #2f2d35; - --ash-mid-dark: #44443f; - --ash-ash-dark: #605e59; - --ash-stone-dark: #837f7d; - --ash-icon-dark: #a59d91; - --ash-bone-dark: #cac3b9; - --ash-chalk-dark: #ede9d9; + --red: #c15c46; + --red-light: #d17661; + --red-dark: #9a4636; - /* Accent light variants */ - --ash-ember-light: #e7a76f; - --ash-gold-light: #e3c483; - --ash-blood-light: #d17661; - --ash-rust-light: #c0856a; - --ash-rot-light: #cf9eb2; - --ash-moss-light: #a6b27b; - --ash-steel-light-light: #c5d4d8; - --ash-violet-light: #c0a7c6; + --brown: #a86a48; + --brown-light: #c0856a; + --brown-dark: #834e2f; - /* Accent dark variants */ - --ash-ember-dark: #b5773b; - --ash-gold-dark: #b6914d; - --ash-blood-dark: #9a4636; - --ash-rust-dark: #834e2f; - --ash-rot-dark: #875a76; - --ash-moss-dark: #6b774a; - --ash-steel-dark: #5b7a83; - --ash-violet-dark: #806388; + --pink: #b47e99; + --pink-light: #cf9eb2; + --pink-dark: #875a76; + + --green: #8f9a5c; + --green-light: #a6b27b; + --green-dark: #6b774a; + + --blue: #7c9aa1; + --blue-light: #a3bcc1; + --blue-dark: #5b7a83; + + --purple: #a585ac; + --purple-light: #c0a7c6; + --purple-dark: #806388; } \ No newline at end of file diff --git a/index.html b/index.html index 2a19386..0c92948 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,7 @@ border: 1px solid rgba(230, 223, 209, 0.3); border-radius: 0.6vh; padding: 1vh 1vw; - color: var(--ash-bone); + color: var(--bone); font-family: monospace; font-size: 10px; line-height: 1.4; @@ -27,14 +27,14 @@ .debug-title { font-size: 12px; font-weight: bold; - color: var(--ash-ember); + color: var(--orange); border-bottom: 1px solid rgba(230, 223, 209, 0.3); padding-bottom: 4px; margin-bottom: 6px; } .debug-section { font-size: 10px; - color: var(--ash-icon); + color: var(--icon); margin-top: 6px; margin-bottom: 2px; } @@ -45,22 +45,22 @@ padding: 1px 0; } .debug-label { - color: var(--ash-icon); + color: var(--icon); min-width: 80px; } .libel { - color: var(--ash-icon); + color: var(--icon); min-width: 50px; } .hex { - color: var(--ash-bone); + color: var(--bone); font-size: 10px; font-family: monospace; } .swatch { width: 14px; height: 14px; - border: 1px solid var(--ash-stone); + border: 1px solid var(--stone); border-radius: 2px; } @media (orientation: portrait) and (max-width: 700px) { @@ -73,7 +73,7 @@ top: 2vh; right: 2vh; bottom: 2vh; - color: var(--ash-bone); + color: var(--bone); background: rgba(28, 27, 31, 0.7); padding: 1vh 1vw; border-radius: 0.6vh; @@ -132,14 +132,14 @@ gap: 0.6vw; } .info-label { - color: var(--ash-icon); + color: var(--icon); } .info-value { - color: var(--ash-bone); + color: var(--bone); font-weight: bold; } .info-sub { - color: var(--ash-stone); + color: var(--stone); font-size: 0.85em; margin-left: 4px; } @@ -168,7 +168,7 @@ } .weather-current-detail { font-size: 1em; - color: var(--ash-icon); + color: var(--icon); line-height: 1.3; } .weather-day { @@ -182,11 +182,11 @@ font-size: 1em; } .weather-day-name { - color: var(--ash-bone); + color: var(--bone); font-weight: bold; } .weather-day-minmax { - color: var(--ash-bone); + color: var(--bone); font-size: 0.85em; } .weather-day-slots { @@ -209,11 +209,11 @@ } .weather-slot-icon svg { width: 100%; height: 100%; } .weather-slot-label { - color: var(--ash-stone); + color: var(--stone); font-size: 0.8em; } .weather-slot-temp { - color: var(--ash-bone); + color: var(--bone); } @@ -241,102 +241,102 @@
- + - + - + - + - + - + - + - + - + - + - - - + + + - - - + + + - - - - + + + +
00:00:00
- +
Aufgang--:--
- +
Zenit Sonne--:--
- +
Untergang--:--
- +
Mondphase--
- +
Mond auf--:--
- +
Mond unter--:--
@@ -387,26 +387,26 @@ var effect = (VANTA.CLOUDS2 || VANTA.CLOUDS)({ var PASSAU_LAT = 48.5667; var PASSAU_LON = 13.4319; - // Read Ash palette colors from CSS variables - function getAshColors() { +// Read color palette from CSS variables + function getColors() { var root = getComputedStyle(document.documentElement); return { - void: root.getPropertyValue('--ash-void').trim(), - panel: root.getPropertyValue('--ash-panel').trim(), - raised: root.getPropertyValue('--ash-raised').trim(), - border: root.getPropertyValue('--ash-border').trim(), - mid: root.getPropertyValue('--ash-mid').trim(), - ash: root.getPropertyValue('--ash-ash').trim(), - stone: root.getPropertyValue('--ash-stone').trim(), - icon: root.getPropertyValue('--ash-icon').trim(), - bone: root.getPropertyValue('--ash-bone').trim(), - chalk: root.getPropertyValue('--ash-chalk').trim(), - ember: root.getPropertyValue('--ash-ember').trim(), - gold: root.getPropertyValue('--ash-gold').trim(), - blood: root.getPropertyValue('--ash-blood').trim(), - rust: root.getPropertyValue('--ash-rust').trim(), - steel: root.getPropertyValue('--ash-steel').trim(), - steelLight: root.getPropertyValue('--ash-steel-light').trim() + void: root.getPropertyValue('--black').trim(), + panel: root.getPropertyValue('--dark').trim(), + raised: root.getPropertyValue('--gray-darker').trim(), + border: root.getPropertyValue('--gray-dark').trim(), + mid: root.getPropertyValue('--gray').trim(), + ash: root.getPropertyValue('--gray-light').trim(), + stone: root.getPropertyValue('--stone').trim(), + icon: root.getPropertyValue('--icon').trim(), + bone: root.getPropertyValue('--bone').trim(), + chalk: root.getPropertyValue('--chalk').trim(), + ember: root.getPropertyValue('--orange').trim(), + gold: root.getPropertyValue('--yellow').trim(), + blood: root.getPropertyValue('--red').trim(), + rust: root.getPropertyValue('--brown').trim(), + steel: root.getPropertyValue('--blue').trim(), + steelLight: root.getPropertyValue('--blue-light').trim() }; } @@ -414,7 +414,7 @@ var effect = (VANTA.CLOUDS2 || VANTA.CLOUDS)({ return parseInt(hex.replace('#', ''), 16); } - var ASH = getAshColors(); + var ASH = getColors(); // Sun position palette (altitude-based) - all colors from Ash palette // altitude in radians: -pi/2 (below) to pi/2 (zenith) @@ -1138,45 +1138,45 @@ var weatherThemes = { }; function weatherSVG(code) { - var c = 'var(--ash-bone)'; + var c = 'var(--bone)'; switch (code) { case 0: return ''; case 1: case 2: - return ''; + return ''; case 3: - return ''; + return ''; case 45: case 48: - return ''; + return ''; case 51: case 55: - return ''; + return ''; case 53: - return ''; + return ''; case 61: case 80: - return ''; + return ''; case 63: case 81: - return ''; + return ''; case 65: case 82: - return ''; + return ''; case 71: case 73: case 75: case 77: case 85: case 86: - return ''; + return ''; case 95: case 96: case 99: - return ''; + return ''; default: - return ''; + return ''; } }