Rename to generic color names (black, gray, orange, etc.) instead of Ash-specific names
This commit is contained in:
Richard Zink committed
1 parent
b140a8b27b
commit
302291dd62
2 files changed
+143
-134
No files matched your search
@@ -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;
|
||||
}
|
||||
+73
-73
@@ -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);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -241,102 +241,102 @@
|
||||
<div id="info-panel">
|
||||
<svg id="analog-clock" viewBox="0 0 280 280">
|
||||
<!-- Clock face -->
|
||||
<circle cx="140" cy="140" r="135" fill="rgba(28,27,31,0.3)" stroke="var(--ash-bone)" stroke-width="2"/>
|
||||
<circle cx="140" cy="140" r="135" fill="rgba(28,27,31,0.3)" stroke="var(--bone)" stroke-width="2"/>
|
||||
|
||||
<!-- Hour marks -->
|
||||
<g id="hour-marks"></g>
|
||||
|
||||
<!-- Sun orbit (radius 65) -->
|
||||
<circle cx="140" cy="140" r="65" stroke="var(--ash-border)" stroke-width="1" fill="none" stroke-dasharray="2,3" opacity="0.6"/>
|
||||
<circle cx="140" cy="140" r="65" stroke="var(--gray-dark)" stroke-width="1" fill="none" stroke-dasharray="2,3" opacity="0.6"/>
|
||||
|
||||
<!-- Moon orbit (radius 88) -->
|
||||
<circle cx="140" cy="140" r="88" stroke="var(--ash-border)" stroke-width="1" fill="none" stroke-dasharray="2,3" opacity="0.6"/>
|
||||
<circle cx="140" cy="140" r="88" stroke="var(--gray-dark)" stroke-width="1" fill="none" stroke-dasharray="2,3" opacity="0.6"/>
|
||||
|
||||
<!-- Sun arc (from sunrise to sunset) -->
|
||||
<path id="sun-arc" d="" stroke="var(--ash-ember)" stroke-width="2.5" fill="none"/>
|
||||
<path id="sun-arc" d="" stroke="var(--orange)" stroke-width="2.5" fill="none"/>
|
||||
|
||||
<!-- Moon arc (from moonrise to moonset) -->
|
||||
<path id="moon-arc" d="" stroke="var(--ash-icon)" stroke-width="2.5" fill="none"/>
|
||||
<path id="moon-arc" d="" stroke="var(--icon)" stroke-width="2.5" fill="none"/>
|
||||
|
||||
<!-- Sun rise arrow (pointing in / up at sunrise) -->
|
||||
<g id="sun-rise-arrow" fill="var(--ash-ember)">
|
||||
<g id="sun-rise-arrow" fill="var(--orange)">
|
||||
<polygon points="0,-9 8,0 -9,0"/>
|
||||
</g>
|
||||
|
||||
<!-- Sun set arrow (pointing out / down at sunset) -->
|
||||
<g id="sun-set-arrow" fill="var(--ash-ember)">
|
||||
<g id="sun-set-arrow" fill="var(--orange)">
|
||||
<polygon points="0,9 8,0 -9,0"/>
|
||||
</g>
|
||||
|
||||
<!-- Moon rise arrow -->
|
||||
<g id="moon-rise-arrow" fill="var(--ash-icon)">
|
||||
<g id="moon-rise-arrow" fill="var(--icon)">
|
||||
<polygon points="0,-9 8,0 -9,0"/>
|
||||
</g>
|
||||
|
||||
<!-- Moon set arrow -->
|
||||
<g id="moon-set-arrow" fill="var(--ash-icon)">
|
||||
<g id="moon-set-arrow" fill="var(--icon)">
|
||||
<polygon points="0,9 8,0 -9,0"/>
|
||||
</g>
|
||||
|
||||
<!-- Sun zenith marker (diamond shape, small) -->
|
||||
<g id="sun-zenith-marker" fill="var(--ash-ember)">
|
||||
<g id="sun-zenith-marker" fill="var(--orange)">
|
||||
<polygon points="0,-5 5,0 0,5 -5,0"/>
|
||||
</g>
|
||||
|
||||
<!-- Moon zenith marker removed -->
|
||||
|
||||
<!-- Sun position (rendered after arcs/arrows so it's visible) -->
|
||||
<circle id="rpg-sun-glow" cx="140" cy="140" r="14" fill="var(--ash-ember)" opacity="0.4"/>
|
||||
<circle id="rpg-sun" cx="140" cy="140" r="8" fill="var(--ash-ember)"/>
|
||||
<circle id="rpg-sun-core" cx="140" cy="140" r="3.5" fill="var(--ash-chalk)"/>
|
||||
<circle id="rpg-sun-glow" cx="140" cy="140" r="14" fill="var(--orange)" opacity="0.4"/>
|
||||
<circle id="rpg-sun" cx="140" cy="140" r="8" fill="var(--orange)"/>
|
||||
<circle id="rpg-sun-core" cx="140" cy="140" r="3.5" fill="var(--chalk)"/>
|
||||
|
||||
<!-- Moon position (with phase) -->
|
||||
<g id="rpg-moon">
|
||||
<circle id="rpg-moon-bg" cx="0" cy="0" r="10" fill="var(--ash-panel)" stroke="var(--ash-stone)" stroke-width="1"/>
|
||||
<path id="rpg-moon-lit" d="" fill="var(--ash-bone)"/>
|
||||
<path id="rpg-moon-dark" d="" fill="var(--ash-mid)"/>
|
||||
<circle id="rpg-moon-bg" cx="0" cy="0" r="10" fill="var(--dark)" stroke="var(--stone)" stroke-width="1"/>
|
||||
<path id="rpg-moon-lit" d="" fill="var(--bone)"/>
|
||||
<path id="rpg-moon-dark" d="" fill="var(--gray)"/>
|
||||
</g>
|
||||
|
||||
<!-- Clock hands (on top of everything) -->
|
||||
<line id="hour-hand" x1="140" y1="140" x2="140" y2="49" stroke="var(--ash-bone)" stroke-width="7" stroke-linecap="round" opacity="0.7"/>
|
||||
<line id="minute-hand" x1="140" y1="140" x2="140" y2="28" stroke="var(--ash-bone)" stroke-width="5" stroke-linecap="round" opacity="0.7"/>
|
||||
<line id="second-hand" x1="140" y1="140" x2="140" y2="20" stroke="var(--ash-blood)" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<circle cx="140" cy="140" r="5" fill="var(--ash-blood)"/>
|
||||
<line id="hour-hand" x1="140" y1="140" x2="140" y2="49" stroke="var(--bone)" stroke-width="7" stroke-linecap="round" opacity="0.7"/>
|
||||
<line id="minute-hand" x1="140" y1="140" x2="140" y2="28" stroke="var(--bone)" stroke-width="5" stroke-linecap="round" opacity="0.7"/>
|
||||
<line id="second-hand" x1="140" y1="140" x2="140" y2="20" stroke="var(--red)" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<circle cx="140" cy="140" r="5" fill="var(--red)"/>
|
||||
</svg>
|
||||
<div id="digital-clock">00:00:00</div>
|
||||
<div class="info-row">
|
||||
<div class="info-icon">
|
||||
<svg viewBox="0 0 24 24" fill="var(--ash-ember)"><circle cx="12" cy="12" r="4"/><g stroke="var(--ash-ember)" stroke-width="2" stroke-linecap="round"><line x1="12" y1="2" x2="12" y2="5"/><line x1="12" y1="19" x2="12" y2="22"/><line x1="2" y1="12" x2="5" y2="12"/><line x1="19" y1="12" x2="22" y2="12"/><line x1="4.9" y1="4.9" x2="6.9" y2="6.9"/><line x1="17.1" y1="17.1" x2="19.1" y2="19.1"/><line x1="4.9" y1="19.1" x2="6.9" y2="17.1"/><line x1="17.1" y1="6.9" x2="19.1" y2="4.9"/></g></svg>
|
||||
<svg viewBox="0 0 24 24" fill="var(--orange)"><circle cx="12" cy="12" r="4"/><g stroke="var(--orange)" stroke-width="2" stroke-linecap="round"><line x1="12" y1="2" x2="12" y2="5"/><line x1="12" y1="19" x2="12" y2="22"/><line x1="2" y1="12" x2="5" y2="12"/><line x1="19" y1="12" x2="22" y2="12"/><line x1="4.9" y1="4.9" x2="6.9" y2="6.9"/><line x1="17.1" y1="17.1" x2="19.1" y2="19.1"/><line x1="4.9" y1="19.1" x2="6.9" y2="17.1"/><line x1="17.1" y1="6.9" x2="19.1" y2="4.9"/></g></svg>
|
||||
</div>
|
||||
<div class="info-content"><span class="info-label">Aufgang</span><span><span class="info-value" id="sunrise-value">--:--</span><span class="info-sub" id="sunrise-when"></span></span></div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-icon">
|
||||
<svg viewBox="0 0 24 24" fill="var(--ash-ember)"><circle cx="12" cy="12" r="4"/><line x1="12" y1="12" x2="12" y2="3" stroke="var(--ash-ember)" stroke-width="2"/></svg>
|
||||
<svg viewBox="0 0 24 24" fill="var(--orange)"><circle cx="12" cy="12" r="4"/><line x1="12" y1="12" x2="12" y2="3" stroke="var(--orange)" stroke-width="2"/></svg>
|
||||
</div>
|
||||
<div class="info-content"><span class="info-label">Zenit Sonne</span><span><span class="info-value" id="sun-zenith-value">--:--</span><span class="info-sub" id="sun-zenith-when"></span></span></div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="var(--ash-ember)" stroke-width="2"><path d="M3 12 A9 9 0 0 1 21 12 Z"/></svg>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="var(--orange)" stroke-width="2"><path d="M3 12 A9 9 0 0 1 21 12 Z"/></svg>
|
||||
</div>
|
||||
<div class="info-content"><span class="info-label">Untergang</span><span><span class="info-value" id="sunset-value">--:--</span><span class="info-sub" id="sunset-when"></span></span></div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-icon">
|
||||
<svg id="moon-phase-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="var(--ash-panel)"/></svg>
|
||||
<svg id="moon-phase-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="var(--dark)"/></svg>
|
||||
</div>
|
||||
<div class="info-content"><span class="info-label">Mondphase</span><span class="info-value" id="moon-phase-text">--</span></div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-icon">
|
||||
<svg viewBox="0 0 24 24" fill="var(--ash-icon)"><path d="M12 2 a10 10 0 1 0 0 20 a8 8 0 1 1 0 -16 a6 6 0 1 1 0 8"/></svg>
|
||||
<svg viewBox="0 0 24 24" fill="var(--icon)"><path d="M12 2 a10 10 0 1 0 0 20 a8 8 0 1 1 0 -16 a6 6 0 1 1 0 8"/></svg>
|
||||
</div>
|
||||
<div class="info-content"><span class="info-label">Mond auf</span><span><span class="info-value" id="moonrise-value">--:--</span><span class="info-sub" id="moonrise-when"></span></span></div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="var(--ash-icon)" stroke-width="2"><path d="M3 12 A9 9 0 0 1 21 22 Z"/></svg>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="var(--icon)" stroke-width="2"><path d="M3 12 A9 9 0 0 1 21 22 Z"/></svg>
|
||||
</div>
|
||||
<div class="info-content"><span class="info-label">Mond unter</span><span><span class="info-value" id="moonset-value">--:--</span><span class="info-sub" id="moonset-when"></span></span></div>
|
||||
</div>
|
||||
@@ -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 '<svg viewBox="0 0 24 24" fill="' + c + '"><circle cx="12" cy="12" r="5"/><g stroke="' + c + '" stroke-width="2" stroke-linecap="round"><line x1="12" y1="2" x2="12" y2="4"/><line x1="12" y1="20" x2="12" y2="22"/><line x1="2" y1="12" x2="4" y2="12"/><line x1="20" y1="12" x2="22" y2="12"/><line x1="4.9" y1="4.9" x2="6.3" y2="6.3"/><line x1="17.7" y1="17.7" x2="19.1" y2="19.1"/><line x1="4.9" y1="19.1" x2="6.3" y2="17.7"/><line x1="17.7" y1="6.3" x2="19.1" y2="4.9"/></g></svg>';
|
||||
case 1:
|
||||
case 2:
|
||||
return '<svg viewBox="0 0 24 24" fill="none" stroke="' + c + '" stroke-width="2"><circle cx="8" cy="8" r="3" fill="' + c + '"/><line x1="8" y1="2" x2="8" y2="3"/><line x1="2" y1="8" x2="3" y2="8"/><line x1="3.5" y1="3.5" x2="4.2" y2="4.2"/><line x1="12.5" y1="3.5" x2="11.8" y2="4.2"/><path d="M10 14 a4 4 0 0 1 4 -4 a4 4 0 0 1 4 4 a3 3 0 0 1 0 6 h-8 a3 3 0 0 1 0 -6 z" fill="var(--ash-stone)" stroke="none"/></svg>';
|
||||
return '<svg viewBox="0 0 24 24" fill="none" stroke="' + c + '" stroke-width="2"><circle cx="8" cy="8" r="3" fill="' + c + '"/><line x1="8" y1="2" x2="8" y2="3"/><line x1="2" y1="8" x2="3" y2="8"/><line x1="3.5" y1="3.5" x2="4.2" y2="4.2"/><line x1="12.5" y1="3.5" x2="11.8" y2="4.2"/><path d="M10 14 a4 4 0 0 1 4 -4 a4 4 0 0 1 4 4 a3 3 0 0 1 0 6 h-8 a3 3 0 0 1 0 -6 z" fill="var(--stone)" stroke="none"/></svg>';
|
||||
case 3:
|
||||
return '<svg viewBox="0 0 24 24" fill="var(--ash-stone)"><path d="M6 18 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/></svg>';
|
||||
return '<svg viewBox="0 0 24 24" fill="var(--stone)"><path d="M6 18 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/></svg>';
|
||||
case 45:
|
||||
case 48:
|
||||
return '<svg viewBox="0 0 24 24" fill="none" stroke="' + c + '" stroke-width="2"><path d="M6 18 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z" fill="var(--ash-stone)" stroke="' + c + '"/><line x1="8" y1="20" x2="8" y2="22"/><line x1="12" y1="20" x2="12" y2="22"/><line x1="16" y1="20" x2="16" y2="22"/></svg>';
|
||||
return '<svg viewBox="0 0 24 24" fill="none" stroke="' + c + '" stroke-width="2"><path d="M6 18 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z" fill="var(--stone)" stroke="' + c + '"/><line x1="8" y1="20" x2="8" y2="22"/><line x1="12" y1="20" x2="12" y2="22"/><line x1="16" y1="20" x2="16" y2="22"/></svg>';
|
||||
case 51:
|
||||
case 55:
|
||||
return '<svg viewBox="0 0 24 24" fill="var(--ash-stone)"><path d="M6 14 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="var(--ash-steel)" stroke-width="1.5" stroke-linecap="round"><line x1="8" y1="17" x2="7" y2="20"/><line x1="13" y1="17" x2="12" y2="20"/><line x1="17" y1="17" x2="16" y2="20"/></g></svg>';
|
||||
return '<svg viewBox="0 0 24 24" fill="var(--stone)"><path d="M6 14 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="var(--blue)" stroke-width="1.5" stroke-linecap="round"><line x1="8" y1="17" x2="7" y2="20"/><line x1="13" y1="17" x2="12" y2="20"/><line x1="17" y1="17" x2="16" y2="20"/></g></svg>';
|
||||
case 53:
|
||||
return '<svg viewBox="0 0 24 24" fill="var(--ash-stone)"><path d="M6 14 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="var(--ash-steel)" stroke-width="1.5" stroke-linecap="round"><line x1="9" y1="16" x2="8" y2="20"/><line x1="13" y1="16" x2="12" y2="20"/></g></svg>';
|
||||
return '<svg viewBox="0 0 24 24" fill="var(--stone)"><path d="M6 14 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="var(--blue)" stroke-width="1.5" stroke-linecap="round"><line x1="9" y1="16" x2="8" y2="20"/><line x1="13" y1="16" x2="12" y2="20"/></g></svg>';
|
||||
case 61:
|
||||
case 80:
|
||||
return '<svg viewBox="0 0 24 24" fill="var(--ash-stone)"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="var(--ash-steel)" stroke-width="1.5" stroke-linecap="round"><line x1="8" y1="16" x2="7" y2="21"/><line x1="13" y1="16" x2="12" y2="21"/><line x1="17" y1="16" x2="16" y2="21"/></g></svg>';
|
||||
return '<svg viewBox="0 0 24 24" fill="var(--stone)"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="var(--blue)" stroke-width="1.5" stroke-linecap="round"><line x1="8" y1="16" x2="7" y2="21"/><line x1="13" y1="16" x2="12" y2="21"/><line x1="17" y1="16" x2="16" y2="21"/></g></svg>';
|
||||
case 63:
|
||||
case 81:
|
||||
return '<svg viewBox="0 0 24 24" fill="var(--ash-stone)"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="var(--ash-steel)" stroke-width="1.5" stroke-linecap="round"><line x1="9" y1="15" x2="7" y2="21"/><line x1="13" y1="15" x2="11" y2="21"/><line x1="17" y1="15" x2="15" y2="21"/></g></svg>';
|
||||
return '<svg viewBox="0 0 24 24" fill="var(--stone)"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="var(--blue)" stroke-width="1.5" stroke-linecap="round"><line x1="9" y1="15" x2="7" y2="21"/><line x1="13" y1="15" x2="11" y2="21"/><line x1="17" y1="15" x2="15" y2="21"/></g></svg>';
|
||||
case 65:
|
||||
case 82:
|
||||
return '<svg viewBox="0 0 24 24" fill="var(--ash-stone)"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="var(--ash-steel)" stroke-width="1.5" stroke-linecap="round"><line x1="7" y1="15" x2="4" y2="22"/><line x1="11" y1="15" x2="8" y2="22"/><line x1="15" y1="15" x2="12" y2="22"/><line x1="19" y1="15" x2="16" y2="22"/></g></svg>';
|
||||
return '<svg viewBox="0 0 24 24" fill="var(--stone)"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g stroke="var(--blue)" stroke-width="1.5" stroke-linecap="round"><line x1="7" y1="15" x2="4" y2="22"/><line x1="11" y1="15" x2="8" y2="22"/><line x1="15" y1="15" x2="12" y2="22"/><line x1="19" y1="15" x2="16" y2="22"/></g></svg>';
|
||||
case 71:
|
||||
case 73:
|
||||
case 75:
|
||||
case 77:
|
||||
case 85:
|
||||
case 86:
|
||||
return '<svg viewBox="0 0 24 24" fill="var(--ash-stone)"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g fill="' + c + '"><circle cx="8" cy="18" r="1.5"/><circle cx="13" cy="19" r="1.5"/><circle cx="17" cy="18" r="1.5"/></g></svg>';
|
||||
return '<svg viewBox="0 0 24 24" fill="var(--stone)"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><g fill="' + c + '"><circle cx="8" cy="18" r="1.5"/><circle cx="13" cy="19" r="1.5"/><circle cx="17" cy="18" r="1.5"/></g></svg>';
|
||||
case 95:
|
||||
case 96:
|
||||
case 99:
|
||||
return '<svg viewBox="0 0 24 24" fill="var(--ash-stone)"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><path d="M12 2 L8 11 L12 11 L10 18 L16 9 L12 9 Z" fill="var(--ash-gold)"/></svg>';
|
||||
return '<svg viewBox="0 0 24 24" fill="var(--stone)"><path d="M6 13 a4 4 0 0 1 -2 -7 a5 5 0 0 1 9 -3 a4 4 0 0 1 7 1 a3 3 0 0 1 0 6 h-14 z"/><path d="M12 2 L8 11 L12 11 L10 18 L16 9 L12 9 Z" fill="var(--yellow)"/></svg>';
|
||||
default:
|
||||
return '<svg viewBox="0 0 24 24" fill="var(--ash-stone)"><circle cx="12" cy="12" r="6"/></svg>';
|
||||
return '<svg viewBox="0 0 24 24" fill="var(--stone)"><circle cx="12" cy="12" r="6"/></svg>';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user