summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-03-19 22:10:55 +0100
committerVolpeon <git@volpeon.ink>2021-03-19 22:10:55 +0100
commitc7eb8d7f6105a5a15a1f45b5e2be3c2d1e2204bd (patch)
tree4792d0f38463a15ca352118e8264a4813c05e15e /assets/css
parentAdded better font for text (Iosevka Aile) (diff)
downloadvolpeon.ink-c7eb8d7f6105a5a15a1f45b5e2be3c2d1e2204bd.tar.gz
volpeon.ink-c7eb8d7f6105a5a15a1f45b5e2be3c2d1e2204bd.tar.bz2
volpeon.ink-c7eb8d7f6105a5a15a1f45b5e2be3c2d1e2204bd.zip
WIP: Redesign
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/_basics.scss64
-rw-r--r--assets/css/_utils.scss14
-rw-r--r--assets/css/_vars.scss117
-rw-r--r--assets/css/components/_footer.scss21
-rw-r--r--assets/css/components/_hero.scss71
-rw-r--r--assets/css/components/_hlist.scss13
-rw-r--r--assets/css/components/_nav.scss132
-rw-r--r--assets/css/components/_page.scss134
-rw-r--r--assets/css/components/_spacer.scss5
-rw-r--r--assets/css/layouts/_container.scss47
-rw-r--r--assets/css/scopes/_code.scss4
-rw-r--r--assets/css/scopes/_page.scss6
-rw-r--r--assets/css/style.scss12
13 files changed, 283 insertions, 357 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 1536605..1cd5547 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -1,41 +1,23 @@
1@font-face { 1@font-face {
2 font-family: 'Iosevka Term SS09'; 2 font-family: 'IBM Plex Sans';
3 font-style: normal;
4 font-weight: normal;
5 src: //local('Iosevka SS09'),
6 url('/iosevka-term-ss09-regular.woff2') format('woff2');
7}
8
9@font-face {
10 font-family: 'Iosevka Term SS09';
11 font-style: normal;
12 font-weight: bold;
13 src: //local('Iosevka SS09 Bold'),
14 url('/iosevka-term-ss09-bold.woff2') format('woff2');
15}
16
17@font-face {
18 font-family: 'Iosevka Aile';
19 font-style: normal; 3 font-style: normal;
20 font-weight: normal; 4 font-weight: normal;
21 src: //local('Iosevka Aile'), 5 src: //local('IBM Plex Sans'),
22 url('/iosevka-aile-regular.woff2') format('woff2'); 6 url('/IBMPlexSans-Regular.woff2') format('woff2');
23} 7}
24 8
25@font-face { 9@font-face {
26 font-family: 'Iosevka Aile'; 10 font-family: 'IBM Plex Sans';
27 font-style: normal; 11 font-style: normal;
28 font-weight: bold; 12 font-weight: bold;
29 src: //local('Iosevka Aile Bold'), 13 src: url('/IBMPlexSans-Bold.woff2') format('woff2');
30 url('/iosevka-aile-bold.woff2') format('woff2');
31} 14}
32 15
33@font-face { 16@font-face {
34 font-family: 'IBM Plex Sans'; 17 font-family: 'Garet Variable';
35 font-style: normal; 18 font-style: normal;
36 font-weight: normal; 19 font-weight: 50 950;
37 src: //local('IBM Plex Sans'), 20 src: url('/GaretVariable.woff2') format('woff2-variations');
38 url('/IBMPlexSans-Regular.woff2') format('woff2');
39} 21}
40 22
41::selection { 23::selection {
@@ -54,8 +36,8 @@ code {
54} 36}
55 37
56html { 38html {
57 background-color: var(--bg); 39 background-color: prop(--colors --bg);
58 color: var(--fg); 40 color: prop(--colors --fg);
59 font-family: $font-fam--text; 41 font-family: $font-fam--text;
60 font-size: px-to-em($font-size, 16px); 42 font-size: px-to-em($font-size, 16px);
61 line-height: $line-height; 43 line-height: $line-height;
@@ -85,7 +67,7 @@ pre {
85} 67}
86 68
87strong { 69strong {
88 color: var(--fg-lo); 70 color: prop(--colors --fg-lo);
89 font-weight: bold; 71 font-weight: bold;
90} 72}
91 73
@@ -105,7 +87,7 @@ li {
105 position: absolute; 87 position: absolute;
106 width: $subcontent--indent; 88 width: $subcontent--indent;
107 margin-left: -1 * $subcontent--indent; 89 margin-left: -1 * $subcontent--indent;
108 color: var(--fg-hi); 90 color: prop(--colors --fg-hi);
109 font-family: $font-fam--mono; 91 font-family: $font-fam--mono;
110 } 92 }
111} 93}
@@ -141,12 +123,12 @@ dd {
141} 123}
142 124
143dt { 125dt {
144 color: var(--fg-lo); 126 color: prop(--colors --fg-lo);
145 font-weight: bold; 127 font-weight: bold;
146 128
147 &::after { 129 &::after {
148 content: ':'; 130 content: ':';
149 color: var(--fg); 131 color: prop(--colors --fg);
150 font-weight: normal; 132 font-weight: normal;
151 } 133 }
152} 134}
@@ -157,13 +139,23 @@ dd {
157 139
158h1, 140h1,
159h2, 141h2,
160h3 { 142h3,
143h4,
144h5,
145h6 {
161 margin: ($line-height * 2em) 0 0; 146 margin: ($line-height * 2em) 0 0;
147 font-family: $font-fam--large;
162 font-size: 1em; 148 font-size: 1em;
149 font-weight: 600;
150 line-height: 1.2;
151 font-feature-settings: 'ss02' 1;
163 152
164 + h1, 153 + h1,
165 + h2, 154 + h2,
166 + h3 { 155 + h3,
156 + h4,
157 + h5,
158 + h6 {
167 margin-top: $line-height * 1em; 159 margin-top: $line-height * 1em;
168 } 160 }
169} 161}
@@ -205,12 +197,12 @@ hr {
205 height: 1px; 197 height: 1px;
206 margin: ($line-height * 1em) 0; 198 margin: ($line-height * 1em) 0;
207 border: 0; 199 border: 0;
208 background-color: var(--obj); 200 background-color: prop(--colors --obj);
209} 201}
210 202
211blockquote, 203blockquote,
212pre { 204pre {
213 margin: ($line-height * 1em) 0 0 1px; 205 margin: ($line-height * 1em) 0 0 1px;
214 padding-left: calc(#{$subcontent--indent} - 3px); 206 padding-left: calc(#{$subcontent--indent} - 3px);
215 border-left: 2px solid var(--obj); 207 border-left: 2px solid prop(--colors --obj);
216} 208}
diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss
index 519a3a7..bca50d8 100644
--- a/assets/css/_utils.scss
+++ b/assets/css/_utils.scss
@@ -1,21 +1,21 @@
1.u-hidden { 1@include utility('hidden') {
2 display: none; 2 display: none;
3 3
4 @each $name, $width in $breakpoints { 4 @each $breakpoint in map-keys($breakpoints) {
5 &\@#{$name}-down { 5 @include media('<=#{$breakpoint}') {
6 @media (max-width: $width) { 6 @include suffix('#{$breakpoint}-lo') {
7 display: none; 7 display: none;
8 } 8 }
9 } 9 }
10 10
11 &\@#{$name}-up { 11 @include media('>#{$breakpoint}') {
12 @media (min-width: $width + 1) { 12 @include suffix('#{$breakpoint}-hi') {
13 display: none; 13 display: none;
14 } 14 }
15 } 15 }
16 } 16 }
17} 17}
18 18
19.u-mt0 { 19@include utility('mt0') {
20 margin-top: 0; 20 margin-top: 0;
21} 21}
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index ea831a6..ae8a7a8 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -1,88 +1,75 @@
1$font-fam--text: 'Iosevka Aile', 'IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', 1$iro-root-size: 16px;
2 Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif;
3$font-fam--mono: 'Iosevka Term SS09', 'Lucida Console', 'Courier New', Courier,
4 monospace;
5$font-size: 16px;
6$line-height: 1.7;
7
8$code-block--font-size: 16px;
9$code-block--line-height: 1.4;
10
11$content--width: 42em;
12$content--h1--font-size: $font-size + 1;
13
14$subcontent--indent: 2em;
15
16$container--pad-h: 2rem;
17$container--pad-h--sm: 1rem;
18$container--pad-v: $line-height * 2rem;
19$container--pad-v--sm: $line-height * 1rem;
20
21$nav--font-size: $font-size - 1;
22$nav--item--spacing: 2em;
23$nav--item--spacing--sm: 1.5em;
24$nav--item--pad-h: .5em;
25$nav--item--pad-v: .9em;
26
27$footer--pad-v: .8em;
28
29$page--item-prefix--max-chars: 1.5em;
30$page--item-prefix--pad: 1em;
31$page--item-prefix--width: $page--item-prefix--max-chars + $page--item-prefix--pad;
32
33$page--item-prefix--max-chars--sm: 1em;
34$page--item-prefix--width--sm: $page--item-prefix--max-chars--sm + $page--item-prefix--pad;
35 2
36$breakpoints: ( 3$breakpoints: (
37 xs: 380px, 4 xs: 320px,
38 sm: 700px, 5 sm: 700px,
6 md: 1100px,
39); 7);
40 8
41:root { 9$unit-intervals: (
42 --gray0: hsl(270, 0%, 7%); 10 'px': 1,
43 --gray1: hsl(270, 0%, 10%); 11 'em': .01,
44 --gray2: hsl(270, 1%, 29%); 12 'rem': .01,
45 --gray3: hsl(270, 2%, 54%); 13 '': 0
46 --gray4: hsl(270, 2%, 73%); 14);
47 --gray5: hsl(270, 2%, 100%);
48
49 //
50
51 --bg-hi: var(--gray0); // Lighter background
52 --bg: var(--gray1); // Background
53
54 --obj: var(--gray2);
55 15
56 --fg-hi: var(--gray3); // Faint text 16$font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
57 --fg: var(--gray4); // Text 17$font-fam--large: 'Garet Variable', $font-fam--text;
58 --fg-lo: var(--gray5); // Strong text 18$font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
19$font-size: 16px;
20$line-height: 1.7;
21$content--width: 56rem;
22$subcontent--indent: 2em;
59 23
60 // 24$gray0: hsl(220, 0%, 7%);
25$gray1: hsl(220, 0%, 10%);
26$gray2: hsl(220, 0%, 29%);
27$gray3: hsl(220, 0%, 54%);
28$gray4: hsl(220, 0%, 73%);
29$gray5: hsl(220, 0%, 100%);
30
31@include store((
32 --colors: (
33 --bg-hi: $gray0, // Lighter background
34 --bg: $gray1, // Background
35
36 --obj: $gray2,
37
38 --fg-hi: $gray3, // Faint text
39 --fg: $gray4, // Text
40 --fg-lo: $gray5, // Strong text
41
42 --accent: hsl(354, 84%, 55%),
43 )
44));
61 45
62 --heading--fg: var(--fg-lo); 46:root {
47 --heading--fg: var(--colors--fg-lo);
63 48
64 --select--bg: hsla(270, 2%, 100%, .996); 49 --select--bg: hsla(270, 2%, 100%, .996);
65 --select--img-bg: hsla(270, 2%, 100%, .5); 50 --select--img-bg: hsla(270, 2%, 100%, .5);
66 --select--fg: var(--bg-hi); 51 --select--fg: var(--colors--bg-hi);
67 52
68 --code--fg: var(--fg-hi); 53 --code--fg: var(--colors--fg-hi);
69 54
70 --code-block--fg: var(--fg-hi); 55 --code-block--fg: var(--colors--fg-hi);
71 56
72 --link--idle--fg: var(--fg-lo); 57 --link--idle--fg: var(--colors--fg-lo);
73 --link--hover--bg: var(--link--idle--fg); 58 --link--hover--bg: var(--link--idle--fg);
74 --link--hover--fg: #000; 59 --link--hover--fg: #000;
75 60
76 --nav--bg: var(--bg-hi); 61 --hero--back-fg: var(--colors--bg-hi);
77 --nav--logo--fg: var(--fg-hi); 62
78 --nav--item--idle--fg: var(--fg); 63 --nav--bg: var(--colors--bg);
79 --nav--item--hover--fg: var(--fg-lo); 64 --nav--logo--fg: var(--colors--fg-hi);
80 --nav--item--active--fg: var(--fg-lo); 65 --nav--item--idle--fg: var(--colors--fg);
66 --nav--item--hover--fg: var(--colors--fg-lo);
67 --nav--item--active--fg: var(--colors--fg-lo);
81 68
82 --page--item-prefix--fg: var(--fg-hi); 69 --footer--bg: var(--colors--bg);
83 70
84 --page--link--idle--fg: var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866; 71 --page--link--idle--fg: var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866;
85 --page--link--visited--fg: var(--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%); // var(--fg-lo); // #f59458; 72 --page--link--visited--fg: var(--colors--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%); // var(--fg-lo); // #f59458;
86 --page--link--hover--bg: var(--page--link--idle--fg); 73 --page--link--hover--bg: var(--page--link--idle--fg);
87 --page--link--hover--fg: #000; 74 --page--link--hover--fg: #000;
88} 75}
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index a015d92..8fcbc98 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -1,6 +1,17 @@
1.c-footer { 1@include namespace('footer') {
2 padding-top: $footer--pad-v; 2 @include store((
3 padding-bottom: $footer--pad-v; 3 --dims: (
4 color: var(--obj); 4 --pad-y: .8em
5 text-align: right; 5 ),
6 --colors: (
7 --fg: prop(--colors --obj, $global: true)
8 )
9 ));
10
11 @include component(namespace()) {
12 padding-top: prop(--dims --pad-y);
13 padding-bottom: prop(--dims --pad-y);
14 color: prop(--colors --fg);
15 text-align: right;
16 }
6} 17}
diff --git a/assets/css/components/_hero.scss b/assets/css/components/_hero.scss
index bfcdc16..6c497a1 100644
--- a/assets/css/components/_hero.scss
+++ b/assets/css/components/_hero.scss
@@ -1,35 +1,50 @@
1.c-hero { 1@include namespace('hero') {
2 margin-bottom: $line-height * 2em; 2 @include store((
3 margin-left: -1 * $page--item-prefix--width; 3 --colors: (
4 padding-left: $page--item-prefix--width; 4 --back-fg: prop(--colors --bg-hi, $global: true)
5 overflow: hidden; 5 )
6 font-family: $font-fam--mono; 6 ));
7 7
8 &::after { 8 @include component(namespace()) {
9 content: str-repeat('â–‘', 120); 9 display: flex;
10 display: block; 10 position: relative;
11 position: relative; 11 flex-direction: column;
12 z-index: -10; 12 align-items: center;
13 height: $line-height; 13 justify-content: center;
14 margin-top: px-to-em(2px); 14 text-align: center;
15 margin-left: -1 * $page--item-prefix--width;
16 padding-top: px-to-em(2px);
17 border-top: 1px solid var(--fg-hi);
18 color: var(--fg-hi);
19 line-height: $code-block--line-height;
20 }
21 15
22 &__pre { 16 @include element('title', 'backtitle') {
23 margin-top: 0; 17 margin: 0 auto;
24 overflow: hidden; 18 font-family: $font-fam--large;
25 } 19 text-transform: none;
20 }
21
22 @include element('emph') {
23 color: prop(--colors --accent, $global: true);
24 font-weight: 500;
25 }
26
27 @include element('title') {
28 max-width: 11em;
29 font-weight: 200;
30 }
31
32 @include element('backtitle') {
33 position: absolute;
34 z-index: -10;
35 transform: translateY(-.08em);
36 color: prop(--colors --back-fg);
37 }
26 38
27 @media (max-width: map-get($breakpoints, 'sm')) { 39 @include iro-responsive-env(('xs', 'sm', 'md')) {
28 margin-left: 0; 40 @include element('title') {
29 padding-left: 0; 41 padding: iro-responsive-set((7rem, 7rem, 10rem)) 0;
42 font-size: iro-responsive-set((1.8rem, 2.8rem, 3.3rem));
43 }
30 44
31 &::after { 45 @include element('backtitle') {
32 margin-left: 0; 46 font-size: iro-responsive-set((12rem, 14rem, 16rem));
47 }
33 } 48 }
34 } 49 }
35} 50}
diff --git a/assets/css/components/_hlist.scss b/assets/css/components/_hlist.scss
deleted file mode 100644
index a7cf665..0000000
--- a/assets/css/components/_hlist.scss
+++ /dev/null
@@ -1,13 +0,0 @@
1.c-hlist {
2 display: flex;
3
4 &__item {
5 display: block;
6 margin-right: 4ch;
7 padding-left: 0;
8
9 &::before {
10 display: none;
11 }
12 }
13}
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index cd3ef14..2472706 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -1,57 +1,103 @@
1.c-nav { 1@include namespace('nav') {
2 position: sticky; 2 @include store((
3 z-index: 1000; 3 --dims: (
4 top: 0; 4 --font-size: 15px,
5 background-color: var(--nav--bg); 5 --pad-y: 1em,
6 font-size: $nav--font-size; 6 --pad-y-sm: .5em,
7 7 --item: (
8 &__items { 8 --pad-x: 1em,
9 --pad-x-sm: .75em,
10 --pad-y: 1em,
11 --pad-y-sm: .75em,
12 ),
13 ),
14 --colors: (
15 --logo: (
16 --idle: (
17 --fg: prop(--colors --fg-hi, $global: true),
18 ),
19 --hover: (
20 --fg: prop(--colors --fg-lo, $global: true),
21 )
22 ),
23 --item: (
24 --idle: (
25 --fg: prop(--colors --fg, $global: true),
26 ),
27 --hover: (
28 --fg: prop(--colors --fg-lo, $global: true),
29 ),
30 --active: (
31 --fg: prop(--colors --fg-lo, $global: true),
32 )
33 )
34 )
35 ));
36
37 @include component(namespace()) {
9 display: flex; 38 display: flex;
10 align-items: baseline; 39 align-items: center;
11 } 40 padding: prop(--dims --pad-y) 0;
41 font-size: prop(--dims --font-size);
42
43 @include element('logo') {
44 display: inline-block;
45 margin: 0;
46 padding: prop(--dims --item --pad-y) 0;
47 color: prop(--colors --logo --idle --fg);
48 font-family: $font-fam--mono;
49 text-decoration: none;
50
51 &:link,
52 &:visited {
53 &:hover {
54 background-color: transparent;
55 color: prop(--colors --logo --hover --fg);
56 }
57 }
58 }
59
60 @include element('logo-symbol') {
61 display: block;
62 width: $line-height * .9em;
63 height: $line-height * 1em;
64 }
12 65
13 &__logo { 66 @include element('item') {
14 display: inline-block; 67 display: inline-block;
15 margin: 0; 68 margin: 0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x);
16 padding: $nav--item--pad-v 0; 69 padding: prop(--dims --item --pad-y) prop(--dims --item --pad-x);
17 color: var(--nav--logo--fg); 70 color: prop(--colors --item --idle --fg);
18 font-family: $font-fam--mono; 71 text-decoration: none;
19 text-decoration: none; 72 text-transform: uppercase;
20 73
21 &:link,
22 &:visited {
23 &:hover { 74 &:hover {
24 background-color: transparent; 75 background-color: transparent;
25 color: var(--nav--item--hover--fg); 76 color: prop(--colors --item --hover --fg);
77 text-decoration: underline;
78 }
79
80 @include modifier('active') {
81 border-color: prop(--colors --item --active --fg);
82 color: prop(--colors --item --active --fg);
26 font-weight: bold; 83 font-weight: bold;
27 } 84 }
28 } 85 }
29 }
30 86
31 &__item { 87 @include media('<=sm') {
32 display: inline-block; 88 padding: prop(--dims --pad-y-sm) 0;
33 margin: 0 (-1 * $nav--item--pad-h) 0 ($nav--item--spacing - $nav--item--pad-h);
34 padding: $nav--item--pad-v $nav--item--pad-h calc(#{$nav--item--pad-v} - 2px);
35 border-bottom: 2px solid transparent;
36 color: var(--nav--item--idle--fg);
37 text-decoration: none;
38
39 &:hover {
40 background-color: transparent;
41 color: var(--nav--item--hover--fg);
42 font-weight: bold;
43 }
44 89
45 &--active { 90 @include element('logo', 'item') {
46 border-color: var(--nav--item--active--fg); 91 padding-top: prop(--dims --item --pad-y-sm);
47 color: var(--nav--item--active--fg); 92 padding-bottom: prop(--dims --item --pad-y-sm);
48 font-weight: bold; 93 }
49 }
50 }
51 94
52 @media (max-width: map-get($breakpoints, 'sm')) { 95 @include element('item') {
53 &__item { 96 margin-right: calc(-1 * #{prop(--dims --item --pad-x-sm)});
54 margin-left: $nav--item--spacing--sm - $nav--item--pad-h; 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 }
55 } 101 }
56 } 102 }
57} 103}
diff --git a/assets/css/components/_page.scss b/assets/css/components/_page.scss
index 9d1e991..ef39061 100644
--- a/assets/css/components/_page.scss
+++ b/assets/css/components/_page.scss
@@ -1,133 +1,3 @@
1.c-page { 1@include component('page') {
2 &__prefixed { 2 //
3 position: relative;
4 margin-left: -1 * $page--item-prefix--width;
5 padding-left: $page--item-prefix--width;
6
7 &::before {
8 display: inline-block;
9 position: absolute;
10 box-sizing: border-box;
11 width: $page--item-prefix--width;
12 margin-left: -1 * $page--item-prefix--width;
13 padding-right: $page--item-prefix--pad;
14 color: var(--page--item-prefix--fg);
15 font-family: $font-fam--mono;
16 font-weight: normal;
17 text-align: right;
18 }
19
20 $h1-unscale-factor: px-to-em($font-size, $content--h1--font-size);
21
22 &--h1 {
23 margin-top: $line-height * $h1-unscale-factor;
24 font-size: px-to-em($content--h1--font-size);
25
26 &::before {
27 content: '#';
28 font-size: $h1-unscale-factor;
29 }
30 }
31
32 &--h2::before {
33 content: '##';
34 }
35
36 &--h3::before {
37 content: '###';
38 }
39
40 &--pre {
41 $scale-factor: $font-size / $code-block--font-size;
42
43 margin-left: calc(#{-1 * $page--item-prefix--width} * #{$scale-factor});
44 padding-left: calc(#{$page--item-prefix--width} * #{$scale-factor});
45 border-left: 0;
46 color: var(--code-block--fg);
47 font-size: $code-block--font-size;
48 line-height: $code-block--line-height;
49 text-overflow: '';
50
51 &::before {
52 content: str-repeat('``\A', 40);
53 height: 100%;
54 overflow: hidden;
55 color: var(--page--item-prefix--fg);
56 font-size: px-to-em($font-size, $code-block--font-size);
57 line-height: $code-block--line-height / $scale-factor;
58 }
59 }
60
61 &--ref::before {
62 content: '|>';
63 }
64
65 &--backref::before {
66 content: '<|';
67 }
68 }
69
70 &__header {
71 margin-bottom: $line-height * 1em;
72
73 &__title {
74 margin-top: 0;
75 }
76
77 &__backlink__link {
78 &:link,
79 &:visited {
80 color: var(--fg-hi);
81
82 &:hover {
83 color: var(--link--hover--fg);
84 }
85 }
86 }
87
88 &__backlink + &__title {
89 margin-top: $line-height * 1em;
90 }
91
92 &__meta {
93 margin-top: 0;
94 color: var(--fg-hi);
95 font-weight: normal;
96 }
97 }
98
99 &__content {
100 padding-left: $page--item-prefix--width;
101
102 > :first-child {
103 margin-top: 0;
104 }
105 }
106
107 @media (max-width: map-get($breakpoints, 'sm')) {
108 &__prefixed {
109 margin-left: 0;
110 padding-left: $page--item-prefix--width--sm;
111
112 &::before {
113 width: $page--item-prefix--width--sm;
114 margin-left: -1 * $page--item-prefix--width--sm;
115 }
116
117 &--h1,
118 &--h2,
119 &--h3,
120 &--pre {
121 padding-left: 0;
122
123 &::before {
124 display: none;
125 }
126 }
127 }
128
129 &__content {
130 padding-left: 0;
131 }
132 }
133} 3}
diff --git a/assets/css/components/_spacer.scss b/assets/css/components/_spacer.scss
deleted file mode 100644
index 692eb29..0000000
--- a/assets/css/components/_spacer.scss
+++ /dev/null
@@ -1,5 +0,0 @@
1.c-spacer {
2 display: block;
3 height: 0;
4 margin: ($line-height * 2em) 0 0;
5}
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
index e99c62f..2bb4d80 100644
--- a/assets/css/layouts/_container.scss
+++ b/assets/css/layouts/_container.scss
@@ -1,25 +1,36 @@
1.l-container { 1@include namespace('container') {
2 padding-right: $container--pad-h; 2 @include store((
3 padding-left: $container--pad-h; 3 --dims: (
4 --pad-x: 2rem,
5 --pad-x-sm: 1rem,
6 --pad-y: $line-height * 2rem,
7 --pad-y-sm: $line-height * 1rem
8 )
9 ));
4 10
5 &--content { 11 @include layout(namespace()) {
6 max-width: $content--width; 12 padding-right: prop(--dims --pad-x);
7 margin-right: auto; 13 padding-left: prop(--dims --pad-x);
8 margin-left: auto;
9 }
10 14
11 &--pad-v { 15 @include modifier('content') {
12 padding-top: $container--pad-v; 16 max-width: $content--width;
13 padding-bottom: $container--pad-v; 17 margin-right: auto;
14 } 18 margin-left: auto;
19 }
20
21 @include modifier('pad-v') {
22 padding-top: prop(--dims --pad-y);
23 padding-bottom: prop(--dims --pad-y);
24 }
15 25
16 @media (max-width: map-get($breakpoints, 'sm')) { 26 @include media('<=sm') {
17 padding-right: $container--pad-h--sm; 27 padding-right: prop(--dims --pad-x-sm);
18 padding-left: $container--pad-h--sm; 28 padding-left: prop(--dims --pad-x-sm);
19 29
20 &--pad-v { 30 @include modifier('pad-v') {
21 padding-top: $container--pad-v--sm; 31 padding-top: prop(--dims --pad-y-sm);
22 padding-bottom: $container--pad-v--sm; 32 padding-bottom: prop(--dims --pad-y-sm);
33 }
23 } 34 }
24 } 35 }
25} 36}
diff --git a/assets/css/scopes/_code.scss b/assets/css/scopes/_code.scss
index 4a40d0f..3f50ce3 100644
--- a/assets/css/scopes/_code.scss
+++ b/assets/css/scopes/_code.scss
@@ -1,5 +1,5 @@
1.s-code { 1@include scope('code') {
2 &--highlight { 2 @include modifier('highlight') {
3 pre { 3 pre {
4 color: var(--fg-lo); 4 color: var(--fg-lo);
5 } 5 }
diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss
index e4c505e..70489fb 100644
--- a/assets/css/scopes/_page.scss
+++ b/assets/css/scopes/_page.scss
@@ -1,4 +1,4 @@
1.s-page { 1@include scope('page-content') {
2 :link { 2 :link {
3 color: var(--page--link--idle--fg); 3 color: var(--page--link--idle--fg);
4 } 4 }
@@ -18,4 +18,8 @@
18 img { 18 img {
19 max-width: 100%; 19 max-width: 100%;
20 } 20 }
21
22 > :first-child {
23 margin-top: 0;
24 }
21} 25}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 6ffab5f..dad774a 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -1,9 +1,13 @@
1@import '../../node_modules/iro-sass/src/main';
2@import '../../node_modules/iro-sass/src/bem-shortcodes';
3@import '../../node_modules/iro-sass/src/responsive-shortcodes';
4@import '../../node_modules/iro-sass/src/props-shortcodes';
5@import '../../node_modules/include-media/dist/include-media';
6
1@import 'vars'; 7@import 'vars';
2@import 'functions'; 8@import 'functions';
3@import 'basics'; 9@import 'basics';
4 10
5//@import 'components/spacer';
6//@import 'components/hlist';
7@import 'components/nav'; 11@import 'components/nav';
8@import 'components/page'; 12@import 'components/page';
9@import 'components/hero'; 13@import 'components/hero';
@@ -15,3 +19,7 @@
15@import 'scopes/page'; 19@import 'scopes/page';
16 20
17@import 'utils'; 21@import 'utils';
22
23:root {
24 @include assign;
25}
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-07-03 15:51:45 +0000