summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/_basics.scss85
-rw-r--r--assets/css/_vars.scss20
-rw-r--r--assets/css/components/_footer.scss6
-rw-r--r--assets/css/components/_hero.scss45
-rw-r--r--assets/css/components/_nav.scss71
-rw-r--r--assets/css/components/_page.scss3
-rw-r--r--assets/css/layouts/_container.scss29
-rw-r--r--assets/css/layouts/_site.scss46
-rw-r--r--assets/css/scopes/_code.scss27
-rw-r--r--assets/css/scopes/_page.scss25
-rw-r--r--assets/css/style.scss11
11 files changed, 179 insertions, 189 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 1cd5547..740b293 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -1,28 +1,27 @@
1@font-face { 1@font-face {
2 font-family: 'IBM Plex Sans'; 2 font-family: 'IBM Plex Sans';
3 font-style: normal; 3 font-style: normal;
4 font-weight: normal; 4 font-weight: normal;
5 src: //local('IBM Plex Sans'), 5 src: url('/IBMPlexSans-Regular.woff2') format('woff2');
6 url('/IBMPlexSans-Regular.woff2') format('woff2');
7} 6}
8 7
9@font-face { 8@font-face {
10 font-family: 'IBM Plex Sans'; 9 font-family: 'IBM Plex Sans';
11 font-style: normal; 10 font-style: normal;
12 font-weight: bold; 11 font-weight: bold;
13 src: url('/IBMPlexSans-Bold.woff2') format('woff2'); 12 src: url('/IBMPlexSans-Bold.woff2') format('woff2');
14} 13}
15 14
16@font-face { 15@font-face {
17 font-family: 'Garet Variable'; 16 font-family: 'Garet Variable';
18 font-style: normal; 17 font-style: normal;
19 font-weight: 50 950; 18 font-weight: 50 950;
20 src: url('/GaretVariable.woff2') format('woff2-variations'); 19 src: url('/GaretVariable.woff2') format('woff2-variations');
21} 20}
22 21
23::selection { 22::selection {
24 background-color: var(--select--bg); 23 background-color: var(--select--bg);
25 color: var(--select--fg); 24 color: var(--select--fg);
26} 25}
27 26
28img::selection { 27img::selection {
@@ -37,14 +36,14 @@ code {
37 36
38html { 37html {
39 background-color: prop(--colors --bg); 38 background-color: prop(--colors --bg);
40 color: prop(--colors --fg); 39 color: prop(--colors --fg);
41 font-family: $font-fam--text; 40 font-family: $font-fam--text;
42 font-size: px-to-em($font-size, 16px); 41 font-size: px-to-em($font-size, 16px);
43 line-height: $line-height; 42 line-height: $line-height;
44} 43}
45 44
46body { 45body {
47 margin: 0; 46 margin: 0;
48 padding: 0; 47 padding: 0;
49} 48}
50 49
@@ -58,7 +57,7 @@ code {
58} 57}
59 58
60pre { 59pre {
61 margin: ($line-height * 1em) 0 0; 60 margin: ($line-height * 1em) 0 0;
62 overflow-x: auto; 61 overflow-x: auto;
63 62
64 code { 63 code {
@@ -67,27 +66,27 @@ pre {
67} 66}
68 67
69strong { 68strong {
70 color: prop(--colors --fg-lo); 69 color: prop(--colors --fg-lo);
71 font-weight: bold; 70 font-weight: bold;
72} 71}
73 72
74ul, 73ul,
75ol { 74ol {
76 margin: ($line-height * 1em) 0 0; 75 margin: ($line-height * 1em) 0 0;
77 padding: 0; 76 padding: 0;
78 list-style: none; 77 list-style: none;
79} 78}
80 79
81li { 80li {
82 position: relative; 81 position: relative;
83 padding-left: $subcontent--indent; 82 padding-left: $subcontent--indent;
84 83
85 &::before { 84 &::before {
86 display: inline-block; 85 display: inline-block;
87 position: absolute; 86 position: absolute;
88 width: $subcontent--indent; 87 width: $subcontent--indent;
89 margin-left: -1 * $subcontent--indent; 88 margin-left: -1 * $subcontent--indent;
90 color: prop(--colors --fg-hi); 89 color: prop(--colors --fg-hi);
91 font-family: $font-fam--mono; 90 font-family: $font-fam--mono;
92 } 91 }
93} 92}
@@ -113,7 +112,7 @@ ul ul {
113} 112}
114 113
115dl { 114dl {
116 margin: ($line-height * 1em) 0 0; 115 margin: ($line-height * 1em) 0 0;
117 padding: 0; 116 padding: 0;
118} 117}
119 118
@@ -123,12 +122,12 @@ dd {
123} 122}
124 123
125dt { 124dt {
126 color: prop(--colors --fg-lo); 125 color: prop(--colors --fg-lo);
127 font-weight: bold; 126 font-weight: bold;
128 127
129 &::after { 128 &::after {
130 content: ':'; 129 content: ':';
131 color: prop(--colors --fg); 130 color: prop(--colors --fg);
132 font-weight: normal; 131 font-weight: normal;
133 } 132 }
134} 133}
@@ -143,11 +142,11 @@ h3,
143h4, 142h4,
144h5, 143h5,
145h6 { 144h6 {
146 margin: ($line-height * 2em) 0 0; 145 margin: ($line-height * 2em) 0 0;
147 font-family: $font-fam--large; 146 font-family: $font-fam--large;
148 font-size: 1em; 147 font-size: 1em;
149 font-weight: 600; 148 font-weight: 600;
150 line-height: 1.2; 149 line-height: 1.2;
151 font-feature-settings: 'ss02' 1; 150 font-feature-settings: 'ss02' 1;
152 151
153 + h1, 152 + h1,
@@ -170,22 +169,22 @@ h1 {
170} 169}
171 170
172p { 171p {
173 margin: ($line-height * 1em) 0 0; 172 margin: ($line-height * 1em) 0 0;
174 hyphens: auto; 173 hyphens: auto;
175} 174}
176 175
177:link, 176:link,
178:visited { 177:visited {
179 position: relative; 178 position: relative;
180 z-index: 1; 179 z-index: 1;
181 margin: 0 -.3em; 180 margin: 0 -.3em;
182 padding: .2em .3em; 181 padding: .2em .3em;
183 color: var(--link--idle--fg); 182 color: var(--link--idle--fg);
184 183
185 &:hover { 184 &:hover {
186 background-color: var(--link--hover--bg); 185 background-color: var(--link--hover--bg);
187 color: var(--link--hover--fg); 186 color: var(--link--hover--fg);
188 text-decoration: none; 187 text-decoration: none;
189 } 188 }
190 189
191 strong { 190 strong {
@@ -194,15 +193,15 @@ p {
194} 193}
195 194
196hr { 195hr {
197 height: 1px; 196 height: 1px;
198 margin: ($line-height * 1em) 0; 197 margin: ($line-height * 1em) 0;
199 border: 0; 198 border: 0;
200 background-color: prop(--colors --obj); 199 background-color: prop(--colors --obj);
201} 200}
202 201
203blockquote, 202blockquote,
204pre { 203pre {
205 margin: ($line-height * 1em) 0 0 1px; 204 margin: ($line-height * 1em) 0 0 1px;
206 padding-left: calc(#{$subcontent--indent} - 3px); 205 padding-left: calc(#{$subcontent--indent} - 3px);
207 border-left: 2px solid prop(--colors --obj); 206 border-left: 2px solid prop(--colors --obj);
208} 207}
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index ae8a7a8..3461b81 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -13,12 +13,12 @@ $unit-intervals: (
13 '': 0 13 '': 0
14); 14);
15 15
16$font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; 16$font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
17$font-fam--large: 'Garet Variable', $font-fam--text; 17$font-fam--large: 'Garet Variable', $font-fam--text;
18$font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; 18$font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
19$font-size: 16px; 19$font-size: 16px;
20$line-height: 1.7; 20$line-height: 1.7;
21$content--width: 56rem; 21$content--width: 56rem;
22$subcontent--indent: 2em; 22$subcontent--indent: 2em;
23 23
24$gray0: hsl(220, 0%, 7%); 24$gray0: hsl(220, 0%, 7%);
@@ -43,6 +43,14 @@ $gray5: hsl(220, 0%, 100%);
43 ) 43 )
44)); 44));
45 45
46@each $breakpoint in map-keys($breakpoints) {
47 @include media('<=#{$breakpoint}') {
48 @include store((
49 --colors: ()
50 ), $breakpoint);
51 }
52}
53
46:root { 54:root {
47 --heading--fg: var(--colors--fg-lo); 55 --heading--fg: var(--colors--fg-lo);
48 56
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index 8fcbc98..db30fcd 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -9,9 +9,9 @@
9 )); 9 ));
10 10
11 @include component(namespace()) { 11 @include component(namespace()) {
12 padding-top: prop(--dims --pad-y); 12 padding-top: prop(--dims --pad-y);
13 padding-bottom: prop(--dims --pad-y); 13 padding-bottom: prop(--dims --pad-y);
14 color: prop(--colors --fg); 14 color: prop(--colors --fg);
15 text-align: right; 15 text-align: right;
16 } 16 }
17} 17}
diff --git a/assets/css/components/_hero.scss b/assets/css/components/_hero.scss
index 6c497a1..3d8890e 100644
--- a/assets/css/components/_hero.scss
+++ b/assets/css/components/_hero.scss
@@ -1,6 +1,7 @@
1@include namespace('hero') { 1@include namespace('hero') {
2 @include store(( 2 @include store((
3 --colors: ( 3 --colors: (
4 --emph-fg: prop(--colors --accent, $global: true),
4 --back-fg: prop(--colors --bg-hi, $global: true) 5 --back-fg: prop(--colors --bg-hi, $global: true)
5 ) 6 )
6 )); 7 ));
@@ -8,42 +9,44 @@
8 @include component(namespace()) { 9 @include component(namespace()) {
9 display: flex; 10 display: flex;
10 position: relative; 11 position: relative;
11 flex-direction: column;
12 align-items: center; 12 align-items: center;
13 justify-content: center; 13 justify-content: center;
14 text-align: center; 14 text-align: center;
15 15
16 @include element('title', 'backtitle') { 16 @include element('title') {
17 margin: 0 auto; 17 margin-top: 0;
18 font-family: $font-fam--large; 18 font-family: $font-fam--large;
19 text-transform: none; 19 text-transform: none;
20 }
21 20
22 @include element('emph') { 21 @include modifier('front') {
23 color: prop(--colors --accent, $global: true); 22 max-width: 7em;
24 font-weight: 500; 23 font-size: 2.5rem;
25 } 24 font-weight: 200;
25 }
26 26
27 @include element('title') { 27 @include modifier('back') {
28 max-width: 11em; 28 position: absolute;
29 font-weight: 200; 29 z-index: -10;
30 transform: translateY(-.08em);
31 color: prop(--colors --back-fg);
32 }
30 } 33 }
31 34
32 @include element('backtitle') { 35 @include element('emph') {
33 position: absolute; 36 color: prop(--colors --emph-fg);
34 z-index: -10; 37 font-weight: 500;
35 transform: translateY(-.08em);
36 color: prop(--colors --back-fg);
37 } 38 }
38 39
39 @include iro-responsive-env(('xs', 'sm', 'md')) { 40 @include iro-responsive-env(('xs', 'sm', 'md')) {
40 @include element('title') { 41 @include element('title') {
41 padding: iro-responsive-set((7rem, 7rem, 10rem)) 0; 42 @include modifier('front') {
42 font-size: iro-responsive-set((1.8rem, 2.8rem, 3.3rem)); 43 padding: iro-responsive-set((7rem, 7rem, 10rem)) 0;
43 } 44 font-size: iro-responsive-set((2.2rem, 3rem, 3.5rem));
45 }
44 46
45 @include element('backtitle') { 47 @include modifier('back') {
46 font-size: iro-responsive-set((12rem, 14rem, 16rem)); 48 font-size: iro-responsive-set((12rem, 14rem, 16rem));
49 }
47 } 50 }
48 } 51 }
49 } 52 }
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index 2472706..8fc4564 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -2,13 +2,10 @@
2 @include store(( 2 @include store((
3 --dims: ( 3 --dims: (
4 --font-size: 15px, 4 --font-size: 15px,
5 --pad-y: 1em, 5 --pad-y: 1em,
6 --pad-y-sm: .5em,
7 --item: ( 6 --item: (
8 --pad-x: 1em, 7 --pad-x: 1em,
9 --pad-x-sm: .75em,
10 --pad-y: 1em, 8 --pad-y: 1em,
11 --pad-y-sm: .75em,
12 ), 9 ),
13 ), 10 ),
14 --colors: ( 11 --colors: (
@@ -34,69 +31,63 @@
34 ) 31 )
35 )); 32 ));
36 33
34 @include store((
35 --dims: (
36 --pad-y: .5em,
37 --item: (
38 --pad-x: .75em,
39 --pad-y: .75em,
40 ),
41 )
42 ), 'sm');
43
37 @include component(namespace()) { 44 @include component(namespace()) {
38 display: flex; 45 display: flex;
39 align-items: center; 46 align-items: center;
40 padding: prop(--dims --pad-y) 0; 47 padding: prop(--dims --pad-y) 0;
41 font-size: prop(--dims --font-size); 48 font-size: prop(--dims --font-size);
42 49
43 @include element('logo') { 50 @include element('logo') {
44 display: inline-block; 51 display: inline-block;
45 margin: 0; 52 margin: 0;
46 padding: prop(--dims --item --pad-y) 0; 53 padding: prop(--dims --item --pad-y) 0;
47 color: prop(--colors --logo --idle --fg); 54 color: prop(--colors --logo --idle --fg);
48 font-family: $font-fam--mono; 55 font-family: $font-fam--mono;
49 text-decoration: none; 56 text-decoration: none;
50 57
51 &:link, 58 &:link,
52 &:visited { 59 &:visited {
53 &:hover { 60 &:hover {
54 background-color: transparent; 61 background-color: transparent;
55 color: prop(--colors --logo --hover --fg); 62 color: prop(--colors --logo --hover --fg);
56 } 63 }
57 } 64 }
58 } 65 }
59 66
60 @include element('logo-symbol') { 67 @include element('logo-symbol') {
61 display: block; 68 display: block;
62 width: $line-height * .9em; 69 width: $line-height * .9em;
63 height: $line-height * 1em; 70 height: $line-height * 1em;
64 } 71 }
65 72
66 @include element('item') { 73 @include element('item') {
67 display: inline-block; 74 display: inline-block;
68 margin: 0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x); 75 margin: 0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x);
69 padding: prop(--dims --item --pad-y) prop(--dims --item --pad-x); 76 padding: prop(--dims --item --pad-y) prop(--dims --item --pad-x);
70 color: prop(--colors --item --idle --fg); 77 color: prop(--colors --item --idle --fg);
71 text-decoration: none; 78 text-decoration: none;
72 text-transform: uppercase; 79 text-transform: uppercase;
73 80
74 &:hover { 81 &:hover {
75 background-color: transparent; 82 background-color: transparent;
76 color: prop(--colors --item --hover --fg); 83 color: prop(--colors --item --hover --fg);
77 text-decoration: underline; 84 text-decoration: underline;
78 } 85 }
79 86
80 @include modifier('active') { 87 @include modifier('active') {
81 border-color: prop(--colors --item --active --fg); 88 border-color: prop(--colors --item --active --fg);
82 color: prop(--colors --item --active --fg); 89 color: prop(--colors --item --active --fg);
83 font-weight: bold; 90 font-weight: bold;
84 }
85 }
86
87 @include media('<=sm') {
88 padding: prop(--dims --pad-y-sm) 0;
89
90 @include element('logo', 'item') {
91 padding-top: prop(--dims --item --pad-y-sm);
92 padding-bottom: prop(--dims --item --pad-y-sm);
93 }
94
95 @include element('item') {
96 margin-right: calc(-1 * #{prop(--dims --item --pad-x-sm)});
97 margin-left: prop(--dims --item --pad-x-sm);
98 padding-right: prop(--dims --item --pad-x-sm);
99 padding-left: prop(--dims --item --pad-x-sm);
100 } 91 }
101 } 92 }
102 } 93 }
diff --git a/assets/css/components/_page.scss b/assets/css/components/_page.scss
deleted file mode 100644
index ef39061..0000000
--- a/assets/css/components/_page.scss
+++ /dev/null
@@ -1,3 +0,0 @@
1@include component('page') {
2 //
3}
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
index 2bb4d80..2e102ee 100644
--- a/assets/css/layouts/_container.scss
+++ b/assets/css/layouts/_container.scss
@@ -2,35 +2,30 @@
2 @include store(( 2 @include store((
3 --dims: ( 3 --dims: (
4 --pad-x: 2rem, 4 --pad-x: 2rem,
5 --pad-x-sm: 1rem, 5 --pad-y: $line-height * 2rem
6 --pad-y: $line-height * 2rem,
7 --pad-y-sm: $line-height * 1rem
8 ) 6 )
9 )); 7 ));
10 8
9 @include store((
10 --dims: (
11 --pad-x: 1rem,
12 --pad-y: $line-height * 1rem
13 )
14 ), 'sm');
15
11 @include layout(namespace()) { 16 @include layout(namespace()) {
12 padding-right: prop(--dims --pad-x); 17 padding-right: prop(--dims --pad-x);
13 padding-left: prop(--dims --pad-x); 18 padding-left: prop(--dims --pad-x);
14 19
15 @include modifier('content') { 20 @include modifier('content') {
16 max-width: $content--width; 21 max-width: $content--width;
17 margin-right: auto; 22 margin-right: auto;
18 margin-left: auto; 23 margin-left: auto;
19 } 24 }
20 25
21 @include modifier('pad-v') { 26 @include modifier('pad-v') {
22 padding-top: prop(--dims --pad-y); 27 padding-top: prop(--dims --pad-y);
23 padding-bottom: prop(--dims --pad-y); 28 padding-bottom: prop(--dims --pad-y);
24 } 29 }
25
26 @include media('<=sm') {
27 padding-right: prop(--dims --pad-x-sm);
28 padding-left: prop(--dims --pad-x-sm);
29
30 @include modifier('pad-v') {
31 padding-top: prop(--dims --pad-y-sm);
32 padding-bottom: prop(--dims --pad-y-sm);
33 }
34 }
35 } 30 }
36} 31}
diff --git a/assets/css/layouts/_site.scss b/assets/css/layouts/_site.scss
new file mode 100644
index 0000000..2c06606
--- /dev/null
+++ b/assets/css/layouts/_site.scss
@@ -0,0 +1,46 @@
1@include namespace('site') {
2 @include store((
3 --dims: (
4 --outer-pad-x: 6rem,
5 --inner-pad-x: 2rem,
6 --pad-y: 6rem,
7 )
8 ));
9
10 @include layout(namespace()) {
11 display: flex;
12 flex-direction: row;
13 justify-content: space-around;
14
15 @include element('col') {
16 box-sizing: border-box;
17 flex: 0 0 auto;
18 width: 100%;
19 min-width: 0;
20 max-width: 35rem;
21 height: 100%;
22 padding: prop(--dims --pad-y) prop(--dims --inner-pad-x) prop(--dims --pad-y) prop(--dims --outer-pad-x);
23
24 @include next-twin-element {
25 flex: 1 1 auto;
26 max-width: 45rem;
27 height: auto;
28 padding-right: prop(--dims --outer-pad-x);
29 padding-left: prop(--dims --inner-pad-x);
30 }
31 }
32
33 @include media('<=sm') {
34 display: block;
35
36 @include element('col') {
37 width: auto;
38 height: auto;
39
40 @include next-twin-element {
41 width: auto;
42 }
43 }
44 }
45 }
46}
diff --git a/assets/css/scopes/_code.scss b/assets/css/scopes/_code.scss
deleted file mode 100644
index 3f50ce3..0000000
--- a/assets/css/scopes/_code.scss
+++ /dev/null
@@ -1,27 +0,0 @@
1@include scope('code') {
2 @include modifier('highlight') {
3 pre {
4 color: var(--fg-lo);
5 }
6 }
7
8 pre {
9 font-size: 1em;
10 line-height: $line-height;
11 }
12
13 /* stylelint-disable selector-class-pattern */
14
15 .c {
16 color: var(--fg-hi);
17 }
18
19 .kt,
20 .k,
21 .kr,
22 .o,
23 .si,
24 .p {
25 color: var(--fg);
26 }
27}
diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss
deleted file mode 100644
index 70489fb..0000000
--- a/assets/css/scopes/_page.scss
+++ /dev/null
@@ -1,25 +0,0 @@
1@include scope('page-content') {
2 :link {
3 color: var(--page--link--idle--fg);
4 }
5
6 :visited {
7 color: var(--page--link--visited--fg);
8 }
9
10 :link,
11 :visited {
12 &:hover {
13 background-color: var(--page--link--hover--bg);
14 color: var(--page--link--hover--fg);
15 }
16 }
17
18 img {
19 max-width: 100%;
20 }
21
22 > :first-child {
23 margin-top: 0;
24 }
25}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index dad774a..c8fd0c1 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -9,17 +9,20 @@
9@import 'basics'; 9@import 'basics';
10 10
11@import 'components/nav'; 11@import 'components/nav';
12@import 'components/page';
13@import 'components/hero'; 12@import 'components/hero';
14@import 'components/footer'; 13@import 'components/footer';
15 14
15@import 'layouts/site';
16@import 'layouts/container'; 16@import 'layouts/container';
17 17
18@import 'scopes/code';
19@import 'scopes/page';
20
21@import 'utils'; 18@import 'utils';
22 19
23:root { 20:root {
24 @include assign; 21 @include assign;
22
23 @each $breakpoint in map-keys($breakpoints) {
24 @include media('<=#{$breakpoint}') {
25 @include assign($breakpoint);
26 }
27 }
25} 28}
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-07-03 09:34:29 +0000