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

WOTD /word polish: larger IPA + part-of-speech label, watermark clears the date

Browse Source 
- IPA pronunciation bumped to 23px (it reads small at body size).
- Vertical part-of-speech label 11px -> 13px and darkened (#7fa0bd -> #5f86a6).
- Watermark nudged down so the glyph's top curve no longer overlaps the date.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-23 06:40:00 -04:00
parent c809594b43
commit ccdc764b2b
1 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/word/+page.svelte
+4 -3
View File
@@ -101,8 +101,9 @@
box-shadow: 0 18px 50px -34px rgba(80, 60, 25, 0.55);
}
/* faded oversized initial bleeding off the right edge */
/* nudged down so the glyph's top curve clears the date in the top-right corner */
.wm {
position: absolute; right: clamp(-60px, -4vw, -28px); top: clamp(8px, 3vw, 40px);
position: absolute; right: clamp(-60px, -4vw, -28px); top: clamp(72px, 13vw, 118px);
font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 400;
font-size: clamp(220px, 42vw, 380px); line-height: 1; color: rgba(62, 110, 151, 0.06);
pointer-events: none; user-select: none;
@@ -115,7 +116,7 @@
.whead { position: relative; display: flex; align-items: flex-start; gap: clamp(14px, 2.5vw, 22px); margin-top: clamp(28px, 5vw, 46px); }
.vpos {
writing-mode: vertical-rl; transform: rotate(180deg); flex: none; padding-top: 6px;
font-size: 11px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: #7fa0bd;
font-size: 13px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: #5f86a6;
}
.whead-main { min-width: 0; }
.word {
@@ -123,7 +124,7 @@
font-size: clamp(3.4rem, 13vw, 108px); line-height: 0.92; color: #1c1a16; margin: 0; overflow-wrap: anywhere;
}
.pron-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.pron { font-family: 'Newsreader', Georgia, serif; font-size: 1.15rem; color: #8a8478; }
.pron { font-family: 'Newsreader', Georgia, serif; font-size: 23px; color: #8a8478; }
.listen {
display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-family: inherit;
font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: #3E6E97;