@@ 534,10 534,30 @@ video {
--tw-backdrop-sepia: ;
}
+.invisible {
+ visibility: hidden;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.z-50 {
+ z-index: 50;
+}
+
.flex {
display: flex;
}
+.h-4 {
+ height: 1rem;
+}
+
+.w-4 {
+ width: 1rem;
+}
+
.w-full {
width: 100%;
}
@@ 625,6 645,14 @@ video {
background-position: 0% 0%;
}
+.fill-yellow-200 {
+ fill: #fef08a;
+}
+
+.stroke-yellow-400 {
+ stroke: #facc15;
+}
+
.p-2 {
padding: 0.5rem;
}
@@ 661,6 689,10 @@ video {
color: transparent;
}
+.opacity-0 {
+ opacity: 0;
+}
+
.drop-shadow-md {
--tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
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);
@@ 694,3 726,90 @@ video {
.hover\:underline:hover {
text-decoration-line: underline;
}
+
+.group:hover .group-hover\:visible {
+ visibility: visible;
+}
+
+@keyframes starmove {
+ 0% {
+ transform: translateX(-25%) translateY(-250%);
+ }
+
+ 10% {
+ transform: translateX(-80%) translateY(-162.5%);
+ }
+
+ 30% {
+ transform: translateX(-110%) translateY(-125%);
+ }
+
+ 50% {
+ transform: translateX(-80%) translateY(-50%);
+ }
+
+ 60% {
+ transform: translateX(-25%) translateY(0);
+ }
+
+ 75% {
+ transform: translateX(-10%) translateY(25%);
+ }
+
+ 90% {
+ transform: translateX(-15%) translateY(50%);
+ }
+
+ 100% {
+ transform: translateX(-10%) translateY(75%);
+ }
+}
+
+.group:hover .group-hover\:animate-starmove {
+ animation: starmove 750ms linear;
+}
+
+@keyframes starspin {
+ 0% {
+ transform: rotate(0deg);
+ opacity: 0;
+ }
+
+ 25% {
+ transform: rotate(90deg);
+ opacity: 1;
+ }
+
+ 50% {
+ transform: rotate(180deg);
+ opacity: 1;
+ }
+
+ 75% {
+ transform: rotate(270deg);
+ opacity: 1;
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ opacity: 0;
+ }
+}
+
+.group:hover .group-hover\:animate-starspin {
+ animation: starspin 750ms linear;
+}
+
+@keyframes wiggle {
+ 0%, 100% {
+ transform: rotate(-2deg);
+ }
+
+ 50% {
+ transform: rotate(2deg);
+ }
+}
+
+.group:hover .group-hover\:animate-wiggle {
+ animation: wiggle 200ms ease-in-out;
+}
@@ 1,8 1,8 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
- content: ["./template/templates/**/*.tmpl"],
- theme: {
- extend: {
+ content: ["./template/templates/**/*.tmpl"],
+ theme: {
+ extend: {
backgroundSize: {
"size-200": "200% 200%",
},
@@ 10,8 10,67 @@ module.exports = {
"pos-0": "0% 0%",
"pos-100": "100% 100%",
},
+ keyframes: {
+ wiggle: {
+ '0%, 100%': { transform: 'rotate(-2deg)' },
+ '50%': { transform: 'rotate(2deg)' },
+ },
+ starspin: {
+ '0%': {
+ transform: 'rotate(0deg)',
+ opacity: '0',
+ },
+ '25%': {
+ transform: 'rotate(90deg)',
+ opacity: '1',
+ },
+ '50%': {
+ transform: 'rotate(180deg)',
+ opacity: '1',
+ },
+ '75%': {
+ transform: 'rotate(270deg)',
+ opacity: '1',
+ },
+ '100%': {
+ transform: 'rotate(360deg)',
+ opacity: '0',
+ },
+ },
+ starmove: {
+ '0%': {
+ transform: 'translateX(-25%) translateY(-250%)',
+ },
+ '10%': {
+ transform: 'translateX(-80%) translateY(-162.5%)',
+ },
+ '30%': {
+ transform: 'translateX(-110%) translateY(-125%)',
+ },
+ '50%': {
+ transform: 'translateX(-80%) translateY(-50%)',
+ },
+ '60%': {
+ transform: 'translateX(-25%) translateY(0)'
+ },
+ '75%': {
+ transform: 'translateX(-10%) translateY(25%)'
+ },
+ '90%': {
+ transform: 'translateX(-15%) translateY(50%)'
+ },
+ '100%': {
+ transform: 'translateX(-10%) translateY(75%)'
+ },
+ },
+ },
+ animation: {
+ wiggle: 'wiggle 200ms ease-in-out',
+ starspin: 'starspin 750ms linear',
+ starmove: 'starmove 750ms linear',
+ },
},
- },
- plugins: [],
+ },
+ plugins: [],
}