lfg2025/antonym
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: single-line tagline on desktop, wrap on mobile

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-17 00:52:14 +00:00
parent 88a373da80
commit 8dfb9444f4
1 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/splash/LogoSplash.vue
View File

@@ -150,18 +150,18 @@ onMounted(() => {
/* --- Tagline --- */ /* --- Tagline --- */
.tagline-block { .tagline-block {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: nowrap;
justify-content: center; justify-content: center;
gap: 0 0.4em; gap: 0 0.3em;
width: 90vw; width: 92vw;
max-width: 900px; max-width: 1100px;
text-align: center; text-align: center;
line-height: 1.05; line-height: 1.05;
} }
.word { .word {
font-family: system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; font-family: system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
font-size: clamp(2.5rem, 10vw, 7rem); font-size: clamp(2rem, 5.5vw, 5rem);
font-weight: 900; font-weight: 900;
color: var(--text-primary); color: var(--text-primary);
text-transform: uppercase; text-transform: uppercase;
@@ -235,18 +235,19 @@ onMounted(() => {
} }
} }
/* Mobile: 4-line layout */ /* Mobile: wrap to multiple lines */
@media (max-width: 600px) { @media (max-width: 600px) {
.tagline-block {
flex-wrap: wrap;
width: 95vw;
}
.word { .word {
font-size: clamp(2rem, 14vw, 4rem); font-size: clamp(2rem, 12vw, 3.5rem);
} }
.psyop { .psyop {
font-size: clamp(3rem, 20vw, 5.5rem); font-size: clamp(3rem, 22vw, 5.5rem);
}
.tagline-block {
width: 95vw;
} }
} }