summaryrefslogtreecommitdiffstats
path: root/assets/css/components
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/components')
-rw-r--r--assets/css/components/_footer.scss1
-rw-r--r--assets/css/components/_header.scss47
2 files changed, 31 insertions, 17 deletions
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index 6371411..f4e6040 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -9,7 +9,6 @@
9 9
10 @include component(namespace()) { 10 @include component(namespace()) {
11 position: relative; 11 position: relative;
12 min-height: prop(--dims --outer, $global: true);
13 margin-top: auto; 12 margin-top: auto;
14 overflow: hidden; 13 overflow: hidden;
15 background-color: prop(--colors --bg); 14 background-color: prop(--colors --bg);
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index 81e4d4f..e88d167 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -1,9 +1,12 @@
1@include namespace('header') { 1@include namespace('header') {
2 @include store(( 2 @include store((
3 --colors: ( 3 --colors: (
4 --fg: prop(--colors --fg-hi, $global: true), 4 --bg: prop(--colors --bg-lo, $global: true),
5 --fg: prop(--colors --fg-lo, $global: true),
6 --border: prop(--colors --bg, $global: true),
5 --hover: ( 7 --hover: (
6 --fg: prop(--colors --fg-lo, $global: true), 8 --bg: prop(--colors --fg-lo, $global: true),
9 --fg: prop(--colors --bg-hi, $global: true),
7 ), 10 ),
8 --active: ( 11 --active: (
9 --fg: prop(--colors --fg-lo, $global: true), 12 --fg: prop(--colors --fg-lo, $global: true),
@@ -11,32 +14,44 @@
11 ), 14 ),
12 --dims: ( 15 --dims: (
13 --height: 4rem, 16 --height: 4rem,
14 --pad-x: .6rem, 17 --icon: 1.5rem,
18 --pad-x: calc(0.5 * (var(--header--dims--height) - var(--header--dims--icon))),
15 ) 19 )
16 )); 20 ));
17 21
22 @include store((
23 --colors: (
24 --bg: prop(--colors --bg-hi, $global: true),
25 )
26 ), 'light');
27
18 @include component(namespace()) { 28 @include component(namespace()) {
19 display: flex; 29 display: flex;
20 flex-direction: row; 30 height: prop(--dims --height);
21 justify-content: flex-start;
22 height: prop(--dims --height);
23 31
24 @include element('item') { 32 @include element('item') {
25 padding: 0 prop(--dims --pad-x); 33 padding: 0 prop(--dims --pad-x);
26 line-height: prop(--dims --height); 34 line-height: prop(--dims --height);
27 color: prop(--colors --fg); 35 color: prop(--colors --fg);
28 text-decoration: none; 36 background-color: prop(--colors --bg);
37 text-decoration: none;
38 transition: background-color .2s, color .2s;
29 39
30 &:hover { 40 &:hover {
31 color: prop(--colors --hover --fg); 41 color: prop(--colors --hover --fg);
42 background-color: prop(--colors --hover --bg);
43 }
44
45 @include next-twin-element {
46 //padding-left: calc(0.5 * #{prop(--dims --pad-x)});
47 //margin-left: calc(-0.5 * #{prop(--dims --pad-x)});
48 border-left: 1px solid prop(--colors --border);
32 } 49 }
33 50
34 @include modifier('icon') { 51 @include modifier('icon') {
35 display: flex; 52 display: flex;
36 align-items: center; 53 align-items: center;
37 justify-content: center; 54 justify-content: center;
38 padding: 0;
39 width: prop(--dims --height);
40 } 55 }
41 56
42 @include modifier('active') { 57 @include modifier('active') {
@@ -46,8 +61,8 @@
46 } 61 }
47 62
48 @include element('icon') { 63 @include element('icon') {
49 width: 1.5em; 64 width: prop(--dims --icon);
50 height: 1.5em; 65 height: prop(--dims --icon);
51 } 66 }
52 } 67 }
53} 68}