diff options
Diffstat (limited to 'assets/css/components')
-rw-r--r-- | assets/css/components/_nav.scss | 85 | ||||
-rw-r--r-- | assets/css/components/_page-header.scss | 28 | ||||
-rw-r--r-- | assets/css/components/_refs.scss | 8 |
3 files changed, 62 insertions, 59 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 | 4 | top: 0; | |
5 | &__items { | 5 | background-color: var(--nav--bg); |
6 | display: flex; | 6 | font-size: $nav--font-size; |
7 | align-items: baseline; | 7 | |
8 | } | 8 | &__items { |
9 | 9 | display: flex; | |
10 | &__logo { | 10 | align-items: baseline; |
11 | display: inline-block; | ||
12 | margin: 0; | ||
13 | padding: $nav--item--pad-v 0; | ||
14 | color: var(--nav--logo--fg); | ||
15 | text-decoration: none; | ||
16 | |||
17 | &:link, | ||
18 | &:visited { | ||
19 | &:hover { | ||
20 | background-color: transparent; | ||
21 | color: var(--nav--item--hover--fg); | ||
22 | font-weight: bold; | ||
23 | } | ||
24 | } | 11 | } |
25 | } | 12 | |
26 | 13 | &__logo { | |
27 | &__item { | 14 | display: inline-block; |
28 | display: inline-block; | 15 | margin: 0; |
29 | padding: $nav--item--pad-v $nav--item--pad-h calc(#{$nav--item--pad-v} - 2px); | 16 | padding: $nav--item--pad-v 0; |
30 | margin: 0 (-1 * $nav--item--pad-h) 0 ($nav--item--spacing - $nav--item--pad-h); | 17 | color: var(--nav--logo--fg); |
31 | color: var(--nav--item--idle--fg); | 18 | text-decoration: none; |
32 | text-decoration: none; | 19 | |
33 | border-bottom: 2px solid transparent; | 20 | &:link, |
34 | 21 | &:visited { | |
35 | &:hover { | 22 | &:hover { |
36 | background-color: transparent; | 23 | background-color: transparent; |
37 | color: var(--nav--item--hover--fg); | 24 | color: var(--nav--item--hover--fg); |
38 | font-weight: bold; | 25 | font-weight: bold; |
26 | } | ||
27 | } | ||
39 | } | 28 | } |
40 | } | ||
41 | 29 | ||
42 | @media (max-width: map-get($breakpoints, "sm")) { | ||
43 | &__item { | 30 | &__item { |
44 | margin-left: $nav--item--spacing-sm - $nav--item--pad-h; | 31 | display: inline-block; |
32 | 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); | ||
34 | border-bottom: 2px solid transparent; | ||
35 | color: var(--nav--item--idle--fg); | ||
36 | text-decoration: none; | ||
37 | |||
38 | &:hover { | ||
39 | background-color: transparent; | ||
40 | color: var(--nav--item--hover--fg); | ||
41 | font-weight: bold; | ||
42 | } | ||
43 | } | ||
44 | |||
45 | @media (max-width: map-get($breakpoints, 'sm')) { | ||
46 | &__item { | ||
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 | } |