thejayman77/upbeatBytes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Daily Word: bring back the tall, prominent Backspace/Enter keys

Browse Source 
Keep the matched SVG icons, but restore the full-height split control column
(each key ~1.5 rows) — they read as prominent and set apart, which is the look
that was landing.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-11 08:44:48 -04:00
parent 924f885400
commit dc2e382dea
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/WordGame.svelte
+4 -4
View File
@@ -255,7 +255,7 @@
}
.letters { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.krow { display: flex; gap: 4px; justify-content: center; } /* shorter rows auto-centre */
.controls { display: flex; flex-direction: column; width: 44px; flex-shrink: 0; }
.controls { display: grid; grid-template-rows: 1fr 1fr; gap: 6px; width: 44px; flex-shrink: 0; }
.key {
border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink);
font-family: var(--label); font-weight: 700; font-size: 1.05rem; cursor: pointer; text-transform: uppercase;
@@ -264,9 +264,9 @@
}
.key:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0, 0, 0, 0); background: var(--bg); }
.krow .key { width: var(--kw); height: 50px; }
.controls .key { width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; }
.controls .key { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.controls .key svg { width: 25px; height: 25px; display: block; }
.controls .enter { margin-top: auto; background: var(--accent); border-color: var(--accent); color: #fff;
.controls .enter { background: var(--accent); border-color: var(--accent); color: #fff;
box-shadow: 0 2px 0 var(--accent-deep), 0 3px 6px rgba(0, 131, 173, 0.18); }
.key.correct { background: #4a9d6e; border-color: #4a9d6e; color: #fff; box-shadow: 0 2px 0 #3a7d56; }
.key.present { background: #d8b24a; border-color: #d8b24a; color: #fff; box-shadow: 0 2px 0 #b8943a; }
@@ -293,7 +293,7 @@
.kbzone { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0;
padding-bottom: calc(env(safe-area-inset-bottom) + 4px); }
.keyboard { --kw: min(44px, calc((100vw - 120px) / 10)); width: 100%; max-width: none; margin: 0; }
.krow .key, .controls .key { height: 47px; }
.krow .key { height: 47px; }
}
.result { text-align: center; }
.rmark { font-family: var(--serif); font-style: italic; color: var(--accent-deep); font-size: 1.2rem; margin: 0 0 10px; }