lars/Portfolio-2026
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change mobile menu styling to figma layout

Browse Source
This commit is contained in:
sefaria
2026-06-29 22:46:01 +02:00
parent a3fc18ddef
commit 4aae167054
1 changed files with 15 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+15 -14
View File
@@ -189,10 +189,7 @@
--shadow-button: inset 0px 1px 2px rgba(0, 0, 0, 0.16), inset 0px -1px 4px rgba(0, 0, 0, 0.28), var(--shadow-box);
--shadow-button-active: inset 0px -1px 2px rgba(0, 0, 0, 0.16), inset 0px 1px 4px rgba(0, 0, 0, 0.28), var(--shadow-box);
--border: #d8d8d8;
--header-offset: 6.5rem;
--overlay: light-dark(rgb(247 247 247 / 0.8), rgb(18 18 18 / 0.8));
--panel: rgb(255 255 255 / 0.76);
--overlay: light-dark(rgb(247 247 247 / 0.4), rgb(18 18 18 / 0.4));
}
*,
@@ -618,8 +615,8 @@ button:active, .button-primary:active, .logo:active {
position: fixed;
inset: 0;
background: var(--overlay);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
@@ -629,19 +626,16 @@ button:active, .button-primary:active, .logo:active {
.mobile-menu {
position: fixed;
top: 7rem;
right: 1rem;
left: 1rem;
right: var(--spacing-5);
left: var(--spacing-5);
width: auto;
max-width: none;
max-height: calc(100dvh - 7.5rem);
overflow-y: auto;
margin-inline: 0;
background: var(--panel);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgb(255 255 255 / 0.45);
border-radius: 1rem;
box-shadow: 0 20px 50px rgb(0 0 0 / 0.16);
background: var(--color-button-secondary);
border-radius: var(--radius-xxl);
box-shadow: var(--shadow-button);
padding: 1rem;
opacity: 0;
transform: translateY(1rem) scale(0.98);
@@ -653,6 +647,9 @@ button:active, .button-primary:active, .logo:active {
.mobile-menu ul {
display: grid;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.mobile-menu a {
@@ -1007,6 +1004,10 @@ footer a:visited {
.menu-bar {
gap: var(--spacing-3);
}
.mobile-menu {
right: var(--spacing-4);
left: var(--spacing-4);
}
}
@media print,