diff options
Diffstat (limited to 'assets')
-rw-r--r-- | assets/css/_basics.scss | 85 | ||||
-rw-r--r-- | assets/css/_vars.scss | 20 | ||||
-rw-r--r-- | assets/css/components/_footer.scss | 6 | ||||
-rw-r--r-- | assets/css/components/_hero.scss | 45 | ||||
-rw-r--r-- | assets/css/components/_nav.scss | 71 | ||||
-rw-r--r-- | assets/css/components/_page.scss | 3 | ||||
-rw-r--r-- | assets/css/layouts/_container.scss | 29 | ||||
-rw-r--r-- | assets/css/layouts/_site.scss | 46 | ||||
-rw-r--r-- | assets/css/scopes/_code.scss | 27 | ||||
-rw-r--r-- | assets/css/scopes/_page.scss | 25 | ||||
-rw-r--r-- | assets/css/style.scss | 11 | ||||
-rw-r--r-- | assets/favicon/favicon.svg | 75 |
12 files changed, 254 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 | ||
28 | img::selection { | 27 | img::selection { |
@@ -37,14 +36,14 @@ code { | |||
37 | 36 | ||
38 | html { | 37 | html { |
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 | ||
46 | body { | 45 | body { |
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 | ||
60 | pre { | 59 | pre { |
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 | ||
69 | strong { | 68 | strong { |
70 | color: prop(--colors --fg-lo); | 69 | color: prop(--colors --fg-lo); |
71 | font-weight: bold; | 70 | font-weight: bold; |
72 | } | 71 | } |
73 | 72 | ||
74 | ul, | 73 | ul, |
75 | ol { | 74 | ol { |
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 | ||
81 | li { | 80 | li { |
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 | ||
115 | dl { | 114 | dl { |
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 | ||
125 | dt { | 124 | dt { |
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, | |||
143 | h4, | 142 | h4, |
144 | h5, | 143 | h5, |
145 | h6 { | 144 | h6 { |
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 | ||
172 | p { | 171 | p { |
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 | ||
196 | hr { | 195 | hr { |
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 | ||
203 | blockquote, | 202 | blockquote, |
204 | pre { | 203 | pre { |
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 | } |
diff --git a/assets/favicon/favicon.svg b/assets/favicon/favicon.svg new file mode 100644 index 0000000..31f9007 --- /dev/null +++ b/assets/favicon/favicon.svg | |||
@@ -0,0 +1,75 @@ | |||
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?> | ||
2 | <svg | ||
3 | xmlns:dc="http://purl.org/dc/elements/1.1/" | ||
4 | xmlns:cc="http://creativecommons.org/ns#" | ||
5 | xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" | ||
6 | xmlns:svg="http://www.w3.org/2000/svg" | ||
7 | xmlns="http://www.w3.org/2000/svg" | ||
8 | xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" | ||
9 | xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" | ||
10 | aria-hidden="true" | ||
11 | version="1.1" | ||
12 | id="svg8" | ||
13 | sodipodi:docname="favicon.svg" | ||
14 | width="16" | ||
15 | height="16" | ||
16 | inkscape:version="1.0.2 (e86c870879, 2021-01-15)" | ||
17 | inkscape:export-filename="/mnt/EvoData/Projects/WebStd/volpeon.ink/assets/favicon/favicon.png" | ||
18 | inkscape:export-xdpi="96" | ||
19 | inkscape:export-ydpi="96"> | ||
20 | <metadata | ||
21 | id="metadata14"> | ||
22 | <rdf:RDF> | ||
23 | <cc:Work | ||
24 | rdf:about=""> | ||
25 | <dc:format>image/svg+xml</dc:format> | ||
26 | <dc:type | ||
27 | rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> | ||
28 | <dc:title /> | ||
29 | </cc:Work> | ||
30 | </rdf:RDF> | ||
31 | </metadata> | ||
32 | <defs | ||
33 | id="defs12" /> | ||
34 | <sodipodi:namedview | ||
35 | pagecolor="#ffffff" | ||
36 | bordercolor="#666666" | ||
37 | borderopacity="1" | ||
38 | objecttolerance="10" | ||
39 | gridtolerance="10" | ||
40 | guidetolerance="10" | ||
41 | inkscape:pageopacity="0" | ||
42 | inkscape:pageshadow="2" | ||
43 | inkscape:window-width="1920" | ||
44 | inkscape:window-height="992" | ||
45 | id="namedview10" | ||
46 | showgrid="false" | ||
47 | fit-margin-top="0" | ||
48 | fit-margin-left="0" | ||
49 | fit-margin-right="0" | ||
50 | fit-margin-bottom="0" | ||
51 | inkscape:zoom="22.627417" | ||
52 | inkscape:cx="5.9845144" | ||
53 | inkscape:cy="5.0936969" | ||
54 | inkscape:window-x="1536" | ||
55 | inkscape:window-y="0" | ||
56 | inkscape:window-maximized="1" | ||
57 | inkscape:current-layer="svg8" | ||
58 | inkscape:document-rotation="0" | ||
59 | showguides="false" /> | ||
60 | <path | ||
61 | d="M 3.879982,13 H 6.0160181 L 2.6160361,3 H 0.48 Z" | ||
62 | style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:8px;line-height:1.25;font-family:'Iosevka SS09';-inkscape-font-specification:'Iosevka SS09 Heavy';font-variant-ligatures:discretionary-ligatures;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;letter-spacing:0px;word-spacing:0px;fill:#ed2c3f;fill-opacity:1;stroke:none" | ||
63 | id="path884" | ||
64 | sodipodi:nodetypes="ccccc" /> | ||
65 | <path | ||
66 | d="m 9.91599,13 h 2.168035 L 8.584018,3 H 6.4159819 Z" | ||
67 | style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:8px;line-height:1.25;font-family:'Iosevka SS09';-inkscape-font-specification:'Iosevka SS09 Heavy';font-variant-ligatures:discretionary-ligatures;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;letter-spacing:0px;word-spacing:0px;fill:#ed2c3f;fill-opacity:1;stroke:none" | ||
68 | id="path886" | ||
69 | sodipodi:nodetypes="ccccc" /> | ||
70 | <path | ||
71 | d="M 9.915975,13 H 12.08401 L 15.584018,3 h -2.168036 z" | ||
72 | style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:8px;line-height:1.25;font-family:'Iosevka SS09';-inkscape-font-specification:'Iosevka SS09 Heavy';font-variant-ligatures:discretionary-ligatures;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;letter-spacing:0px;word-spacing:0px;fill:#ed2c3f;fill-opacity:1;stroke:none" | ||
73 | id="path888" | ||
74 | sodipodi:nodetypes="ccccc" /> | ||
75 | </svg> | ||