fix: single-line tagline on desktop, wrap on mobile
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -150,18 +150,18 @@ onMounted(() => {
|
||||
/* --- Tagline --- */
|
||||
.tagline-block {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
gap: 0 0.4em;
|
||||
width: 90vw;
|
||||
max-width: 900px;
|
||||
gap: 0 0.3em;
|
||||
width: 92vw;
|
||||
max-width: 1100px;
|
||||
text-align: center;
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
.word {
|
||||
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;
|
||||
color: var(--text-primary);
|
||||
text-transform: uppercase;
|
||||
@@ -235,18 +235,19 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile: 4-line layout */
|
||||
/* Mobile: wrap to multiple lines */
|
||||
@media (max-width: 600px) {
|
||||
.tagline-block {
|
||||
flex-wrap: wrap;
|
||||
width: 95vw;
|
||||
}
|
||||
|
||||
.word {
|
||||
font-size: clamp(2rem, 14vw, 4rem);
|
||||
font-size: clamp(2rem, 12vw, 3.5rem);
|
||||
}
|
||||
|
||||
.psyop {
|
||||
font-size: clamp(3rem, 20vw, 5.5rem);
|
||||
}
|
||||
|
||||
.tagline-block {
|
||||
width: 95vw;
|
||||
font-size: clamp(3rem, 22vw, 5.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user