diff options
Diffstat (limited to 'assets')
-rw-r--r-- | assets/css/_basics.scss | 9 | ||||
-rw-r--r-- | assets/css/components/_header.scss | 14 |
2 files changed, 12 insertions, 11 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index 4d4ecc6..c332ff7 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss | |||
@@ -19,26 +19,27 @@ code { | |||
19 | } | 19 | } |
20 | 20 | ||
21 | html { | 21 | html { |
22 | height: 100%; | ||
22 | background-color: prop(--colors --bg); | 23 | background-color: prop(--colors --bg); |
23 | color: prop(--colors --fg); | 24 | color: prop(--colors --fg); |
24 | font-family: $font-fam--text; | 25 | font-family: $font-fam--text; |
25 | font-size: 1em / 16px * $font-size; | 26 | font-size: 1em / 16px * $font-size; |
26 | line-height: $line-height; | 27 | line-height: $line-height; |
27 | height: 100%; | ||
28 | } | 28 | } |
29 | 29 | ||
30 | body { | 30 | body { |
31 | display: flex; | 31 | display: flex; |
32 | box-sizing: border-box; | ||
32 | flex-direction: column; | 33 | flex-direction: column; |
33 | min-height: 100%; | 34 | min-height: 100%; |
34 | margin: 0; | 35 | margin: 0; |
35 | padding: 2px; | 36 | padding: 2px; |
36 | box-sizing: border-box; | ||
37 | } | 37 | } |
38 | 38 | ||
39 | main { | 39 | main { |
40 | width: 100%; | 40 | box-sizing: border-box; |
41 | 41 | width: 100%; | |
42 | |||
42 | @include iro-responsive-env(('sm', 'md')) { | 43 | @include iro-responsive-env(('sm', 'md')) { |
43 | font-size: iro-responsive-set((1rem, 1 / 16 * 18rem)); | 44 | font-size: iro-responsive-set((1rem, 1 / 16 * 18rem)); |
44 | } | 45 | } |
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss index a59c039..c1095b3 100644 --- a/assets/css/components/_header.scss +++ b/assets/css/components/_header.scss | |||
@@ -14,7 +14,7 @@ | |||
14 | --dims: ( | 14 | --dims: ( |
15 | --height: 4rem, | 15 | --height: 4rem, |
16 | --icon: 1.5rem, | 16 | --icon: 1.5rem, |
17 | --pad-x: calc(0.5 * (var(--header--dims--height) - var(--header--dims--icon))), | 17 | --pad-x: calc(.5 * (var(--header--dims--height) - var(--header--dims--icon))), |
18 | ) | 18 | ) |
19 | )); | 19 | )); |
20 | 20 | ||
@@ -31,11 +31,11 @@ | |||
31 | 31 | ||
32 | @include element('item') { | 32 | @include element('item') { |
33 | padding: 0 prop(--dims --pad-x); | 33 | padding: 0 prop(--dims --pad-x); |
34 | line-height: prop(--dims --height); | 34 | transition: background-color .2s, color .2s, border-left-color .2s; |
35 | color: prop(--colors --fg); | ||
36 | background-color: prop(--colors --bg); | 35 | background-color: prop(--colors --bg); |
36 | color: prop(--colors --fg); | ||
37 | line-height: prop(--dims --height); | ||
37 | text-decoration: none; | 38 | text-decoration: none; |
38 | transition: background-color .2s, color .2s, border-left-color .2s; | ||
39 | 39 | ||
40 | @include next-twin-element { | 40 | @include next-twin-element { |
41 | margin-left: 2px; | 41 | margin-left: 2px; |
@@ -43,9 +43,9 @@ | |||
43 | 43 | ||
44 | &:hover, | 44 | &:hover, |
45 | &:focus { | 45 | &:focus { |
46 | color: prop(--colors --hover --fg); | ||
47 | background-color: prop(--colors --hover --bg); | ||
48 | border-left-color: prop(--colors --hover --bg); | 46 | border-left-color: prop(--colors --hover --bg); |
47 | background-color: prop(--colors --hover --bg); | ||
48 | color: prop(--colors --hover --fg); | ||
49 | } | 49 | } |
50 | 50 | ||
51 | @include modifier('icon') { | 51 | @include modifier('icon') { |
@@ -55,8 +55,8 @@ | |||
55 | } | 55 | } |
56 | 56 | ||
57 | @include modifier('active') { | 57 | @include modifier('active') { |
58 | font-weight: bold; | ||
59 | color: prop(--colors --active --fg); | 58 | color: prop(--colors --active --fg); |
59 | font-weight: bold; | ||
60 | } | 60 | } |
61 | } | 61 | } |
62 | 62 | ||