explewd/retur
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Expand letters and decision consequences

Browse Source
This commit is contained in:
Fredrik Johansson
2026-07-20 19:56:58 +02:00
parent b69131c540
commit 61e6b256d5
6 changed files with 153 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/style.css
View File

@@ -28,6 +28,11 @@ button { font: inherit; }
.meter.suspicion::after, .meter.suspicion i { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--border); }
.meter.suspicion i { right: auto; background: var(--danger); z-index: 1; transition: width .25s; }
.regulations-title { margin-top: 24px; }
.incidents-title { margin-top: 24px; }
.incident-log { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.incident-log li { padding-left: 10px; border-left: 2px solid var(--safe); color: var(--dim); font-size: 9px; line-height: 1.45; }
.incident-log li.bad { border-left-color: var(--danger); }
.incident-log b { display: block; color: var(--text); font-size: 8px; }
.regulations { padding: 0; margin: 0; list-style: none; display: grid; gap: 9px; }
.regulations li { padding-left: 36px; color: #aaaacc; font-size: 10px; position: relative; }
.regulations b { position: absolute; left: 0; color: var(--accent); }
@@ -64,6 +69,9 @@ button { font: inherit; }
.result strong { font-size: clamp(22px, 4vw, 38px); letter-spacing: .12em; }
.result.correct strong { color: var(--safe); } .result.wrong strong { color: var(--danger); }
.result p { max-width: 540px; color: var(--dim); }
.consequence { max-width: 540px; margin: 10px auto 14px; padding: 12px; border: 1px solid var(--border); color: var(--text); font-size: 11px; }
.consequence span { display: block; margin-bottom: 4px; color: var(--archive); font-size: 8px; letter-spacing: .12em; }
.penalty { margin-bottom: 12px; color: var(--danger); font-size: 10px; text-transform: uppercase; }
.result button { border: 0; background: none; color: var(--text); cursor: pointer; }
.intro-screen, .end-screen { min-height: calc(100vh - 62px); display: grid; place-items: center; padding: 30px; background: radial-gradient(circle, #20192c 0, var(--bg) 66%); }
.intro-screen { grid-template-columns: auto minmax(280px, 540px); gap: clamp(30px, 7vw, 90px); }