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/components/blog/FactsStrip.astro
+1 -1
View File
@@ -71,7 +71,7 @@ const facts = d.facts ?? [];
flex-direction: column;
gap: 4px;
padding-left: 14px;
border-left: 1px solid rgba(201, 162, 74, 0.45);
border-left: 1px solid rgba(var(--gk-gold-rgb), 0.45);
}
dt {
font-size: 11px;
services/site/src/components/blog/LeadPost.astro
+22 -14
View File
@@ -6,6 +6,7 @@
*/
import Button from "@gk/ui/components/Button.astro";
import GiltCorners from "@gk/ui/components/GiltCorners.astro";
import Motif from "@gk/ui/components/Motif.astro";
import Seal from "@gk/ui/components/Seal.astro";
import Star from "@gk/ui/components/Star.astro";
import StarPath from "@gk/ui/components/StarPath.astro";
@@ -39,10 +40,10 @@ const now = nowStatuses(s, post);
</>
) : (
<>
<img src={filamentBanner} alt="" aria-hidden="true" class="banner" />
<Motif src={filamentBanner} alt="" aria-hidden="true" class="banner" />
<StarPath strength="wild" steps={7} centerStar={false} class="path" seed={post.slug} />
<TickRing size={196} class="ring">
<Seal name="transmutation" size={150} class="seal" />
<Seal name="transmutation" size={150} class="seal" foil />
</TickRing>
</>
)
@@ -75,11 +76,11 @@ const now = nowStatuses(s, post);
flex-wrap: wrap;
overflow: hidden;
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);
box-shadow:
inset 0 0 0 4px var(--gk-midnight),
inset 0 0 0 5px rgba(201, 162, 74, 0.35);
inset 0 0 0 5px rgba(var(--gk-gold-rgb), 0.35);
}
.art {
flex: 1 1 440px;
@@ -90,10 +91,10 @@ const now = nowStatuses(s, post);
align-items: center;
justify-content: center;
background:
radial-gradient(ellipse 70% 90% at 100% 0%, rgba(106, 47, 224, 0.28), transparent 70%),
radial-gradient(ellipse 55% 80% at 0% 70%, rgba(20, 163, 154, 0.18), transparent 70%),
repeating-linear-gradient(0deg, rgba(244, 242, 237, 0.035) 0 1px, transparent 1px 40px),
repeating-linear-gradient(90deg, rgba(244, 242, 237, 0.035) 0 1px, transparent 1px 40px),
radial-gradient(ellipse 70% 90% at 100% 0%, rgba(var(--gk-violet-rgb), calc(0.28 * var(--gk-wash))), transparent 70%),
radial-gradient(ellipse 55% 80% at 0% 70%, rgba(var(--gk-teal-deep-rgb), calc(0.18 * var(--gk-wash))), transparent 70%),
repeating-linear-gradient(0deg, rgba(var(--gk-star-rgb), 0.035) 0 1px, transparent 1px 40px),
repeating-linear-gradient(90deg, rgba(var(--gk-star-rgb), 0.035) 0 1px, transparent 1px 40px),
var(--gk-sky);
}
.art.photo {
@@ -116,7 +117,14 @@ const now = nowStatuses(s, post);
opacity: 0.8;
}
.art :global(.seal) {
filter: drop-shadow(0 0 16px rgba(201, 162, 74, 0.35));
filter: drop-shadow(0 0 16px rgba(var(--gk-gold-rgb), 0.35));
}
/* Glow is for the night sky; on Starlight the foil stands on its own. */
@media (prefers-color-scheme: light) {
.art :global(.seal) {
opacity: 1;
filter: none;
}
}
.cover {
position: absolute;
@@ -129,13 +137,13 @@ const now = nowStatuses(s, post);
position: absolute;
inset: 0;
background:
linear-gradient(to top, rgba(14, 21, 34, 0.88), transparent 42%),
linear-gradient(to bottom, rgba(14, 21, 34, 0.45), transparent 30%);
linear-gradient(to top, rgba(var(--gk-sky-rgb), 0.88), transparent 42%),
linear-gradient(to bottom, rgba(var(--gk-sky-rgb), 0.45), transparent 30%);
}
.mat {
position: absolute;
inset: 14px;
border: 1px solid rgba(201, 162, 74, 0.5);
border: 1px solid rgba(var(--gk-gold-rgb), 0.5);
border-radius: 6px;
}
.no {
@@ -196,8 +204,8 @@ const now = nowStatuses(s, post);
border-radius: 2px;
background:
radial-gradient(circle at 18% 50%, var(--gk-teal-bright) 0 2px, transparent 3px),
linear-gradient(90deg, var(--gk-gold), rgba(201, 162, 74, 0.15) 70%, transparent);
box-shadow: 0 0 8px rgba(201, 162, 74, 0.35);
linear-gradient(90deg, var(--gk-gold), rgba(var(--gk-gold-rgb), 0.15) 70%, transparent);
box-shadow: 0 0 8px rgba(var(--gk-gold-rgb), 0.35);
}
.summary {
margin: 4px 0 0;
services/site/src/components/blog/PostLayout.astro
+2 -2
View File
@@ -206,11 +206,11 @@ const making = d.topic === "Making";
gap: 18px;
padding: 48px 56px;
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);
box-shadow:
inset 0 0 0 4px var(--gk-midnight),
inset 0 0 0 5px rgba(201, 162, 74, 0.3);
inset 0 0 0 5px rgba(var(--gk-gold-rgb), 0.3);
}
.cover {
margin: 0;
services/site/src/components/blog/PostList.astro
+2 -2
View File
@@ -60,9 +60,9 @@ const { posts, site: s, kicker, emptyTitle = "Nothing written here yet", emptyTe
align-items: center;
gap: 24px;
padding: 28px;
border: 1px dashed rgba(201, 162, 74, 0.45);
border: 1px dashed rgba(var(--gk-gold-rgb), 0.45);
border-radius: var(--gk-radius);
background: rgba(19, 28, 43, 0.6);
background: rgba(var(--gk-midnight-rgb), 0.6);
}
.words {
flex: 1 1 260px;
services/site/src/components/blog/PostRow.astro
+1 -1
View File
@@ -48,7 +48,7 @@ const now = nowStatuses(s, post);
display: flex;
gap: 20px;
padding: 22px 0 20px;
border-top: 1px dashed rgba(244, 242, 237, 0.16);
border-top: 1px dashed rgba(var(--gk-star-rgb), 0.16);
}
.mark {
position: absolute;
services/site/src/components/blog/PostThumb.astro
+4 -4
View File
@@ -31,13 +31,13 @@ const mark = Math.round(Math.min(width, height) / 2);
display: flex;
align-items: center;
justify-content: center;
outline: 1px solid rgba(201, 162, 74, 0.4);
outline: 1px solid rgba(var(--gk-gold-rgb), 0.4);
outline-offset: 3px;
border: 1px solid var(--gk-lines);
background:
radial-gradient(ellipse at 30% 20%, rgba(106, 47, 224, 0.3), transparent 60%),
repeating-linear-gradient(0deg, rgba(244, 242, 237, 0.05) 0 1px, transparent 1px 22px),
repeating-linear-gradient(90deg, rgba(244, 242, 237, 0.05) 0 1px, transparent 1px 22px),
radial-gradient(ellipse at 30% 20%, rgba(var(--gk-violet-rgb), calc(0.3 * var(--gk-wash))), transparent 60%),
repeating-linear-gradient(0deg, rgba(var(--gk-star-rgb), 0.05) 0 1px, transparent 1px 22px),
repeating-linear-gradient(90deg, rgba(var(--gk-star-rgb), 0.05) 0 1px, transparent 1px 22px),
var(--gk-sky);
}
.mono {
services/site/src/components/blog/StarHeading.astro
+2 -2
View File
@@ -35,7 +35,7 @@ const H = `h${level}` as "h2" | "h3";
border-radius: 2px;
background:
radial-gradient(circle at 18% 50%, var(--gk-teal-bright) 0 2px, transparent 3px),
linear-gradient(90deg, var(--gk-gold), rgba(201, 162, 74, 0.15) 70%, transparent);
box-shadow: 0 0 8px rgba(201, 162, 74, 0.35);
linear-gradient(90deg, var(--gk-gold), rgba(var(--gk-gold-rgb), 0.15) 70%, transparent);
box-shadow: 0 0 8px rgba(var(--gk-gold-rgb), 0.35);
}
</style>
services/site/src/components/home/BlogStrip.astro
+2 -2
View File
@@ -103,8 +103,8 @@ const topicHref = (topic: string) => `/blog/topic/${slugify(topic)}`;
width: 180px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, var(--gk-gold), rgba(201, 162, 74, 0.15) 70%, transparent);
box-shadow: 0 0 8px rgba(201, 162, 74, 0.35);
background: linear-gradient(90deg, var(--gk-gold), rgba(var(--gk-gold-rgb), 0.15) 70%, transparent);
box-shadow: 0 0 8px rgba(var(--gk-gold-rgb), 0.35);
}
.all {
font-size: 14px;
services/site/src/components/home/DoorLink.astro
+1 -1
View File
@@ -39,7 +39,7 @@ const { href, title, line, size = "large" } = Astro.props;
.large {
min-height: 62px;
padding: 8px 0;
border-bottom: 1px solid rgba(244, 242, 237, 0.35);
border-bottom: 1px solid rgba(var(--gk-star-rgb), 0.35);
}
.small {
min-height: 48px;
services/site/src/components/home/Portrait.astro
+2 -2
View File
@@ -36,7 +36,7 @@ const { variant = "hero", src, alt = "Greg Kilmer", seal = "transmutation", clas
border: 3px solid var(--gk-gold);
border-radius: var(--gk-radius-lg);
padding: 6px;
background: rgba(106, 47, 224, 0.12);
background: rgba(var(--gk-violet-rgb), calc(0.12 * var(--gk-wash)));
}
.hero :global(.art) {
border-radius: var(--gk-radius);
@@ -59,7 +59,7 @@ const { variant = "hero", src, alt = "Greg Kilmer", seal = "transmutation", clas
width: 100%;
padding: 10px;
border-radius: 12px;
border: 1px solid rgba(201, 162, 74, 0.55);
border: 1px solid rgba(var(--gk-gold-rgb), 0.55);
background: var(--gk-midnight);
}
.panel :global(.art) {
services/site/src/components/home/StatusRow.astro
+4 -4
View File
@@ -70,7 +70,7 @@ const postHref = post ? s.href(post) : null;
height: 56px;
border-radius: 8px;
border: 1px solid var(--gk-lines);
outline: 1px solid rgba(201, 162, 74, 0.35);
outline: 1px solid rgba(var(--gk-gold-rgb), 0.35);
outline-offset: 2px;
}
.photo {
@@ -81,9 +81,9 @@ const postHref = post ? s.href(post) : null;
align-items: center;
justify-content: center;
background:
radial-gradient(ellipse at 30% 20%, rgba(106, 47, 224, 0.3), transparent 60%),
repeating-linear-gradient(0deg, rgba(244, 242, 237, 0.05) 0 1px, transparent 1px 14px),
repeating-linear-gradient(90deg, rgba(244, 242, 237, 0.05) 0 1px, transparent 1px 14px),
radial-gradient(ellipse at 30% 20%, rgba(var(--gk-violet-rgb), calc(0.3 * var(--gk-wash))), transparent 60%),
repeating-linear-gradient(0deg, rgba(var(--gk-star-rgb), 0.05) 0 1px, transparent 1px 14px),
repeating-linear-gradient(90deg, rgba(var(--gk-star-rgb), 0.05) 0 1px, transparent 1px 14px),
var(--gk-sky);
}
.tile img {
services/site/src/components/library/Constellation.astro
+3 -3
View File
@@ -30,7 +30,7 @@ const points = items.map((_, i) => `${(((i + 0.5) / n) * 1000).toFixed(1)},${lif
</div>
<div class="sky">
<svg aria-hidden="true" class="line" viewBox="0 0 1000 154" preserveAspectRatio="none">
<polyline points={points} fill="none" stroke="#C9A24A" stroke-width="1.4" stroke-dasharray="2 6" vector-effect="non-scaling-stroke" />
<polyline points={points} fill="none" style="stroke:var(--gk-gold)" stroke-width="1.4" stroke-dasharray="2 6" vector-effect="non-scaling-stroke" />
</svg>
<ul style={`--n:${n}`}>
{
@@ -113,7 +113,7 @@ const points = items.map((_, i) => `${(((i + 0.5) / n) * 1000).toFixed(1)},${lif
border-radius: 50%;
box-shadow:
0 0 0 2px var(--gk-gold),
0 0 22px rgba(201, 162, 74, 0.45);
0 0 22px rgba(var(--gk-gold-rgb), 0.45);
transition: box-shadow 0.2s;
}
a :global(.orb .mat) {
@@ -134,7 +134,7 @@ const points = items.map((_, i) => `${(((i + 0.5) / n) * 1000).toFixed(1)},${lif
a:hover :global(.orb) {
box-shadow:
0 0 0 2px var(--gk-gold-bright),
0 0 30px rgba(201, 162, 74, 0.7);
0 0 30px rgba(var(--gk-gold-rgb), 0.7);
}
span {
font-size: 13px;
services/site/src/components/library/ListHeading.astro
+2 -2
View File
@@ -49,7 +49,7 @@ const { id, dot } = Astro.props;
border-radius: 2px;
background:
radial-gradient(circle at 18% 50%, var(--gk-teal-bright) 0 2px, transparent 3px),
linear-gradient(90deg, var(--gk-gold), rgba(201, 162, 74, 0.15) 70%, transparent);
box-shadow: 0 0 8px rgba(201, 162, 74, 0.35);
linear-gradient(90deg, var(--gk-gold), rgba(var(--gk-gold-rgb), 0.15) 70%, transparent);
box-shadow: 0 0 8px rgba(var(--gk-gold-rgb), 0.35);
}
</style>
services/site/src/components/store/LineCard.astro
+2 -2
View File
@@ -162,8 +162,8 @@ const headId = `line-${line.slug}`;
max-width: 60%;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, var(--gk-gold), rgba(201, 162, 74, 0.15) 70%, transparent);
box-shadow: 0 0 8px rgba(201, 162, 74, 0.35);
background: linear-gradient(90deg, var(--gk-gold), rgba(var(--gk-gold-rgb), 0.15) 70%, transparent);
box-shadow: 0 0 8px rgba(var(--gk-gold-rgb), 0.35);
}
.summary {
margin: 0;
services/site/src/components/store/OrderForm.astro
+3 -3
View File
@@ -153,7 +153,7 @@ const slugPart = (x: string) => x.toLowerCase().replace(/[^a-z0-9]+/g, "-");
padding: 32px;
border-radius: var(--gk-radius);
background: var(--gk-midnight);
border: 1px solid rgba(201, 162, 74, 0.55);
border: 1px solid rgba(var(--gk-gold-rgb), 0.55);
}
.row {
display: flex;
@@ -245,7 +245,7 @@ const slugPart = (x: string) => x.toLowerCase().replace(/[^a-z0-9]+/g, "-");
width: 16px;
height: 16px;
border-radius: 999px;
border: 1px solid rgba(236, 233, 226, 0.35);
border: 1px solid rgba(var(--gk-text-rgb), 0.35);
flex: none;
}
.stock {
@@ -301,7 +301,7 @@ const slugPart = (x: string) => x.toLowerCase().replace(/[^a-z0-9]+/g, "-");
.err {
font-size: 12px;
font-weight: 400;
color: #f0857a;
color: var(--gk-danger);
}
.tnote {
font-size: 13px;
services/site/src/components/store/Swatches.astro
+2 -2
View File
@@ -57,7 +57,7 @@ const { options, names, class: className } = Astro.props;
height: 28px;
border-radius: 999px;
background: var(--gk-lines);
box-shadow: 0 0 0 1px rgba(236, 233, 226, 0.25);
box-shadow: 0 0 0 1px rgba(var(--gk-text-rgb), 0.25);
}
.named {
gap: 8px;
@@ -78,7 +78,7 @@ const { options, names, class: className } = Astro.props;
width: 16px;
height: 16px;
border-radius: 999px;
border: 1px solid rgba(236, 233, 226, 0.35);
border: 1px solid rgba(var(--gk-text-rgb), 0.35);
flex: none;
}
.dot.none {
services/site/src/components/store/Terms.astro
+1 -1
View File
@@ -41,7 +41,7 @@ const kindLabel = { info: "Good to know", warning: "Please note", rule: "Rule" }
flex: none;
}
.terms :global(.term.warning) {
background: rgba(201, 162, 74, 0.12);
background: rgba(var(--gk-gold-rgb), 0.12);
}
.terms :global(.term.rule) {
border-left-color: var(--gk-gold-bright);
services/site/src/components/work/FeaturedStudy.astro
+2 -2
View File
@@ -130,9 +130,9 @@ const facts = d.facts ?? [];
height: 2px;
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);
}
.role {
font-size: 15px;
services/site/src/components/world/WorldSection.astro
+2 -2
View File
@@ -59,8 +59,8 @@ const { id, title, intro, class: className } = Astro.props;
border-radius: 2px;
background:
radial-gradient(circle at 18% 50%, var(--gk-teal-bright) 0 2px, transparent 3px),
linear-gradient(90deg, var(--gk-gold), rgba(201, 162, 74, 0.15) 70%, transparent);
box-shadow: 0 0 8px rgba(201, 162, 74, 0.35);
linear-gradient(90deg, var(--gk-gold), rgba(var(--gk-gold-rgb), 0.15) 70%, transparent);
box-shadow: 0 0 8px rgba(var(--gk-gold-rgb), 0.35);
}
.intro {
margin: 0;