diff options
Diffstat (limited to 'assets/css/partials/_header.scss')
| -rw-r--r-- | assets/css/partials/_header.scss | 168 |
1 files changed, 0 insertions, 168 deletions
diff --git a/assets/css/partials/_header.scss b/assets/css/partials/_header.scss deleted file mode 100644 index f1501b5..0000000 --- a/assets/css/partials/_header.scss +++ /dev/null @@ -1,168 +0,0 @@ -header { - background-color: $lightAlt; - color: $accent; - box-shadow: $shadow; - - display: flex; - flex-direction: column; - justify-content: space-between; - gap: 0.5rem 0; - - padding: 1rem 1rem; - - position: relative; - overflow: hidden; - - &:before { - content: ""; - height: 4px; - width: 100%; - - background-color: $accent; - - position: absolute; - display: block; - top: 0; - left: 0; - } - - a { - display: inline-block; - } - - #brand { - display: flex; - flex-direction: row; - align-items: center; - gap: 1rem; - - h1 { - font-size: 2rem; - margin: 0; - font-weight: 500; - line-height: 1; - - a { - font-family: $mainFontStack; - color: $accent; - text-decoration: none; - } - } - } - - #nav-pages { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 0.25rem; - - padding-inline-start: 2.5rem; - - transition: max-height 0.2s linear; - max-height: 100vh; - - a { - @extend %tracking-tight; - } - } - - #nav-socials { - align-self: center; - - display: flex; - gap: 1.5rem; - - transition: max-height 0.2s linear; - max-height: 100vh; - - a { - font-size: 1.5rem; - transition: color 0.2s ease-in-out; - line-height: 1; - } - } - - nav>a { - text-decoration: none; - font-weight: 700; - font-size: 1.2rem; - text-transform: uppercase; - letter-spacing: 0.1rem; - transition: color 0.2s ease-in-out; - color: $accent; - line-height: 1; - - &:hover { - color: $accentDark; - } - - &.active { - color: $accentDark; - } - } - - button#mobile-menu { - display: block; - background-color: transparent; - border: none; - font-size: 2rem; - cursor: pointer; - } -} - -@media (max-width: $breakpointTablet) { - header.collapsed { - gap: 0; - - #nav-pages, - #nav-socials { - max-height: 0; - overflow: hidden; - } - } -} - -@media (min-width: $breakpointTablet) { - header { - flex-direction: row; - align-items: baseline; - justify-content: space-between; - - #nav-pages { - justify-self: start; - flex-direction: row; - gap: 1.5rem; - padding-inline-start: 0; - } - - button#mobile-menu { - display: none; - } - - &.collapsed { - - #nav-pages, - #nav-socials { - display: flex; - max-height: unset; - } - } - } -} - -@media (min-width: $breakpointDesktop) { - header { - padding: 1rem 1.25rem; - gap: 1.5rem; - justify-content: center; - - h1 { - margin-bottom: 0.5rem; - } - - #nav-socials { - align-self: flex-end; - margin-left: auto; - } - } -}
\ No newline at end of file |