diff options
Diffstat (limited to 'assets/css/components')
-rw-r--r-- | assets/css/components/_card.scss | 6 | ||||
-rw-r--r-- | assets/css/components/_landing-banner.scss | 2 | ||||
-rw-r--r-- | assets/css/components/_nav.scss | 29 | ||||
-rw-r--r-- | assets/css/components/_section-heading.scss | 8 |
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; |