this repo has no description
Add visible checkboxes to /blog/[id].astro
+52
-9
+14
src/assets/check.svg
+14
src/assets/check.svg
···
1
+
<svg
2
+
xmlns="http://www.w3.org/2000/svg"
3
+
width="24"
4
+
height="24"
5
+
viewBox="0 0 24 24"
6
+
fill="none"
7
+
stroke="white"
8
+
stroke-width="2"
9
+
stroke-linecap="round"
10
+
stroke-linejoin="round"
11
+
class="lucide lucide-check-icon lucide-check"
12
+
>
13
+
<path d="M20 6 9 17l-5-5" />
14
+
</svg>
+38
-9
src/pages/blog/[id].astro
+38
-9
src/pages/blog/[id].astro
···
115
115
--icon: "🚨";
116
116
--name: "Alert";
117
117
}
118
+
119
+
/* get a checkbox */
120
+
.task-list-item {
121
+
display: flex;
122
+
margin-block-start: 0.5rem;
123
+
margin-block-end: 0.75rem;
124
+
margin-inline-start: 1.5rem;
125
+
126
+
gap: 0.5rem;
127
+
128
+
& input[type="checkbox"] {
129
+
width: 2.5rem;
130
+
height: 2.5rem;
131
+
margin-inline-end: 0.5rem;
132
+
133
+
background: rgb(255, 255, 255, 0.4);
134
+
border-radius: 0.5rem;
135
+
border: 0.1rem solid white;
136
+
137
+
&:checked {
138
+
--checkmark: url("../../assets/check.svg");
139
+
background: var(--checkmark) center/2rem padding-box no-repeat
140
+
rgb(0, 130, 130);
141
+
}
142
+
}
143
+
}
118
144
</style>
119
145
120
146
<!-- page styles -->
121
147
<style>
122
-
@property --bg {
123
-
syntax: "<color>";
124
-
inherits: true;
148
+
:root {
149
+
--dark-bg: #27232c;
150
+
--light-bg: #ffffff;
151
+
152
+
--dark-text: #ffffff;
153
+
--light-text: #000000;
125
154
}
126
155
127
156
/* set colours based on system colour scheme */
128
157
:root:has([data-colour-scheme-nojs]) {
129
-
--bg: light-dark(white, black);
130
-
--text: light-dark(black, white);
158
+
--bg: light-dark(var(--light-bg), var(--dark-bg));
159
+
--text: light-dark(var(--light-text), var(--dark-text));
131
160
}
132
161
133
162
:root:not(:has([data-nojs])) {
134
163
--bg: gray;
135
164
136
165
&:has([data-mode="light"]) {
137
-
--bg: white;
138
-
--text: black;
166
+
--bg: var(--light-bg);
167
+
--text: var(--light-text);
139
168
}
140
169
141
170
&:has([data-mode="dark"]) {
142
-
--bg: black;
143
-
--text: white;
171
+
--bg: var(--dark-bg);
172
+
--text: var(--dark-text);
144
173
}
145
174
}
146
175