+55 -840

web/public/css/style.css

reviewed

··· 29 29 --text-4xl--line-height: calc(2.5 / 2.25); 30 30 --text-5xl: 3rem; 31 31 --text-5xl--line-height: 1; 32 32 + --text-6xl: 3.75rem; 33 33 + --text-6xl--line-height: 1; 32 34 --text-9xl: 8rem; 33 35 --text-9xl--line-height: 1; 34 36 --font-weight-semibold: 600; ··· 189 191 } 190 192 } 191 193 @layer utilities { 192 192 - .menu { 193 193 - @layer daisyui.component { 194 194 - display: flex; 195 195 - width: fit-content; 196 196 - flex-direction: column; 197 197 - flex-wrap: wrap; 198 198 - padding: calc(0.25rem * 2); 199 199 - --menu-active-fg: var(--color-neutral-content); 200 200 - --menu-active-bg: var(--color-neutral); 201 201 - font-size: 0.875rem; 202 202 - :where(li ul) { 203 203 - position: relative; 204 204 - margin-inline-start: calc(0.25rem * 4); 205 205 - padding-inline-start: calc(0.25rem * 2); 206 206 - white-space: nowrap; 207 207 - &:before { 208 208 - position: absolute; 209 209 - inset-inline-start: calc(0.25rem * 0); 210 210 - top: calc(0.25rem * 3); 211 211 - bottom: calc(0.25rem * 3); 212 212 - background-color: var(--color-base-content); 213 213 - opacity: 10%; 214 214 - width: var(--border); 215 215 - content: ""; 216 216 - } 217 217 - } 218 218 - :where(li > .menu-dropdown:not(.menu-dropdown-show)) { 219 219 - display: none; 220 220 - } 221 221 - :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) { 222 222 - display: grid; 223 223 - grid-auto-flow: column; 224 224 - align-content: flex-start; 225 225 - align-items: center; 226 226 - gap: calc(0.25rem * 2); 227 227 - border-radius: var(--radius-field); 228 228 - padding-inline: calc(0.25rem * 3); 229 229 - padding-block: calc(0.25rem * 1.5); 230 230 - text-align: start; 231 231 - transition-property: color, background-color, box-shadow; 232 232 - transition-duration: 0.2s; 233 233 - transition-timing-function: cubic-bezier(0, 0, 0.2, 1); 234 234 - grid-auto-columns: minmax(auto, max-content) auto max-content; 235 235 - text-wrap: balance; 236 236 - user-select: none; 237 237 - } 238 238 - :where(li > details > summary) { 239 239 - --tw-outline-style: none; 240 240 - outline-style: none; 241 241 - @media (forced-colors: active) { 242 242 - outline: 2px solid transparent; 243 243 - outline-offset: 2px; 244 244 - } 245 245 - &::-webkit-details-marker { 246 246 - display: none; 247 247 - } 248 248 - } 249 249 - :where(li > details > summary), :where(li > .menu-dropdown-toggle) { 250 250 - &:after { 251 251 - justify-self: flex-end; 252 252 - display: block; 253 253 - height: 0.375rem; 254 254 - width: 0.375rem; 255 255 - rotate: -135deg; 256 256 - translate: 0 -1px; 257 257 - transition-property: rotate, translate; 258 258 - transition-duration: 0.2s; 259 259 - content: ""; 260 260 - transform-origin: 50% 50%; 261 261 - box-shadow: 2px 2px inset; 262 262 - pointer-events: none; 263 263 - } 264 264 - } 265 265 - details { 266 266 - overflow: hidden; 267 267 - interpolate-size: allow-keywords; 268 268 - } 269 269 - details::details-content { 270 270 - block-size: 0; 271 271 - @media (prefers-reduced-motion: no-preference) { 272 272 - transition-behavior: allow-discrete; 273 273 - transition-property: block-size, content-visibility; 274 274 - transition-duration: 0.2s; 275 275 - transition-timing-function: cubic-bezier(0, 0, 0.2, 1); 276 276 - } 277 277 - } 278 278 - details[open]::details-content { 279 279 - block-size: auto; 280 280 - } 281 281 - :where(li > details[open] > summary):after, :where(li > .menu-dropdown-toggle.menu-dropdown-show):after { 282 282 - rotate: 45deg; 283 283 - translate: 0 1px; 284 284 - } 285 285 - :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn) { 286 286 - &.menu-focus, &:focus-visible { 287 287 - cursor: pointer; 288 288 - background-color: var(--color-base-content); 289 289 - @supports (color: color-mix(in lab, red, red)) { 290 290 - background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); 291 291 - } 292 292 - color: var(--color-base-content); 293 293 - --tw-outline-style: none; 294 294 - outline-style: none; 295 295 - @media (forced-colors: active) { 296 296 - outline: 2px solid transparent; 297 297 - outline-offset: 2px; 298 298 - } 299 299 - } 300 300 - } 301 301 - :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled) > details > summary:not(.menu-title):not(.menu-active, :active, .btn):hover ) { 302 302 - cursor: pointer; 303 303 - background-color: var(--color-base-content); 304 304 - @supports (color: color-mix(in lab, red, red)) { 305 305 - background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); 306 306 - } 307 307 - --tw-outline-style: none; 308 308 - outline-style: none; 309 309 - @media (forced-colors: active) { 310 310 - outline: 2px solid transparent; 311 311 - outline-offset: 2px; 312 312 - } 313 313 - box-shadow: 0 1px oklch(0% 0 0 / 0.01) inset, 0 -1px oklch(100% 0 0 / 0.01) inset; 314 314 - } 315 315 - :where(li:empty) { 316 316 - background-color: var(--color-base-content); 317 317 - opacity: 10%; 318 318 - margin: 0.5rem 1rem; 319 319 - height: 1px; 320 320 - } 321 321 - :where(li) { 322 322 - position: relative; 323 323 - display: flex; 324 324 - flex-shrink: 0; 325 325 - flex-direction: column; 326 326 - flex-wrap: wrap; 327 327 - align-items: stretch; 328 328 - .badge { 329 329 - justify-self: flex-end; 330 330 - } 331 331 - & > *:not(ul, .menu-title, details, .btn):active, & > *:not(ul, .menu-title, details, .btn).menu-active, & > details > summary:active { 332 332 - --tw-outline-style: none; 333 333 - outline-style: none; 334 334 - @media (forced-colors: active) { 335 335 - outline: 2px solid transparent; 336 336 - outline-offset: 2px; 337 337 - } 338 338 - color: var(--menu-active-fg); 339 339 - background-color: var(--menu-active-bg); 340 340 - background-size: auto, calc(var(--noise) * 100%); 341 341 - background-image: none, var(--fx-noise); 342 342 - &:not(&:active) { 343 343 - box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg); 344 344 - } 345 345 - } 346 346 - &.menu-disabled { 347 347 - pointer-events: none; 348 348 - color: var(--color-base-content); 349 349 - @supports (color: color-mix(in lab, red, red)) { 350 350 - color: color-mix(in oklab, var(--color-base-content) 20%, transparent); 351 351 - } 352 352 - } 353 353 - } 354 354 - .dropdown:focus-within { 355 355 - .menu-dropdown-toggle:after { 356 356 - rotate: 45deg; 357 357 - translate: 0 1px; 358 358 - } 359 359 - } 360 360 - .dropdown-content { 361 361 - margin-top: calc(0.25rem * 2); 362 362 - padding: calc(0.25rem * 2); 363 363 - &:before { 364 364 - display: none; 365 365 - } 366 366 - } 367 367 - } 368 368 - } 369 369 - .dropdown { 370 370 - @layer daisyui.component { 371 371 - position: relative; 372 372 - display: inline-block; 373 373 - position-area: var(--anchor-v, bottom) var(--anchor-h, span-right); 374 374 - & > *:not(:has(~ [class*="dropdown-content"])):focus { 375 375 - --tw-outline-style: none; 376 376 - outline-style: none; 377 377 - @media (forced-colors: active) { 378 378 - outline: 2px solid transparent; 379 379 - outline-offset: 2px; 380 380 - } 381 381 - } 382 382 - .dropdown-content { 383 383 - position: absolute; 384 384 - } 385 385 - &.dropdown-close .dropdown-content, &:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) .dropdown-content, &.dropdown-hover:not(:hover) [tabindex]:first-child:focus:not(:focus-visible) ~ .dropdown-content { 386 386 - display: none; 387 387 - transform-origin: top; 388 388 - opacity: 0%; 389 389 - scale: 95%; 390 390 - } 391 391 - &[popover], .dropdown-content { 392 392 - z-index: 999; 393 393 - @media (prefers-reduced-motion: no-preference) { 394 394 - animation: dropdown 0.2s; 395 395 - transition-property: opacity, scale, display; 396 396 - transition-behavior: allow-discrete; 397 397 - transition-duration: 0.2s; 398 398 - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 399 399 - } 400 400 - } 401 401 - @starting-style { 402 402 - &[popover], .dropdown-content { 403 403 - scale: 95%; 404 404 - opacity: 0; 405 405 - } 406 406 - } 407 407 - &:not(.dropdown-close) { 408 408 - &.dropdown-open, &:not(.dropdown-hover):focus, &:focus-within { 409 409 - > [tabindex]:first-child { 410 410 - pointer-events: none; 411 411 - } 412 412 - .dropdown-content { 413 413 - opacity: 100%; 414 414 - scale: 100%; 415 415 - } 416 416 - } 417 417 - &.dropdown-hover:hover { 418 418 - .dropdown-content { 419 419 - opacity: 100%; 420 420 - scale: 100%; 421 421 - } 422 422 - } 423 423 - } 424 424 - &:is(details) { 425 425 - summary { 426 426 - &::-webkit-details-marker { 427 427 - display: none; 428 428 - } 429 429 - } 430 430 - } 431 431 - &:where([popover]) { 432 432 - background: #0000; 433 433 - } 434 434 - &[popover] { 435 435 - position: fixed; 436 436 - color: inherit; 437 437 - @supports not (position-area: bottom) { 438 438 - margin: auto; 439 439 - &.dropdown-close, &.dropdown-open:not(:popover-open) { 440 440 - display: none; 441 441 - transform-origin: top; 442 442 - opacity: 0%; 443 443 - scale: 95%; 444 444 - } 445 445 - &::backdrop { 446 446 - background-color: color-mix(in oklab, #000 30%, #0000); 447 447 - } 448 448 - } 449 449 - &.dropdown-close, &:not(.dropdown-open, :popover-open) { 450 450 - display: none; 451 451 - transform-origin: top; 452 452 - opacity: 0%; 453 453 - scale: 95%; 454 454 - } 455 455 - } 456 456 - } 457 457 - } 458 194 .btn { 459 195 :where(&) { 460 196 @layer daisyui.component { ··· 704 440 } 705 441 > :not(.list-col-wrap) { 706 442 grid-row-start: 1; 707 707 - } 708 708 - } 709 709 - } 710 710 - } 711 711 - .toast { 712 712 - @layer daisyui.component { 713 713 - position: fixed; 714 714 - inset-inline-start: auto; 715 715 - inset-inline-end: calc(0.25rem * 4); 716 716 - top: auto; 717 717 - bottom: calc(0.25rem * 4); 718 718 - display: flex; 719 719 - flex-direction: column; 720 720 - gap: calc(0.25rem * 2); 721 721 - background-color: transparent; 722 722 - translate: var(--toast-x, 0) var(--toast-y, 0); 723 723 - width: max-content; 724 724 - max-width: calc(100vw - 2rem); 725 725 - & > * { 726 726 - @media (prefers-reduced-motion: no-preference) { 727 727 - animation: toast 0.25s ease-out; 728 443 } 729 444 } 730 445 } ··· 1122 837 } 1123 838 } 1124 839 } 1125 1125 - .select { 1126 1126 - @layer daisyui.component { 1127 1127 - border: var(--border) solid #0000; 1128 1128 - position: relative; 1129 1129 - display: inline-flex; 1130 1130 - flex-shrink: 1; 1131 1131 - appearance: none; 1132 1132 - align-items: center; 1133 1133 - gap: calc(0.25rem * 1.5); 1134 1134 - background-color: var(--color-base-100); 1135 1135 - padding-inline-start: calc(0.25rem * 3); 1136 1136 - padding-inline-end: calc(0.25rem * 7); 1137 1137 - vertical-align: middle; 1138 1138 - width: clamp(3rem, 20rem, 100%); 1139 1139 - height: var(--size); 1140 1140 - font-size: 0.875rem; 1141 1141 - touch-action: manipulation; 1142 1142 - border-start-start-radius: var(--join-ss, var(--radius-field)); 1143 1143 - border-start-end-radius: var(--join-se, var(--radius-field)); 1144 1144 - border-end-start-radius: var(--join-es, var(--radius-field)); 1145 1145 - border-end-end-radius: var(--join-ee, var(--radius-field)); 1146 1146 - background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%); 1147 1147 - background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%); 1148 1148 - background-size: 4px 4px, 4px 4px; 1149 1149 - background-repeat: no-repeat; 1150 1150 - white-space: nowrap; 1151 1151 - overflow: hidden; 1152 1152 - text-overflow: ellipsis; 1153 1153 - box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; 1154 1154 - @supports (color: color-mix(in lab, red, red)) { 1155 1155 - box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; 1156 1156 - } 1157 1157 - border-color: var(--input-color); 1158 1158 - --input-color: var(--color-base-content); 1159 1159 - @supports (color: color-mix(in lab, red, red)) { 1160 1160 - --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); 1161 1161 - } 1162 1162 - --size: calc(var(--size-field, 0.25rem) * 10); 1163 1163 - [dir="rtl"] & { 1164 1164 - background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%); 1165 1165 - &::picker(select), select::picker(select) { 1166 1166 - translate: 0.5rem 0; 1167 1167 - } 1168 1168 - } 1169 1169 - &[multiple] { 1170 1170 - height: auto; 1171 1171 - overflow: auto; 1172 1172 - padding-block: calc(0.25rem * 3); 1173 1173 - padding-inline-end: calc(0.25rem * 3); 1174 1174 - background-image: none; 1175 1175 - } 1176 1176 - select { 1177 1177 - margin-inline-start: calc(0.25rem * -3); 1178 1178 - margin-inline-end: calc(0.25rem * -7); 1179 1179 - width: calc(100% + 2.75rem); 1180 1180 - appearance: none; 1181 1181 - padding-inline-start: calc(0.25rem * 3); 1182 1182 - padding-inline-end: calc(0.25rem * 7); 1183 1183 - height: calc(100% - calc(var(--border) * 2)); 1184 1184 - align-items: center; 1185 1185 - background: inherit; 1186 1186 - border-radius: inherit; 1187 1187 - border-style: none; 1188 1188 - &:focus, &:focus-within { 1189 1189 - --tw-outline-style: none; 1190 1190 - outline-style: none; 1191 1191 - @media (forced-colors: active) { 1192 1192 - outline: 2px solid transparent; 1193 1193 - outline-offset: 2px; 1194 1194 - } 1195 1195 - } 1196 1196 - &:not(:last-child) { 1197 1197 - margin-inline-end: calc(0.25rem * -5.5); 1198 1198 - background-image: none; 1199 1199 - } 1200 1200 - } 1201 1201 - &:focus, &:focus-within { 1202 1202 - --input-color: var(--color-base-content); 1203 1203 - box-shadow: 0 1px var(--input-color); 1204 1204 - @supports (color: color-mix(in lab, red, red)) { 1205 1205 - box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); 1206 1206 - } 1207 1207 - outline: 2px solid var(--input-color); 1208 1208 - outline-offset: 2px; 1209 1209 - isolation: isolate; 1210 1210 - z-index: 1; 1211 1211 - } 1212 1212 - &:has(> select[disabled]), &:is(:disabled, [disabled]), fieldset:disabled & { 1213 1213 - cursor: not-allowed; 1214 1214 - border-color: var(--color-base-200); 1215 1215 - background-color: var(--color-base-200); 1216 1216 - color: var(--color-base-content); 1217 1217 - @supports (color: color-mix(in lab, red, red)) { 1218 1218 - color: color-mix(in oklab, var(--color-base-content) 40%, transparent); 1219 1219 - } 1220 1220 - &::placeholder { 1221 1221 - color: var(--color-base-content); 1222 1222 - @supports (color: color-mix(in lab, red, red)) { 1223 1223 - color: color-mix(in oklab, var(--color-base-content) 20%, transparent); 1224 1224 - } 1225 1225 - } 1226 1226 - } 1227 1227 - &:has(> select[disabled]) > select[disabled] { 1228 1228 - cursor: not-allowed; 1229 1229 - } 1230 1230 - &, & select { 1231 1231 - @supports (appearance: base-select) { 1232 1232 - appearance: base-select; 1233 1233 - } 1234 1234 - @supports (appearance: base-select) { 1235 1235 - &::picker(select) { 1236 1236 - appearance: base-select; 1237 1237 - } 1238 1238 - } 1239 1239 - &::picker(select) { 1240 1240 - color: inherit; 1241 1241 - max-height: min(24rem, 70dvh); 1242 1242 - margin-inline: 0.5rem; 1243 1243 - translate: -0.5rem 0; 1244 1244 - border: var(--border) solid var(--color-base-200); 1245 1245 - margin-block: calc(0.25rem * 2); 1246 1246 - border-radius: var(--radius-box); 1247 1247 - padding: calc(0.25rem * 2); 1248 1248 - background-color: inherit; 1249 1249 - box-shadow: 0 2px calc(var(--depth) * 3px) -2px oklch(0% 0 0/0.2); 1250 1250 - box-shadow: 0 20px 25px -5px rgb(0 0 0 / calc(var(--depth) * 0.1)), 0 8px 10px -6px rgb(0 0 0 / calc(var(--depth) * 0.1)); 1251 1251 - } 1252 1252 - &::picker-icon { 1253 1253 - display: none; 1254 1254 - } 1255 1255 - optgroup { 1256 1256 - padding-top: 0.5em; 1257 1257 - option { 1258 1258 - &:nth-child(1) { 1259 1259 - margin-top: 0.5em; 1260 1260 - } 1261 1261 - } 1262 1262 - } 1263 1263 - option { 1264 1264 - border-radius: var(--radius-field); 1265 1265 - padding-inline: calc(0.25rem * 3); 1266 1266 - padding-block: calc(0.25rem * 1.5); 1267 1267 - transition-property: color, background-color; 1268 1268 - transition-duration: 0.2s; 1269 1269 - transition-timing-function: cubic-bezier(0, 0, 0.2, 1); 1270 1270 - white-space: normal; 1271 1271 - &:not(:disabled) { 1272 1272 - &:hover, &:focus-visible { 1273 1273 - cursor: pointer; 1274 1274 - background-color: var(--color-base-content); 1275 1275 - @supports (color: color-mix(in lab, red, red)) { 1276 1276 - background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); 1277 1277 - } 1278 1278 - --tw-outline-style: none; 1279 1279 - outline-style: none; 1280 1280 - @media (forced-colors: active) { 1281 1281 - outline: 2px solid transparent; 1282 1282 - outline-offset: 2px; 1283 1283 - } 1284 1284 - } 1285 1285 - &:active { 1286 1286 - background-color: var(--color-neutral); 1287 1287 - color: var(--color-neutral-content); 1288 1288 - box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--color-neutral); 1289 1289 - } 1290 1290 - } 1291 1291 - } 1292 1292 - } 1293 1293 - } 1294 1294 - } 1295 1295 - .checkbox { 1296 1296 - @layer daisyui.component { 1297 1297 - border: var(--border) solid var(--input-color, var(--color-base-content)); 1298 1298 - @supports (color: color-mix(in lab, red, red)) { 1299 1299 - border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000)); 1300 1300 - } 1301 1301 - position: relative; 1302 1302 - display: inline-block; 1303 1303 - flex-shrink: 0; 1304 1304 - cursor: pointer; 1305 1305 - appearance: none; 1306 1306 - border-radius: var(--radius-selector); 1307 1307 - padding: calc(0.25rem * 1); 1308 1308 - vertical-align: middle; 1309 1309 - color: var(--color-base-content); 1310 1310 - box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 0 #0000 inset, 0 0 #0000; 1311 1311 - transition: background-color 0.2s, box-shadow 0.2s; 1312 1312 - --size: calc(var(--size-selector, 0.25rem) * 6); 1313 1313 - width: var(--size); 1314 1314 - height: var(--size); 1315 1315 - background-size: auto, calc(var(--noise) * 100%); 1316 1316 - background-image: none, var(--fx-noise); 1317 1317 - &:before { 1318 1318 - --tw-content: ""; 1319 1319 - content: var(--tw-content); 1320 1320 - display: block; 1321 1321 - width: 100%; 1322 1322 - height: 100%; 1323 1323 - rotate: 45deg; 1324 1324 - background-color: currentcolor; 1325 1325 - opacity: 0%; 1326 1326 - transition: clip-path 0.3s, opacity 0.1s, rotate 0.3s, translate 0.3s; 1327 1327 - transition-delay: 0.1s; 1328 1328 - clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%); 1329 1329 - box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; 1330 1330 - font-size: 1rem; 1331 1331 - line-height: 0.75; 1332 1332 - } 1333 1333 - &:focus-visible { 1334 1334 - outline: 2px solid var(--input-color, currentColor); 1335 1335 - outline-offset: 2px; 1336 1336 - } 1337 1337 - &:checked, &[aria-checked="true"] { 1338 1338 - background-color: var(--input-color, #0000); 1339 1339 - box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)); 1340 1340 - &:before { 1341 1341 - clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%); 1342 1342 - opacity: 100%; 1343 1343 - } 1344 1344 - @media (forced-colors: active) { 1345 1345 - &:before { 1346 1346 - rotate: 0deg; 1347 1347 - background-color: transparent; 1348 1348 - --tw-content: "✔︎"; 1349 1349 - clip-path: none; 1350 1350 - } 1351 1351 - } 1352 1352 - @media print { 1353 1353 - &:before { 1354 1354 - rotate: 0deg; 1355 1355 - background-color: transparent; 1356 1356 - --tw-content: "✔︎"; 1357 1357 - clip-path: none; 1358 1358 - } 1359 1359 - } 1360 1360 - } 1361 1361 - &:indeterminate { 1362 1362 - background-color: var( --input-color, var(--color-base-content) ); 1363 1363 - @supports (color: color-mix(in lab, red, red)) { 1364 1364 - background-color: var( --input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000) ); 1365 1365 - } 1366 1366 - &:before { 1367 1367 - rotate: 0deg; 1368 1368 - opacity: 100%; 1369 1369 - translate: 0 -35%; 1370 1370 - clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%); 1371 1371 - } 1372 1372 - } 1373 1373 - } 1374 1374 - &:disabled { 1375 1375 - @layer daisyui.modifier { 1376 1376 - cursor: not-allowed; 1377 1377 - opacity: 20%; 1378 1378 - } 1379 1379 - } 1380 1380 - } 1381 1381 - .radio { 1382 1382 - @layer daisyui.component { 1383 1383 - position: relative; 1384 1384 - display: inline-block; 1385 1385 - flex-shrink: 0; 1386 1386 - cursor: pointer; 1387 1387 - appearance: none; 1388 1388 - border-radius: calc(infinity * 1px); 1389 1389 - padding: calc(0.25rem * 1); 1390 1390 - vertical-align: middle; 1391 1391 - border: var(--border) solid var(--input-color, currentColor); 1392 1392 - @supports (color: color-mix(in lab, red, red)) { 1393 1393 - border: var(--border) solid var(--input-color, color-mix(in srgb, currentColor 20%, #0000)); 1394 1394 - } 1395 1395 - box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset; 1396 1396 - --size: calc(var(--size-selector, 0.25rem) * 6); 1397 1397 - width: var(--size); 1398 1398 - height: var(--size); 1399 1399 - color: var(--input-color, currentColor); 1400 1400 - &:before { 1401 1401 - display: block; 1402 1402 - width: 100%; 1403 1403 - height: 100%; 1404 1404 - border-radius: calc(infinity * 1px); 1405 1405 - --tw-content: ""; 1406 1406 - content: var(--tw-content); 1407 1407 - background-size: auto, calc(var(--noise) * 100%); 1408 1408 - background-image: none, var(--fx-noise); 1409 1409 - } 1410 1410 - &:focus-visible { 1411 1411 - outline: 2px solid currentColor; 1412 1412 - } 1413 1413 - &:checked, &[aria-checked="true"] { 1414 1414 - border-color: currentcolor; 1415 1415 - background-color: var(--color-base-100); 1416 1416 - @media (prefers-reduced-motion: no-preference) { 1417 1417 - animation: radio 0.2s ease-out; 1418 1418 - } 1419 1419 - &:before { 1420 1420 - background-color: currentcolor; 1421 1421 - box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)); 1422 1422 - } 1423 1423 - @media (forced-colors: active) { 1424 1424 - &:before { 1425 1425 - outline-style: var(--tw-outline-style); 1426 1426 - outline-width: 1px; 1427 1427 - outline-offset: calc(1px * -1); 1428 1428 - } 1429 1429 - } 1430 1430 - @media print { 1431 1431 - &:before { 1432 1432 - outline: 0.25rem solid; 1433 1433 - outline-offset: -1rem; 1434 1434 - } 1435 1435 - } 1436 1436 - } 1437 1437 - } 1438 1438 - &:disabled { 1439 1439 - @layer daisyui.modifier { 1440 1440 - cursor: not-allowed; 1441 1441 - opacity: 20%; 1442 1442 - } 1443 1443 - } 1444 1444 - } 1445 1445 - .rating { 1446 1446 - @layer daisyui.component { 1447 1447 - position: relative; 1448 1448 - display: inline-flex; 1449 1449 - vertical-align: middle; 1450 1450 - & input { 1451 1451 - border: none; 1452 1452 - appearance: none; 1453 1453 - } 1454 1454 - :where(*) { 1455 1455 - height: calc(0.25rem * 6); 1456 1456 - width: calc(0.25rem * 6); 1457 1457 - border-radius: 0; 1458 1458 - background-color: var(--color-base-content); 1459 1459 - opacity: 20%; 1460 1460 - @media (prefers-reduced-motion: no-preference) { 1461 1461 - animation: rating 0.25s ease-out; 1462 1462 - } 1463 1463 - &:is(input) { 1464 1464 - cursor: pointer; 1465 1465 - } 1466 1466 - } 1467 1467 - & .rating-hidden { 1468 1468 - width: calc(0.25rem * 2); 1469 1469 - background-color: transparent; 1470 1470 - } 1471 1471 - input[type="radio"]:checked { 1472 1472 - background-image: none; 1473 1473 - } 1474 1474 - * { 1475 1475 - &:checked, &[aria-checked="true"], &[aria-current="true"], &:has(~ *:checked, ~ *[aria-checked="true"], ~ *[aria-current="true"]) { 1476 1476 - opacity: 100%; 1477 1477 - } 1478 1478 - &:focus-visible { 1479 1479 - scale: 1.1; 1480 1480 - @media (prefers-reduced-motion: no-preference) { 1481 1481 - transition: scale 0.2s ease-out; 1482 1482 - } 1483 1483 - } 1484 1484 - } 1485 1485 - & *:active:focus { 1486 1486 - animation: none; 1487 1487 - scale: 1.1; 1488 1488 - } 1489 1489 - } 1490 1490 - @layer daisyui.modifier { 1491 1491 - &.rating-xs :where(*:not(.rating-hidden)) { 1492 1492 - width: calc(0.25rem * 4); 1493 1493 - height: calc(0.25rem * 4); 1494 1494 - } 1495 1495 - &.rating-sm :where(*:not(.rating-hidden)) { 1496 1496 - width: calc(0.25rem * 5); 1497 1497 - height: calc(0.25rem * 5); 1498 1498 - } 1499 1499 - &.rating-md :where(*:not(.rating-hidden)) { 1500 1500 - width: calc(0.25rem * 6); 1501 1501 - height: calc(0.25rem * 6); 1502 1502 - } 1503 1503 - &.rating-lg :where(*:not(.rating-hidden)) { 1504 1504 - width: calc(0.25rem * 7); 1505 1505 - height: calc(0.25rem * 7); 1506 1506 - } 1507 1507 - &.rating-xl :where(*:not(.rating-hidden)) { 1508 1508 - width: calc(0.25rem * 8); 1509 1509 - height: calc(0.25rem * 8); 1510 1510 - } 1511 1511 - } 1512 1512 - } 1513 840 .navbar { 1514 841 @layer daisyui.component { 1515 842 display: flex; ··· 1641 968 justify-content: center; 1642 969 gap: calc(0.25rem * 4); 1643 970 padding: calc(0.25rem * 4); 1644 1644 - } 1645 1645 - } 1646 1646 - .textarea { 1647 1647 - @layer daisyui.component { 1648 1648 - border: var(--border) solid #0000; 1649 1649 - min-height: calc(0.25rem * 20); 1650 1650 - flex-shrink: 1; 1651 1651 - appearance: none; 1652 1652 - border-radius: var(--radius-field); 1653 1653 - background-color: var(--color-base-100); 1654 1654 - padding-block: calc(0.25rem * 2); 1655 1655 - vertical-align: middle; 1656 1656 - width: clamp(3rem, 20rem, 100%); 1657 1657 - padding-inline-start: 0.75rem; 1658 1658 - padding-inline-end: 0.75rem; 1659 1659 - font-size: max(var(--font-size, 0.875rem), 0.875rem); 1660 1660 - touch-action: manipulation; 1661 1661 - border-color: var(--input-color); 1662 1662 - box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; 1663 1663 - @supports (color: color-mix(in lab, red, red)) { 1664 1664 - box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; 1665 1665 - } 1666 1666 - --input-color: var(--color-base-content); 1667 1667 - @supports (color: color-mix(in lab, red, red)) { 1668 1668 - --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); 1669 1669 - } 1670 1670 - textarea { 1671 1671 - appearance: none; 1672 1672 - background-color: transparent; 1673 1673 - border: none; 1674 1674 - &:focus, &:focus-within { 1675 1675 - --tw-outline-style: none; 1676 1676 - outline-style: none; 1677 1677 - @media (forced-colors: active) { 1678 1678 - outline: 2px solid transparent; 1679 1679 - outline-offset: 2px; 1680 1680 - } 1681 1681 - } 1682 1682 - } 1683 1683 - &:focus, &:focus-within { 1684 1684 - --input-color: var(--color-base-content); 1685 1685 - box-shadow: 0 1px var(--input-color); 1686 1686 - @supports (color: color-mix(in lab, red, red)) { 1687 1687 - box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); 1688 1688 - } 1689 1689 - outline: 2px solid var(--input-color); 1690 1690 - outline-offset: 2px; 1691 1691 - isolation: isolate; 1692 1692 - } 1693 1693 - @media (pointer: coarse) { 1694 1694 - @supports (-webkit-touch-callout: none) { 1695 1695 - &:focus, &:focus-within { 1696 1696 - --font-size: 1rem; 1697 1697 - } 1698 1698 - } 1699 1699 - } 1700 1700 - &:has(> textarea[disabled]), &:is(:disabled, [disabled]) { 1701 1701 - cursor: not-allowed; 1702 1702 - border-color: var(--color-base-200); 1703 1703 - background-color: var(--color-base-200); 1704 1704 - color: var(--color-base-content); 1705 1705 - @supports (color: color-mix(in lab, red, red)) { 1706 1706 - color: color-mix(in oklab, var(--color-base-content) 40%, transparent); 1707 1707 - } 1708 1708 - &::placeholder { 1709 1709 - color: var(--color-base-content); 1710 1710 - @supports (color: color-mix(in lab, red, red)) { 1711 1711 - color: color-mix(in oklab, var(--color-base-content) 20%, transparent); 1712 1712 - } 1713 1713 - } 1714 1714 - box-shadow: none; 1715 1715 - } 1716 1716 - &:has(> textarea[disabled]) > textarea[disabled] { 1717 1717 - cursor: not-allowed; 1718 1718 - } 1719 971 } 1720 972 } 1721 973 .hero { ··· 2563 1815 font-weight: 600; 2564 1816 } 2565 1817 } 1818 1818 + .mb-2 { 1819 1819 + margin-bottom: calc(var(--spacing) * 2); 1820 1820 + } 2566 1821 .mb-4 { 2567 1822 margin-bottom: calc(var(--spacing) * 4); 2568 1823 } ··· 2901 2156 .max-w-sm { 2902 2157 max-width: var(--container-sm); 2903 2158 } 2904 2904 - .min-w-32 { 2905 2905 - min-width: calc(var(--spacing) * 32); 2906 2906 - } 2907 2907 - .min-w-48 { 2908 2908 - min-width: calc(var(--spacing) * 48); 2909 2909 - } 2910 2910 - .flex-shrink { 2911 2911 - flex-shrink: 1; 2912 2912 - } 2913 2159 .shrink-0 { 2914 2160 flex-shrink: 0; 2915 2161 } 2916 2916 - .flex-grow { 2917 2917 - flex-grow: 1; 2918 2918 - } 2919 2919 - .border-collapse { 2920 2920 - border-collapse: collapse; 2921 2921 - } 2922 2922 - .transform { 2923 2923 - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); 2924 2924 - } 2925 2925 - .skeleton { 2926 2926 - @layer daisyui.component { 2927 2927 - border-radius: var(--radius-box); 2928 2928 - background-color: var(--color-base-300); 2929 2929 - @media (prefers-reduced-motion: reduce) { 2930 2930 - transition-duration: 15s; 2931 2931 - } 2932 2932 - will-change: background-position; 2933 2933 - background-image: linear-gradient( 105deg, #0000 0% 40%, var(--color-base-100) 50%, #0000 60% 100% ); 2934 2934 - background-size: 200% auto; 2935 2935 - background-position-x: -50%; 2936 2936 - @media (prefers-reduced-motion: no-preference) { 2937 2937 - animation: skeleton 1.8s ease-in-out infinite; 2938 2938 - } 2939 2939 - } 2940 2940 - } 2941 2162 .link { 2942 2163 @layer daisyui.component { 2943 2164 cursor: pointer; ··· 2956 2177 } 2957 2178 } 2958 2179 } 2959 2959 - .resize { 2960 2960 - resize: both; 2180 2180 + .list-inside { 2181 2181 + list-style-position: inside; 2182 2182 + } 2183 2183 + .list-disc { 2184 2184 + list-style-type: disc; 2961 2185 } 2962 2186 .grid-cols-2 { 2963 2187 grid-template-columns: repeat(2, minmax(0, 1fr)); ··· 2968 2192 .flex-wrap { 2969 2193 flex-wrap: wrap; 2970 2194 } 2195 2195 + .items-center { 2196 2196 + align-items: center; 2197 2197 + } 2198 2198 + .justify-center { 2199 2199 + justify-content: center; 2200 2200 + } 2201 2201 + .justify-end { 2202 2202 + justify-content: flex-end; 2203 2203 + } 2971 2204 .justify-start { 2972 2205 justify-content: flex-start; 2973 2206 } ··· 2976 2209 } 2977 2210 .gap-4 { 2978 2211 gap: calc(var(--spacing) * 4); 2212 2212 + } 2213 2213 + .space-y-2 { 2214 2214 + :where(& > :not(:last-child)) { 2215 2215 + --tw-space-y-reverse: 0; 2216 2216 + margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); 2217 2217 + margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); 2218 2218 + } 2979 2219 } 2980 2220 .overflow-x-auto { 2981 2221 overflow-x: auto; ··· 3018 2258 .bg-base-100 { 3019 2259 background-color: var(--color-base-100); 3020 2260 } 3021 3021 - .mask-repeat { 3022 3022 - mask-repeat: repeat; 3023 3023 - } 3024 2261 .stroke-current { 3025 2262 stroke: currentcolor; 3026 2263 } ··· 3061 2298 .text-5xl { 3062 2299 font-size: var(--text-5xl); 3063 2300 line-height: var(--tw-leading, var(--text-5xl--line-height)); 2301 2301 + } 2302 2302 + .text-6xl { 2303 2303 + font-size: var(--text-6xl); 2304 2304 + line-height: var(--tw-leading, var(--text-6xl--line-height)); 3064 2305 } 3065 2306 .text-9xl { 3066 2307 font-size: var(--text-9xl); ··· 3090 2331 --tw-font-weight: var(--font-weight-semibold); 3091 2332 font-weight: var(--font-weight-semibold); 3092 2333 } 3093 3093 - .text-wrap { 3094 3094 - text-wrap: wrap; 3095 3095 - } 3096 2334 .alert-error { 3097 2335 @layer daisyui.modifier { 3098 2336 color: var(--color-error-content); ··· 3130 2368 --tw-ordinal: ordinal; 3131 2369 font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); 3132 2370 } 2371 2371 + .line-through { 2372 2372 + text-decoration-line: line-through; 2373 2373 + } 3133 2374 .prose { 3134 2375 & :where(.btn-link):not(:where([class~="not-prose"], [class~="not-prose"] *)) { 3135 2376 text-decoration-line: none; 3136 2377 } 3137 2378 } 3138 3138 - .underline { 3139 3139 - text-decoration-line: underline; 3140 3140 - } 3141 2379 .opacity-70 { 3142 2380 opacity: 70%; 3143 2381 } ··· 3156 2394 .shadow-xl { 3157 2395 --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); 3158 2396 box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); 3159 3159 - } 3160 3160 - .outline { 3161 3161 - outline-style: var(--tw-outline-style); 3162 3162 - outline-width: 1px; 3163 2397 } 3164 2398 .btn-ghost { 3165 2399 @layer daisyui.modifier { ··· 3188 2422 .filter { 3189 2423 filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); 3190 2424 } 3191 3191 - .transition { 3192 3192 - transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; 3193 3193 - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); 3194 3194 - transition-duration: var(--tw-duration, var(--default-transition-duration)); 3195 3195 - } 3196 2425 .transition-transform { 3197 2426 transition-property: transform, translate, scale, rotate; 3198 2427 transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); 3199 2428 transition-duration: var(--tw-duration, var(--default-transition-duration)); 3200 2429 } 3201 3201 - .ease-in-out { 3202 3202 - --tw-ease: var(--ease-in-out); 3203 3203 - transition-timing-function: var(--ease-in-out); 2430 2430 + .btn-outline { 2431 2431 + @layer daisyui.modifier { 2432 2432 + &:not( .btn-active, :hover, :active:focus, :focus-visible, input:checked:not(.filter .btn), :disabled, [disabled], .btn-disabled ) { 2433 2433 + --btn-shadow: ""; 2434 2434 + --btn-bg: #0000; 2435 2435 + --btn-fg: var(--btn-color); 2436 2436 + --btn-border: var(--btn-color); 2437 2437 + --btn-noise: none; 2438 2438 + } 2439 2439 + @media (hover: none) { 2440 2440 + &:not(.btn-active, :active, :focus-visible, input:checked:not(.filter .btn)):hover { 2441 2441 + --btn-shadow: ""; 2442 2442 + --btn-bg: #0000; 2443 2443 + --btn-fg: var(--btn-color); 2444 2444 + --btn-border: var(--btn-color); 2445 2445 + --btn-noise: none; 2446 2446 + } 2447 2447 + } 2448 2448 + } 3204 2449 } 3205 2450 .btn-soft { 3206 2451 @layer daisyui.modifier { ··· 3632 2877 background-position-x: -115%; 3633 2878 } 3634 2879 } 3635 3635 - @property --tw-rotate-x { 3636 3636 - syntax: "*"; 3637 3637 - inherits: false; 3638 3638 - } 3639 3639 - @property --tw-rotate-y { 3640 3640 - syntax: "*"; 3641 3641 - inherits: false; 3642 3642 - } 3643 3643 - @property --tw-rotate-z { 3644 3644 - syntax: "*"; 3645 3645 - inherits: false; 3646 3646 - } 3647 3647 - @property --tw-skew-x { 3648 3648 - syntax: "*"; 3649 3649 - inherits: false; 3650 3650 - } 3651 3651 - @property --tw-skew-y { 2880 2880 + @property --tw-space-y-reverse { 3652 2881 syntax: "*"; 3653 2882 inherits: false; 2883 2883 + initial-value: 0; 3654 2884 } 3655 2885 @property --tw-border-style { 3656 2886 syntax: "*"; ··· 3746 2976 inherits: false; 3747 2977 initial-value: 0 0 #0000; 3748 2978 } 3749 3749 - @property --tw-outline-style { 3750 3750 - syntax: "*"; 3751 3751 - inherits: false; 3752 3752 - initial-value: solid; 3753 3753 - } 3754 2979 @property --tw-blur { 3755 2980 syntax: "*"; 3756 2981 inherits: false; ··· 3804 3029 syntax: "*"; 3805 3030 inherits: false; 3806 3031 } 3807 3807 - @property --tw-ease { 3808 3808 - syntax: "*"; 3809 3809 - inherits: false; 3810 3810 - } 3811 3032 @property --tw-scale-x { 3812 3033 syntax: "*"; 3813 3034 inherits: false; ··· 3826 3047 @layer properties { 3827 3048 @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { 3828 3049 *, ::before, ::after, ::backdrop { 3829 3829 - --tw-rotate-x: initial; 3830 3830 - --tw-rotate-y: initial; 3831 3831 - --tw-rotate-z: initial; 3832 3832 - --tw-skew-x: initial; 3833 3833 - --tw-skew-y: initial; 3050 3050 + --tw-space-y-reverse: 0; 3834 3051 --tw-border-style: solid; 3835 3052 --tw-font-weight: initial; 3836 3053 --tw-ordinal: initial; ··· 3852 3069 --tw-ring-offset-width: 0px; 3853 3070 --tw-ring-offset-color: #fff; 3854 3071 --tw-ring-offset-shadow: 0 0 #0000; 3855 3855 - --tw-outline-style: solid; 3856 3072 --tw-blur: initial; 3857 3073 --tw-brightness: initial; 3858 3074 --tw-contrast: initial; ··· 3866 3082 --tw-drop-shadow-color: initial; 3867 3083 --tw-drop-shadow-alpha: 100%; 3868 3084 --tw-drop-shadow-size: initial; 3869 3869 - --tw-ease: initial; 3870 3085 --tw-scale-x: 1; 3871 3086 --tw-scale-y: 1; 3872 3087 --tw-scale-z: 1;

+14 -3

web/templates/index.askama.html

reviewed

··· 3 3 {% block content %} 4 4 <div class="card bg-base-100 shadow-xl mb-8"> 5 5 <div class="card-body"> 6 6 - <h2 class="card-title text-3xl font-bold">Welcome to atproto advent! 🎄</h2> 7 7 - <p class="text-base-content">Complete <s>daily</s> challenges throughout <s>December</s> March 27th to learn about the atprotocol.</p> 8 8 - <p>at://advent is an atproto adventure to learn <a href="https://atproto.com/" target="_blank" class="link">atproto</a> in an interactive and hopefully fun way in the style of advent of code.</p> 6 6 + <h2 class="card-title text-3xl font-bold">Welcome to at://advent!</h2> 7 7 + <p class="text-base-content">at://advent is a daily challenge to learn atproto in an interactive way. Similar to the advent of code. There are challenges for you to complete by writing code, but instead of strictly writing code you will be completing the challenges on atproto and learning more about it.</p> 8 8 + <p>For this workshop you will be play testing the challenges for the first six days seeing what works well and what may not work. We want your thoughts and feedback about how it goes.</p> 9 9 + 10 10 + <div class="divider"></div> 11 11 + 12 12 + <h3 class="text-xl font-semibold">Tidbits</h3> 13 13 + <ul class="list-disc list-inside space-y-2 text-base-content"> 14 14 + <li>There will most likely be bugs here and there</li> 15 15 + <li>We are going to start day one together and give about 10-15mins for each part or move on when everyone is done.</li> 16 16 + <li>Part one is usually a bit easier and part two either builds on the previous parts</li> 17 17 + <li>PLEASE feel free to ask questions! We created at://advent to help teach others more about atproto. If you have a question or are stuck on a challenge please raise your hand and ask. Asking questions will also most likely help others!</li> 18 18 + <li>If you finish early also please feel free to offer help to neighbors</li> 19 19 + </ul> 9 20 </div> 10 21 </div> 11 22