this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Add visible checkboxes to /blog/[id].astro

+52 -9
+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
··· 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