Josh47_WebDev/byuiars-reop-net
1
1
Fork 0
Code Issues Pull Requests Activity

Updated the mobile menu to be more friendly to thumbs

Browse Source
This commit is contained in:
Joseph Robles Jr.
2026-10-13 13:06:12 -06:00
parent 896a6f599d
commit fdcbc19f5f
1 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+10 -4
View File
@@ -45,9 +45,11 @@ a:focus-visible, button:focus-visible { outline: 3px solid #f4b942; outline-offs
.nav-links a.active { font-weight: 700; }
.icon-button { align-items: center; background: none; border: 0; border-radius: 0.4rem; color: #fff; cursor: pointer; display: flex; padding: 0.4rem; }
.icon { height: 1.5rem; width: 1.5rem; }
.mobile-menu { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.5rem; }
.mobile-menu a, .mobile-theme-btn { background: none; border: 0; border-radius: var(--border-radius); color: #fff; cursor: pointer; font-size: 1rem; padding: 0.5rem; text-align: left; text-decoration: none; }
.mobile-menu a:hover, .mobile-theme-btn:hover { background-color: var(--nav-hover); }
.mobile-menu { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.75rem auto 0; max-width: 1120px; }
.mobile-menu a, .mobile-theme-btn { align-items: center; background: rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0.55rem; color: #fff; cursor: pointer; display: flex; font-size: 1rem; font-weight: 650; min-height: 3rem; padding: 0.7rem 0.85rem; text-align: left; text-decoration: none; }
.mobile-menu a:hover, .mobile-menu a:focus-visible, .mobile-theme-btn:hover, .mobile-theme-btn:focus-visible { background-color: var(--nav-hover); }
.mobile-menu a.active { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.28); }
.mobile-theme-btn { color: #fff; justify-content: flex-start; margin-top: 0.35rem; }
.main-content { flex-grow: 1; margin: 0 auto; max-width: 960px; padding: clamp(2rem, 5vw, 4.5rem) 1.25rem; width: 100%; }
h1 { font-size: clamp(2rem, 5vw, 3.75rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1.05; margin-bottom: 1.25rem; }
@@ -90,8 +92,12 @@ p { margin-bottom: 1rem; max-width: 70ch; }
@media (min-width: 768px) { .column-list { column-count: 4; } }
@media (max-width: 639px) {
.desktop-only { display: none !important; }
.navbar { padding-inline: 1rem; }
.navbar { padding: 0.8rem 1rem 1rem; }
.nav-brand { font-size: 1rem; }
.icon-button { min-height: 2.75rem; min-width: 2.75rem; justify-content: center; }
.mobile-menu { border-top: 1px solid rgba(255, 255, 255, 0.22); padding-top: 0.8rem; }
#mobile-links { display: grid; gap: 0.4rem; }
.mobile-menu a::after { content: "›"; font-size: 1.4rem; font-weight: 400; line-height: 1; margin-left: auto; opacity: 0.8; }
.hero, .intro-section { grid-template-columns: 1fr; }
.hero { min-height: 0; }
.hero-image { grid-row: 1; }