jeffemmett
/
cineasthesia-home
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve mobile responsiveness for HOME site 

Adjust hero sizing, pull quote, flipbook aspect ratio, gallery grid,
sensory tags, team icons, and footer for small screens. 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:04:59 -07:00
parent 2eca88b342
commit 269b6894d3
1 changed files with 78 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
index.html
View File

@ -582,15 +582,35 @@
.nav-links.active { right: 0; }
.nav-toggle { display: block; z-index: 101; }
.hero { padding: 6rem 2rem 3rem; }
.hero {
padding: 6rem 1.5rem 3rem;
min-height: 80vh;
}
section { padding: 4rem 1.5rem; }
.hero-title {
font-size: clamp(3.5rem, 12vw, 5rem);
}
.hero-subtitle {
font-size: 1rem;
}
section { padding: 3.5rem 1.2rem; }
.concept-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.concept-visual img {
aspect-ratio: auto;
}
.immersive-quote {
font-size: 1.15rem;
margin: 2rem 0;
}
.about-grid {
flex-direction: column;
gap: 2rem;
@ -599,7 +619,7 @@
.about-photo {
flex: none;
width: 100%;
height: 300px;
height: 280px;
}
.gallery-grid {
@ -607,18 +627,72 @@
}
.gallery-grid img {
height: 200px;
height: 160px;
}
.shelter-grid, .team-grid {
grid-template-columns: 1fr;
}
.shelter-card img {
aspect-ratio: auto;
max-height: 250px;
}
.flipbook-section { padding: 3.5rem 1rem; }
.flipbook-embed {
aspect-ratio: 4/3;
}
.sensory-tags {
gap: 0.5rem;
}
.sensory-tag {
font-size: 0.65rem;
padding: 0.4rem 0.8rem;
}
.team-icon {
width: 80px;
height: 80px;
}
.footer-links {
flex-direction: column;
align-items: center;
gap: 1rem;
}
.footer-links a {
font-size: 0.7rem;
padding: 0.5rem 1rem;
}
.footer-tagline {
font-size: 0.85rem;
padding: 0 1rem;
}
}
/* SMALL MOBILE */
@media (max-width: 400px) {
.hero { padding: 5rem 1rem 2rem; }
.hero-title {
font-size: 3rem;
}
section { padding: 3rem 1rem; }
.gallery-grid {
grid-template-columns: 1fr;
}
.gallery-grid img {
height: 200px;
}
}
</style>
</head>