diff options
Diffstat (limited to 'assets/scss/partials/menu.scss')
| -rw-r--r-- | assets/scss/partials/menu.scss | 214 |
1 files changed, 214 insertions, 0 deletions
diff --git a/assets/scss/partials/menu.scss b/assets/scss/partials/menu.scss new file mode 100644 index 0000000..1d31831 --- /dev/null +++ b/assets/scss/partials/menu.scss @@ -0,0 +1,214 @@ +/*! + * 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: 30px; + top: 30px; + z-index: 2; + cursor: pointer; + + @media (min-width: $on-phone + 1) { + display: none; + } + outline: none; + + &.is-active { + .hamburger-inner, + .hamburger-inner::before, + .hamburger-inner::after { + background-color: var(--accent-color); + } + } +} + +/* Menu style */ +.menu { + list-style: none; + display: flex; + flex-direction: column; + margin: 30px 0; + + @media (max-width: $on-phone) { + background-color: var(--card-background); + margin-top: 0; + padding: 15px 0; + @include box_shadow(1); + display: none; + + &.show { + display: block; + } + } + + @media (min-width: $on-phone + 1) { + align-items: flex-end; + } + + li { + position: relative; + vertical-align: middle; + padding: 10px 0; + + &:not(:last-of-type) { + margin-bottom: 20px; + + @media (max-width: $on-desktop) { + margin-bottom: 10px; + } + } + + @media (max-width: $on-phone) { + padding: 10px 30px; + } + + @media (min-width: $on-phone + 1) and (max-width: ($on-desktop - 1)) { + padding: 10px 0; + } + + @media (min-width: $on-phone + 1) { + width: 100%; + } + + svg { + width: 32px; + height: 32px; + stroke-width: 1.33; + + margin-right: 40px; + + @media (max-width: $on-desktop) { + width: 30px; + height: 30px; + } + } + + a { + height: 100%; + display: inline-flex; + align-items: center; + color: var(--body-text-color); + + @media (max-width: $on-desktop) { + font-size: 1.5rem; + } + } + + span { + flex: 1; + } + + &.current { + a { + color: var(--accent-color); + font-weight: bold; + } + } + } +} + +@media (max-width: $on-phone) { + .show-menu { + .site-info { + //@include box_shadow(2); + } + } +} |