aboutsummaryrefslogtreecommitdiff
path: root/themes/hugo-theme-stack/assets/scss/partials/menu.scss
diff options
context:
space:
mode:
Diffstat (limited to 'themes/hugo-theme-stack/assets/scss/partials/menu.scss')
-rw-r--r--themes/hugo-theme-stack/assets/scss/partials/menu.scss229
1 files changed, 229 insertions, 0 deletions
diff --git a/themes/hugo-theme-stack/assets/scss/partials/menu.scss b/themes/hugo-theme-stack/assets/scss/partials/menu.scss
new file mode 100644
index 0000000..5b6be17
--- /dev/null
+++ b/themes/hugo-theme-stack/assets/scss/partials/menu.scss
@@ -0,0 +1,229 @@
+/*!
+ * Hamburgers
+ * @description Tasty CSS-animated hamburgers
+ * @author Jonathan Suh @jonsuh
+ * @site https://jonsuh.com/hamburgers
+ * @link https://github.com/jonsuh/hamburgers
+ */
+
+.hamburger {
+ padding-top: 10px;
+ display: inline-block;
+ cursor: pointer;
+ transition-property: opacity, filter;
+ transition-duration: 0.15s;
+ transition-timing-function: linear;
+ font: inherit;
+ color: inherit;
+ text-transform: none;
+ background-color: transparent;
+ border: 0;
+ margin: 0;
+ overflow: visible;
+}
+.hamburger:hover {
+ opacity: 0.7;
+}
+.hamburger.is-active:hover {
+ opacity: 0.7;
+}
+.hamburger.is-active .hamburger-inner,
+.hamburger.is-active .hamburger-inner::before,
+.hamburger.is-active .hamburger-inner::after {
+ background-color: #000;
+}
+
+.hamburger-box {
+ width: 30px;
+ height: 24px;
+ display: inline-block;
+ position: relative;
+}
+
+.hamburger-inner {
+ display: block;
+ top: 50%;
+ margin-top: -2px;
+}
+
+.hamburger-inner,
+.hamburger-inner::before,
+.hamburger-inner::after {
+ width: 30px;
+ height: 2px;
+ background-color: var(--card-text-color-main);
+ border-radius: 4px;
+ position: absolute;
+ transition-property: transform;
+ transition-duration: 0.15s;
+ transition-timing-function: ease;
+}
+.hamburger-inner::before,
+.hamburger-inner::after {
+ content: "";
+ display: block;
+}
+.hamburger-inner::before {
+ top: -10px;
+}
+.hamburger-inner::after {
+ bottom: -10px;
+}
+
+.hamburger--spin .hamburger-inner {
+ transition-duration: 0.22s;
+ transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+}
+.hamburger--spin .hamburger-inner::before {
+ transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
+}
+.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);
+}
+
+.hamburger--spin.is-active .hamburger-inner {
+ transform: rotate(225deg);
+ transition-delay: 0.12s;
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+.hamburger--spin.is-active .hamburger-inner::before {
+ top: 0;
+ opacity: 0;
+ transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
+}
+.hamburger--spin.is-active .hamburger-inner::after {
+ bottom: 0;
+ transform: rotate(-90deg);
+ transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+#toggle-menu {
+ background: none;
+ border: none;
+ position: absolute;
+ right: 0;
+ top: 0;
+ z-index: 2;
+ cursor: pointer;
+
+ [dir="rtl"] & {
+ left: 0;
+ right: auto;
+ }
+
+ @include respond(md) {
+ display: none;
+ }
+
+ outline: none;
+
+ &.is-active {
+ .hamburger-inner,
+ .hamburger-inner::before,
+ .hamburger-inner::after {
+ background-color: var(--accent-color);
+ }
+ }
+}
+
+/* Menu style */
+#main-menu {
+ list-style: none;
+ overflow-y: auto;
+ flex-grow: 1;
+ font-size: 1.4rem;
+ background-color: var(--card-background);
+
+ box-shadow: var(--shadow-l1);
+ display: none;
+ margin: 0 calc(var(--container-padding) * -1);
+
+ padding: 30px 30px;
+
+ @include respond(xl) {
+ padding: 15px 0;
+ }
+
+ &, .menu-bottom-section ol {
+ flex-direction: column;
+ gap: 30px;
+
+ @include respond(xl) {
+ gap: 25px;
+ }
+ }
+
+ &.show {
+ display: flex;
+ }
+
+ @include respond(md) {
+ align-items: flex-end;
+ display: flex;
+ background-color: transparent;
+ padding: 0;
+ box-shadow: none;
+ margin: 0;
+ }
+
+ li {
+ position: relative;
+ vertical-align: middle;
+ padding: 0;
+
+ @include respond(md) {
+ width: 100%;
+ }
+
+ svg {
+ stroke: currentColor;
+ stroke-width: 1.33;
+ width: 20px;
+ height: 20px;
+ }
+
+ a {
+ height: 100%;
+ display: inline-flex;
+ align-items: center;
+ color: var(--body-text-color);
+ gap: var(--menu-icon-separation);
+ }
+
+ span {
+ flex: 1;
+ }
+
+ &.current {
+ a {
+ color: var(--accent-color);
+ font-weight: bold;
+ }
+ }
+
+ &.menu-bottom-section {
+ margin-top: auto;
+
+ ol {
+ display: flex;
+ padding-left: 0;
+ }
+ }
+ }
+}
+
+.menu-social {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ flex-direction: row;
+ gap: 10px;
+
+ svg {
+ width: 24px;
+ height: 24px;
+ stroke: var(--body-text-color);
+ stroke-width: 1.33;
+ }
+}