football2801
3bd0b9a5a1
CI / test (push) Has been cancelled
Iteration after the atmospheric-redesign checkpoint. The earlier A/B/C/D favicon set was scrapped — generic invented icons (roof, frame+horizon, skyline, wax seal) that didn't tie to the brand's own glyph. New direction: the yellow V from the wordmark, presented four ways. V-viewfinder (a V cut out of navy showing the harbor photo inside) is the chosen path; refinement 3b crops to Camogli's coloured row-houses for a more brand-specific small size reading. Also adds three logo-placement mockups (PWA cold-launch splash, library hero with the full wordmark logo, settings → about page) to give the wordmark room to live beyond emails and login badges. Self-contained: assets/ and spa/ copied into the design folder so the mockups render without depending on neighbouring directories. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
20 lines
1.1 KiB
HTML
20 lines
1.1 KiB
HTML
<div class="theme-switcher" role="region" aria-label="Theme switcher (mockup only)">
|
|
<span class="theme-switcher__label">User-pref theme</span>
|
|
<div class="theme-switcher__chips">
|
|
<button class="theme-switcher__chip active" data-theme="warm-craft" title="warm-craft"></button>
|
|
<button class="theme-switcher__chip" data-theme="ocean-dusk" title="ocean-dusk"></button>
|
|
<button class="theme-switcher__chip" data-theme="sage-cream" title="sage-cream"></button>
|
|
<button class="theme-switcher__chip" data-theme="playful-pop" title="playful-pop"></button>
|
|
<button class="theme-switcher__chip" data-theme="dusty-mauve" title="dusty-mauve"></button>
|
|
<button class="theme-switcher__chip" data-theme="honey-slate" title="honey-slate"></button>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
document.querySelectorAll('.theme-switcher__chip').forEach(chip => {
|
|
chip.addEventListener('click', () => {
|
|
document.documentElement.setAttribute('data-theme', chip.dataset.theme);
|
|
document.querySelectorAll('.theme-switcher__chip').forEach(c => c.classList.toggle('active', c === chip));
|
|
});
|
|
});
|
|
</script>
|