diff options
Diffstat (limited to 'assets/css')
-rw-r--r-- | assets/css/_basics.scss | 2 | ||||
-rw-r--r-- | assets/css/_vars.scss | 2 | ||||
-rw-r--r-- | assets/css/components/_header.scss | 17 | ||||
-rw-r--r-- | assets/css/scopes/_body.scss | 10 |
4 files changed, 9 insertions, 22 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index 09b9585..ec1a07a 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss | |||
@@ -37,7 +37,7 @@ body { | |||
37 | 37 | ||
38 | main { | 38 | main { |
39 | @include iro-responsive-env(('sm', 'md')) { | 39 | @include iro-responsive-env(('sm', 'md')) { |
40 | font-size: iro-responsive-set((1rem, 1 / 16 * 19rem)); | 40 | font-size: iro-responsive-set((1rem, 1 / 16 * 18rem)); |
41 | } | 41 | } |
42 | } | 42 | } |
43 | 43 | ||
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index eea1764..ca7abd3 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss | |||
@@ -22,7 +22,7 @@ $font-fam--large: 'Garet', $font-fam--text; | |||
22 | $font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; | 22 | $font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; |
23 | $font-size: 16px; | 23 | $font-size: 16px; |
24 | $line-height: 1.7; | 24 | $line-height: 1.7; |
25 | $content--width: 46rem; | 25 | $content--width: 42rem; |
26 | 26 | ||
27 | @include iro-execute { | 27 | @include iro-execute { |
28 | $gray0: hsl(220, 5%, 7%); | 28 | $gray0: hsl(220, 5%, 7%); |
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss index 1a10345..341be75 100644 --- a/assets/css/components/_header.scss +++ b/assets/css/components/_header.scss | |||
@@ -1,9 +1,8 @@ | |||
1 | @include namespace('header') { | 1 | @include namespace('header') { |
2 | @include store(( | 2 | @include store(( |
3 | --colors: ( | 3 | --colors: ( |
4 | --bg: prop(--colors --bg-lo, $global: true), | 4 | --bg: prop(--colors --bg-lo, $global: true), |
5 | --fg: prop(--colors --fg-lo, $global: true), | 5 | --fg: prop(--colors --fg-lo, $global: true), |
6 | --border: prop(--colors --bg, $global: true), | ||
7 | --hover: ( | 6 | --hover: ( |
8 | --bg: prop(--colors --fg-lo, $global: true), | 7 | --bg: prop(--colors --fg-lo, $global: true), |
9 | --fg: prop(--colors --bg-hi, $global: true), | 8 | --fg: prop(--colors --bg-hi, $global: true), |
@@ -26,13 +25,9 @@ | |||
26 | ), 'light'); | 25 | ), 'light'); |
27 | 26 | ||
28 | @include component(namespace()) { | 27 | @include component(namespace()) { |
29 | height: prop(--dims --height); | 28 | display: flex; |
30 | 29 | height: prop(--dims --height); | |
31 | @include element('nav') { | 30 | filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)}); |
32 | display: inline-flex; | ||
33 | height: 100%; | ||
34 | box-shadow: prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true); | ||
35 | } | ||
36 | 31 | ||
37 | @include element('item') { | 32 | @include element('item') { |
38 | padding: 0 prop(--dims --pad-x); | 33 | padding: 0 prop(--dims --pad-x); |
@@ -43,7 +38,7 @@ | |||
43 | transition: background-color .2s, color .2s, border-left-color .2s; | 38 | transition: background-color .2s, color .2s, border-left-color .2s; |
44 | 39 | ||
45 | @include next-twin-element { | 40 | @include next-twin-element { |
46 | border-left: 1px solid prop(--colors --border); | 41 | margin-left: 2px; |
47 | } | 42 | } |
48 | 43 | ||
49 | &:hover, | 44 | &:hover, |
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss index 6abaeb0..1de4dc5 100644 --- a/assets/css/scopes/_body.scss +++ b/assets/css/scopes/_body.scss | |||
@@ -9,7 +9,7 @@ | |||
9 | --fg: prop(--colors --accent --strong, $global: true), | 9 | --fg: prop(--colors --accent --strong, $global: true), |
10 | --bg: prop(--colors --bg-hi, $global: true), | 10 | --bg: prop(--colors --bg-hi, $global: true), |
11 | ), | 11 | ), |
12 | --obj-border: prop(--colors --obj, $global: true), | 12 | --obj-border: prop(--colors --obj-hi, $global: true), |
13 | ), | 13 | ), |
14 | --dims: ( | 14 | --dims: ( |
15 | --meta: ( | 15 | --meta: ( |
@@ -67,13 +67,5 @@ | |||
67 | background-color: transparent; | 67 | background-color: transparent; |
68 | color: currentColor; | 68 | color: currentColor; |
69 | } | 69 | } |
70 | |||
71 | @include media('<=sm') { | ||
72 | font-size: 1 / 16 * 17em; | ||
73 | } | ||
74 | |||
75 | @include media('<=xs') { | ||
76 | font-size: 1em; | ||
77 | } | ||
78 | } | 70 | } |
79 | } | 71 | } |