my personal website!
meowing.zip
website
1 radio-picker {
2 display: flex;
3 padding: 8px;
4 label {
5 &:has(input:checked) {
6 box-shadow: inset 0px 0px 8px 0px var(--accent);
7 }
8 &:has(input:focus-visible) {
9 outline: 2px dashed var(--accent);
10 }
11 padding: 8px;
12 margin: 5px;
13 cursor: pointer;
14 background: var(--crust);
15 &:hover { background: var(--accent); color: var(--crust); }
16 &:active { background: var(--accent); }
17 font-size: 14px;
18 border-radius: 12px;
19 outline: 2px dashed var(--accent);
20 }
21 input {
22 opacity: 0;
23 position: absolute;
24 pointer-events: none;
25 }
26 }
27 checkbox-picker {
28 label {
29 cursor: pointer;
30 &:hover { background: var(--accent); color: var(--crust); }
31 &:active { background: var(--accent); }
32 font-size: 14px;
33 padding: 5px;
34 margin-left: 4px;
35 border-radius: 12px;
36 display: flex;
37 }
38 }
39 input[type="checkbox"] {
40 /* Add if not using autoprefixer */
41 -webkit-appearance: none;
42 appearance: none;
43 /* For iOS < 15 to remove gradient background */
44 background-color: #fff;
45 /* Not removed via appearance */
46 margin: 0;
47 font: inherit;
48 color: var(--crust);
49 width: 1.15em;
50 height: 1.15em;
51 border: 0.15em solid var(--accent);
52 border-radius: 0.25em;
53 transform: translateY(-0.075em);
54 margin-right: 2px;
55 margin-top: 2px;
56 display: grid;
57 place-content: center;
58 }
59 input[type="checkbox"]::before {
60 content: "";
61 width: 0.65em;
62 height: 0.65em;
63 transform: scale(0);
64 transition: 120ms transform ease-in-out;
65 box-shadow: inset 1em 1em var(--accent);
66 border-radius: 0.25em;
67 transform-origin: bottom left;
68 clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
69 }
70
71 input[type="checkbox"]:checked::before {
72 transform: scale(1);
73 }
74 bg {
75 background: url("./assets/images/pfp.jpg");
76 background-repeat: repeat;
77 animation: 60s linear infinite bg-move;
78 opacity: .15;
79 display: block;
80 position: fixed;
81 z-index: -10000;
82 height: 100% !important;
83 width: 100% !important;
84 inset: 0 !important;
85 }
86 &:has(#disable-bg:checked) {
87 & body {
88 background: var(--background);
89 & bg {
90 display: none!important;
91 }
92 }
93 }
94 &:has(#disable-animations:checked) {
95 & body {
96 animation: unset!important
97 }
98
99 & *,& :after {
100 animation: unset!important;
101 transition: none!important
102 }
103
104 & .navbar {
105 & .important:after {
106 outline-color: color-mix(in srgb, var(--accent) 60%, transparent)
107 }
108
109 & details.settings-area {
110 &: :details-content {
111 transition:unset!important
112 }
113 }
114 }
115
116 & ticker-container {
117 animation: 150s linear infinite ticker!important
118 }
119 }
120 &:has(#disable-alttext:checked) {
121 & .alt-popup {
122 display: none!important
123 }
124 }
125 @keyframes bg-move {
126 0% {
127 background-position: 0 0;
128 }
129
130 100% {
131 background-position: -960px -960px;
132 }
133 }
134 bg-gradient {
135 background: linear-gradient(color-mix(in srgb, var(--accent) 5%, var(--background)), color-mix(in srgb, var(--accent) 30%, var(--background)));
136 z-index: -100001;
137 background-repeat: repeat;
138 position: fixed;
139 width: 100%!important;
140 height: 100%!important;
141 inset: 0 !important;
142 }
143 :root {
144 color-scheme: light dark;
145 &:has(#theme-light:checked) {
146 color-scheme: light;
147 }
148 &:has(#theme-dark:checked) {
149 color-scheme: dark;
150 }
151 --background: light-dark(#eff1f5, #1e1e2e);
152 --crust: light-dark(#dce0e8, #11111b);
153 --foreground: light-dark(#4c4f69, #cdd6f4);
154 --subtext: light-dark(#7c7f93, #45475a);
155 --divider-color: var(--accent);
156 --accent: light-dark(#8839ef, #cba6f7);
157
158 --red: light-dark(#e64553, #eba0ac);
159 --blue: light-dark(#1e66f5, #89b4fa);
160 --light-blue: light-dark(#04a5e5, #89dceb);
161 --teal: light-dark(#179299, #94e2d5);
162 --green: light-dark(#40a02b, #a6e3a1);
163 --purple: light-dark(#7287fd, #b4befe);
164 --pink: light-dark(#ea76cb, #f5c2e7);
165 --yellow: light-dark(#df8e1d, #f9e2af);
166 &:has(#theme-catppuccin:checked) {
167 --background: light-dark(#eff1f5, #303030);
168 --crust: light-dark(#dce0e8, #11111b);
169 --foreground: light-dark(#4c4f69, #cdd6f4);
170 --subtext: light-dark(#7c7f93, #45475a);
171 --divider-color: var(--accent);
172 --accent: light-dark(#8839ef, #cba6f7);
173
174 --red: light-dark(#e64553, #eba0ac);
175 --blue: light-dark(#1e66f5, #89b4fa);
176 --light-blue: light-dark(#04a5e5, #89dceb);
177 --teal: light-dark(#179299, #94e2d5);
178 --green: light-dark(#40a02b, #a6e3a1);
179 --purple: light-dark(#7287fd, #b4befe);
180 --pink: light-dark(#ea76cb, #f5c2e7);
181 --yellow: light-dark(#df8e1d, #f9e2af);
182 }
183 &:has(#theme-newpaper:checked) {
184 --background: light-dark(#f1f3f2, #1e1e2e);
185 --crust: light-dark(#e5e5e5, #11111b);
186 --foreground: light-dark(#2f2a3d, #c6c8cd);
187 --subtext: light-dark(#444444, #bcbcbc);
188 --divider-color: var(--accent);
189 --accent: light-dark(#e563ba, #e878d8);
190
191 --red: light-dark(#af0000, #cc5555);
192 --blue: light-dark(#27408b, #8195e7);
193 --light-blue: light-dark(#0072c1, #7db1d5);
194 --teal: light-dark(#005f87, #72aeb3);
195 --green: light-dark(#008700, #75b680);
196 --purple: light-dark(#8700af, #a274d1);
197 --pink: light-dark(#e563ba, #e878d8);
198 --yellow: light-dark(#af5f00, #c57a30);
199 }
200 &:has(#theme-dracula:checked) {
201 --background: light-dark(#FFFBEB, #282A36);
202 --crust: light-dark(#CFCFDE, #44475A);
203 --foreground: light-dark(#1F1F1F, #F8F8F2);
204 --subtext: light-dark(#6C664B, #6272A4);
205 --divider-color: var(--accent);
206 --accent: light-dark(#644AC9, #6272A4);
207
208 --red: light-dark(#CB3A2A, #FF5555);
209 --blue: light-dark(#644AC9, #BD93F9);
210 --light-blue: light-dark(#7862D0, #D6ACFF);
211 --teal: light-dark(#036A96, #50FA7B);
212 --green: light-dark(#14710A, #50FA7B);
213 --purple: light-dark(#644AC9, #BD93F9);
214 --pink: light-dark(#A3144D, #FF79C6);
215 --yellow: light-dark(#846E15, #F1FA8C)
216 }
217 }
218 #copy-toast {
219 visibility: hidden;
220 color: var(--foreground);
221 background-color: var(--crust);
222 margin-left: -125px;
223 border-radius: 12px;
224 border: 2px dashed var(--accent);
225 padding: 12px;
226 text-align: center;
227 left: 50%;
228 top: 30px;
229 z-index: 1;
230 position: fixed;
231 opacity: 0.8;
232 }
233
234 /* This will be activated when the snackbar's class is 'show' which will be added through JS */
235 #copy-toast.show {
236 visibility: visible;
237 -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
238 animation: fadein 0.5s, fadeout 0.5s 2.5s;
239 opacity: 0.8;
240 }
241
242 /* Animations for fading in and out */
243 @-webkit-keyframes fadein {
244 from {
245 top: 0;
246 opacity: 0;
247 }
248
249 to {
250 top: 30px;
251 opacity: 0.8;
252 }
253 }
254
255 @keyframes fadein {
256 from {
257 top: 0;
258 opacity: 0;
259 }
260
261 to {
262 top: 30px;
263 opacity: 0.8;
264 }
265 }
266
267 @-webkit-keyframes fadeout {
268 from {
269 top: 30px;
270 opacity: 0.8;
271 }
272
273 to {
274 top: 0;
275 opacity: 0;
276 }
277 }
278
279 @keyframes fadeout {
280 from {
281 top: 30px;
282 opacity: 0.8;
283 }
284
285 to {
286 top: 0;
287 opacity: 0;
288 }
289 }
290 button {
291 font-family: "Iosevka Aile", monospace;
292 font-size: 17px;
293 border-radius: 10px;
294 }
295 body {
296 display: table;
297 background-color: var(--background);
298 color: var(--foreground);
299 font-family: "Iosevka Aile", monospace;
300 margin: 10px auto;
301 max-width: 1200px;
302 min-width: 400px;
303 }
304 .divider {
305 border-top: 2px dashed;
306 border-color: var(--divider-color);
307 margin: 20px auto;
308 }
309 .main {
310 background-color: light-dark(#dce0e880, #11111b80);
311 &:has(#theme-catppuccin:checked) {
312 background-color: light-dark(#f1f3f280, #30303080);
313 }
314 &:has(#theme-newpaper:checked) {
315 background-color: light-dark(#eff1f580, #1e1e2e80);
316 }
317 &:has(#theme-dracula:checked) {
318 background-color: light-dark(#FFFBEB80, #282A3680);
319 }
320 margin-top: 20px;
321 outline: 2px solid;
322 outline-color: var(--accent);
323 border-radius: 25px;
324 padding: 20px;
325 box-shadow: inset 0px 0px 0px 0px var(--accent);
326 }
327 .main a {
328 font-size: 13px;
329 }
330 .main .about {
331 text-align: "left";
332 margin-top: 10px;
333 width: 50%;
334 display: inline-block;
335 }
336 .main .pronouns-box {
337 background-color: light-dark(#dce0e880, #11111b80);
338 &:has(#theme-dracula:checked) {
339 background-color: light-dark(#FFFBEB80, #282A3680);
340 }
341 margin-top: 20px;
342 outline: 2px solid;
343 outline-color: var(--accent);
344 border-radius: 25px;
345 padding: 20px;
346 width: 35%;
347 display: inline-block;
348 margin-left: 100px;
349 }
350 .main:hover {
351 outline: 5px dashed;
352 outline-color: var(--accent);
353 background-color: var(--crust);
354 transform: scale(1.01, 1.01);
355 transition: ease-in-out 0.3s;
356 box-shadow: inset 0px 0px 25px 0px var(--accent);
357 }
358 .pronouns-box:hover {
359 outline: 5px dashed;
360 outline-color: var(--accent);
361 opacity: 1;
362 background-color: var(--crust);
363 transform: scale(1.01, 1.01);
364 transition: ease-in-out 0.3s;
365 box-shadow: inset 0px 0px 25px 0px var(--accent);
366 }
367 footer {
368 font-family: "Iosevka Aile", monospace;
369 color: var(--foreground);
370 font-size: 20px;
371 background-color: var(--crust);
372 padding: 15px;
373 outline: 2px solid;
374 outline-color: var(--accent);
375 border-radius: 25px;
376 margin-top: 10px;
377 opacity: 0.7;
378 width: 1200px;
379 box-shadow: 10px 5px 10px var(--crust);
380 }
381 footer:hover {
382 outline: 5px dashed;
383 outline-color: var(--accent);
384 opacity: 1;
385 transform: scale(1.01, 1.01);
386 transition: ease-in-out 0.3s;
387 }
388
389 .form-input {
390 margin-bottom: 11px;
391 }
392
393 .form-input_message {
394 display: block;
395 margin-top: 10px;
396 color: var(--accent);
397 border: 1px solid;
398 border-color: var(--accent);
399 border-radius: 10px;
400 background: var(--background);
401 padding: 10px;
402 resize: both;
403 overflow: hidden;
404 font-family: "Iosevka Aile", monospace;
405 }
406
407 /* dd container */
408 .dropdown {
409 display: inline-block;
410 position: relative;
411 outline: none;
412 }
413 .dropdown a {
414 border: 0px soild transparent;
415 border-radius: 20px;
416 }
417
418 /* button */
419 .dropbtn {
420 color: var(--accent);
421 border: 2px dashed;
422 border-color: var(--accent);
423 border-radius: 15px;
424 background: var(--background);
425 padding: 8px;
426 }
427 .input {
428 color: var(--accent);
429 border: 1px solid;
430 border-color: var(--accent);
431 border-radius: 10px;
432 background: var(--background);
433 padding: 7px;
434 font-family: "Iosevka Aile", monospace;
435 }
436
437 .guest {
438 border: 2px dashed;
439 border-color: var(--accent);
440 padding: 10px;
441 color: var(--accent);
442 background: var(--background);
443 font-family: "Iosevka Aile", monospace;
444 }
445
446 /* dd content */
447 .dropdown .dropdown-content {
448 position: absolute;
449 top: 50%;
450 margin-top: 8px;
451 border: 2px solid;
452 border-color: var(--accent);
453 border-radius: 15px;
454 background-color: var(--background);
455 min-width: 100%;
456 padding: 5px;
457 box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
458 visibility: hidden;
459 opacity: 0;
460 transition: 0.2s ease-in-out;
461 }
462 .dropdown-content a {
463 color: var(--background);
464 padding: 8px 0;
465 display: block;
466 text-decoration: none;
467 transition: 0.2s ease-in-out;
468 text-align: center;
469 }
470 .dropdown-content a:hover {
471 background-color: var(--foreground);
472 }
473 .dropdown .settings-popup {
474 position: absolute;
475 top: 50%;
476 margin-top: 8px;
477 border: 2px solid;
478 border-color: var(--accent);
479 border-radius: 15px;
480 background-color: var(--background);
481 min-width: 100%;
482 padding: 5px;
483 box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
484 visibility: hidden;
485 opacity: 0;
486 transition: 0.2s ease-in-out;
487 }
488 .settings-popup a {
489 color: var(--background);
490 display: block;
491 text-decoration: none;
492 text-align: center;
493 }
494 .web-buttons:hover .web-button {
495 transition: ease-in-out 0.2s;
496 filter: blur(0.15em);
497 display: inline-block;
498 }
499 .web-buttons .web-button:hover {
500 transition: ease-in-out 0.3s;
501 outline: solid 2px;
502 border-radius: 10px;
503 outline-color: var(--accent);
504 filter: blur(0);
505 box-shadow: 0px 0px 10px var(--foreground);
506 transform: scale(1.3, 1.3) translateX(-10px) translateY(-2px);
507 display: inline-block;
508 }
509 .other-web-buttons:hover .web-button {
510 transition: ease-in-out 0.2s;
511 filter: blur(0.15em);
512 display: inline-block;
513 }
514 .other-web-buttons .web-button:hover {
515 transition: ease-in-out 0.3s;
516 outline: solid 2px;
517 border-radius: 10px;
518 outline-color: var(--accent);
519 filter: blur(0);
520 box-shadow: 0px 0px 10px var(--foreground);
521 transform: scale(1.3, 1.3) translateX(-10px) translateY(-2px);
522 display: inline-block;
523 }
524 .my-button .web-button:hover {
525 transition: ease-in-out 0.3s;
526 outline: solid 2px;
527 border-radius: 10px;
528 outline-color: var(--accent);
529 filter: blur(0);
530 box-shadow: 0px 0px 10px var(--foreground);
531 transform: scale(1.4, 1.4);
532 display: inline-block;
533 }
534
535 .alt-popup {
536 background-color: color-mix(in srgb, var(--background) 85%, transparent);
537 backdrop-filter: blur(.5rem);
538 color: var(--foreground);
539 border: solid 2px var(--accent);
540 z-index: 1000;
541 pointer-events: none;
542 opacity: 0;
543 border-radius: .5rem;
544 max-width: 30rem;
545 padding: .5rem;
546 font-size: 1rem;
547 transition: opacity .4s;
548 position: fixed
549 }
550 .pfp {
551 border-radius: 15px;
552 border: 2px solid;
553 border-color: var(--accent);
554 width: 70px;
555 height: auto;
556 }
557 .pfp:hover {
558 transition: ease-in-out 0.45s;
559 height: auto;
560 transform: scale(1.45, 1.45);
561 }
562
563 /* show dd content */
564 .dropdown:focus .dropdown-content {
565 outline: none;
566 transform: translateY(18px);
567 visibility: visible;
568 z-index: 100 !important;
569 opacity: 0.9 !important;
570 }
571 .dropdown:focus .settings-popup {
572 outline: none;
573 transform: translateX(-40%) translateY(0px);
574 visibility: visible;
575 z-index: 100 !important;
576 opacity: 0.9 !important;
577 }
578
579 .dropbtn:hover, .dropdown:focus .dropbtn {
580 background-color: var(--accent);
581 color: var(--background);
582 border-color: var(--background);
583 transition: ease-in-out 0.5s;
584 position: relative;
585 padding: 10px;
586 box-shadow: inset 0px 0px 25px 0px var(--crust);
587 }
588
589 /* mask to close menu by clicking on the button */
590 .dropdown .db2 {
591 position: absolute;
592 top: 0;
593 right: 0;
594 bottom: 0;
595 left: 0;
596 opacity: 0;
597 cursor: pointer;
598 z-index: 10;
599 display: none;
600 }
601 .dropdown:focus .db2 {
602 display: inline-block;
603 }
604 .dropdown .db2:focus .dropdown-content {
605 outline: none;
606 visibility: hidden;
607 opacity: 0;
608 }
609 .dropdown .db2:focus .settings-popup {
610 outline: none;
611 visibility: hidden;
612 opacity: 0;
613 }