summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/_base.scss36
-rw-r--r--assets/css/_basics.scss194
-rw-r--r--assets/css/_declare-vars.scss31
-rw-r--r--assets/css/_functions.scss2
-rw-r--r--assets/css/_utils.scss46
-rw-r--r--assets/css/_vars.scss196
-rw-r--r--assets/css/components/_card.scss135
-rw-r--r--assets/css/components/_footer.scss37
-rw-r--r--assets/css/components/_header.scss77
-rw-r--r--assets/css/components/_hnav.scss31
-rw-r--r--assets/css/components/_lightbox.scss116
-rw-r--r--assets/css/components/_note.scss23
-rw-r--r--assets/css/layouts/_card-list.scss33
-rw-r--r--assets/css/layouts/_container.scss33
-rw-r--r--assets/css/layouts/_media.scss26
-rw-r--r--assets/css/objects/_badge.scss25
-rw-r--r--assets/css/objects/_icon.scss33
-rw-r--r--assets/css/scopes/_body.scss83
-rw-r--r--assets/css/scopes/_colored-links.scss20
-rw-r--r--assets/css/scopes/_headlines.scss104
-rw-r--r--assets/css/scopes/_intro.scss8
-rw-r--r--assets/css/scopes/_invisible-links.scss13
-rw-r--r--assets/css/scopes/_small.scss23
-rw-r--r--assets/css/style.scss63
24 files changed, 285 insertions, 1103 deletions
diff --git a/assets/css/_base.scss b/assets/css/_base.scss
new file mode 100644
index 0000000..dd24fed
--- /dev/null
+++ b/assets/css/_base.scss
@@ -0,0 +1,36 @@
1@use 'iro-sass/src/index' as iro;
2@use 'iro-design/src/functions' as fn;
3
4html,
5pre,
6code {
7 font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1;
8}
9
10body {
11 box-sizing: border-box;
12 min-height: 100%;
13}
14
15main {
16 @include iro.responsive-env((600px, 900px)) {
17 font-size: iro.responsive-set((1rem, iro.fn-px-to-rem(18px)));
18 }
19}
20
21img {
22 display: block;
23 max-width: 100%;
24}
25
26figure {
27 margin: fn.dim(--paragraph --margin-top) 0 0;
28 padding: 0;
29
30 img {
31 display: block;
32 max-width: 100%;
33 max-height: 70vh;
34 object-fit: contain;
35 }
36}
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
deleted file mode 100644
index 7689379..0000000
--- a/assets/css/_basics.scss
+++ /dev/null
@@ -1,194 +0,0 @@
1::selection {
2 background-color: prop(--colors --select --bg);
3 color: prop(--colors --select --fg);
4}
5
6img::selection {
7 background-color: prop(--colors --select --img-bg);
8}
9
10:focus {
11 outline: 2px solid prop(--colors --focus-ring);
12 outline-offset: 3px;
13}
14
15html,
16pre,
17code {
18 font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1;
19}
20
21html {
22 height: 100%;
23 background-color: prop(--colors --bg);
24 color: prop(--colors --fg);
25 font-family: $font-fam--text;
26 font-size: px-to-em($font-size);
27 line-height: $line-height;
28}
29
30body {
31 box-sizing: border-box;
32 min-height: 100%;
33 margin: 0;
34 padding: 0;
35}
36
37main {
38 @include iro-responsive-env(('sm', 'md')) {
39 font-size: iro-responsive-set((1rem, iro-px-to-rem(18px)));
40 }
41}
42
43pre,
44code {
45 font-family: $font-fam--mono;
46}
47
48code {
49 color: prop(--colors --code --fg);
50 font-size: px-to-em(15px);
51}
52
53pre {
54 margin: 0;
55 overflow-x: auto;
56 font-size: px-to-em(15px);
57 line-height: 1.4;
58
59 code {
60 color: currentColor;
61 font-size: 1em;
62 }
63
64 strong {
65 //font-weight: normal;
66 }
67}
68
69strong {
70 color: prop(--colors --fg-lo);
71 font-weight: bold;
72}
73
74small {
75 color: prop(--colors --fg-hi);
76 font-size: px-to-em(14px);
77}
78
79ul,
80ol {
81 margin: ($line-height * 1rem) 0 0;
82 padding: 0;
83 list-style: none;
84}
85
86li {
87 position: relative;
88 padding-left: prop(--dims --indent);
89
90 &::before {
91 display: inline-block;
92 position: absolute;
93 width: prop(--dims --indent);
94 margin-left: calc(-1 * #{prop(--dims --indent)});
95 color: prop(--colors --fg-hi);
96 }
97}
98
99ul > li::before {
100 content: '-';
101}
102
103ol {
104 counter-reset: cnt;
105
106 > li {
107 counter-increment: cnt;
108
109 &::before {
110 content: counter(cnt) '.';
111 }
112 }
113}
114
115ul ul {
116 margin-top: 0;
117}
118
119dl {
120 margin: ($line-height * 1rem) 0 0;
121 padding: 0;
122}
123
124dt,
125dd {
126 display: inline-block;
127}
128
129dt {
130 color: prop(--colors --fg-lo);
131 font-weight: bold;
132
133 &::after {
134 content: ':';
135 color: prop(--colors --fg);
136 font-weight: normal;
137 }
138}
139
140dd {
141 margin: 0 3ch 0 0;
142}
143
144h1,
145h2,
146h3,
147h4,
148h5,
149h6 {
150 @include iro-responsive-modular-scale(font-size, 0, $responsive-mod-scale);
151
152 margin: ($line-height * 2rem) 0 0;
153 color: prop(--colors --fg-lo);
154 font-weight: 700;
155 letter-spacing: 1px;
156 text-transform: uppercase;
157
158 & + & {
159 margin-top: $line-height * 1rem;
160 }
161
162 strong {
163 color: prop(--colors --accent --color, $global: true);
164 font-weight: 550;
165 }
166}
167
168p {
169 margin: ($line-height * 1rem) 0 0;
170}
171
172figure {
173 margin: ($line-height * 1rem) 0 0;
174 padding: 0;
175
176 img {
177 display: block;
178 max-width: 100%;
179 max-height: 70vh;
180 object-fit: contain;
181 }
182}
183
184:link,
185:visited {
186 color: prop(--colors --link --default);
187}
188
189hr {
190 height: 1px;
191 margin: ($line-height * 2rem) 0;
192 border: 0;
193 background-color: prop(--colors --obj-hi);
194}
diff --git a/assets/css/_declare-vars.scss b/assets/css/_declare-vars.scss
new file mode 100644
index 0000000..4a9513c
--- /dev/null
+++ b/assets/css/_declare-vars.scss
@@ -0,0 +1,31 @@
1@use 'iro-sass/src/index' as iro;
2@use 'iro-design/src/functions' as fn;
3
4@include iro.props-store((
5 --dims: (
6 --font-size: (
7 --50: iro.fn-px-to-rem(13px),
8 --75: iro.fn-px-to-rem(14px),
9 --100: iro.fn-px-to-rem(16px),
10 --150: iro.fn-px-to-rem(18px),
11 --200: iro.fn-px-to-rem(20px),
12 --300: iro.fn-px-to-rem(24px),
13 --400: iro.fn-px-to-rem(28px),
14 --500: iro.fn-px-to-rem(32px),
15 --600: iro.fn-px-to-rem(36px),
16 --700: iro.fn-px-to-rem(40px),
17 --800: iro.fn-px-to-rem(45px),
18 --900: iro.fn-px-to-rem(50px),
19 --1000: iro.fn-px-to-rem(60px),
20 --1100: iro.fn-px-to-rem(70px),
21 ),
22
23 --paragraph: (
24 --margin-top: fn.dim(--size --400, null),
25 ),
26
27 --heading: (
28 --margin-top: fn.dim(--size --700, null),
29 ),
30 )
31), 'dims');
diff --git a/assets/css/_functions.scss b/assets/css/_functions.scss
index a641a34..107cba7 100644
--- a/assets/css/_functions.scss
+++ b/assets/css/_functions.scss
@@ -1,6 +1,6 @@
1@use 'sass:math'; 1@use 'sass:math';
2 2
3@function px-to-em($s, $b: $font-size) { 3@function px-to-em($s, $b: 16px) {
4 @return math.div(1, math.div($b, 1px)) * math.div($s, 1px) * 1em; 4 @return math.div(1, math.div($b, 1px)) * math.div($s, 1px) * 1em;
5} 5}
6 6
diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss
deleted file mode 100644
index 71118fe..0000000
--- a/assets/css/_utils.scss
+++ /dev/null
@@ -1,46 +0,0 @@
1@include utility('dn') {
2 display: none;
3
4 @each $breakpoint in ('sm') /*map-keys($breakpoints)*/ {
5 @include media('<=#{$breakpoint}') {
6 @include suffix('#{$breakpoint}-lo') {
7 display: none;
8 }
9 }
10
11 @include media('>#{$breakpoint}') {
12 @include suffix('#{$breakpoint}-hi') {
13 display: none;
14 }
15 }
16 }
17}
18
19@include utility('mt0') {
20 margin-top: 0;
21}
22
23@include utility('pb0') {
24 padding-bottom: 0;
25}
26
27@include utility('db') {
28 display: block;
29}
30
31@include utility('fs0') {
32 flex-shrink: 0;
33}
34
35@include utility('g-span-row') {
36 grid-column: 1 / -1;
37}
38
39@include utility('elp') {
40 overflow: hidden;
41 text-overflow: ellipsis;
42}
43
44@include utility('tar') {
45 text-align: right;
46}
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
deleted file mode 100644
index ad9e16f..0000000
--- a/assets/css/_vars.scss
+++ /dev/null
@@ -1,196 +0,0 @@
1$breakpoints: (
2 lg: 1340px,
3 md: 900px,
4 sm: 600px,
5 xs: 400px,
6);
7
8$unit-intervals: (
9 'px': 1,
10 'em': .01,
11 'rem': .01,
12 '': 0
13);
14
15$responsive-mod-scale: (
16 xs: (iro-px-to-rem(14px), 1.28),
17 md: (iro-px-to-rem(14px), 1.49)
18);
19
20$font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
21$font-fam--large: 'Garet', $font-fam--text;
22$font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
23$font-size: 16px;
24$line-height: 1.7;
25$content--width: 44rem;
26
27@include iro-execute {
28 $gray0: hsl(220, 5%, 4%);
29 $gray1: hsl(220, 5%, 10%);
30 $gray2: hsl(220, 5%, 16%);
31 $gray3: hsl(220, 5%, 23%);
32 $gray4: hsl(220, 5%, 38%);
33 $gray5: hsl(220, 5%, 60%);
34 $gray6: hsl(220, 5%, 80%);
35 $gray7: hsl(220, 5%, 100%);
36
37 @include store((
38 --dims: (
39 --indent: 2rem,
40 ),
41 --colors: (
42 --bg-hi: $gray0, // Darker background
43 --bg: $gray1, // Background
44 --bg-lo: $gray2, // Lighter background
45
46 --obj-hi: $gray3,
47 --obj: $gray4,
48
49 --fg-hi: $gray5, // Faint text
50 --fg: $gray6, // Text
51 --fg-lo: $gray7, // Strong text
52
53 --accent: (
54 --h: 354,
55 --s: 84%,
56 --l: 55%,
57 --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
58 --strong: hsl(
59 var(--colors--accent--h),
60 calc(var(--colors--accent--s) * 1.2),
61 calc(var(--colors--accent--l) * 1.2)
62 ),
63 --faint: hsla(
64 var(--colors--accent--h),
65 var(--colors--accent--s),
66 var(--colors--accent--l),
67 .1
68 ),
69 ),
70
71 --focus-ring: var(--colors--fg-lo),
72
73 --select: (
74 --bg: rgba($gray7, .996),
75 --img-bg: rgba($gray7, .5),
76 --fg: var(--colors--bg-hi),
77 --inverted: (
78 --bg: rgba($gray0, .996),
79 --fg: var(--colors--fg-lo),
80 )
81 ),
82
83 --link: (
84 --default: var(--colors--fg-lo),
85 --colored: (
86 --idle-h: 220,
87 --idle-s: 100%,
88 --idle-l: 80%,
89 --idle: hsl(
90 var(--colors--link--colored--idle-h),
91 var(--colors--link--colored--idle-s),
92 var(--colors--link--colored--idle-l),
93 ), //hsl(var(--colors--accent--h), 100%, 66%), //
94 --visited: hsl(290, 35%, 72%), //hsl(var(--colors--accent--h), 50%, 66%), //
95 )
96 ),
97
98 --code: (
99 --fg: var(--colors--fg-hi),
100 ),
101 )
102 ));
103}
104
105@include iro-execute {
106 $gray0: hsl(220, 5%, 100%);
107 $gray1: hsl(220, 5%, 95%);
108 $gray2: hsl(220, 5%, 88%);
109 $gray3: hsl(220, 5%, 83%);
110 $gray4: hsl(220, 5%, 68%);
111 $gray5: hsl(220, 5%, 44%);
112 $gray6: hsl(220, 5%, 16%);
113 $gray7: hsl(220, 5%, 0%);
114
115 @include store((
116 --colors: (
117 --bg-hi: $gray0, // Darker background
118 --bg: $gray1, // Background
119 --bg-lo: $gray2, // Lighter background
120
121 --obj-hi: $gray3,
122 --obj: $gray4,
123
124 --fg-hi: $gray5, // Faint text
125 --fg: $gray6, // Text
126 --fg-lo: $gray7, // Strong text
127
128 --accent: (
129 --h: 354,
130 --s: 74%,
131 --l: 48%,
132 --strong: hsl(
133 var(--colors--accent--h),
134 var(--colors--accent--s),
135 calc(var(--colors--accent--l) * .8)
136 ),
137 ),
138
139 --select: (
140 --bg: rgba($gray7, .996),
141 --img-bg: rgba($gray7, .5),
142 --inverted: (
143 --bg: rgba($gray0, .996),
144 ),
145 ),
146
147 --link: (
148 --colored: (
149 --idle-h: 220,
150 --idle-s: 60%,
151 --idle-l: 40%,
152 --idle: hsl(
153 var(--colors--link--colored--idle-h),
154 var(--colors--link--colored--idle-s),
155 var(--colors--link--colored--idle-l),
156 ), //hsl(var(--colors--accent--h), 100%, 66%), //
157 --visited: hsl(290, 30%, 35%), //hsl(var(--colors--accent--h), 50%, 66%), //
158 )
159 ),
160 ),
161 ), 'light');
162}
163
164@include iro-execute {
165 $white: #fff;
166 $black: #000;
167
168 @include store((
169 --colors: (
170 --bg-hi: $white, // Darker background
171 --bg: $white, // Background
172 --bg-lo: $black, // Lighter background
173
174 --obj-hi: $black,
175 --obj: $black,
176
177 --fg-hi: $black, // Faint text
178 --fg: $black, // Text
179 --fg-lo: $black, // Strong text
180 ),
181 ), 'print');
182}
183
184@each $breakpoint in map-keys($breakpoints) {
185 @include media('<=#{$breakpoint}') {
186 @include store((
187 --colors: ()
188 ), $breakpoint);
189 }
190}
191
192@include store((
193 --dims: (
194 --indent: 1.5rem,
195 ),
196), 'sm');
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 20614e7..f8f106d 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -1,41 +1,46 @@
1@include namespace('card') { 1@use 'iro-sass/src/index' as iro;
2 @include store(( 2@use 'iro-design/src/functions' as fn;
3 --colors: ( 3@use '../functions' as fn2;
4 --bg: prop(--colors --bg-lo, $global: true), 4
5 --fg: prop(--colors --fg, $global: true), 5@include iro.props-namespace('card') {
6 --unread: prop(--colors --bg, $global: true), 6 @include iro.props-store((
7 --border: prop(--colors --obj-hi, $global: true),
8 --hover: (
9 --bg: prop(--colors --fg-lo, $global: true),
10 --fg: prop(--colors --bg-hi, $global: true),
11 ),
12 ),
13 --dims: ( 7 --dims: (
14 --pad-x: 1em, 8 --hover-offset: fn2.px-to-em(-5px),
15 --pad-y: px-to-em(12px),
16 --hover-offset: px-to-em(-5px),
17 --indicator: ( 9 --indicator: (
18 --width: 1em, 10 --width: 1em,
19 --height: 4px, 11 --height: 4px,
20 ), 12 ),
21 ) 13 )
22 )); 14 ), 'dims');
15
16 @include iro.props-store((
17 --colors: (
18 --bg: fn.global-color(--bg-hi2),
19 --fg: fn.global-color(--fg),
20 --unread: fn.global-color(--obj-hi),
21 --border: fn.global-color(--obj-hi),
22 --hover: (
23 --bg: fn.global-color(--fg-lo),
24 --fg: fn.global-color(--bg-hi2),
25 ),
26 )
27 ), 'colors');
23 28
24 @include store(( 29 @include iro.props-store((
25 --colors: ( 30 --colors: (
26 --bg: prop(--colors --bg-hi, $global: true), 31 --bg: fn.global-color(--obj-hi),
27 --unread: prop(--colors --bg-lo, $global: true), 32 --unread: fn.global-color(--bg),
28 --border: prop(--colors --bg-lo, $global: true), 33 --border: fn.global-color(--obj-hi),
29 ) 34 )
30 ), 'light'); 35 ), 'colors-dark');
31 36
32 @include component(namespace()) { 37 @include iro.bem-component(iro.props-namespace()) {
33 display: block; 38 display: block;
34 position: relative; 39 position: relative;
35 transform: translateY(0); 40 transform: translateY(0);
36 transition: transform .2s, background-color .2s, color .2s, border-color .2s; 41 transition: transform .2s, background-color .2s, color .2s, border-color .2s;
37 background-color: prop(--colors --bg); 42 background-color: fn.color(--bg);
38 color: prop(--colors --fg); 43 color: fn.color(--fg);
39 line-height: 1.4; 44 line-height: 1.4;
40 45
41 &::after { 46 &::after {
@@ -45,7 +50,7 @@
45 top: 100%; 50 top: 100%;
46 left: 0; 51 left: 0;
47 width: 100%; 52 width: 100%;
48 height: calc(-1 * #{prop(--dims --hover-offset)}); 53 height: calc(-1 * fn.dim(--hover-offset));
49 } 54 }
50 55
51 small, 56 small,
@@ -59,9 +64,9 @@
59 64
60 &:hover, 65 &:hover,
61 &:focus { 66 &:focus {
62 transform: translateY(#{prop(--dims --hover-offset)}); 67 transform: translateY(fn.dim(--hover-offset));
63 background-color: prop(--colors --hover --bg); 68 background-color: fn.color(--hover --bg);
64 color: prop(--colors --hover --fg); 69 color: fn.color(--hover --fg);
65 70
66 &::after { 71 &::after {
67 display: block; 72 display: block;
@@ -69,35 +74,31 @@
69 74
70 small, 75 small,
71 strong { 76 strong {
72 color: prop(--colors --hover --fg); 77 color: fn.color(--hover --fg);
73 } 78 }
74 79
75 @include element('row') { 80 @include iro.bem-elem('row') {
76 @include modifier('hidden') { 81 @include iro.bem-modifier('hidden') {
77 visibility: visible; 82 visibility: visible;
78 transition: opacity .2s; 83 transition: opacity .2s;
79 opacity: 1; 84 opacity: 1;
80 } 85 }
81 } 86 }
82 87
83 @include element('block') { 88 @include iro.bem-elem('indicator') {
84 @include modifier('indicator') { 89 color: fn.color(--hover --fg);
85 color: prop(--colors --hover --fg);
86 }
87 } 90 }
88 } 91 }
89 } 92 }
90 93
91 &:visited { 94 &:visited {
92 @include element('block') { 95 @include iro.bem-elem('indicator') {
93 @include modifier('indicator') { 96 color: fn.color(--bg);
94 color: prop(--colors --bg);
95 }
96 } 97 }
97 } 98 }
98 99
99 @include modifier('outline') { 100 @include iro.bem-modifier('outline') {
100 border: 1px solid prop(--colors --border); 101 border: 1px solid fn.color(--border);
101 background-color: transparent; 102 background-color: transparent;
102 103
103 &:link, 104 &:link,
@@ -109,17 +110,8 @@
109 } 110 }
110 } 111 }
111 112
112 @include element('row') { 113 @include iro.bem-elem('row') {
113 display: flex; 114 @include iro.bem-modifier('hidden') {
114 align-items: center;
115 padding: prop(--dims --pad-y) prop(--dims --pad-x);
116 gap: prop(--dims --pad-x);
117
118 @include modifier('flush') {
119 padding: 0;
120 }
121
122 @include modifier('hidden') {
123 visibility: hidden; 115 visibility: hidden;
124 position: absolute; 116 position: absolute;
125 z-index: 10; 117 z-index: 10;
@@ -128,7 +120,7 @@
128 left: 0; 120 left: 0;
129 transition: opacity .2s, visibility 0s .2s; 121 transition: opacity .2s, visibility 0s .2s;
130 opacity: 0; 122 opacity: 0;
131 background-color: prop(--colors --hover --bg); 123 background-color: fn.color(--hover --bg);
132 124
133 @media (hover: none) { 125 @media (hover: none) {
134 visibility: visible; 126 visibility: visible;
@@ -139,14 +131,14 @@
139 } 131 }
140 } 132 }
141 133
142 @include element('thumbnail') { 134 @include iro.bem-elem('thumbnail') {
143 position: relative; 135 position: relative;
144 width: 100%; 136 width: 100%;
145 height: 2em; 137 height: 2em;
146 padding-top: 46%; 138 padding-top: 46%;
147 } 139 }
148 140
149 @include element('thumbnail-img') { 141 @include iro.bem-elem('thumbnail-img') {
150 display: block; 142 display: block;
151 position: absolute; 143 position: absolute;
152 top: 0; 144 top: 0;
@@ -156,28 +148,17 @@
156 object-fit: cover; 148 object-fit: cover;
157 } 149 }
158 150
159 @include element('block') { 151 @include iro.bem-elem('indicator') {
160 flex: 0 0 auto; 152 transition: color .2s;
161 overflow: hidden; 153 color: fn.color(--unread);
162 text-overflow: ellipsis; 154
163 155 &::before {
164 @include modifier('main') { 156 content: '';
165 flex-shrink: 1; 157 display: block;
166 width: 100%; 158 width: fn.dim(--indicator --width);
167 } 159 height: fn.dim(--indicator --height);
168 160 border-radius: fn.dim(--indicator --height);
169 @include modifier('indicator') { 161 background-color: currentColor;
170 transition: color .2s;
171 color: prop(--colors --unread);
172
173 &::before {
174 content: '';
175 display: block;
176 width: prop(--dims --indicator --width);
177 height: prop(--dims --indicator --height);
178 border-radius: prop(--dims --indicator --height);
179 background-color: currentColor;
180 }
181 } 162 }
182 } 163 }
183 164
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index 6b483ca..2cc63f5 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -1,30 +1,35 @@
1@include namespace('footer') { 1@use 'iro-sass/src/index' as iro;
2 @include store(( 2@use 'iro-design/src/functions' as fn;
3@use 'iro-design/src/mixins' as mx;
4@use '../functions' as fn2;
5
6@include iro.props-namespace('footer') {
7 @include iro.props-store((
3 --colors: ( 8 --colors: (
4 --fg: prop(--colors --obj, $global: true), 9 --fg: fn.global-color(--obj-lo),
5 --ground: prop(--colors --obj, $global: true), 10 --ground: fn.global-color(--obj),
6 ) 11 )
7 )); 12 ), 'colors');
13
14 @include iro.bem-component(iro.props-namespace()) {
15 @include mx.set-font(--mono);
8 16
9 @include component(namespace()) { 17 position: sticky;
10 position: sticky; 18 top: 100vh;
11 top: 100vh; 19 overflow: hidden;
12 overflow: hidden; 20 color: fn.color(--fg);
13 color: prop(--colors --fg);
14 font-family: $font-fam--mono;
15 line-height: 1.4;
16 21
17 &::after { 22 &::after {
18 content: str-repeat('â–‘', 400); 23 content: fn2.str-repeat('â–‘', 400);
19 display: block; 24 display: block;
20 margin-top: 2px; 25 margin-top: 2px;
21 padding-top: 2px; 26 padding-top: 2px;
22 overflow: hidden; 27 overflow: hidden;
23 border-top: 1px solid prop(--colors --ground); 28 border-top: 1px solid fn.color(--ground);
24 color: prop(--colors --ground); 29 color: fn.color(--ground);
25 } 30 }
26 31
27 @include element('ascii') { 32 @include iro.bem-elem('ascii') {
28 display: inline-block; 33 display: inline-block;
29 position: relative; 34 position: relative;
30 left: 50%; 35 left: 50%;
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index ca85438..cf396ce 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -1,86 +1,93 @@
1@include namespace('header') { 1@use 'iro-sass/src/index' as iro;
2 @include store(( 2@use 'iro-design/src/functions' as fn;
3@use 'include-media/dist/include-media' as media;
4
5@include iro.props-namespace('header') {
6 @include iro.props-store((
3 --colors: ( 7 --colors: (
4 --bg: prop(--colors --bg-lo, $global: true), 8 --bg: fn.global-color(--bg-hi),
5 --fg: prop(--colors --fg-lo, $global: true), 9 --fg: fn.global-color(--fg-lo),
6 --hover: ( 10 --hover: (
7 --bg: prop(--colors --fg-lo, $global: true), 11 --bg: fn.global-color(--fg-lo),
8 --fg: prop(--colors --bg-hi, $global: true), 12 --fg: fn.global-color(--bg-hi),
9 ), 13 ),
10 --active: ( 14 --active: (
11 --fg: prop(--colors --fg-lo, $global: true), 15 --fg: fn.global-color(--fg-lo),
12 ) 16 )
13 ), 17 )
18 ), 'colors');
19
20 @include iro.props-store((
14 --dims: ( 21 --dims: (
15 --height: 4rem, 22 --height: 4rem,
16 --icon: 1.5rem, 23 --icon: 1.5rem,
17 --pad-x: calc(.5 * (var(--header--dims--height) - var(--header--dims--icon))), 24 --pad-x: calc(.5 * (var(--header--dims--height) - var(--header--dims--icon))),
18 --gap: 2px, 25 --gap: 2px,
19 ) 26 )
20 )); 27 ), 'dims');
21 28
22 @include store(( 29 @include iro.props-store((
23 --colors: ( 30 --colors: (
24 --bg: prop(--colors --bg-hi, $global: true), 31 --bg: fn.global-color(--obj-hi),
25 ) 32 )
26 ), 'light'); 33 ), 'colors-dark');
27 34
28 @include store(( 35 @include iro.props-store((
29 --dims: ( 36 --dims: (
30 --height: 3.4rem, 37 --height: 3.4rem,
31 ) 38 )
32 ), 'sm'); 39 ), 'sm');
33 40
34 @include component(namespace()) { 41 @include iro.bem-component(iro.props-namespace()) {
35 display: flex; 42 display: flex;
36 width: 0; 43 width: 0;
37 height: prop(--dims --height); 44 height: fn.dim(--height);
38 padding: prop(--dims --gap); 45 padding: fn.dim(--gap);
39 gap: prop(--dims --gap); 46 gap: fn.dim(--gap);
40 47
41 @include element('item') { 48 @include iro.bem-elem('item') {
42 padding: 0 prop(--dims --pad-x); 49 padding: 0 fn.dim(--pad-x);
43 transition: background-color .2s, color .2s, border-left-color .2s; 50 transition: background-color .2s, color .2s, border-left-color .2s;
44 background-color: prop(--colors --bg); 51 background-color: fn.color(--bg);
45 color: prop(--colors --fg); 52 color: fn.color(--fg);
46 line-height: prop(--dims --height); 53 line-height: fn.dim(--height);
47 text-decoration: none; 54 text-decoration: none;
48 55
49 &:hover, 56 &:hover,
50 &:focus { 57 &:focus {
51 border-left-color: prop(--colors --hover --bg); 58 border-left-color: fn.color(--hover --bg);
52 background-color: prop(--colors --hover --bg); 59 background-color: fn.color(--hover --bg);
53 color: prop(--colors --hover --fg); 60 color: fn.color(--hover --fg);
54 } 61 }
55 62
56 @include modifier('icon') { 63 @include iro.bem-modifier('icon') {
57 display: flex; 64 display: flex;
58 align-items: center; 65 align-items: center;
59 justify-content: center; 66 justify-content: center;
60 } 67 }
61 68
62 @include modifier('active') { 69 @include iro.bem-modifier('active') {
63 color: prop(--colors --active --fg); 70 color: fn.color(--active --fg);
64 font-weight: bold; 71 font-weight: bold;
65 } 72 }
66 } 73 }
67 74
68 @include element('icon') { 75 @include iro.bem-elem('icon') {
69 width: prop(--dims --icon); 76 width: fn.dim(--icon);
70 height: prop(--dims --icon); 77 height: fn.dim(--icon);
71 } 78 }
72 79
73 @include modifier('fixed') { 80 @include iro.bem-modifier('fixed') {
74 position: fixed; 81 position: fixed;
75 } 82 }
76 83
77 @include media('>=lg') { 84 @include media.media('>=lg') {
78 position: sticky; 85 position: sticky;
79 z-index: 100; 86 z-index: 100;
80 top: 0; 87 top: 0;
81 margin-bottom: calc(-.75 * #{prop(--dims --height)}); 88 margin-bottom: calc(-.75 * #{fn.dim(--height)});
82 89
83 @include modifier('fixed') { 90 @include iro.bem-modifier('fixed') {
84 position: fixed; 91 position: fixed;
85 } 92 }
86 } 93 }
diff --git a/assets/css/components/_hnav.scss b/assets/css/components/_hnav.scss
index 220afde..4097373 100644
--- a/assets/css/components/_hnav.scss
+++ b/assets/css/components/_hnav.scss
@@ -1,22 +1,29 @@
1@include namespace('hnav') { 1@use 'iro-sass/src/index' as iro;
2 @include store(( 2@use 'iro-design/src/functions' as fn;
3
4@include iro.props-namespace('hnav') {
5 @include iro.props-store((
3 --colors: ( 6 --colors: (
4 --border: prop(--colors --obj-hi, $global: true) 7 --border: fn.global-color(--obj-hi)
5 ), 8 )
9 ), 'colors');
10
11 @include iro.props-store((
6 --dims: ( 12 --dims: (
7 --gap: 2em, 13 --margin-top: fn.global-dim(--size --600),
8 --pad-y: .5em 14 --gap: 2em,
15 --pad-y: .5em
9 ) 16 )
10 )); 17 ), 'dims');
11 18
12 @include component(namespace()) { 19 @include iro.bem-component(iro.props-namespace()) {
13 display: flex; 20 display: flex;
14 gap: prop(--dims --gap); 21 gap: fn.dim(--gap);
15 align-items: baseline; 22 align-items: baseline;
16 margin-top: $line-height * 2rem; 23 margin-top: fn.dim(--margin-top);
17 padding: prop(--dims --pad-y) 0 0; 24 padding: fn.dim(--pad-y) 0 0;
18 border-width: 1px 0 0; 25 border-width: 1px 0 0;
19 border-style: solid; 26 border-style: solid;
20 border-color: prop(--colors --border); 27 border-color: fn.color(--border);
21 } 28 }
22} 29}
diff --git a/assets/css/components/_lightbox.scss b/assets/css/components/_lightbox.scss
deleted file mode 100644
index f497a5e..0000000
--- a/assets/css/components/_lightbox.scss
+++ /dev/null
@@ -1,116 +0,0 @@
1@include namespace('lightbox') {
2 @include store((
3 --colors: (
4 --bg: prop(--colors --bg-hi, $global: true),
5 --button: (
6 --idle: prop(--colors --fg-hi, $global: true),
7 --hover: prop(--colors --fg-lo, $global: true),
8 --bg: prop(--colors --bg-hi, $global: true),
9 )
10 ),
11 --dims: (
12 --pad: 1rem,
13 ),
14 ));
15
16 @include component(namespace()) {
17 display: flex;
18 visibility: hidden;
19 position: fixed;
20 z-index: 5000;
21 top: 0;
22 left: 0;
23 box-sizing: border-box;
24 flex-direction: column;
25 align-items: center;
26 justify-content: center;
27 width: 100%;
28 height: 100%;
29 padding-bottom: 3vh;
30 transition: opacity .2s, visibility .2s;
31 opacity: 0;
32
33 @include element('bg') {
34 position: absolute;
35 z-index: -10;
36 top: 0;
37 left: 0;
38 width: 100%;
39 height: 100%;
40 opacity: .85;
41 background-color: prop(--colors --bg);
42 }
43
44 @include is('shown') {
45 visibility: visible;
46 transition: opacity .2s, visibility 0 .2s;
47 opacity: 1;
48 }
49
50 @include element('infobar') {
51 display: flex;
52 box-sizing: border-box;
53 flex: 0 0 auto;
54 align-items: center;
55 width: 100%;
56 padding: 0 prop(--dims --pad);
57 }
58
59 @include element('img') {
60 max-width: 100%;
61 min-height: 0;
62 max-height: 100%;
63 margin-top: auto;
64 margin-bottom: auto;
65 }
66
67 @include element('close', 'prev', 'next') {
68 margin: 0;
69 transition: color .2s;
70 border: 0;
71 background-color: transparent;
72 color: currentColor;
73
74 &:hover {
75 color: prop(--colors --button --hover);
76 }
77 }
78
79 @include element('close') {
80 margin: 0 calc(-1 * #{prop(--dims --pad)}) 0 auto;
81 padding: prop(--dims --pad);
82 font-size: 1.5em;
83 }
84
85 @include element('prev', 'next') {
86 position: absolute;
87 top: 50%;
88 padding: 2rem .5rem;
89 transform: translate(0, -50%);
90 font-size: 3em;
91 --icon-stroke-width: .75px;
92
93 &::before {
94 content: '';
95 display: block;
96 position: absolute;
97 z-index: -1;
98 top: 50%;
99 left: 50%;
100 width: 1.2em;
101 height: 1.2em;
102 transform: translate(-50%, -50%);
103 opacity: .25;
104 background-color: prop(--colors --button --bg);
105 }
106 }
107
108 @include element('prev') {
109 left: 0;
110 }
111
112 @include element('next') {
113 right: 0;
114 }
115 }
116}
diff --git a/assets/css/components/_note.scss b/assets/css/components/_note.scss
deleted file mode 100644
index 1879ea9..0000000
--- a/assets/css/components/_note.scss
+++ /dev/null
@@ -1,23 +0,0 @@
1@include namespace('note') {
2 @include store((
3 --colors: (
4 --fg: prop(--colors --accent --strong, $global: true),
5 --bg: prop(--colors --accent --faint, $global: true),
6 ),
7 --dims: (
8 --pad-x: 1em,
9 --pad-y: .7em
10 )
11 ));
12
13 @include component(namespace()) {
14 margin-top: $line-height * 1rem;
15 padding: prop(--dims --pad-y) prop(--dims --pad-x);
16 background-color: prop(--colors --bg);
17 color: prop(--colors --fg);
18
19 :first-child {
20 margin-top: 0;
21 }
22 }
23}
diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss
index a53b771..96f9060 100644
--- a/assets/css/layouts/_card-list.scss
+++ b/assets/css/layouts/_card-list.scss
@@ -1,37 +1,38 @@
1@include namespace('card-list') { 1@use 'iro-sass/src/index' as iro;
2 @include store(( 2@use 'iro-design/src/functions' as fn;
3
4@include iro.props-namespace('card-list') {
5 @include iro.props-store((
3 --dims: ( 6 --dims: (
4 --col-width: 17em 7 --margin-top: fn.global-dim(--size --600),
8 --spacing: fn.global-dim(--size --200),
9 --col-width: 17em,
5 ) 10 )
6 )); 11 ), 'dims');
7 12
8 @include layout(namespace()) { 13 @include iro.bem-layout(iro.props-namespace()) {
9 margin-top: $line-height * 2rem; 14 margin-top: fn.dim(--margin-top);
10 font-size: 1rem; 15 font-size: 1rem;
11 16
12 @include element('cards') { 17 @include iro.bem-elem('cards') {
13 display: flex; 18 display: flex;
14 flex-direction: column; 19 flex-direction: column;
15 gap: 2px; 20 gap: 2px;
16 margin-top: $line-height * .625rem; 21 margin-top: fn.dim(--spacing);
17 22
18 @include modifier('grid', 'gallery') { 23 @include iro.bem-modifier('grid', 'gallery') {
19 display: grid; 24 display: grid;
20 grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); 25 grid-template-columns: repeat(auto-fill, minmax(fn.dim(--col-width), 1fr));
21 align-items: start; 26 align-items: start;
22 } 27 }
23 28
24 @include modifier('grid') { 29 @include iro.bem-modifier('grid') {
25 gap: 6px; 30 gap: 6px;
26 } 31 }
27 32
28 @include modifier('gallery') { 33 @include iro.bem-modifier('gallery') {
29 gap: 20px; 34 gap: 20px;
30 } 35 }
31
32 @media print {
33 filter: none;
34 }
35 } 36 }
36 } 37 }
37} 38}
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
deleted file mode 100644
index ae23042..0000000
--- a/assets/css/layouts/_container.scss
+++ /dev/null
@@ -1,33 +0,0 @@
1@include namespace('container') {
2 @include store((
3 --dims: (
4 --pad-x: 2rem,
5 --pad-y: 4rem,
6 )
7 ));
8
9 @include store((
10 --dims: (
11 --pad-x: 1rem,
12 --pad-y: 3rem,
13 )
14 ), 'sm');
15
16 @include layout(namespace()) {
17 @include modifier('content') {
18 max-width: $content--width;
19 margin-right: auto;
20 margin-left: auto;
21 }
22
23 @include modifier('pad-x') {
24 padding-right: prop(--dims --pad-x);
25 padding-left: prop(--dims --pad-x);
26 }
27
28 @include modifier('pad-y') {
29 padding-top: prop(--dims --pad-y);
30 padding-bottom: prop(--dims --pad-y);
31 }
32 }
33}
diff --git a/assets/css/layouts/_media.scss b/assets/css/layouts/_media.scss
new file mode 100644
index 0000000..c4ad222
--- /dev/null
+++ b/assets/css/layouts/_media.scss
@@ -0,0 +1,26 @@
1@use 'iro-sass/src/index' as iro;
2@use 'iro-design/src/functions' as fn;
3
4@include iro.props-namespace('media') {
5 @include iro.props-store((
6 --dims: (
7 --pad-x: fn.global-dim(--size --200),
8 --pad-y: fn.global-dim(--size --150),
9
10 --75: (
11 --pad-x: fn.global-dim(--size --150),
12 --pad-y: fn.global-dim(--size --85),
13 ),
14
15 --200: (
16 --pad-x: fn.global-dim(--size --450),
17 --pad-y: fn.global-dim(--size --225),
18 ),
19
20 --300: (
21 --pad-x: fn.global-dim(--size --450),
22 --pad-y: fn.global-dim(--size --225),
23 )
24 )
25 ), 'dims');
26}
diff --git a/assets/css/objects/_badge.scss b/assets/css/objects/_badge.scss
deleted file mode 100644
index 216bb89..0000000
--- a/assets/css/objects/_badge.scss
+++ /dev/null
@@ -1,25 +0,0 @@
1@include namespace('badge') {
2 @include store((
3 --colors: (
4 --fg: prop(--colors --bg-hi, $global: true),
5 --bg: prop(--colors --fg-lo, $global: true),
6 ),
7 --dims: (
8 --pad-x: .6em,
9 --pad-y: .2em
10 )
11 ));
12
13 @include object(namespace()) {
14 display: inline-block;
15 padding: prop(--dims --pad-y) prop(--dims --pad-x);
16 background-color: prop(--colors --bg);
17 color: prop(--colors --fg);
18 font-size: iro-px-to-rem(14px);
19
20 &::selection {
21 background-color: prop(--colors --select --inverted --bg, $global: true);
22 color: prop(--colors --select --inverted --fg, $global: true);
23 }
24 }
25}
diff --git a/assets/css/objects/_icon.scss b/assets/css/objects/_icon.scss
deleted file mode 100644
index 15389f5..0000000
--- a/assets/css/objects/_icon.scss
+++ /dev/null
@@ -1,33 +0,0 @@
1@include namespace('icon') {
2 @keyframes fall {
3 to {
4 transform: translateY(105vh) rotate(90deg);
5 }
6 }
7
8 @include object(namespace()) {
9 display: block;
10 width: 1em;
11 height: 1em;
12 stroke-width: var(--icon-stroke-width, 1.5px);
13 stroke-linecap: round;
14 stroke-linejoin: round;
15
16 @include modifier('inline') {
17 display: inline-block;
18 vertical-align: -.1em;
19 }
20
21 @include modifier('snow') {
22 position: fixed;
23 z-index: 1000;
24 top: -1.2em;
25 width: 1em;
26 height: 1em;
27 animation: fall linear forwards;
28 stroke-width: 2px;
29 color: #fff;
30 pointer-events: none;
31 }
32 }
33}
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
deleted file mode 100644
index 1fc8166..0000000
--- a/assets/css/scopes/_body.scss
+++ /dev/null
@@ -1,83 +0,0 @@
1@include namespace('body') {
2 @include store((
3 --colors: (
4 --code: (
5 --fg: prop(--colors --accent --strong, $global: true),
6 --bg: prop(--colors --bg-hi, $global: true),
7 ),
8 --code-block: (
9 --fg: prop(--colors --fg, $global: true),
10 --bg: prop(--colors --bg-lo, $global: true),
11 ),
12 --blockquote: (
13 --border: prop(--colors --obj-hi, $global: true),
14 )
15 ),
16 --dims: (
17 --code: (
18 --pad-x: .3em,
19 --pad-y: .1em
20 ),
21 --code-block: (
22 --pad-x: 1em,
23 --pad-y: .7em
24 )
25 )
26 ));
27
28 @include store((
29 --colors: (
30 --code: (
31 --bg: prop(--colors --accent --faint, $global: true),
32 ),
33 --code-block: (
34 --bg: prop(--colors --bg-hi, $global: true),
35 ),
36 )
37 ), 'light');
38
39 @include scope(namespace()) {
40 @include element('meta') {
41 + h1 {
42 margin-top: $line-height * .5rem;
43 }
44 }
45
46 img {
47 max-width: 100%;
48 }
49
50 code {
51 padding: prop(--dims --code --pad-y) prop(--dims --code --pad-x);
52 border-radius: 3px;
53 background-color: prop(--colors --code --bg);
54 color: prop(--colors --code --fg);
55 }
56
57 blockquote {
58 margin: ($line-height * 1rem) 0 0 1px;
59 padding-left: calc(#{prop(--dims --indent, $global: true)} - 3px);
60 border-left: 3px solid prop(--colors --blockquote --border);
61 }
62
63 pre {
64 margin: ($line-height * 1rem) 0 0 0;
65 padding: prop(--dims --code-block --pad-y) prop(--dims --code-block --pad-x);
66 background-color: prop(--colors --code-block --bg);
67 color: prop(--colors --code-block --fg);
68
69 code {
70 display: inline-block;
71 margin-right: prop(--dims --code-block --pad-x);
72 padding: 0;
73 border-radius: 0;
74 background-color: transparent;
75 color: currentColor;
76 }
77
78 @media print {
79 border: 2px solid currentColor;
80 }
81 }
82 }
83}
diff --git a/assets/css/scopes/_colored-links.scss b/assets/css/scopes/_colored-links.scss
deleted file mode 100644
index 9be0f93..0000000
--- a/assets/css/scopes/_colored-links.scss
+++ /dev/null
@@ -1,20 +0,0 @@
1@include namespace('colored-links') {
2 @include store((
3 --colors: (
4 --link: (
5 --idle: prop(--colors --link --colored --idle, $global: true),
6 --visited: prop(--colors --link --colored --visited, $global: true),
7 )
8 )
9 ));
10
11 @include scope(namespace()) {
12 :link {
13 color: prop(--colors --link --idle);
14 }
15
16 :visited {
17 color: prop(--colors --link --visited);
18 }
19 }
20}
diff --git a/assets/css/scopes/_headlines.scss b/assets/css/scopes/_headlines.scss
deleted file mode 100644
index bfd5caa..0000000
--- a/assets/css/scopes/_headlines.scss
+++ /dev/null
@@ -1,104 +0,0 @@
1@include namespace('headlines') {
2 @include store((
3 --colors: (
4 --link: (
5 --idle-fg: prop(--colors --obj, $global: true),
6 --hover-fg: prop(--colors --fg-lo, $global: true),
7 ),
8 --emph: (
9 --bg: prop(--colors --bg-hi, $global: true),
10 --body-bg: prop(--colors --bg-hi, $global: true),
11 )
12 )
13 ));
14
15 @include store((
16 --colors: (
17 --emph: (
18 --body-bg: prop(--colors --bg, $global: true),
19 )
20 )
21 ), 'light');
22
23 @include scope(namespace()) {
24 h1,
25 h2,
26 h3 {
27 font-family: $font-fam--large;
28 font-weight: 600;
29 letter-spacing: normal;
30 line-height: 1.4;
31 text-transform: none;
32 font-feature-settings: 'ss02' 1;
33 }
34
35 h1,
36 h2,
37 h3,
38 h4 {
39 transform: translateX(-.06em);
40 }
41
42 h1 {
43 @include iro-responsive-modular-scale(font-size, 3, $responsive-mod-scale);
44 }
45
46 h2 {
47 @include iro-responsive-modular-scale(font-size, 2, $responsive-mod-scale);
48 }
49
50 h3 {
51 @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale);
52 }
53
54 h5,
55 h6 {
56 color: currentColor;
57 font-weight: 400;
58 }
59
60 @include element('title-inner') {
61 background-image: linear-gradient(
62 to top,
63 transparent .15em,
64 #{prop(--colors --emph --bg)} .15em,
65 #{prop(--colors --emph --bg)} .6em,
66 transparent .6em
67 );
68 }
69
70 @include element('link') {
71 display: none;
72 margin: -.5rem 0;
73 padding: .5rem;
74 vertical-align: -.02em;
75
76 svg {
77 width: px-to-em(12px);
78 height: px-to-em(12px);
79 }
80
81 &:link,
82 &:visited {
83 color: prop(--colors --link --idle-fg);
84
85 &:hover {
86 color: prop(--colors --link --hover-fg);
87 }
88 }
89 }
90
91 h1,
92 h2,
93 h3,
94 h4,
95 h5,
96 h6 {
97 &:hover {
98 @include element('link') {
99 display: inline-block;
100 }
101 }
102 }
103 }
104}
diff --git a/assets/css/scopes/_intro.scss b/assets/css/scopes/_intro.scss
deleted file mode 100644
index 6d4ac14..0000000
--- a/assets/css/scopes/_intro.scss
+++ /dev/null
@@ -1,8 +0,0 @@
1@include namespace('intro') {
2 @include scope(namespace()) {
3 h1 + p {
4 font-size: px-to-em(20px, 18px);
5 font-style: italic;
6 }
7 }
8}
diff --git a/assets/css/scopes/_invisible-links.scss b/assets/css/scopes/_invisible-links.scss
deleted file mode 100644
index e4d149e..0000000
--- a/assets/css/scopes/_invisible-links.scss
+++ /dev/null
@@ -1,13 +0,0 @@
1@include namespace('invisible-links') {
2 @include scope(namespace()) {
3 :link,
4 :visited {
5 color: currentColor;
6 text-decoration: none;
7
8 &:hover {
9 text-decoration: underline;
10 }
11 }
12 }
13}
diff --git a/assets/css/scopes/_small.scss b/assets/css/scopes/_small.scss
index f7aa61c..a4cc596 100644
--- a/assets/css/scopes/_small.scss
+++ b/assets/css/scopes/_small.scss
@@ -1,16 +1,25 @@
1@include namespace('small') { 1@use 'iro-sass/src/index' as iro;
2 @include store(( 2@use 'iro-design/src/functions' as fn;
3
4@include iro.props-namespace('small') {
5 @include iro.props-store((
3 --colors: ( 6 --colors: (
4 --fg: prop(--colors --fg-hi, $global: true), 7 --fg: fn.global-color(--fg-hi),
8 ),
9 ), 'colors');
10
11 @include iro.props-store((
12 --dims: (
13 --margin-top: fn.global-dim(--size --75),
5 ) 14 )
6 )); 15 ), 'dims');
7 16
8 @include scope(namespace()) { 17 @include iro.bem-scope(iro.props-namespace()) {
9 color: prop(--colors --fg); 18 color: fn.color(--fg);
10 line-height: 1.4; 19 line-height: 1.4;
11 20
12 p { 21 p {
13 margin-top: $line-height * .25rem; 22 margin-top: fn.dim(--margin-top);
14 } 23 }
15 } 24 }
16} 25}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 0b8f75c..1184bb2 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -1,52 +1,25 @@
1@import '../../node_modules/iro-sass/src/main'; 1@use 'iro-design/src/declare-vars' as iro-vars;
2@import '../../node_modules/iro-sass/src/bem-shortcodes'; 2@use 'declare-vars';
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 3
7@import 'vars'; 4@use 'iro-design/src/base' as iro-base;
8@import 'functions'; 5@use 'functions';
9@import 'fonts'; 6@use 'fonts';
10@import 'basics'; 7@use 'base';
11 8
12@import 'layouts/container'; 9@use 'iro-design/src/layouts';
10@use 'layouts/media';
11@use 'layouts/card-list';
13 12
14@import 'objects/icon'; 13@use 'iro-design/src/objects';
15@import 'objects/badge';
16 14
17@import 'components/header'; 15@use 'components/footer';
18@import 'components/footer'; 16@use 'components/header';
19@import 'components/card'; 17@use 'components/hnav';
20@import 'components/note'; 18@use 'components/card';
21@import 'components/lightbox';
22@import 'components/hnav';
23 19
24@import 'layouts/card-list'; 20@use 'iro-design/src/scopes';
21@use 'scopes/small';
25 22
26@import 'scopes/colored-links'; 23@use 'iro-design/src/utils';
27@import 'scopes/invisible-links';
28@import 'scopes/headlines';
29@import 'scopes/small';
30@import 'scopes/body';
31@import 'scopes/intro';
32 24
33@import 'utils'; 25@use 'iro-design/src/apply-vars';
34
35:root {
36 @include assign;
37
38 @each $breakpoint in map-keys($breakpoints) {
39 @include media('<=#{$breakpoint}') {
40 @include assign($breakpoint);
41 }
42 }
43
44 @media (prefers-color-scheme: light) {
45 @include assign('light');
46 }
47
48 @media print {
49 @include assign('light');
50 @include assign('print');
51 }
52}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-12-25 19:35:41 +0000