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