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/404.astro
+9 -2
View File
@@ -33,7 +33,7 @@ const groups = [
<PageShell title="Off the star chart" family="notFound" description="This page isn't here.">
<meta slot="head" name="robots" content="noindex" />
<section class="lost" aria-labelledby="nf-title">
<Seal name="zodiac" size={180} class="seal" />
<Seal name="zodiac" size={180} class="seal" foil />
<span class="eyebrow">404 · Page not found</span>
<h1 id="nf-title">Off the star chart</h1>
<p class="lede">{lede}</p>
@@ -80,7 +80,14 @@ const groups = [
}
.lost :global(.seal) {
opacity: 0.85;
filter: drop-shadow(0 0 22px rgba(43, 194, 183, 0.35));
filter: drop-shadow(0 0 22px rgba(var(--gk-teal-rgb), 0.35));
}
/* Glow is for the night sky; on Starlight the foil stands on its own. */
@media (prefers-color-scheme: light) {
.lost :global(.seal) {
opacity: 1;
filter: none;
}
}
.eyebrow {
font-size: 11px;
services/site/src/pages/about.astro
+5 -4
View File
@@ -6,6 +6,7 @@
*/
import GiltCorners from "@gk/ui/components/GiltCorners.astro";
import Icon from "@gk/ui/components/Icon.astro";
import Motif from "@gk/ui/components/Motif.astro";
import PageShell from "@gk/ui/components/PageShell.astro";
import SectionHeading from "@gk/ui/components/SectionHeading.astro";
import Star from "@gk/ui/components/Star.astro";
@@ -141,7 +142,7 @@ const SOCIAL_ICONS: Record<string, string> = { github: "web", linkedin: "briefca
Two wings of the same house
</SectionHeading>
<div class="wing-wrap">
<div class="wing-stars" aria-hidden="true"><img src={scorpius} alt="" width="1100" height="400" /></div>
<div class="wing-stars" aria-hidden="true"><Motif src={scorpius} alt="" width="1100" height="400" /></div>
<div class="wing-row">
<div class="wing featured">
<GiltCorners inset={6} size={30} />
@@ -254,7 +255,7 @@ const SOCIAL_ICONS: Record<string, string> = { github: "web", linkedin: "briefca
gap: 10px;
}
.photo :global(.photo-art) {
border: 1px solid rgba(201, 162, 74, 0.55);
border: 1px solid rgba(var(--gk-gold-rgb), 0.55);
}
.photo figcaption {
font-size: 12px;
@@ -427,11 +428,11 @@ const SOCIAL_ICONS: Record<string, string> = { github: "web", linkedin: "briefca
gap: 10px;
padding: 26px;
border-radius: var(--gk-radius);
background: rgba(19, 28, 43, 0.7);
background: rgba(var(--gk-midnight-rgb), 0.7);
border: 1px solid var(--gk-lines);
}
.wing.featured {
border-color: rgba(201, 162, 74, 0.55);
border-color: rgba(var(--gk-gold-rgb), 0.55);
}
.wing-eyebrow {
font-size: 11px;
services/site/src/pages/blog/topic/[topic].astro
+1 -1
View File
@@ -124,7 +124,7 @@ const lede = s.pageText(base)?.data.lede;
padding: 18px 20px;
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);
text-decoration: none;
color: var(--gk-text);
transition: border-color var(--gk-ease);
services/site/src/pages/index.astro
+10 -10
View File
@@ -208,8 +208,8 @@ const listFormat = new Intl.ListFormat("en", { style: "long", type: "conjunction
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);
}
.work {
@@ -217,11 +217,11 @@ const listFormat = new Intl.ListFormat("en", { style: "long", type: "conjunction
padding: 34px;
gap: 20px;
color: var(--gk-starlight);
background: radial-gradient(ellipse at 0% 0%, rgba(20, 163, 154, 0.22), transparent 55%), var(--gk-midnight);
border: 1px solid rgba(201, 162, 74, 0.7);
background: radial-gradient(ellipse at 0% 0%, rgba(var(--gk-teal-deep-rgb), calc(0.22 * var(--gk-wash))), transparent 55%), var(--gk-midnight);
border: 1px solid rgba(var(--gk-gold-rgb), 0.7);
box-shadow:
inset 0 0 0 6px var(--gk-midnight),
inset 0 0 0 7px rgba(201, 162, 74, 0.45);
inset 0 0 0 7px rgba(var(--gk-gold-rgb), 0.45);
}
.work :global(.work-seal) {
position: absolute;
@@ -259,7 +259,7 @@ const listFormat = new Intl.ListFormat("en", { style: "long", type: "conjunction
padding: 0;
display: flex;
flex-direction: column;
border-top: 1px solid rgba(244, 242, 237, 0.35);
border-top: 1px solid rgba(var(--gk-star-rgb), 0.35);
}
.door-foot {
display: flex;
@@ -275,7 +275,7 @@ const listFormat = new Intl.ListFormat("en", { style: "long", type: "conjunction
.world {
flex: 2 1 360px;
background: var(--gk-midnight);
border: 1px solid rgba(201, 162, 74, 0.55);
border: 1px solid rgba(var(--gk-gold-rgb), 0.55);
}
.world :global(.world-photo) {
height: 190px;
@@ -291,9 +291,9 @@ const listFormat = new Intl.ListFormat("en", { style: "long", type: "conjunction
flex-direction: column;
gap: 14px;
background:
radial-gradient(ellipse 60% 90% at 100% 100%, rgba(106, 47, 224, 0.18), transparent 70%),
repeating-linear-gradient(0deg, rgba(244, 242, 237, 0.05) 0 1px, transparent 1px 32px),
repeating-linear-gradient(90deg, rgba(244, 242, 237, 0.05) 0 1px, transparent 1px 32px);
radial-gradient(ellipse 60% 90% at 100% 100%, rgba(var(--gk-violet-rgb), calc(0.18 * var(--gk-wash))), transparent 70%),
repeating-linear-gradient(0deg, rgba(var(--gk-star-rgb), 0.05) 0 1px, transparent 1px 32px),
repeating-linear-gradient(90deg, rgba(var(--gk-star-rgb), 0.05) 0 1px, transparent 1px 32px);
}
.world-ticks {
position: absolute;
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;
services/site/src/pages/inquiries/sent.astro
+10 -3
View File
@@ -37,7 +37,7 @@ const steps = [
<meta slot="head" name="robots" content="noindex" />
<div class="split">
<div class="intro">
<Seal name="transmutation" size={132} class="seal" />
<Seal name="transmutation" size={132} class="seal" foil />
<span class="eyebrow">Inquiry sent</span>
<h1>Your note is on its way</h1>
<p class="lede">Thanks{firstName ? `, ${firstName}` : ""}. I read every inquiry myself and reply within {replyTime}.</p>
@@ -104,7 +104,14 @@ const steps = [
gap: 16px;
}
.intro :global(.seal) {
filter: drop-shadow(0 0 18px rgba(201, 162, 74, 0.35));
filter: drop-shadow(0 0 18px 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) {
.intro :global(.seal) {
opacity: 1;
filter: none;
}
}
.eyebrow {
font-size: 11px;
@@ -168,7 +175,7 @@ const steps = [
padding: 28px;
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);
}
.kicker {
margin: 0 0 8px;
services/site/src/pages/library/index.astro
+1 -1
View File
@@ -117,7 +117,7 @@ const FIRST = 12;
}
.types a[aria-current] {
border-left-color: var(--gk-gold);
background: rgba(201, 162, 74, 0.08);
background: rgba(var(--gk-gold-rgb), 0.08);
color: var(--gk-text);
font-weight: 600;
}
services/site/src/pages/library/shelf.astro
+1 -1
View File
@@ -172,7 +172,7 @@ const sortHref = (key: string) => {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(14, 21, 34, 0.9), rgba(14, 21, 34, 0.2));
background: linear-gradient(90deg, rgba(var(--gk-sky-rgb), 0.9), rgba(var(--gk-sky-rgb), 0.2));
}
.count-text {
position: relative;
services/site/src/pages/now.astro
+3 -2
View File
@@ -5,6 +5,7 @@
* Everything / Now / Up next filter.
*/
import FilterGroup from "@gk/ui/components/FilterGroup.astro";
import Motif from "@gk/ui/components/Motif.astro";
import PageShell from "@gk/ui/components/PageShell.astro";
import SectionHeading from "@gk/ui/components/SectionHeading.astro";
import Star from "@gk/ui/components/Star.astro";
@@ -74,7 +75,7 @@ const wrapped = s
<aside aria-label="About this page" class="aside">
<div class="panel">
<img src={seals.zodiac} alt="" aria-hidden="true" class="panel-seal" />
<Motif src={seals.zodiac} alt="" aria-hidden="true" class="panel-seal" />
<span class="panel-kicker"><Star size={11} /><span>How this works</span></span>
<TickScale width={200} height={10} count={30} class="panel-ticks" />
<p class="panel-text">
@@ -85,7 +86,7 @@ const wrapped = s
{
wrapped.length > 0 && (
<div class="panel">
<img src={seals["seven-metals"]} alt="" aria-hidden="true" class="panel-seal" />
<Motif src={seals["seven-metals"]} alt="" aria-hidden="true" class="panel-seal" />
<span class="panel-kicker"><Star size={11} /><span>Recently wrapped up</span></span>
<TickScale width={200} height={10} count={30} class="panel-ticks" />
<ul class="wrapped">
services/site/src/pages/resume.astro
+8 -8
View File
@@ -253,7 +253,7 @@ const isCore = (group: { core?: string[] }, item: string) => group.core?.some((c
letter-spacing: 0.3em;
font-weight: 600;
color: var(--gk-gold-bright);
border: 1px solid rgba(201, 162, 74, 0.55);
border: 1px solid rgba(var(--gk-gold-rgb), 0.55);
border-radius: 10px;
padding: 17px 60px;
line-height: 1.2;
@@ -283,11 +283,11 @@ const isCore = (group: { core?: string[] }, item: string) => group.core?.some((c
min-width: 0;
position: relative;
background: var(--gk-midnight);
border: 1px solid rgba(201, 162, 74, 0.6);
border: 1px solid rgba(var(--gk-gold-rgb), 0.6);
border-radius: 12px;
box-shadow:
inset 0 0 0 5px var(--gk-midnight),
inset 0 0 0 6px rgba(201, 162, 74, 0.3);
inset 0 0 0 6px rgba(var(--gk-gold-rgb), 0.3);
padding: 32px 26px 24px;
display: flex;
flex-direction: column;
@@ -326,7 +326,7 @@ const isCore = (group: { core?: string[] }, item: string) => group.core?.some((c
justify-content: center;
gap: 8px;
padding-top: 12px;
border-top: 1px dashed rgba(244, 242, 237, 0.16);
border-top: 1px dashed rgba(var(--gk-star-rgb), 0.16);
font-size: 13px;
color: var(--gk-soft);
text-align: center;
@@ -336,7 +336,7 @@ const isCore = (group: { core?: string[] }, item: string) => group.core?.some((c
height: 8px;
border-radius: 999px;
background: var(--gk-teal-bright);
box-shadow: 0 0 8px rgba(43, 194, 183, 0.7);
box-shadow: 0 0 8px rgba(var(--gk-teal-rgb), 0.7);
}
.stats {
display: grid;
@@ -510,8 +510,8 @@ const isCore = (group: { core?: string[] }, item: string) => group.core?.some((c
inset: -24px -24px -24px 0;
pointer-events: none;
background:
repeating-linear-gradient(0deg, rgba(244, 242, 237, 0.045) 0 1px, transparent 1px 40px),
repeating-linear-gradient(90deg, rgba(244, 242, 237, 0.045) 0 1px, transparent 1px 40px);
repeating-linear-gradient(0deg, rgba(var(--gk-star-rgb), 0.045) 0 1px, transparent 1px 40px),
repeating-linear-gradient(90deg, rgba(var(--gk-star-rgb), 0.045) 0 1px, transparent 1px 40px);
-webkit-mask-image: radial-gradient(ellipse at 40% 50%, #000 40%, transparent 80%);
mask-image: radial-gradient(ellipse at 40% 50%, #000 40%, transparent 80%);
}
@@ -535,7 +535,7 @@ const isCore = (group: { core?: string[] }, item: string) => group.core?.some((c
scroll-margin-top: 24px;
}
.role.current {
border-color: rgba(201, 162, 74, 0.55);
border-color: rgba(var(--gk-gold-rgb), 0.55);
}
.marker {
position: absolute;
services/site/src/pages/store/[slug].astro
+2 -2
View File
@@ -218,7 +218,7 @@ const terms = [...(d.terms ?? []), ...st.terms];
padding: 10px;
border-radius: 12px;
background: var(--gk-midnight);
border: 1px solid rgba(201, 162, 74, 0.55);
border: 1px solid rgba(var(--gk-gold-rgb), 0.55);
}
.lead :global(.lead-art) {
border-radius: 6px;
@@ -307,7 +307,7 @@ const terms = [...(d.terms ?? []), ...st.terms];
.tables {
margin-top: 28px;
padding: 24px 0 8px;
border-top: 1px solid rgba(201, 162, 74, 0.35);
border-top: 1px solid rgba(var(--gk-gold-rgb), 0.35);
display: flex;
flex-wrap: wrap;
gap: 40px;
services/site/src/pages/store/index.astro
+2 -2
View File
@@ -245,8 +245,8 @@ const colorStrips = selling.flatMap((l) =>
border: 1px solid var(--gk-lines);
border-radius: var(--gk-radius);
background:
repeating-linear-gradient(0deg, rgba(244, 242, 237, 0.035) 0 1px, transparent 1px 24px),
repeating-linear-gradient(90deg, rgba(244, 242, 237, 0.035) 0 1px, transparent 1px 24px),
repeating-linear-gradient(0deg, rgba(var(--gk-star-rgb), 0.035) 0 1px, transparent 1px 24px),
repeating-linear-gradient(90deg, rgba(var(--gk-star-rgb), 0.035) 0 1px, transparent 1px 24px),
var(--gk-sky);
}
.colors-head {
services/site/src/pages/store/order.astro
+1 -1
View File
@@ -132,7 +132,7 @@ const reopens = st.closed.filter((c) => c.reopens).map((c) => `${c.name} reopens
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);
}
.closed :global(.gk-note) {
font-size: 15px;
services/site/src/pages/store/order/sent.astro
+1 -1
View File
@@ -160,7 +160,7 @@ const steps = [
padding: 24px;
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);
}
.kicker {
margin: 0 0 8px;
services/site/src/pages/work/index.astro
+2 -2
View File
@@ -158,9 +158,9 @@ const lede = text?.data.lede ?? "Employer work told as written case studies, plu
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);
}
.cta-sub {
font-size: 15px;
services/site/src/pages/workshop/[slug].astro
+1 -1
View File
@@ -369,7 +369,7 @@ const postCover = (p: Note<"post">) => mediaSrc((p.data as { cover?: string }).c
gap: 20px;
height: 164px;
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);
}
.log :global(.l-art) {
flex: 0 0 176px;
services/site/src/pages/workshop/index.astro
+2 -2
View File
@@ -448,8 +448,8 @@ const nowItems: NowItem[] = statusesFor(s, "/workshop").map((st) => {
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);
}
.rack-note {
font-size: 14px;