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
game.html
+17 -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; }
@@ -65,7 +68,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);
@@ -82,7 +85,7 @@
letter-spacing: .14em;
text-transform: uppercase;
cursor: pointer;
transition: all .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;
}
.edit-toggle.locked { color: var(--muted); }
@@ -129,7 +132,7 @@
.mood-badge.light { color: var(--brass); border-color: rgba(184,138,67,.4); }
.mood-badge.dark { color: var(--rust); border-color: rgba(148,69,47,.4); }
.game-dates { font: .72rem/1 var(--mono); color: var(--muted); letter-spacing: .06em; }
.game-desc { color: #c2b7a4; max-width: 72ch; margin-top: 1rem; font-size: 1rem; }
.game-desc { color: var(--text-body); max-width: 72ch; margin-top: 1rem; font-size: 1rem; }
.game-header-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.btn {
@@ -145,7 +148,7 @@
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
transition: background .15s, border-color .15s;
transition: background 0.18s cubic-bezier(0.22,1,.36,1), border-color 0.18s cubic-bezier(0.22,1,.36,1);
white-space: nowrap;
}
.btn:hover { background: rgba(184,138,67,.1); border-color: var(--brass); }
@@ -217,7 +220,7 @@
text-align: center;
}
.tl-lbl-name {
font: 600 .64rem/1.25 var(--mono);
font: 600 .72rem/1.25 var(--mono);
letter-spacing: .04em;
color: var(--text);
overflow: hidden;
@@ -227,7 +230,7 @@
}
.tl-lbl-name.is-anchor { color: var(--paper); font-weight: 700; }
.tl-lbl-date {
font: .56rem/1.1 var(--mono);
font: .63rem/1.1 var(--mono);
color: var(--muted);
margin-top: .12rem;
white-space: nowrap;
@@ -345,7 +348,7 @@
margin: 0 0 .75rem;
}
.entry-desc {
color: #c2b7a4;
color: var(--text-body);
font-size: 1rem;
line-height: 1.7;
max-width: 72ch;
@@ -476,7 +479,7 @@
}
select option { background: var(--panel); }
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); }
.date-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mood-row { display: flex; gap: 1rem; }
.mood-radio { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
@@ -595,7 +598,7 @@
text-transform: uppercase;
padding: .5rem;
cursor: pointer;
transition: background .15s, border-color .15s;
transition: background 0.18s cubic-bezier(0.22,1,.36,1), border-color 0.18s cubic-bezier(0.22,1,.36,1);
margin-top: .5rem;
}
.card-dismiss:hover { background: rgba(90,50,20,.18); border-color: rgba(90,50,20,.8); }
@@ -737,6 +740,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="gameApp()" x-cloak>