summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/_basics.scss28
-rw-r--r--assets/css/_vars.scss37
-rw-r--r--assets/css/scopes/_body.scss48
3 files changed, 71 insertions, 42 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 0d6a2a7..2a271ff 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -8,7 +8,7 @@ img::selection {
8} 8}
9 9
10:focus { 10:focus {
11 outline: 2px solid prop(--colors --fg-lo); 11 outline: 3px solid prop(--colors --focus-ring);
12 outline-offset: 3px; 12 outline-offset: 3px;
13} 13}
14 14
@@ -49,7 +49,7 @@ code {
49} 49}
50 50
51pre { 51pre {
52 margin: ($line-height * 1em) 0 0; 52 margin: ($line-height * 1rem) 0 0;
53 overflow-x: auto; 53 overflow-x: auto;
54 54
55 code { 55 code {
@@ -69,7 +69,7 @@ small {
69 69
70ul, 70ul,
71ol { 71ol {
72 margin: ($line-height * 1em) 0 0; 72 margin: ($line-height * 1rem) 0 0;
73 padding: 0; 73 padding: 0;
74 list-style: none; 74 list-style: none;
75} 75}
@@ -109,7 +109,7 @@ ul ul {
109} 109}
110 110
111dl { 111dl {
112 margin: ($line-height * 1em) 0 0; 112 margin: ($line-height * 1rem) 0 0;
113 padding: 0; 113 padding: 0;
114} 114}
115 115
@@ -139,27 +139,19 @@ h3,
139h4, 139h4,
140h5, 140h5,
141h6 { 141h6 {
142 margin: ($line-height * 2em) 0 0; 142 margin: ($line-height * 2rem) 0 0;
143 color: var(--heading--fg);
143 font-family: $font-fam--large; 144 font-family: $font-fam--large;
144 font-size: 1em; 145 font-size: 1em;
145 font-weight: 600; 146 font-weight: 600;
146 line-height: 1.2; 147 line-height: 1.2;
147 font-feature-settings: 'ss02' 1; 148 font-feature-settings: 'ss02' 1;
148 149
149 + & { 150 & + & {
150 margin-top: $line-height * 1em; 151 margin-top: $line-height * 1rem;
151 } 152 }
152} 153}
153 154
154h1,
155h2 {
156 color: var(--heading--fg);
157}
158
159h1 {
160 text-transform: uppercase;
161}
162
163p { 155p {
164 margin: ($line-height * 1rem) 0 0; 156 margin: ($line-height * 1rem) 0 0;
165} 157}
@@ -171,14 +163,14 @@ p {
171 163
172hr { 164hr {
173 height: 1px; 165 height: 1px;
174 margin: ($line-height * 1em) 0; 166 margin: ($line-height * 1rem) 0;
175 border: 0; 167 border: 0;
176 background-color: prop(--colors --obj-hi); 168 background-color: prop(--colors --obj-hi);
177} 169}
178 170
179blockquote, 171blockquote,
180pre { 172pre {
181 margin: ($line-height * 1em) 0 0 1px; 173 margin: ($line-height * 1rem) 0 0 1px;
182 padding-left: calc(#{prop(--dims --indent)} - 3px); 174 padding-left: calc(#{prop(--dims --indent)} - 3px);
183 border-left: 2px solid prop(--colors --obj); 175 border-left: 2px solid prop(--colors --obj);
184} 176}
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 2fd7b53..37262a6 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -12,6 +12,11 @@ $unit-intervals: (
12 '': 0 12 '': 0
13); 13);
14 14
15$responsive-mod-scale: (
16 xs: (1rem, 1.2),
17 sm: (.5rem, 1.6)
18);
19
15$font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; 20$font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
16$font-fam--large: 'Garet', $font-fam--text; 21$font-fam--large: 'Garet', $font-fam--text;
17$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;
@@ -19,13 +24,13 @@ $font-size: 16px;
19$line-height: 1.7; 24$line-height: 1.7;
20$content--width: 42rem; 25$content--width: 42rem;
21 26
22$gray0: hsl(220, 7%, 6%); 27$gray0: hsl(220, 7%, 7%);
23$gray1: hsl(220, 7%, 9%); 28$gray1: hsl(220, 7%, 11%);
24$gray2: hsl(220, 7%, 15%); 29$gray2: hsl(220, 7%, 18%);
25$gray3: hsl(220, 7%, 20%); 30$gray3: hsl(220, 7%, 23%);
26$gray4: hsl(220, 7%, 33%); 31$gray4: hsl(220, 7%, 38%);
27$gray5: hsl(220, 7%, 54%); 32$gray5: hsl(220, 7%, 58%);
28$gray6: hsl(220, 7%, 73%); 33$gray6: hsl(220, 7%, 76%);
29$gray7: hsl(220, 7%, 100%); 34$gray7: hsl(220, 7%, 100%);
30 35
31@include store(( 36@include store((
@@ -34,16 +39,16 @@ $gray7: hsl(220, 7%, 100%);
34 --indent: 2rem, 39 --indent: 2rem,
35 ), 40 ),
36 --colors: ( 41 --colors: (
37 --bg-hi: $gray0, // Darker background 42 --bg-hi: $gray0, // Darker background
38 --bg: $gray1, // Background 43 --bg: $gray1, // Background
39 --bg-lo: $gray2, // Lighter background 44 --bg-lo: $gray2, // Lighter background
40 45
41 --obj-hi: $gray3, 46 --obj-hi: $gray3,
42 --obj: $gray4, 47 --obj: $gray4,
43 48
44 --fg-hi: $gray5, // Faint text 49 --fg-hi: $gray5, // Faint text
45 --fg: $gray6, // Text 50 --fg: $gray6, // Text
46 --fg-lo: $gray7, // Strong text 51 --fg-lo: $gray7, // Strong text
47 52
48 --accent: ( 53 --accent: (
49 --h: 354, 54 --h: 354,
@@ -52,6 +57,8 @@ $gray7: hsl(220, 7%, 100%);
52 --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)), 57 --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
53 ), 58 ),
54 59
60 --focus-ring: var(--colors--accent--color),
61
55 --select: ( 62 --select: (
56 --bg: hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .996), 63 --bg: hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .996),
57 --img-bg: hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .5), 64 --img-bg: hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .5),
@@ -59,7 +66,9 @@ $gray7: hsl(220, 7%, 100%);
59 ), 66 ),
60 67
61 --link: ( 68 --link: (
62 --idle: var(--colors--fg-lo) 69 --idle: var(--colors--fg-lo),
70 --idle-body: hsl(210, 90%, 72%), // hsl(354, 100%, 66%),
71 --visited-body: hsl(270, 60%, 72%), // hsl(354, 50%, 66%),
63 ) 72 )
64 ) 73 )
65)); 74));
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index 5f41f29..f725b0a 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -13,21 +13,49 @@
13 margin-top: 0; 13 margin-top: 0;
14 } 14 }
15 15
16 :link {
17 color: prop(--colors --link --idle-body, $global: true);
18 }
19
20 :visited {
21 color: prop(--colors --link --visited-body, $global: true);
22 }
23
24 h1,
25 h2,
26 h3,
27 h4 {
28 transform: translateX(-.06em);
29 font-family: $font-fam--large;
30 font-weight: 600;
31 }
32
16 h1 { 33 h1 {
17 transform: translateX(-.06em); 34 @include iro-responsive-modular-scale(font-size, 4, $responsive-mod-scale);
18 font-family: $font-fam--large;
19 font-weight: 600;
20 text-transform: none;
21 } 35 }
22 36
23 img { 37 h2 {
24 max-width: 100%; 38 @include iro-responsive-modular-scale(font-size, 3, $responsive-mod-scale);
25 } 39 }
26 40
27 @include iro-responsive-env(('xs', 'md')) { 41 h3 {
28 h1 { 42 @include iro-responsive-modular-scale(font-size, 2, $responsive-mod-scale);
29 font-size: iro-responsive-set((1.8rem, 3rem)); 43
30 } 44 letter-spacing: .1em;
45 text-transform: uppercase;
46 }
47
48 h4,
49 h5,
50 h6 {
51 @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale);
52
53 letter-spacing: .1em;
54 text-transform: uppercase;
55 }
56
57 img {
58 max-width: 100%;
31 } 59 }
32 } 60 }
33} 61}