Skip to content

Fix mobile menu display #255

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Gijsreyn wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Fix mobile menu display #255

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a585e9c
Fix mobile menu display
Gijsreyn Jun 6, 2026
768cf73
Take remark Coderabbit
Gijsreyn Jun 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
290 changes: 249 additions & 41 deletions assets/css/futuristic.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,16 +72,17 @@
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
0 8px 10px -6px rgb(0 0 0 / 0.1);
--shadow-lg:
0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl:
0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--shadow-glow: 0 0 40px rgba(59, 130, 246, 0.3);
--shadow-card: 0 0 0 1px var(--border-color), var(--shadow-md);

/* Typography */
--font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, sans-serif;
--font-sans:
"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
sans-serif;
Comment thread
Gijsreyn marked this conversation as resolved.
--font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;

--text-xs: 0.75rem;
Expand Down Expand Up @@ -134,6 +135,7 @@
/* Z-Index Scale */
--z-dropdown: 100;
--z-sticky: 200;
--z-nav-mobile: 250;
--z-fixed: 300;
--z-modal-backdrop: 400;
--z-modal: 500;
Expand Down Expand Up @@ -201,8 +203,8 @@
#0f172a 50%,
#1e293b 100%
);
--shadow-card: 0 0 0 1px var(--border-color),
0 4px 6px -1px rgb(0 0 0 / 0.3);
--shadow-card:
0 0 0 1px var(--border-color), 0 4px 6px -1px rgb(0 0 0 / 0.3);
}
}

Expand Down Expand Up @@ -407,12 +409,13 @@ pre code {
.site-header {
position: sticky;
top: 0;
z-index: var(--z-sticky);
z-index: var(--z-fixed);
background: var(--bg-primary);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-color);
transition: background-color var(--transition-normal),
transition:
background-color var(--transition-normal),
box-shadow var(--transition-normal);
}

Expand Down Expand Up @@ -571,49 +574,251 @@ pre code {
color: var(--text-primary);
}

/* Mobile Navigation */
.mobile-menu {
display: none;
}

@media (max-width: 768px) {
.main-nav {
display: none;
}

.menu-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-md);
color: var(--text-primary);
}

.menu-toggle:active,
.menu-toggle:hover {
background: var(--bg-tertiary);
}

.search-toggle {
min-width: 40px;
height: 40px;
justify-content: center;
padding: 0;
border-radius: var(--radius-md);
}

.search-toggle span,
.search-toggle kbd,
.header-actions > .theme-toggle {
display: none;
}

.mobile-menu {
display: block;
position: fixed;
top: var(--header-height);
left: 0;
inset: 0;
z-index: var(--z-modal);
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-normal);
}

.mobile-menu.open {
opacity: 1;
pointer-events: auto;
}

.mobile-menu-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.62);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}

.mobile-menu-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
flex-direction: column;
align-items: stretch;
padding: var(--space-4);
display: grid;
grid-template-rows: auto 1fr auto;
width: min(92vw, 390px);
background: var(--bg-primary);
border-top: 1px solid var(--border-color);
transform: translateX(-100%);
transition: transform var(--transition-normal);
overflow-y: auto;
border-left: 1px solid var(--border-color);
box-shadow: -24px 0 80px rgba(0, 0, 0, 0.28);
transform: translateX(100%);
transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.main-nav.open {
.mobile-menu.open .mobile-menu-panel {
transform: translateX(0);
}

.nav-list {
flex-direction: column;
align-items: stretch;
.mobile-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-5) var(--space-5) var(--space-4);
border-bottom: 1px solid var(--border-color);
}

.dropdown-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: none;
.mobile-menu-eyebrow {
display: block;
margin-bottom: var(--space-1);
font-size: var(--text-xs);
font-weight: 700;
color: var(--color-primary);
text-transform: uppercase;
}

.mobile-menu-title {
margin: 0;
font-size: var(--text-2xl);
line-height: 1.1;
color: var(--text-primary);
}

.mobile-menu-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
background: var(--bg-tertiary);
color: var(--text-primary);
cursor: pointer;
}

.mobile-menu-close i {
font-size: 22px;
line-height: 1;
}

.mobile-menu-body {
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: var(--space-4) var(--space-4) var(--space-6);
}

.mobile-menu-list {
display: grid;
gap: var(--space-3);
list-style: none;
margin: 0;
padding: 0;
}

.mobile-menu-link,
.mobile-menu-heading,
.mobile-submenu-link {
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
min-height: 48px;
color: var(--text-primary);
text-decoration: none;
}

.mobile-menu-link,
.mobile-menu-heading {
padding: var(--space-3);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
background: var(--bg-secondary);
font-size: var(--text-base);
font-weight: 700;
}

.mobile-menu-link.active,
.mobile-menu-link:active,
.mobile-menu-link:hover {
border-color: var(--color-primary);
color: var(--color-primary);
text-decoration: none;
}

.mobile-menu-icon,
.mobile-submenu-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--radius-md);
background: var(--gradient-accent);
color: #fff;
flex: 0 0 auto;
}

.mobile-menu-group {
display: grid;
gap: var(--space-2);
}

.mobile-submenu {
display: grid;
gap: var(--space-2);
padding-left: var(--space-4);
display: none;
}

.nav-item.open .dropdown-menu {
display: block;
.mobile-submenu-link {
min-height: 44px;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
color: var(--text-secondary);
font-size: var(--text-sm);
font-weight: 600;
}

.menu-toggle {
display: block;
.mobile-submenu-link:active,
.mobile-submenu-link:hover {
background: var(--bg-tertiary);
color: var(--text-primary);
text-decoration: none;
}

.mobile-submenu-icon {
width: 28px;
height: 28px;
border-radius: var(--radius-sm);
}

.mobile-menu-footer {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
padding: var(--space-4);
border-top: 1px solid var(--border-color);
background: var(--bg-primary);
}

.mobile-menu-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 44px;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
background: var(--bg-secondary);
color: var(--text-primary);
font-size: var(--text-sm);
font-weight: 700;
text-decoration: none;
cursor: pointer;
}

.mobile-menu-action:hover,
.mobile-menu-action:active {
border-color: var(--color-primary);
color: var(--color-primary);
text-decoration: none;
}
}

Expand Down Expand Up @@ -832,10 +1037,8 @@ pre code {
.hero-grid {
position: absolute;
inset: 0;
background-image: linear-gradient(
rgba(255, 255, 255, 0.03) 1px,
transparent 1px
),
background-image:
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
Expand Down Expand Up @@ -1006,7 +1209,9 @@ pre code {

.card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-primary);
box-shadow:
var(--shadow-lg),
0 0 0 1px var(--color-primary);
transform: translateY(-4px);
}

Expand Down Expand Up @@ -1199,7 +1404,10 @@ pre code {
margin-bottom: var(--space-4);
}

[data-theme="dark"] .timeline-year-header,
[data-theme="dark"] .timeline-year-header {
background: var(--bg-primary);
}

@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .timeline-year-header {
background: var(--bg-primary);
Expand Down
Loading
Loading