vielle.dev
[Archived] Archived WIP of vielle.dev
Manually scope all content in blog/[id] (@scope not supported in ff yet)
+149
-147
src/pages/blog/[id].astro
+149
-147
src/pages/blog/[id].astro
···
90
90
<!-- post content styles -->
91
91
<!-- TODO: REFACTOR -->
92
92
<style is:global>
93
-
/* Custom Flags */
93
+
.content {
94
+
/* Custom Flags */
94
95
95
-
blockquote {
96
-
&[data-bq-flag--note] {
97
-
--accent: skyblue; /* CHANGE */
98
-
--icon: "📝"; /* CHANGE */
99
-
--name: "Note";
100
-
}
96
+
& blockquote {
97
+
&[data-bq-flag--note] {
98
+
--accent: skyblue; /* CHANGE */
99
+
--icon: "📝"; /* CHANGE */
100
+
--name: "Note";
101
+
}
101
102
102
-
&[data-bq-flag--alert] {
103
-
--accent: orangered; /* CHANGE */
104
-
--icon: "🚨"; /* CHANGE */
105
-
--name: "Alert";
106
-
}
103
+
&[data-bq-flag--alert] {
104
+
--accent: orangered; /* CHANGE */
105
+
--icon: "🚨"; /* CHANGE */
106
+
--name: "Alert";
107
+
}
107
108
108
-
&[data-bq-flag--info] {
109
-
--accent: rebeccapurple; /* CHANGE */
110
-
--icon: "📚"; /* CHANGE */
111
-
--name: "Info";
109
+
&[data-bq-flag--info] {
110
+
--accent: rebeccapurple; /* CHANGE */
111
+
--icon: "📚"; /* CHANGE */
112
+
--name: "Info";
113
+
}
112
114
}
113
-
}
114
115
115
-
p,
116
-
div:has(> p) {
117
-
&[data-para-flag--bg-red] {
118
-
background-color: #ee6f9a; /* CHANGE */
119
-
color: var(--light-text); /* CHANGE */
116
+
& p,
117
+
& div:has(> p) {
118
+
&[data-para-flag--bg-red] {
119
+
background-color: #ee6f9a; /* CHANGE */
120
+
color: var(--light-text); /* CHANGE */
121
+
}
120
122
}
121
-
}
122
123
123
-
img {
124
-
&[data-img-flag--small="true"] {
125
-
width: 50%;
126
-
}
124
+
& img {
125
+
&[data-img-flag--small="true"] {
126
+
width: 50%;
127
+
}
127
128
128
-
&[data-img-flag--left="true"] {
129
-
float: left;
130
-
}
129
+
&[data-img-flag--left="true"] {
130
+
float: left;
131
+
}
131
132
132
-
&[data-img-flag--right="true"] {
133
-
float: right;
134
-
}
133
+
&[data-img-flag--right="true"] {
134
+
float: right;
135
+
}
135
136
136
-
&[data-img-flag--centre="true"] {
137
-
margin-inline: auto;
137
+
&[data-img-flag--centre="true"] {
138
+
margin-inline: auto;
139
+
}
138
140
}
139
-
}
140
141
141
-
/* Headings */
142
+
/* Headings */
142
143
143
-
h2,
144
-
h3,
145
-
h4 {
146
-
margin-block-start: 2rem;
147
-
margin-block-end: 2rem;
144
+
& h2,
145
+
& h3,
146
+
& h4 {
147
+
margin-block-start: 2rem;
148
+
margin-block-end: 2rem;
149
+
150
+
& + & {
151
+
margin-block-start: 0;
152
+
}
148
153
149
-
& + & {
150
-
margin-block-start: 0;
154
+
:has(+ &) {
155
+
margin-block-end: 0;
156
+
}
151
157
}
152
158
153
-
:has(+ &) {
154
-
margin-block-end: 0;
159
+
& h2 {
160
+
font-size: 3.6rem;
155
161
}
156
-
}
157
162
158
-
h2 {
159
-
font-size: 3.6rem;
160
-
}
163
+
& h3 {
164
+
font-size: 2.8rem;
165
+
}
161
166
162
-
h3 {
163
-
font-size: 2.8rem;
164
-
}
165
-
166
-
h4 {
167
-
font-size: 2.4rem;
168
-
}
167
+
& h4 {
168
+
font-size: 2.4rem;
169
+
}
169
170
170
-
/* Paragraphs */
171
-
p,
172
-
blockquote {
173
-
clear: both;
174
-
margin-block: 2rem;
175
-
}
171
+
/* Paragraphs */
172
+
& p,
173
+
& blockquote {
174
+
clear: both;
175
+
margin-block: 2rem;
176
+
}
176
177
177
-
/* Images */
178
-
img {
179
-
height: auto; /* fix height issues ?? */
180
-
margin: 1rem;
181
-
}
178
+
/* Images */
179
+
& img {
180
+
height: auto; /* fix height issues ?? */
181
+
margin: 1rem;
182
+
}
182
183
183
-
/* Standard Lists */
184
-
ul,
185
-
ol {
186
-
margin-inline-start: 4rem;
187
-
& & {
188
-
margin-inline-start: 2rem;
184
+
/* Standard Lists */
185
+
& ul,
186
+
& ol {
187
+
margin-inline-start: 4rem;
188
+
& & {
189
+
margin-inline-start: 2rem;
190
+
}
189
191
}
190
-
}
191
192
192
-
/* Blockquotes */
193
-
blockquote {
194
-
--accent: #a8a8a8; /* CHANGE */
195
-
border-left: 0.2rem solid var(--accent);
196
-
padding: 1rem 4rem 1rem 1rem;
197
-
margin: 1rem;
198
-
border-radius: 0.5rem;
199
-
background-color: rgb(from var(--accent) r g b / 0.5);
200
-
width: fit-content;
201
-
min-width: 20rem;
193
+
/* Blockquotes */
194
+
& blockquote {
195
+
--accent: #a8a8a8; /* CHANGE */
196
+
border-left: 0.2rem solid var(--accent);
197
+
padding: 1rem 4rem 1rem 1rem;
198
+
margin: 1rem;
199
+
border-radius: 0.5rem;
200
+
background-color: rgb(from var(--accent) r g b / 0.5);
201
+
width: fit-content;
202
+
min-width: 20rem;
202
203
203
-
&::before {
204
-
content: var(--icon) " " var(--name) / var(--name);
204
+
&::before {
205
+
content: var(--icon) " " var(--name) / var(--name);
206
+
}
205
207
}
206
-
}
207
208
208
-
/* Inline code */
209
-
:not(pre) > code {
210
-
color: var(--accent);
211
-
background-color: #00000040;
212
-
padding: 0.2rem;
213
-
border-radius: 0.5rem;
209
+
/* Inline code */
210
+
:not(pre) > code {
211
+
color: var(--accent);
212
+
background-color: #00000040;
213
+
padding: 0.2rem;
214
+
border-radius: 0.5rem;
214
215
215
-
/* make blockquote code use a lighter version of the accent with a darker background */
216
-
:is(blockquote) & {
217
-
color: hsl(from var(--accent) h calc(s * 0.8) calc(l * 1.4));
218
-
background-color: #00000080;
216
+
/* make blockquote code use a lighter version of the accent with a darker background */
217
+
:is(blockquote) & {
218
+
color: hsl(from var(--accent) h calc(s * 0.8) calc(l * 1.4));
219
+
background-color: #00000080;
220
+
}
219
221
}
220
-
}
221
222
222
-
/* Outline Code */
223
-
pre:has(> code) {
224
-
padding: 0.5rem;
225
-
border-radius: 1rem;
226
-
--border: light-dark(
227
-
/* CHANGE */ hsl(from var(--bg) h s calc(l * 0.5)),
228
-
hsl(from var(--bg) h s calc(l * 1.5))
229
-
);
230
-
border: 0.2rem solid var(--border);
223
+
/* Outline Code */
224
+
& pre:has(> code) {
225
+
padding: 0.5rem;
226
+
border-radius: 1rem;
227
+
--border: light-dark(
228
+
/* CHANGE */ hsl(from var(--bg) h s calc(l * 0.5)),
229
+
hsl(from var(--bg) h s calc(l * 1.5))
230
+
);
231
+
border: 0.2rem solid var(--border);
231
232
232
-
[data-mode="light"] & {
233
-
--border: hsl(from var(--bg) h s calc(l * 0.5)); /* CHANGE */
234
-
}
233
+
[data-mode="light"] & {
234
+
--border: hsl(from var(--bg) h s calc(l * 0.5)); /* CHANGE */
235
+
}
235
236
236
-
[data-mode="dark"] & {
237
-
--border: hsl(from var(--bg) h s calc(l * 1.5)); /* CHANGE */
237
+
[data-mode="dark"] & {
238
+
--border: hsl(from var(--bg) h s calc(l * 1.5)); /* CHANGE */
239
+
}
238
240
}
239
-
}
240
241
241
-
/* Check lists */
242
-
.task-list-item {
243
-
display: flex;
244
-
margin-block-start: 0.5rem;
245
-
margin-block-end: 0.75rem;
246
-
margin-inline-start: 1.5rem;
242
+
/* Check lists */
243
+
.task-list-item {
244
+
display: flex;
245
+
margin-block-start: 0.5rem;
246
+
margin-block-end: 0.75rem;
247
+
margin-inline-start: 1.5rem;
247
248
248
-
gap: 0.5rem;
249
+
gap: 0.5rem;
249
250
250
-
& input[type="checkbox"] {
251
-
width: 2.5rem;
252
-
height: 2.5rem;
253
-
margin-inline-end: 0.5rem;
251
+
& input[type="checkbox"] {
252
+
width: 2.5rem;
253
+
height: 2.5rem;
254
+
margin-inline-end: 0.5rem;
254
255
255
-
background: rgb(255, 255, 255, 0.4); /* CHANGE */
256
-
border-radius: 0.5rem;
257
-
border: 0.1rem solid white;
256
+
background: rgb(255, 255, 255, 0.4); /* CHANGE */
257
+
border-radius: 0.5rem;
258
+
border: 0.1rem solid white;
258
259
259
-
&:checked {
260
-
--checkmark: url("../../assets/check.svg");
261
-
background: var(--checkmark) center/2rem padding-box no-repeat
262
-
rgb(0, 130, 130); /* Change */
260
+
&:checked {
261
+
--checkmark: url("../../assets/check.svg");
262
+
background: var(--checkmark) center/2rem padding-box no-repeat
263
+
rgb(0, 130, 130); /* Change */
264
+
}
263
265
}
264
266
}
265
-
}
266
267
267
-
/* Table */
268
-
table {
269
-
border-collapse: collapse;
270
-
border-spacing: 0;
268
+
/* Table */
269
+
& table {
270
+
border-collapse: collapse;
271
+
border-spacing: 0;
271
272
272
-
& th,
273
-
& td {
274
-
border: 0.1rem solid white;
275
-
padding: 0.5rem;
276
-
}
273
+
& th,
274
+
& td {
275
+
border: 0.1rem solid white;
276
+
padding: 0.5rem;
277
+
}
277
278
278
-
& thead th {
279
-
background-color: rgb(145, 53, 68); /* CHANGE */
280
-
}
279
+
& thead th {
280
+
background-color: rgb(145, 53, 68); /* CHANGE */
281
+
}
281
282
282
-
& tbody tr:nth-child(2n) {
283
-
background-color: #ffffff10; /* CHANGE */
283
+
& tbody tr:nth-child(2n) {
284
+
background-color: #ffffff10; /* CHANGE */
285
+
}
284
286
}
285
287
}
286
288
</style>