Antares/com.gregkilmer.www
1
0
Fork 0
mirror of https://github.com/Patiun/com.gregkilmer.www.git synced 2026-11-08 04:08:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add light mode that follows the device setting

Browse Source 
Dark stays the default. A device set to light gets the picks from the
light motif board: the Dawn chart sky (dawn wash over faint star chart
lines, atlas marks in the hero), deep gold line seals, Midnight, violet and
gold dust, the deep gold to teal filament and the morning sky placeholder.
Large standalone seals (404, Inquiries, Inquiry sent, the blog's lead) are
gold foil in both modes.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012aSbo2D1qP8cMFQCykf7kx
This commit is contained in:
Claude
2026-10-18 18:54:56 +00:00
parent 8e5e5cbef8
commit 7aa2910b12
101 changed files with 541 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/site/src/pages/inquiries/index.astro
+15 -8
View File
@@ -43,7 +43,7 @@ const turnstileKey = turnstileSiteKey();
<div class="split">
<div class="intro">
<Seal name="transmutation" size={140} class="seal" />
<Seal name="transmutation" size={140} class="seal" foil />
<span class="eyebrow">Inquiries</span>
<h1>Let's make something</h1>
<span class="underline" aria-hidden="true"></span>
@@ -221,6 +221,13 @@ const turnstileKey = turnstileSiteKey();
height: 140px;
opacity: 0.9;
}
/* Glow is for the night sky; on Starlight the foil stands on its own. */
@media (prefers-color-scheme: light) {
.intro :global(.seal) {
opacity: 1;
filter: none;
}
}
.eyebrow {
font-size: 11px;
letter-spacing: 0.3em;
@@ -241,9 +248,9 @@ const turnstileKey = turnstileSiteKey();
margin-top: -8px;
border-radius: 2px;
background:
linear-gradient(90deg, var(--gk-gold), rgba(201, 162, 74, 0.15) 70%, transparent),
linear-gradient(90deg, var(--gk-gold), rgba(var(--gk-gold-rgb), 0.15) 70%, transparent),
radial-gradient(circle at 18% 50%, var(--gk-teal-bright) 0 2px, transparent 3px);
box-shadow: 0 0 8px rgba(201, 162, 74, 0.35);
box-shadow: 0 0 8px rgba(var(--gk-gold-rgb), 0.35);
}
.lede {
margin: 0;
@@ -278,7 +285,7 @@ const turnstileKey = turnstileSiteKey();
flex: 1 1 540px;
min-width: 0;
background: var(--gk-midnight);
border: 1px solid rgba(201, 162, 74, 0.55);
border: 1px solid rgba(var(--gk-gold-rgb), 0.55);
border-radius: var(--gk-radius);
padding: 8px;
}
@@ -333,9 +340,9 @@ const turnstileKey = turnstileSiteKey();
.tile:has(:checked) {
border-color: var(--gk-gold);
background:
repeating-linear-gradient(0deg, rgba(244, 242, 237, 0.04) 0 1px, transparent 1px 14px),
repeating-linear-gradient(90deg, rgba(244, 242, 237, 0.04) 0 1px, transparent 1px 14px),
rgba(201, 162, 74, 0.1);
repeating-linear-gradient(0deg, rgba(var(--gk-star-rgb), 0.04) 0 1px, transparent 1px 14px),
repeating-linear-gradient(90deg, rgba(var(--gk-star-rgb), 0.04) 0 1px, transparent 1px 14px),
rgba(var(--gk-gold-rgb), 0.1);
}
.tile:has(:focus-visible) {
outline: 2px solid var(--gk-gold);
@@ -442,7 +449,7 @@ const turnstileKey = turnstileSiteKey();
.err {
font-size: 12px;
font-weight: 400;
color: #f0857a;
color: var(--gk-danger);
}
.hp {
position: absolute;