From 517fc58cf46595990fd5af64a1bd647ee5ac3c08 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 27 Dec 2020 22:03:42 +0100 Subject: Added stylelint, generate some metadata automatically --- assets/css/components/_nav.scss | 85 +++++++++++++++++++++-------------------- 1 file changed, 44 insertions(+), 41 deletions(-) (limited to 'assets/css/components/_nav.scss') diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss index a3f7004..60b3584 100644 --- a/assets/css/components/_nav.scss +++ b/assets/css/components/_nav.scss @@ -1,51 +1,54 @@ .c-nav { - background-color: var(--nav--bg); - font-size: $nav--font-size; - - &__items { - display: flex; - align-items: baseline; - } - - &__logo { - display: inline-block; - margin: 0; - padding: $nav--item--pad-v 0; - color: var(--nav--logo--fg); - text-decoration: none; - - &:link, - &:visited { - &:hover { - background-color: transparent; - color: var(--nav--item--hover--fg); - font-weight: bold; - } + position: sticky; + z-index: 1000; + top: 0; + background-color: var(--nav--bg); + font-size: $nav--font-size; + + &__items { + display: flex; + align-items: baseline; } - } - - &__item { - display: inline-block; - padding: $nav--item--pad-v $nav--item--pad-h calc(#{$nav--item--pad-v} - 2px); - margin: 0 (-1 * $nav--item--pad-h) 0 ($nav--item--spacing - $nav--item--pad-h); - color: var(--nav--item--idle--fg); - text-decoration: none; - border-bottom: 2px solid transparent; - - &:hover { - background-color: transparent; - color: var(--nav--item--hover--fg); - font-weight: bold; + + &__logo { + display: inline-block; + margin: 0; + padding: $nav--item--pad-v 0; + color: var(--nav--logo--fg); + text-decoration: none; + + &:link, + &:visited { + &:hover { + background-color: transparent; + color: var(--nav--item--hover--fg); + font-weight: bold; + } + } } - } - @media (max-width: map-get($breakpoints, "sm")) { &__item { - margin-left: $nav--item--spacing-sm - $nav--item--pad-h; + display: inline-block; + margin: 0 (-1 * $nav--item--pad-h) 0 ($nav--item--spacing - $nav--item--pad-h); + padding: $nav--item--pad-v $nav--item--pad-h calc(#{$nav--item--pad-v} - 2px); + border-bottom: 2px solid transparent; + color: var(--nav--item--idle--fg); + text-decoration: none; + + &:hover { + background-color: transparent; + color: var(--nav--item--hover--fg); + font-weight: bold; + } + } + + @media (max-width: map-get($breakpoints, 'sm')) { + &__item { + margin-left: $nav--item--spacing-sm - $nav--item--pad-h; + } } - } - /* + /* @media (max-width: map-get($breakpoints, "xs")) { &__logo { display: none; -- cgit v1.2.3-54-g00ecf