jeffemmett
/
the-last-draw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve mobile responsiveness for The Last Draw 

Stack character cards vertically, fix image sizing, adjust typography,
footer link, and theme tags for mobile. Add 400px breakpoint for very
small devices.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-18 18:05:07 -07:00
parent 1827c1b180
commit 5c935a3b86
1 changed files with 90 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
index.html
View File

@ -842,23 +842,111 @@
z-index: 101;
}
.hero {
min-height: 80vh;
}
.hero-title {
font-size: clamp(3rem, 14vw, 6rem);
}
section, .full-bleed {
padding: 5rem 1.5rem;
padding: 4rem 1.2rem;
}
.question-section, .closing-section {
padding: 6rem 1.5rem;
padding: 5rem 1.2rem;
}
.question, .closing-question {
font-size: clamp(1.2rem, 4vw, 1.8rem);
}
.comps-grid {
grid-template-columns: 1fr;
}
.comp-card img {
height: 220px;
}
.character-grid {
gap: 1rem;
}
.character-row-top,
.character-row-bottom {
flex-direction: column;
align-items: center;
}
.character-row-top .character-card,
.character-row-bottom .character-card {
width: 100%;
max-width: 400px;
}
.character-photo {
height: auto;
max-height: 300px;
}
.img-break img {
height: auto;
max-height: 50vh;
object-fit: cover;
}
.world-images img {
height: auto;
max-height: 300px;
}
.synopsis-text, .inspiration-text, .themes-text, .tone-text, .world-text {
font-size: 0.95rem;
}
.creator-bio {
font-size: 0.9rem;
}
.team-grid {
grid-template-columns: 1fr;
}
.team-card img {
height: auto;
max-height: 300px;
}
.footer-link {
font-size: 0.7rem;
padding: 0.5rem 1rem;
}
.theme-tags {
gap: 0.5rem;
}
.theme-tag {
font-size: 0.65rem;
padding: 0.4rem 0.8rem;
}
}
/* SMALL MOBILE */
@media (max-width: 400px) {
section, .full-bleed {
padding: 3rem 1rem;
}
.hero-title {
font-size: 3rem;
}
.character-photo {
max-height: 250px;
}
}
</style>
</head>