ulve/colony-archive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

impeccable: Spectral+Jost fonts, eased transitions, text vars, timeline labels, focus glow, narrower sidebar

Browse Source
This commit is contained in:
ulve
2026-08-08 20:42:58 +02:00
parent 90707cdead
commit 94672dadf5
4 changed files with 61 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
games.html
+14 -11
View File
@@ -19,9 +19,12 @@
--moss: #70794e;
--oxygen: #86a5a4;
--line: rgba(232, 220, 196, .18);
--text-secondary: #d0c6b3;
--text-body: #c2b7a4;
--text-dim: #b8ae9e;
--shadow: 0 22px 70px rgba(0,0,0,.42);
--serif: Georgia, "Times New Roman", serif;
--sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
--serif: Spectral, Georgia, "Times New Roman", serif;
--sans: Jost, Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
--mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
@@ -63,7 +66,7 @@
padding: 1rem 0;
text-decoration: none;
white-space: nowrap;
font: 650 .72rem/1 var(--mono);
font: 700 .72rem/1 var(--mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted);
@@ -100,7 +103,7 @@
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
transition: background .15s, border-color .15s, color .15s;
transition: background 0.18s cubic-bezier(0.22,1,.36,1), border-color 0.18s cubic-bezier(0.22,1,.36,1), color 0.18s cubic-bezier(0.22,1,.36,1);
white-space: nowrap;
}
.btn:hover { background: rgba(184,138,67,.12); border-color: var(--brass); }
@@ -116,7 +119,7 @@
border-bottom: 1px solid var(--line);
text-decoration: none;
display: block;
transition: color .15s;
transition: color 0.18s cubic-bezier(0.22,1,.36,1);
}
.game-row:first-child { border-top: 1px solid var(--line); }
.game-row-eyebrow {
@@ -136,10 +139,10 @@
letter-spacing: -.02em;
line-height: 1.05;
margin: 0 0 .6rem;
transition: color .15s;
transition: color 0.18s cubic-bezier(0.22,1,.36,1);
}
.game-row:hover .game-row-title { color: var(--brass); }
.game-row-desc { color: #c2b7a4; font-size: 1rem; line-height: 1.6; max-width: 72ch; }
.game-row-desc { color: var(--text-body); font-size: 1rem; line-height: 1.6; max-width: 72ch; }
.empty-state {
padding: 3rem 0;
color: var(--muted);
@@ -197,10 +200,7 @@
-webkit-appearance: none;
}
textarea { resize: vertical; min-height: 80px; }
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--brass);
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(184,138,67,.12); }
.mood-row { display: flex; gap: 1rem; }
.mood-radio { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.mood-radio input { width: auto; }
@@ -216,6 +216,9 @@
[x-cloak] { display: none !important; }
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=Jost:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body x-data="gamesApp()" x-cloak>