summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/_vars.scss4
-rw-r--r--assets/css/components/_footer.scss4
-rw-r--r--assets/css/components/_outer-button.scss34
-rw-r--r--assets/css/layouts/_container.scss16
-rw-r--r--assets/css/layouts/_section.scss6
5 files changed, 30 insertions, 34 deletions
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 71dc5d2..756ddb8 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -31,9 +31,7 @@ $gray7: hsl(220, 0%, 100%);
31 31
32@include store(( 32@include store((
33 --dims: ( 33 --dims: (
34 --outer: 4rem, 34 --outer: 4rem,
35 --outer-spacing: 1.7rem,
36 --spacing-y: 4rem,
37 ), 35 ),
38 --colors: ( 36 --colors: (
39 --bg-hi: $gray0, // Darker background 37 --bg-hi: $gray0, // Darker background
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index 225cd29..fcea457 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -18,8 +18,8 @@
18 width: 100%; 18 width: 100%;
19 height: 100%; 19 height: 100%;
20 margin-top: -1px; 20 margin-top: -1px;
21 margin-right: prop(--dims --outer-spacing, $global: true); 21 margin-right: prop(--container --dims --pad-x, $global: true);
22 margin-left: prop(--dims --outer-spacing, $global: true); 22 margin-left: prop(--container --dims --pad-x, $global: true);
23 border-top: 1px solid prop(--colors --border); 23 border-top: 1px solid prop(--colors --border);
24 color: prop(--colors --fg); 24 color: prop(--colors --fg);
25 line-height: prop(--dims --outer, $global: true); 25 line-height: prop(--dims --outer, $global: true);
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index 774281d..d636f7d 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -11,6 +11,9 @@
11 --fg: prop(--colors --fg-lo, $global: true), 11 --fg: prop(--colors --fg-lo, $global: true),
12 --bg: prop(--colors --bg-hi, $global: true), 12 --bg: prop(--colors --bg-hi, $global: true),
13 ) 13 )
14 ),
15 --dims: (
16 --pad-x: 1.7rem,
14 ) 17 )
15 )); 18 ));
16 19
@@ -31,6 +34,11 @@
31 bottom: 0; 34 bottom: 0;
32 } 35 }
33 36
37 @include modifier('inverted') {
38 background-color: prop(--colors --inverted --bg);
39 color: prop(--colors --inverted --fg);
40 }
41
34 @include element('icon') { 42 @include element('icon') {
35 display: flex; 43 display: flex;
36 position: relative; 44 position: relative;
@@ -39,20 +47,6 @@
39 justify-content: center; 47 justify-content: center;
40 width: prop(--dims --outer, $global: true); 48 width: prop(--dims --outer, $global: true);
41 height: 100%; 49 height: 100%;
42 transition: background-color .2s, color .2s;
43 }
44
45 @include modifier('inverted') {
46 background-color: prop(--colors --inverted --bg);
47 color: prop(--colors --inverted --fg);
48 }
49
50 &:link,
51 &:visited {
52 &:hover {
53 background-color: prop(--colors --hover --bg);
54 color: prop(--colors --hover --fg);
55 }
56 } 50 }
57 51
58 @include element('icon-symbol') { 52 @include element('icon-symbol') {
@@ -63,10 +57,18 @@
63 57
64 @include element('content') { 58 @include element('content') {
65 height: 100%; 59 height: 100%;
66 padding-right: prop(--dims --outer-spacing, $global: true); 60 padding-right: prop(--dims --pad-x);
67 padding-left: prop(--dims --outer-spacing, $global: true); 61 padding-left: prop(--dims --pad-x);
68 line-height: prop(--dims --outer, $global: true); 62 line-height: prop(--dims --outer, $global: true);
69 white-space: nowrap; 63 white-space: nowrap;
70 } 64 }
65
66 &:link,
67 &:visited {
68 &:hover {
69 background-color: prop(--colors --hover --bg);
70 color: prop(--colors --hover --fg);
71 }
72 }
71 } 73 }
72} 74}
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
index 0f569e4..ae23042 100644
--- a/assets/css/layouts/_container.scss
+++ b/assets/css/layouts/_container.scss
@@ -1,19 +1,15 @@
1@include namespace('container') { 1@include namespace('container') {
2 @include store(( 2 @include store((
3 --dims: ( 3 --dims: (
4 --pad-x: 3rem 4 --pad-x: 2rem,
5 --pad-y: 4rem,
5 ) 6 )
6 )); 7 ));
7 8
8 @include store(( 9 @include store((
9 --dims: ( 10 --dims: (
10 --pad-x: 2rem 11 --pad-x: 1rem,
11 ) 12 --pad-y: 3rem,
12 ), 'md');
13
14 @include store((
15 --dims: (
16 --pad-x: 4%
17 ) 13 )
18 ), 'sm'); 14 ), 'sm');
19 15
@@ -30,8 +26,8 @@
30 } 26 }
31 27
32 @include modifier('pad-y') { 28 @include modifier('pad-y') {
33 padding-top: prop(--dims --spacing-y, $global: true); 29 padding-top: prop(--dims --pad-y);
34 padding-bottom: prop(--dims --spacing-y, $global: true); 30 padding-bottom: prop(--dims --pad-y);
35 } 31 }
36 } 32 }
37} 33}
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
index 3450858..70ace4c 100644
--- a/assets/css/layouts/_section.scss
+++ b/assets/css/layouts/_section.scss
@@ -2,7 +2,7 @@
2 @include store(( 2 @include store((
3 --colors: ( 3 --colors: (
4 --border: prop(--colors --obj-hi, $global: true), 4 --border: prop(--colors --obj-hi, $global: true),
5 ) 5 ),
6 )); 6 ));
7 7
8 @include layout(namespace()) { 8 @include layout(namespace()) {
@@ -33,8 +33,8 @@
33 width: 100%; 33 width: 100%;
34 height: 100%; 34 height: 100%;
35 margin-top: -1px; 35 margin-top: -1px;
36 margin-right: prop(--dims --outer-spacing, $global: true); 36 margin-right: prop(--container --dims --pad-x, $global: true);
37 margin-left: prop(--dims --outer-spacing, $global: true); 37 margin-left: prop(--container --dims --pad-x, $global: true);
38 border-top: 1px solid prop(--colors --border); 38 border-top: 1px solid prop(--colors --border);
39 } 39 }
40 } 40 }