diff options
Diffstat (limited to 'assets/css/components')
-rw-r--r-- | assets/css/components/_nav.scss | 77 | ||||
-rw-r--r-- | assets/css/components/_page-header.scss | 28 | ||||
-rw-r--r-- | assets/css/components/_refs.scss | 8 |
3 files changed, 58 insertions, 55 deletions
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 @@ | |||
1 | .c-nav { | 1 | .c-nav { |
2 | background-color: var(--nav--bg); | 2 | position: sticky; |
3 | font-size: $nav--font-size; | 3 | z-index: 1000; |
4 | top: 0; | ||
5 | background-color: var(--nav--bg); | ||
6 | font-size: $nav--font-size; | ||
4 | 7 | ||
5 | &__items { | 8 | &__items { |
6 | display: flex; | 9 | display: flex; |
7 | align-items: baseline; | 10 | align-items: baseline; |
8 | } | 11 | } |
9 | 12 | ||
10 | &__logo { | 13 | &__logo { |
11 | display: inline-block; | 14 | display: inline-block; |
12 | margin: 0; | 15 | margin: 0; |
13 | padding: $nav--item--pad-v 0; | 16 | padding: $nav--item--pad-v 0; |
14 | color: var(--nav--logo--fg); | 17 | color: var(--nav--logo--fg); |
15 | text-decoration: none; | 18 | text-decoration: none; |
16 | 19 | ||
17 | &:link, | 20 | &:link, |
18 | &:visited { | 21 | &:visited { |
19 | &:hover { | 22 | &:hover { |
20 | background-color: transparent; | 23 | background-color: transparent; |
21 | color: var(--nav--item--hover--fg); | 24 | color: var(--nav--item--hover--fg); |
22 | font-weight: bold; | 25 | font-weight: bold; |
23 | } | 26 | } |
27 | } | ||
24 | } | 28 | } |
25 | } | ||
26 | 29 | ||
27 | &__item { | 30 | &__item { |
28 | display: inline-block; | 31 | display: inline-block; |
29 | padding: $nav--item--pad-v $nav--item--pad-h calc(#{$nav--item--pad-v} - 2px); | 32 | margin: 0 (-1 * $nav--item--pad-h) 0 ($nav--item--spacing - $nav--item--pad-h); |
30 | margin: 0 (-1 * $nav--item--pad-h) 0 ($nav--item--spacing - $nav--item--pad-h); | 33 | padding: $nav--item--pad-v $nav--item--pad-h calc(#{$nav--item--pad-v} - 2px); |
31 | color: var(--nav--item--idle--fg); | 34 | border-bottom: 2px solid transparent; |
32 | text-decoration: none; | 35 | color: var(--nav--item--idle--fg); |
33 | border-bottom: 2px solid transparent; | 36 | text-decoration: none; |
34 | 37 | ||
35 | &:hover { | 38 | &:hover { |
36 | background-color: transparent; | 39 | background-color: transparent; |
37 | color: var(--nav--item--hover--fg); | 40 | color: var(--nav--item--hover--fg); |
38 | font-weight: bold; | 41 | font-weight: bold; |
42 | } | ||
39 | } | 43 | } |
40 | } | ||
41 | 44 | ||
42 | @media (max-width: map-get($breakpoints, "sm")) { | 45 | @media (max-width: map-get($breakpoints, 'sm')) { |
43 | &__item { | 46 | &__item { |
44 | margin-left: $nav--item--spacing-sm - $nav--item--pad-h; | 47 | margin-left: $nav--item--spacing-sm - $nav--item--pad-h; |
48 | } | ||
45 | } | 49 | } |
46 | } | ||
47 | 50 | ||
48 | /* | 51 | /* |
49 | @media (max-width: map-get($breakpoints, "xs")) { | 52 | @media (max-width: map-get($breakpoints, "xs")) { |
50 | &__logo { | 53 | &__logo { |
51 | display: none; | 54 | display: none; |
diff --git a/assets/css/components/_page-header.scss b/assets/css/components/_page-header.scss index dd273df..886b3e9 100644 --- a/assets/css/components/_page-header.scss +++ b/assets/css/components/_page-header.scss | |||
@@ -1,17 +1,17 @@ | |||
1 | .c-page-header { | 1 | .c-page-header { |
2 | margin-bottom: $line-height * 2em; | 2 | margin-bottom: $line-height * 2em; |
3 | overflow: hidden; | 3 | overflow: hidden; |
4 | 4 | ||
5 | &::after { | 5 | &::after { |
6 | position: relative; | 6 | content: str-repeat('░', 120); |
7 | z-index: -10; | 7 | display: block; |
8 | content: str-repeat("░", 120); | 8 | position: relative; |
9 | display: block; | 9 | z-index: -10; |
10 | height: $line-height; | 10 | height: $line-height; |
11 | margin-top: px-to-em(2px); | 11 | margin-top: px-to-em(2px); |
12 | padding-top: px-to-em(2px); | 12 | padding-top: px-to-em(2px); |
13 | color: var(--fg-minus); | 13 | border-top: 1px solid var(--fg-minus); |
14 | border-top: 1px solid var(--fg-minus); | 14 | color: var(--fg-minus); |
15 | line-height: $code-block--line-height; | 15 | line-height: $code-block--line-height; |
16 | } | 16 | } |
17 | } | 17 | } |
diff --git a/assets/css/components/_refs.scss b/assets/css/components/_refs.scss index b90252d..51524bd 100644 --- a/assets/css/components/_refs.scss +++ b/assets/css/components/_refs.scss | |||
@@ -1,7 +1,7 @@ | |||
1 | .c-refs__item { | 1 | .c-refs__item { |
2 | padding-left: 0; | 2 | padding-left: 0; |
3 | 3 | ||
4 | &::before { | 4 | &::before { |
5 | display: none; | 5 | display: none; |
6 | } | 6 | } |
7 | } | 7 | } |