Skip to content

Commit 2a1b72e

Browse files
oleflbclaude
oleflb
and
claude
committed
Improve mobile/tablet UI/UX with hamburger menu and responsive styles
- Add hamburger menu with dropdown panel for mobile navigation - Add responsive video embeds with 16:9 aspect ratio - Add responsive styling for markdown tables with horizontal scroll - Add focus-visible states for accessibility - Improve footer and sponsor strip responsiveness on mobile - Ensure all content images and iframes respect max-width Co-authored-by: Claude <noreply@anthropic.com>
1 parent 292dc7c commit 2a1b72e

4 files changed

Lines changed: 325 additions & 31 deletions

File tree

‎sass/main.scss‎

Lines changed: 269 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,19 @@ h3 {
2323
font-weight: bold;
2424
}
2525

26+
// Accessibility - Focus States
27+
a:focus-visible,
28+
button:focus-visible {
29+
outline: 2px solid $blue-dark;
30+
outline-offset: 2px;
31+
}
32+
33+
// Ensure interactive elements have good contrast on focus
34+
.site-header a:focus-visible {
35+
outline-color: $white;
36+
background-color: rgba(255, 255, 255, 0.2);
37+
}
38+
2639
// The main white content box
2740
.content-wrapper {
2841
background-color: $white;
@@ -163,6 +176,125 @@ h3 {
163176
}
164177
}
165178

179+
// Mobile Menu Toggle Button (hidden on desktop)
180+
.mobile-menu-toggle {
181+
display: none;
182+
background: transparent;
183+
border: none;
184+
cursor: pointer;
185+
padding: 0.75rem;
186+
margin-right: 0.5rem;
187+
margin-left: auto;
188+
}
189+
190+
.hamburger-icon {
191+
display: block;
192+
width: 22px;
193+
height: 2px;
194+
background-color: $white;
195+
position: relative;
196+
transition: background-color 0.2s ease;
197+
198+
&::before,
199+
&::after {
200+
content: "";
201+
position: absolute;
202+
left: 0;
203+
width: 100%;
204+
height: 2px;
205+
background-color: $white;
206+
transition: transform 0.3s ease;
207+
}
208+
209+
&::before {
210+
top: -7px;
211+
}
212+
213+
&::after {
214+
bottom: -7px;
215+
}
216+
}
217+
218+
// Hamburger animation when open
219+
.mobile-menu-toggle.is-open .hamburger-icon {
220+
background-color: transparent;
221+
222+
&::before {
223+
transform: translateY(7px) rotate(45deg);
224+
}
225+
226+
&::after {
227+
transform: translateY(-7px) rotate(-45deg);
228+
}
229+
}
230+
231+
// Mobile Dropdown Menu (hidden by default)
232+
.mobile-menu {
233+
display: none;
234+
background-color: $red;
235+
border-bottom-left-radius: 8px;
236+
border-bottom-right-radius: 8px;
237+
}
238+
239+
.mobile-nav-links {
240+
list-style: none;
241+
margin: 0;
242+
padding: 0;
243+
244+
li {
245+
border-top: 1px solid rgba(255, 255, 255, 0.15);
246+
}
247+
248+
a {
249+
display: block;
250+
padding: 1rem 1.25rem;
251+
color: $white;
252+
text-decoration: none;
253+
font-weight: 600;
254+
font-size: 0.95rem;
255+
transition: background-color 0.2s ease;
256+
257+
&:hover,
258+
&.current {
259+
background-color: rgba(255, 255, 255, 0.1);
260+
}
261+
262+
&.current {
263+
border-left: 3px solid $white;
264+
}
265+
}
266+
}
267+
268+
.mobile-language-switcher {
269+
display: flex;
270+
justify-content: center;
271+
align-items: center;
272+
gap: 0.5rem;
273+
padding: 1rem;
274+
border-top: 1px solid rgba(255, 255, 255, 0.15);
275+
font-size: 0.9rem;
276+
font-weight: 700;
277+
278+
a {
279+
color: rgba(255, 255, 255, 0.85);
280+
text-decoration: none;
281+
282+
&:hover {
283+
color: $white;
284+
text-decoration: underline;
285+
}
286+
}
287+
288+
.separator {
289+
color: rgba(255, 255, 255, 0.5);
290+
}
291+
292+
.current-lang {
293+
color: $white;
294+
text-decoration: underline;
295+
}
296+
}
297+
166298
// Main Content Area
167299
.main-content {
168300
padding: 2rem 2.5rem;
@@ -446,41 +578,33 @@ h3 {
446578
padding: 1rem 0.5rem;
447579
}
448580

581+
// Mobile Navigation - show hamburger, hide desktop nav
449582
.site-header .main-nav .main-nav-inner {
450583
display: flex;
451-
overflow-x: auto;
452-
-webkit-overflow-scrolling: touch;
453-
454-
// Hide the scrollbar so it looks like a clean "tab" bar
455-
&::-webkit-scrollbar {
456-
display: none;
457-
}
458-
-ms-overflow-style: none; // IE/Edge
459-
scrollbar-width: none; // Firefox
584+
align-items: center;
585+
justify-content: flex-end;
460586
}
461587

462-
// Fading effect to hint that scrolling is possible
463-
.site-header .main-nav {
464-
position: relative;
588+
.site-header .main-nav .nav-links,
589+
.site-header .main-nav .language-switcher-item {
590+
display: none;
591+
}
465592

466-
&::after {
467-
content: "";
468-
position: absolute;
469-
top: 0;
470-
right: 0;
471-
bottom: 0;
472-
width: 40px;
473-
background: linear-gradient(to right, transparent, $red);
474-
pointer-events: none;
475-
}
593+
.mobile-menu-toggle {
594+
display: flex;
595+
align-items: center;
596+
justify-content: center;
597+
min-width: 44px;
598+
min-height: 44px;
476599
}
477600

478-
.site-header .main-nav .language-switcher-item {
479-
padding: 0 0.5rem;
601+
.mobile-menu.is-open {
602+
display: block;
480603
}
481604

482-
.site-header .main-nav .nav-links a {
483-
padding: 0 0.6rem;
605+
// Remove the old scroll hint fade effect
606+
.site-header .main-nav::after {
607+
display: none;
484608
}
485609

486610
.team-table {
@@ -526,6 +650,29 @@ h3 {
526650
margin-bottom: 1rem;
527651
}
528652
}
653+
654+
// Footer mobile adjustments
655+
.site-footer {
656+
padding: 1rem 1.5rem;
657+
658+
.footer-nav {
659+
flex-wrap: wrap;
660+
gap: 0.5rem 0.75rem;
661+
font-size: 0.85rem;
662+
}
663+
}
664+
665+
// Sponsor strip mobile adjustments
666+
.sponsor-strip {
667+
padding: 1.5rem 1rem;
668+
gap: 16px;
669+
670+
> a,
671+
> span {
672+
width: 100px;
673+
height: 40px;
674+
}
675+
}
529676
}
530677

531678
.content-image {
@@ -548,3 +695,99 @@ h3 {
548695
font-style: italic;
549696
}
550697
}
698+
699+
// Responsive Video Embeds
700+
.video-embed {
701+
position: relative;
702+
width: 100%;
703+
aspect-ratio: 16 / 9;
704+
margin: 1.5rem 0;
705+
border-radius: 8px;
706+
overflow: hidden;
707+
background: #000;
708+
709+
iframe {
710+
position: absolute;
711+
top: 0;
712+
left: 0;
713+
width: 100%;
714+
height: 100%;
715+
border: 0;
716+
}
717+
}
718+
719+
// Responsive iframes in content (maps, etc.)
720+
.page-content,
721+
.main-column {
722+
iframe {
723+
max-width: 100%;
724+
border-radius: 6px;
725+
}
726+
727+
img {
728+
max-width: 100%;
729+
height: auto;
730+
}
731+
}
732+
733+
// Responsive Tables (markdown-generated)
734+
.page-content table,
735+
.main-column table {
736+
width: 100%;
737+
border-collapse: collapse;
738+
margin: 1.5rem 0;
739+
font-size: 0.95rem;
740+
display: block;
741+
overflow-x: auto;
742+
-webkit-overflow-scrolling: touch;
743+
744+
thead {
745+
background: linear-gradient(180deg, #f5f9fe 0%, #edf4fb 100%);
746+
}
747+
748+
th,
749+
td {
750+
padding: 0.75rem 1rem;
751+
text-align: left;
752+
border-bottom: 1px solid #e0e0e0;
753+
white-space: nowrap;
754+
}
755+
756+
th {
757+
font-weight: 700;
758+
color: #47627b;
759+
font-size: 0.85rem;
760+
text-transform: uppercase;
761+
letter-spacing: 0.03em;
762+
}
763+
764+
tbody tr:hover {
765+
background-color: #f9fbfd;
766+
}
767+
768+
// Allow wrapping for tables with longer content
769+
&.wrap-content td,
770+
&.wrap-content th {
771+
white-space: normal;
772+
}
773+
}
774+
775+
// Schedule-style tables (time | event format)
776+
.page-content table td:first-child,
777+
.main-column table td:first-child {
778+
font-weight: 600;
779+
color: $blue-dark;
780+
white-space: nowrap;
781+
}
782+
783+
@media (max-width: 768px) {
784+
.page-content table,
785+
.main-column table {
786+
font-size: 0.875rem;
787+
788+
th,
789+
td {
790+
padding: 0.6rem 0.75rem;
791+
}
792+
}
793+
}

‎static/js/menu.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// Mobile menu toggle
2+
document.addEventListener('DOMContentLoaded', function() {
3+
const toggle = document.querySelector('.mobile-menu-toggle');
4+
const menu = document.querySelector('.mobile-menu');
5+
6+
if (toggle && menu) {
7+
toggle.addEventListener('click', function() {
8+
const isOpen = menu.classList.toggle('is-open');
9+
toggle.classList.toggle('is-open', isOpen);
10+
toggle.setAttribute('aria-expanded', isOpen);
11+
});
12+
13+
// Close menu when clicking a link
14+
menu.querySelectorAll('a').forEach(function(link) {
15+
link.addEventListener('click', function() {
16+
menu.classList.remove('is-open');
17+
toggle.classList.remove('is-open');
18+
toggle.setAttribute('aria-expanded', 'false');
19+
});
20+
});
21+
}
22+
});

0 commit comments

Comments
 (0)