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

Word Search: bolder in-game theme title + cell letters scale with cell size

Browse Source 
Per field feedback + Codex.
* In-game theme title bigger and weighted (flat → title): 1.6rem/600 desktop,
  1.5rem mobile.
* Cell letters now scale to ~42% of the cell (container-query units, grid as the
  inline-size query container) so the letter-to-spacing ratio is uniform across
  sizes. Large is preserved (its current ratio ≈ 0.42); Small/Med letters grow to
  match, so Small is the easiest to read. @supports-guarded with a clamp() fallback
  for browsers without container-query units.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-11 09:51:14 -04:00
parent 6ef58e3915
commit 7e4d3e2cd9
1 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/WordSearchGame.svelte
+11 -3
View File
@@ -191,7 +191,8 @@
<style>
.wordsearch { max-width: 520px; margin: 0 auto; opacity: 0; transform: translateY(6px); }
.wordsearch.ready { opacity: 1; transform: none; transition: opacity 0.3s ease, transform 0.3s ease; }
.theme { text-align: center; font-family: var(--serif); font-size: 1.4rem; color: var(--accent-deep); margin: 0 0 12px; }
.theme { text-align: center; font-family: var(--serif); font-weight: 600; font-size: 1.6rem;
color: var(--accent-deep); margin: 0 0 14px; }
.gridwrap { display: flex; justify-content: center; }
.grid {
/* Cells are ~32px on a wide screen (board grows with the grid) and shrink via
@@ -204,10 +205,17 @@
.grid.done { opacity: 0.9; }
.cell {
aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
font-family: var(--label); font-weight: 600; font-size: clamp(0.58rem, 2.5vw, 1rem);
font-family: var(--label); font-weight: 600; font-size: clamp(0.7rem, 2.6vw, 1.05rem);
color: var(--ink); border-radius: 5px; background: transparent; text-transform: uppercase;
}
.cell.sel { background: var(--accent) !important; color: #fff !important; }
/* Scale each letter to ~42% of its cell so the letter-to-spacing ratio is uniform
across Small/Med/Large (Large is the reference). Guarded so older browsers keep
the clamp() fallback above. */
@supports (width: 1cqw) {
.grid { container-type: inline-size; }
.cell { font-size: calc(100cqw / var(--n) * 0.42); }
}
.palette { background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
padding: 12px 14px 14px; margin: 0 auto 16px; max-width: 440px; box-shadow: var(--shadow); }
.plabel { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.62rem; font-family: var(--label);
@@ -231,7 +239,7 @@
so the whole puzzle is on screen with no page scroll. */
@media (max-width: 720px) {
.wordsearch { display: flex; flex-direction: column; height: 100%; max-width: 100%; }
.theme { flex-shrink: 0; font-size: 1.2rem; margin: 4px 0 8px; }
.theme { flex-shrink: 0; font-size: 1.5rem; margin: 4px 0 8px; }
.gridwrap { flex: 1; min-height: 0; container-type: size; align-items: center; padding: 2px 0; }
.grid { width: min(100%, 100cqh, calc(var(--n) * 40px)); max-width: none; margin: 0; }
.palette { flex-shrink: 0; margin: 10px auto 0; padding: 9px 12px 10px; max-width: 100%;