this repo has no description
Change everything except font properties to px instead of rem
+112
-113
+15
-16
src/components/blog/Balloon.astro
+15
-16
src/components/blog/Balloon.astro
···
17
17
18
18
<div
19
19
class="cable"
20
-
style={`--length: ${length}rem;
20
+
style={`--length: ${length}px;
21
21
--id: ${id};
22
22
--of: ${of};
23
-
--offset: ${offset}rem;
23
+
--offset: ${offset}px;
24
24
${rotation.map((x, i) => `--rot-${i}: ${x}deg;`).join(" ")}
25
25
--timing: ${utils.getRandom(blog.balloons.timing)}s;
26
26
`}
27
27
>
28
28
<div
29
29
class="balloon"
30
-
style={`--width: ${utils.getRandom(blog.balloons.size[0])}rem;
31
-
--height: ${utils.getRandom(blog.balloons.size[1])}rem;`}
30
+
style={`--width: ${utils.getRandom(blog.balloons.size[0])}px;
31
+
--height: ${utils.getRandom(blog.balloons.size[1])}px;`}
32
32
tabindex="-1"
33
33
data-min-time={blog.balloons.time[0]}
34
34
data-max-time={blog.balloons.time[1]}
···
82
82
[
83
83
{},
84
84
{
85
-
top: "calc(var(--x-offset-0) + 50rem)",
85
+
top: "calc(var(--x-offset-0) + 500px)",
86
86
},
87
87
],
88
88
{
···
126
126
postParent.animate(
127
127
[
128
128
{
129
-
top: "calc(var(--x-offset-0) + 50rem)",
129
+
top: "calc(var(--x-offset-0) + 500px)",
130
130
},
131
131
{},
132
132
],
···
231
231
.cable {
232
232
position: absolute;
233
233
234
-
width: 0.5rem;
234
+
width: 5px;
235
235
height: var(--length);
236
-
border-radius: 0.25rem;
236
+
border-radius: 2.5px;
237
237
background: black;
238
238
239
239
[data-time="night"] + * & {
240
240
background: #404040;
241
241
}
242
242
243
-
/* .5rem accounts for border (z-index doesn't work) */
244
243
z-index: -99;
245
244
top: calc(-1 * var(--length));
246
245
left: calc(
···
275
274
}
276
275
277
276
.cable-tie {
278
-
width: 1.75rem;
279
-
height: 0.5rem;
277
+
width: 17.5px;
278
+
height: 5px;
280
279
281
280
position: absolute;
282
-
bottom: -0.25rem;
281
+
bottom: -2.5px;
283
282
left: 50%;
284
283
translate: -50%;
285
284
z-index: 1;
286
285
287
-
border-radius: 0.25rem;
286
+
border-radius: 2.5px;
288
287
background-color: black;
289
288
290
289
[data-time="night"] + * & {
···
293
292
}
294
293
295
294
.tie {
296
-
width: 2rem;
297
-
height: 2rem;
295
+
width: 20px;
296
+
height: 20px;
298
297
background-color: var(--colour);
299
298
clip-path: polygon(50% 0, 0 100%, 100% 100%);
300
299
position: absolute;
301
-
bottom: -1rem;
300
+
bottom: -10px;
302
301
left: 50%;
303
302
translate: -50%;
304
303
}
+3
-3
src/components/blog/CodeHeading.astro
+3
-3
src/components/blog/CodeHeading.astro
···
67
67
68
68
& svg {
69
69
stroke: var(--text);
70
-
margin: 0.2rem;
70
+
margin: 2px;
71
71
}
72
72
}
73
73
···
76
76
justify-content: space-between;
77
77
align-items: center;
78
78
/* gets overridden by * because why not ig */
79
-
padding: 1rem !important;
79
+
padding: 10px !important;
80
80
position: sticky;
81
81
top: 0;
82
82
left: 0;
83
-
border-bottom: 0.4rem solid var(--border);
83
+
border-bottom: 4px solid var(--border);
84
84
user-select: none;
85
85
}
86
86
</style>
+15
-15
src/components/blog/Post.astro
+15
-15
src/components/blog/Post.astro
···
61
61
${offsets
62
62
.map(
63
63
(x, i) =>
64
-
`--x-offset-${i}: calc((100svw - ${blog.post.width + 2 * blog.post.xPadding}rem) * ${positions[0] + x[0]} + ${blog.post.xPadding}rem);
65
-
--y-offset-${i}: ${blog.post.yLeeway * 2 * (positions[1] + x[1]) - blog.post.yLeeway}rem;`,
64
+
`--x-offset-${i}: calc((100svw - ${blog.post.width + 2 * blog.post.xPadding}px) * ${positions[0] + x[0]} + ${blog.post.xPadding}px);
65
+
--y-offset-${i}: ${blog.post.yLeeway * 2 * (positions[1] + x[1]) - blog.post.yLeeway}px;`,
66
66
)
67
67
.join("\n")}
68
68
···
73
73
74
74
/* config */
75
75
76
-
--width: ${blog.post.width}rem;
77
-
--y-gap: ${blog.post.yGap}rem;
76
+
--width: ${blog.post.width}px;
77
+
--y-gap: ${blog.post.yGap}px;
78
78
`}
79
79
>
80
80
{
···
172
172
173
173
section {
174
174
width: var(--width);
175
-
padding: 1rem;
175
+
padding: 10px;
176
176
margin-bottom: var(--y-gap);
177
177
178
178
position: relative;
···
185
185
content: "" / "";
186
186
display: block;
187
187
position: absolute;
188
-
top: -0.5rem;
189
-
left: -0.5rem;
188
+
top: -5px;
189
+
left: -5px;
190
190
z-index: -2;
191
191
192
-
width: calc(var(--width) + 1rem);
193
-
height: calc(100% + 1rem);
192
+
width: calc(var(--width) + 10px);
193
+
height: calc(100% + 10px);
194
194
195
195
background-color: white;
196
-
border: 0.5rem solid var(--colour, dodgerblue);
197
-
border-radius: 2.5rem;
196
+
border: 5px solid var(--colour, dodgerblue);
197
+
border-radius: 25px;
198
198
199
-
box-shadow: 0 0 7.5rem var(--box-shadow-colour, #00000080);
199
+
box-shadow: 0 0 75px var(--box-shadow-colour, #00000080);
200
200
}
201
201
202
202
/* default, overridden by reduced motion */
···
217
217
}
218
218
219
219
& > img {
220
-
border-radius: 1.5rem;
220
+
border-radius: 15px;
221
221
222
-
width: 30rem;
223
-
height: 20rem;
222
+
width: 300px;
223
+
height: 200px;
224
224
object-fit: cover;
225
225
}
226
226
}
+3
-3
src/components/blog/background/Clouds.astro
+3
-3
src/components/blog/background/Clouds.astro
···
30
30
...prev.output,
31
31
<Cloud
32
32
style={`--parallax-speed: ${blog.background.parallax.clouds};
33
-
width: ${width}rem;
34
-
height: ${height}rem;
35
-
top: ${y}rem;
33
+
width: ${width}px;
34
+
height: ${height}px;
35
+
top: ${y}px;
36
36
left: calc(${x} * 200lvw - 100lvw);
37
37
position: absolute;`}
38
38
id={"cloud-" + i}
+5
-5
src/components/blog/background/Moon.astro
+5
-5
src/components/blog/background/Moon.astro
+1
-1
src/components/blog/background/Stars.astro
+1
-1
src/components/blog/background/Stars.astro
···
45
45
return (
46
46
<svg
47
47
style={`--parallax-speed: ${utils.getRandom(blog.background.parallax.star, sizeSeed)};
48
-
--size: ${blog.background.stars.size[0] + sizeSeed * (blog.background.stars.size[1] - blog.background.stars.size[0])}rem;
48
+
--size: ${blog.background.stars.size[0] + sizeSeed * (blog.background.stars.size[1] - blog.background.stars.size[0])}px;
49
49
--x: ${Math.random()};
50
50
--y: ${Math.random()};
51
51
--rotate-speed: ${blog.background.stars.rotateSpeed[0] + Math.random() * (blog.background.stars.rotateSpeed[1] - blog.background.stars.rotateSpeed[0])}s;
+2
-2
src/components/blog/background/Sun.astro
+2
-2
src/components/blog/background/Sun.astro
+31
-31
src/components/blog/post.css
+31
-31
src/components/blog/post.css
···
87
87
& h2,
88
88
& h3,
89
89
& h4 {
90
-
margin-block-start: 2rem;
91
-
margin-block-end: 2rem;
90
+
margin-block-start: 20px;
91
+
margin-block-end: 20px;
92
92
93
93
color: var(--typo-subheading);
94
94
···
117
117
& p,
118
118
& blockquote {
119
119
clear: both;
120
-
margin-block: 2rem;
120
+
margin-block: 20px;
121
121
}
122
122
123
123
& div:has(> p) {
124
-
margin-block: 1rem;
124
+
margin-block: 10px;
125
125
}
126
126
127
127
/* Images */
128
128
& img {
129
129
height: auto; /* fix height issues ?? */
130
-
margin: 1rem;
130
+
margin: 10px;
131
131
}
132
132
133
133
& a {
134
-
text-decoration: 0.2rem underline;
134
+
text-decoration: 2px underline;
135
135
136
136
&:link {
137
137
color: var(--typo-url);
···
140
140
color: var(--typo-visited);
141
141
}
142
142
&:hover {
143
-
text-decoration: 0.1rem wavy underline;
143
+
text-decoration: 1px wavy underline;
144
144
}
145
145
&:active {
146
146
color: var(--rainbow-3);
···
150
150
/* Standard Lists */
151
151
& ul,
152
152
& ol {
153
-
margin-inline-start: 4rem;
153
+
margin-inline-start: 40px;
154
154
& & {
155
-
margin-inline-start: 2rem;
155
+
margin-inline-start: 20px;
156
156
}
157
157
}
158
158
159
159
/* Blockquotes */
160
160
& blockquote {
161
161
--accent: var(--bg-secondary);
162
-
border-left: 0.2rem solid hsl(from var(--accent) h s calc(l * 0.9));
163
-
padding: 1rem 4rem 1rem 1rem;
164
-
margin: 1rem;
165
-
border-radius: 0.5rem;
162
+
border-left: 2px solid hsl(from var(--accent) h s calc(l * 0.9));
163
+
padding: 10px 40px 10px 10px;
164
+
margin: 10px;
165
+
border-radius: 5px;
166
166
background-color: var(--accent);
167
167
width: fit-content;
168
-
min-width: 20rem;
168
+
min-width: 200px;
169
169
170
170
&::before {
171
171
content: var(--icon) " " var(--name) / var(--name);
···
176
176
:not(pre) > code {
177
177
color: var(--typo-code);
178
178
background-color: var(--bg-code);
179
-
padding: 0.2rem;
180
-
border-radius: 0.5rem;
179
+
padding: 2px;
180
+
border-radius: 5px;
181
181
182
182
/* make blockquote code use a lighter version of the accent with a darker background */
183
183
:is(blockquote) & {
···
188
188
189
189
/* Outline Code */
190
190
& pre:has(> code) {
191
-
padding: 0.5rem;
192
-
border-radius: 1rem;
191
+
padding: 5px;
192
+
border-radius: 10px;
193
193
}
194
194
195
195
.astro-code {
196
196
background-color: var(--bg-code) !important;
197
-
margin-block: 1rem;
197
+
margin-block: 10px;
198
198
padding: 0;
199
199
position: relative;
200
200
201
201
& code {
202
202
display: block;
203
-
padding: 1rem;
203
+
padding: 10px;
204
204
205
205
& span {
206
206
color: light-dark(var(--shiki-light), var(--shiki-dark)) !important;
···
215
215
216
216
.task-list-item label {
217
217
display: flex;
218
-
margin-block-start: 0.5rem;
219
-
margin-block-end: 0.75rem;
218
+
margin-block-start: 5px;
219
+
margin-block-end: 75px;
220
220
221
-
gap: 0.5rem;
221
+
gap: 5px;
222
222
223
223
& input[type="checkbox"] {
224
-
width: 2.5rem;
225
-
height: 2.5rem;
226
-
margin-inline-end: 0.5rem;
224
+
width: 25px;
225
+
height: 25px;
226
+
margin-inline-end: 5px;
227
227
228
228
background: light-dark(rgb(0, 0, 0, 0.2), rgb(255, 255, 255, 0.4));
229
-
border-radius: 0.5rem;
230
-
border: 0.1rem solid var(--typo-body);
229
+
border-radius: 5px;
230
+
border: 1px solid var(--typo-body);
231
231
232
232
&:checked {
233
233
--checkmark: url("../../assets/check.svg");
234
-
background: var(--checkmark) center/2rem padding-box no-repeat
234
+
background: var(--checkmark) center/20px padding-box no-repeat
235
235
var(--rainbow-2);
236
236
}
237
237
}
···
244
244
245
245
& th,
246
246
& td {
247
-
border: 0.1rem solid white;
248
-
padding: 0.5rem;
247
+
border: 1px solid white;
248
+
padding: 5px;
249
249
}
250
250
251
251
& thead th {
+3
-3
src/components/generic/LightDarkToggle.astro
+3
-3
src/components/generic/LightDarkToggle.astro
+4
-4
src/components/index/Map.astro
+4
-4
src/components/index/Map.astro
···
166
166
top: var(--y);
167
167
left: var(--x);
168
168
.location:hover & {
169
-
filter: drop-shadow(0 0 0.5rem var(--colour));
169
+
filter: drop-shadow(0 0 5px var(--colour));
170
170
scale: 1.1;
171
171
}
172
172
}
···
175
175
.text {
176
176
position: absolute;
177
177
178
-
width: 10rem;
179
-
height: 2rem;
178
+
width: 100px;
179
+
height: 20px;
180
180
181
181
top: var(--y);
182
182
left: var(--x);
183
183
184
184
color: var(--colour);
185
185
.location:hover & {
186
-
filter: drop-shadow(0 0 0.5rem var(--colour));
186
+
filter: drop-shadow(0 0 5px var(--colour));
187
187
}
188
188
}
189
189
+13
-13
src/config.ts
+13
-13
src/config.ts
···
1
1
export const blog = {
2
2
// overrideHour: 0,
3
3
post: {
4
-
width: 30,
5
-
xPadding: 2,
6
-
yLeeway: 5,
7
-
yGap: 20,
8
-
topYGap: 35,
4
+
width: 300,
5
+
xPadding: 20,
6
+
yLeeway: 50,
7
+
yGap: 200,
8
+
topYGap: 350,
9
9
drift: [0.1, 1],
10
10
timing: [10, 20],
11
11
},
···
19
19
20
20
clouds: {
21
21
count: 8,
22
-
width: [40, 80],
23
-
height: [15, 30],
24
-
yGap: [15, 25],
22
+
width: [400, 800],
23
+
height: [150, 300],
24
+
yGap: [150, 250],
25
25
26
26
bumpRadius: [20, 60],
27
27
gradientStops: [35, 80],
···
29
29
30
30
stars: {
31
31
count: 40,
32
-
size: [2, 5],
32
+
size: [20, 50],
33
33
prongs: [4, 8],
34
34
rotateSpeed: [20, 40],
35
35
},
···
40
40
},
41
41
balloons: {
42
42
numBalloons: [1, 3],
43
-
length: [5, 15],
44
-
offset: [-2.5, 2.5],
43
+
length: [50, 150],
44
+
offset: [-25, 25],
45
45
rotation: [-10, 10],
46
46
timing: [30, 45],
47
47
size: [
48
-
[5, 10],
49
-
[10, 20],
48
+
[50, 100],
49
+
[100, 200],
50
50
],
51
51
opacity: [0.6, 0.9],
52
52
time: [2, 5],
+4
-4
src/pages/blog/[id].astro
+4
-4
src/pages/blog/[id].astro
···
89
89
90
90
background-color: var(--bg-secondary);
91
91
color: var(--typo-heading);
92
-
padding-bottom: 0.5rem;
92
+
padding-bottom: 5px;
93
93
94
94
& > :global(:not(style, script):last-of-type) {
95
-
margin-right: 1rem;
96
-
margin-top: 0.5rem;
95
+
margin-right: 10px;
96
+
margin-top: 5px;
97
97
}
98
98
}
99
99
···
109
109
.content,
110
110
:global(.full-width),
111
111
:global([data-para-flag--full-width]) {
112
-
--padding-inline: 2rem;
112
+
--padding-inline: 20px;
113
113
--content-max-width: 60ch;
114
114
--breakout-max-width: 80ch;
115
115
+5
-5
src/pages/blog/index.astro
+5
-5
src/pages/blog/index.astro
···
21
21
height: 2em;
22
22
aspect-ratio: 1;
23
23
padding: 0.2em;
24
-
border-radius: 0.5rem;
24
+
border-radius: 5px;
25
25
26
26
& svg {
27
27
width: 1.6em;
···
43
43
justify-content: space-between;
44
44
45
45
& a {
46
-
margin: 0.5rem 1rem;
46
+
margin: 5px 10px;
47
47
}
48
48
}
49
49
···
53
53
54
54
:global(#nav-menu) {
55
55
background-color: black;
56
-
padding: 1rem;
56
+
padding: 10px;
57
57
border-radius: 0 0 50% 0;
58
58
}
59
59
</style>
···
61
61
<Base title="Blog">
62
62
<Background />
63
63
<main>
64
-
<heading style={`--y-gap: ${blog.post.yGap}rem`}>
64
+
<heading style={`--y-gap: ${blog.post.yGap}px`}>
65
65
<Nav current="Blog" />
66
66
67
67
<a href="/rss.xml" aria-label="Rss Feed">
···
69
69
</a>
70
70
</heading>
71
71
72
-
<div class="top-offset" style={`--top-gap: ${blog.post.topYGap}rem;`}></div>
72
+
<div class="top-offset" style={`--top-gap: ${blog.post.topYGap}px;`}></div>
73
73
74
74
{
75
75
posts.map((x, i) => (