fix: mobile responsiveness audit (brand-site#65)
- Expanded touch target list: nav-mobile-link, nav-mobile-cta, nav-cta, footer-social a, btn, form-submit, newsletter-form button, nav-menu-toggle - Footer social icons: 20px → 24px SVG, 44px tap targets with border-radius - Form select/input: 48px min-height on coarse pointers, 16px font prevents zoom - Newsletter form: stacks vertically on mobile (flex-direction: column) - Card grids: explicit 1fr on small screens (was implicit but not guaranteed) - Hero subtitle/actions: overflow-wrap: break-word prevents horizontal scroll - Nav toggle: increased padding to 0.75rem for easier tapping
This commit is contained in:
Scott Scoble
parent
1ac98d31bb
commit
84c5998eeb
2 changed files with 74 additions and 4 deletions
|
|
@ -13,13 +13,13 @@ const currentYear = new Date().getFullYear();
|
|||
|
||||
<div class="footer-social">
|
||||
<a href="https://linkedin.com/in/scottscoble" target="_blank" rel="noopener" aria-label="LinkedIn">
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
|
||||
<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
|
||||
</a>
|
||||
<a href="https://x.com/scottscoble" target="_blank" rel="noopener" aria-label="X/Twitter">
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
|
||||
<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
|
||||
</a>
|
||||
<a href="https://github.com/sscoble" target="_blank" rel="noopener" aria-label="GitHub">
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.605-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg>
|
||||
<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.605-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -470,6 +470,37 @@ code {
|
|||
.container {
|
||||
padding: 0 var(--space-md);
|
||||
}
|
||||
|
||||
/* Prevent horizontal overflow on mobile */
|
||||
.hero .hero-subtitle,
|
||||
.hero .hero-actions,
|
||||
.page-header p {
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* Ensure card grids go single column on small screens */
|
||||
.card-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* Ensure form inputs don't cause horizontal scroll */
|
||||
.form-group input,
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Newsletter form stacks on mobile */
|
||||
.newsletter-form {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.newsletter-form button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 640px) and (max-width: 1023px) {
|
||||
|
|
@ -481,17 +512,56 @@ code {
|
|||
/* Mobile touch targets (44px minimum) - Issue #65 */
|
||||
@media (pointer: coarse) {
|
||||
.nav-links a,
|
||||
.nav-mobile-link,
|
||||
.nav-mobile-cta,
|
||||
.nav-cta,
|
||||
.footer-links a,
|
||||
.footer-social a,
|
||||
.book-link,
|
||||
.talk-link,
|
||||
.btn-primary,
|
||||
.btn-outline {
|
||||
.btn-outline,
|
||||
.btn,
|
||||
.form-submit,
|
||||
.newsletter-form button,
|
||||
.nav-menu-toggle {
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Make nav menu toggle easier to tap */
|
||||
.nav-menu-toggle {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
/* Ensure footer social icons have adequate tap area */
|
||||
.footer-social a {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* Ensure select dropdowns are tappable on mobile */
|
||||
.form-group select {
|
||||
min-height: 48px;
|
||||
font-size: 1rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
/* Ensure newsletter input and button are tappable */
|
||||
.newsletter-form input {
|
||||
min-height: 48px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.newsletter-form button {
|
||||
min-height: 48px;
|
||||
min-width: 80px;
|
||||
padding: 0.75rem 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced motion - Issue #53 accessibility */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue