summaryrefslogtreecommitdiffstats
path: root/assets/css/components
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/components')
-rw-r--r--assets/css/components/_card.scss6
-rw-r--r--assets/css/components/_landing-banner.scss2
-rw-r--r--assets/css/components/_nav.scss29
-rw-r--r--assets/css/components/_section-heading.scss8
4 files changed, 30 insertions, 15 deletions
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 4b3a094..21eeb9f 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -18,6 +18,12 @@
18 background-color: prop(--colors --bg); 18 background-color: prop(--colors --bg);
19 line-height: 1.4; 19 line-height: 1.4;
20 20
21 &:link,
22 &:visited {
23 color: currentColor;
24 text-decoration: none;
25 }
26
21 &:hover { 27 &:hover {
22 @include element('content') { 28 @include element('content') {
23 @include modifier('flip') { 29 @include modifier('flip') {
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss
index ee5deab..412ca8a 100644
--- a/assets/css/components/_landing-banner.scss
+++ b/assets/css/components/_landing-banner.scss
@@ -7,6 +7,8 @@
7 )); 7 ));
8 8
9 @include component(namespace()) { 9 @include component(namespace()) {
10 font-size: 1 / 16 * 17em;
11
10 @include element('title') { 12 @include element('title') {
11 max-width: 7em; 13 max-width: 7em;
12 margin-top: 0; 14 margin-top: 0;
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index 03118a9..900b4f2 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -2,10 +2,10 @@
2 @include store(( 2 @include store((
3 --dims: ( 3 --dims: (
4 --font-size: 15px, 4 --font-size: 15px,
5 --pad-y: .5rem, 5 --height: prop(--dims --nav --height, $global: true),
6 --pad-x: 2.5rem,
6 --item: ( 7 --item: (
7 --pad-x: 1rem, 8 --pad-x: 1rem,
8 --pad-y: 1rem,
9 ), 9 ),
10 ), 10 ),
11 --colors: ( 11 --colors: (
@@ -34,9 +34,14 @@
34 34
35 @include store(( 35 @include store((
36 --dims: ( 36 --dims: (
37 --pad-x: prop(--container --dims --pad-x, $global: true),
38 )
39 ), 'md');
40
41 @include store((
42 --dims: (
37 --item: ( 43 --item: (
38 --pad-x: .75em, 44 --pad-x: .75em,
39 --pad-y: .75em,
40 ), 45 ),
41 ) 46 )
42 ), 'sm'); 47 ), 'sm');
@@ -47,15 +52,18 @@
47 z-index: 10000; 52 z-index: 10000;
48 top: 0; 53 top: 0;
49 left: 0; 54 left: 0;
50 align-items: center; 55 height: prop(--dims --height);
51 padding: prop(--dims --pad-y) 0; 56 padding: 0 prop(--dims --pad-x);
52 background-color: prop(--colors --bg); 57 background-color: prop(--colors --bg);
53 font-size: prop(--dims --font-size); 58 font-size: prop(--dims --font-size);
54 59
60 @include element('logo', 'item') {
61 display: flex;
62 align-items: center;
63 height: 100%;
64 }
65
55 @include element('logo') { 66 @include element('logo') {
56 display: inline-block;
57 margin: 0;
58 padding: prop(--dims --item --pad-y) 0;
59 color: prop(--colors --logo --idle --fg); 67 color: prop(--colors --logo --idle --fg);
60 font-family: $font-fam--mono; 68 font-family: $font-fam--mono;
61 text-decoration: none; 69 text-decoration: none;
@@ -76,9 +84,8 @@
76 } 84 }
77 85
78 @include element('item') { 86 @include element('item') {
79 display: inline-block;
80 margin: 0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x); 87 margin: 0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x);
81 padding: prop(--dims --item --pad-y) prop(--dims --item --pad-x); 88 padding: 0 prop(--dims --item --pad-x);
82 color: prop(--colors --item --idle --fg); 89 color: prop(--colors --item --idle --fg);
83 text-decoration: none; 90 text-decoration: none;
84 text-transform: uppercase; 91 text-transform: uppercase;
@@ -97,7 +104,7 @@
97 } 104 }
98 105
99 @include media('<=md') { 106 @include media('<=md') {
100 position: static; 107 width: 100%;
101 } 108 }
102 } 109 }
103} 110}
diff --git a/assets/css/components/_section-heading.scss b/assets/css/components/_section-heading.scss
index db75159..e904943 100644
--- a/assets/css/components/_section-heading.scss
+++ b/assets/css/components/_section-heading.scss
@@ -1,7 +1,7 @@
1@include namespace('section-heading') { 1@include namespace('section-heading') {
2 @include store(( 2 @include store((
3 --dims: ( 3 --dims: (
4 --pad-y: $line-height * 2rem 4 --pad-y: $line-height * 1rem
5 ), 5 ),
6 --colors: ( 6 --colors: (
7 --line: prop(--colors --accent --color, $global: true), 7 --line: prop(--colors --accent --color, $global: true),
@@ -10,8 +10,8 @@
10 10
11 @include component(namespace()) { 11 @include component(namespace()) {
12 margin: 0 0 prop(--dims --pad-y); 12 margin: 0 0 prop(--dims --pad-y);
13 font-size: .8em; 13 font-size: 1 / 16 * 12em;
14 font-weight: 400; 14 font-weight: 550;
15 letter-spacing: .2em; 15 letter-spacing: .2em;
16 text-transform: uppercase; 16 text-transform: uppercase;
17 17
@@ -19,7 +19,7 @@
19 content: ''; 19 content: '';
20 display: inline-block; 20 display: inline-block;
21 width: 3em; 21 width: 3em;
22 height: 1px; 22 height: 2px;
23 margin-right: 1.3em; 23 margin-right: 1.3em;
24 background-color: prop(--colors --line); 24 background-color: prop(--colors --line);
25 vertical-align: middle; 25 vertical-align: middle;