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: 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); --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; --overlay: light-dark(rgb(247 247 247 / 0.4), rgb(18 18 18 / 0.4));
--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);
} }
*, *,
@@ -618,8 +615,8 @@ button:active, .button-primary:active, .logo:active {
position: fixed; position: fixed;
inset: 0; inset: 0;
background: var(--overlay); background: var(--overlay);
backdrop-filter: blur(6px); backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(12px);
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
transition: opacity 0.25s ease; transition: opacity 0.25s ease;
@@ -629,19 +626,16 @@ button:active, .button-primary:active, .logo:active {
.mobile-menu { .mobile-menu {
position: fixed; position: fixed;
top: 7rem; top: 7rem;
right: 1rem; right: var(--spacing-5);
left: 1rem; left: var(--spacing-5);
width: auto; width: auto;
max-width: none; max-width: none;
max-height: calc(100dvh - 7.5rem); max-height: calc(100dvh - 7.5rem);
overflow-y: auto; overflow-y: auto;
margin-inline: 0; margin-inline: 0;
background: var(--panel); background: var(--color-button-secondary);
backdrop-filter: blur(16px); border-radius: var(--radius-xxl);
-webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-button);
border: 1px solid rgb(255 255 255 / 0.45);
border-radius: 1rem;
box-shadow: 0 20px 50px rgb(0 0 0 / 0.16);
padding: 1rem; padding: 1rem;
opacity: 0; opacity: 0;
transform: translateY(1rem) scale(0.98); transform: translateY(1rem) scale(0.98);
@@ -653,6 +647,9 @@ button:active, .button-primary:active, .logo:active {
.mobile-menu ul { .mobile-menu ul {
display: grid; display: grid;
gap: 0.5rem; gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
} }
.mobile-menu a { .mobile-menu a {
@@ -1007,6 +1004,10 @@ footer a:visited {
.menu-bar { .menu-bar {
gap: var(--spacing-3); gap: var(--spacing-3);
} }
.mobile-menu {
right: var(--spacing-4);
left: var(--spacing-4);
}
} }
@media print, @media print,