diff options
Diffstat (limited to 'assets/css/components/_nav.scss')
| -rw-r--r-- | assets/css/components/_nav.scss | 68 |
1 files changed, 44 insertions, 24 deletions
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss index d86a484..834b6a0 100644 --- a/assets/css/components/_nav.scss +++ b/assets/css/components/_nav.scss | |||
| @@ -1,36 +1,56 @@ | |||
| 1 | .c-nav { | 1 | .c-nav { |
| 2 | background-color: var(--nav-bg); | 2 | background-color: var(--nav-bg); |
| 3 | //border-bottom: 1px solid var(--bg-plus); | ||
| 4 | 3 | ||
| 5 | &__items { | 4 | &__items { |
| 6 | display: flex; | 5 | display: flex; |
| 7 | align-items: baseline; | 6 | align-items: baseline; |
| 7 | } | ||
| 8 | |||
| 9 | &__logo { | ||
| 10 | display: inline-block; | ||
| 11 | color: var(--nav-logo-fg); | ||
| 12 | text-decoration: none; | ||
| 13 | |||
| 14 | &:link, | ||
| 15 | &:visited { | ||
| 16 | &:hover { | ||
| 17 | background-color: transparent; | ||
| 18 | color: var(--nav-item-hover-fg); | ||
| 19 | font-weight: bold; | ||
| 20 | } | ||
| 8 | } | 21 | } |
| 22 | } | ||
| 9 | 23 | ||
| 10 | &__logo { | 24 | &__item { |
| 11 | display: inline-block; | 25 | display: inline-block; |
| 12 | color: var(--nav-logo-fg); | 26 | padding: 1rem 1ch calc(1rem - 2px); |
| 13 | text-decoration: none; | 27 | margin: 0 -1ch 0 3ch; |
| 28 | color: var(--nav-item-idle-fg); | ||
| 29 | text-decoration: none; | ||
| 30 | border-bottom: 2px solid transparent; | ||
| 14 | 31 | ||
| 15 | &:link:hover { | 32 | &:hover { |
| 16 | background-color: transparent; | 33 | background-color: transparent; |
| 17 | color: var(--nav-item-hover-fg); | 34 | color: var(--nav-item-hover-fg); |
| 18 | font-weight: bold; | 35 | font-weight: bold; |
| 19 | } | ||
| 20 | } | 36 | } |
| 37 | } | ||
| 21 | 38 | ||
| 39 | @media (max-width: map-get($breakpoints, "sm")) { | ||
| 22 | &__item { | 40 | &__item { |
| 23 | display: inline-block; | 41 | margin-left: 2ch; |
| 24 | padding: 1rem 1ch calc(1rem - 2px); | 42 | } |
| 25 | margin: 0 -1ch 0 3ch; | 43 | } |
| 26 | color: var(--nav-item-idle-fg); | 44 | |
| 27 | text-decoration: none; | 45 | /* |
| 28 | border-bottom: 2px solid transparent; | 46 | @media (max-width: map-get($breakpoints, "xs")) { |
| 47 | &__logo { | ||
| 48 | display: none; | ||
| 49 | } | ||
| 29 | 50 | ||
| 30 | &:hover { | 51 | &__logo + &__item { |
| 31 | background-color: transparent; | 52 | margin-left: -1ch; |
| 32 | color: var(--nav-item-hover-fg); | ||
| 33 | font-weight: bold; | ||
| 34 | } | 53 | } |
| 35 | } | 54 | } |
| 55 | */ | ||
| 36 | } | 56 | } |