kushidou/hugo-theme-stack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mobile menu glitch on collapsing (#1243)

Browse Source
This commit is contained in:
Jimmy
2026-01-26 14:13:16 +01:00
committed by GitHub
parent a069e975aa
commit 258a71e21a
2 changed files with 33 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/scss/partials/menu.scss
+14 -2
View File
@@ -21,12 +21,15 @@
margin: 0; margin: 0;
overflow: visible; overflow: visible;
} }
.hamburger:hover { .hamburger:hover {
opacity: 0.7; opacity: 0.7;
} }
.hamburger.is-active:hover { .hamburger.is-active:hover {
opacity: 0.7; opacity: 0.7;
} }
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after { .hamburger.is-active .hamburger-inner::after {
@@ -58,14 +61,17 @@
transition-duration: 0.15s; transition-duration: 0.15s;
transition-timing-function: ease; transition-timing-function: ease;
} }
.hamburger-inner::before, .hamburger-inner::before,
.hamburger-inner::after { .hamburger-inner::after {
content: ""; content: "";
display: block; display: block;
} }
.hamburger-inner::before { .hamburger-inner::before {
top: -10px; top: -10px;
} }
.hamburger-inner::after { .hamburger-inner::after {
bottom: -10px; bottom: -10px;
} }
@@ -74,9 +80,11 @@
transition-duration: 0.22s; transition-duration: 0.22s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
} }
.hamburger--spin .hamburger-inner::before { .hamburger--spin .hamburger-inner::before {
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
} }
.hamburger--spin .hamburger-inner::after { .hamburger--spin .hamburger-inner::after {
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
} }
@@ -86,11 +94,13 @@
transition-delay: 0.12s; transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
} }
.hamburger--spin.is-active .hamburger-inner::before { .hamburger--spin.is-active .hamburger-inner::before {
top: 0; top: 0;
opacity: 0; opacity: 0;
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
} }
.hamburger--spin.is-active .hamburger-inner::after { .hamburger--spin.is-active .hamburger-inner::after {
bottom: 0; bottom: 0;
transform: rotate(-90deg); transform: rotate(-90deg);
@@ -118,6 +128,7 @@
outline: none; outline: none;
&.is-active { &.is-active {
.hamburger-inner, .hamburger-inner,
.hamburger-inner::before, .hamburger-inner::before,
.hamburger-inner::after { .hamburger-inner::after {
@@ -144,7 +155,8 @@
padding: 15px 0; padding: 15px 0;
} }
&, .menu-bottom-section ol { &,
.menu-bottom-section ol {
flex-direction: column; flex-direction: column;
gap: 30px; gap: 30px;
@@ -226,4 +238,4 @@
stroke: var(--body-text-color); stroke: var(--body-text-color);
stroke-width: 1.33; stroke-width: 1.33;
} }
} }
assets/scss/partials/sidebar.scss
+19 -1
View File
@@ -11,7 +11,25 @@
flex-direction: column; flex-direction: column;
flex-shrink: 0; flex-shrink: 0;
align-self: stretch; align-self: stretch;
gap: var(--sidebar-element-separation);
@include respond(md) {
gap: var(--sidebar-element-separation);
}
margin-bottom: calc(-1 * var(--sidebar-element-separation));
@include respond(md) {
margin-bottom: 0;
}
&> :not(:last-child) {
margin-bottom: var(--sidebar-element-separation);
@include respond(md) {
margin-bottom: 0;
}
}
max-width: none; max-width: none;
width: 100%; width: 100%;
position: relative; position: relative;