particle changes

This commit is contained in:
2025-07-07 04:23:05 -04:00
parent ec25e6d150
commit 3d3bba5a21
2 changed files with 77 additions and 0 deletions

34
css/style.min.css vendored
View File

@@ -7,12 +7,16 @@
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
--color-red-400: oklch(70.4% 0.191 22.216);
--color-red-500: oklch(63.7% 0.237 25.331);
--color-green-500: oklch(72.3% 0.219 149.579);
--color-teal-300: oklch(85.5% 0.138 181.071);
--color-teal-400: oklch(77.7% 0.152 181.912);
--color-blue-400: oklch(70.7% 0.165 254.624);
--color-blue-500: oklch(62.3% 0.214 259.815);
--color-gray-200: oklch(92.8% 0.006 264.531);
--color-gray-300: oklch(87.2% 0.01 258.338);
--color-gray-400: oklch(70.7% 0.022 261.325);
--color-gray-800: oklch(27.8% 0.033 256.848);
--color-gray-900: oklch(21% 0.034 264.665);
--color-white: #fff;
@@ -262,6 +266,9 @@
.mt-8 {
margin-top: calc(var(--spacing) * 8);
}
.mr-2 {
margin-right: calc(var(--spacing) * 2);
}
.mb-1\.5 {
margin-bottom: calc(var(--spacing) * 1.5);
}
@@ -286,6 +293,12 @@
.mb-12 {
margin-bottom: calc(var(--spacing) * 12);
}
.ml-2 {
margin-left: calc(var(--spacing) * 2);
}
.ml-4 {
margin-left: calc(var(--spacing) * 4);
}
.ml-6 {
margin-left: calc(var(--spacing) * 6);
}
@@ -313,9 +326,15 @@
.h-0\.5 {
height: calc(var(--spacing) * 0.5);
}
.h-3 {
height: calc(var(--spacing) * 3);
}
.h-10 {
height: calc(var(--spacing) * 10);
}
.w-3 {
width: calc(var(--spacing) * 3);
}
.w-6 {
width: calc(var(--spacing) * 6);
}
@@ -397,6 +416,9 @@
.rounded {
border-radius: 0.25rem;
}
.rounded-full {
border-radius: calc(infinity * 1px);
}
.rounded-lg {
border-radius: var(--radius-lg);
}
@@ -434,6 +456,12 @@
background-color: color-mix(in oklab, var(--color-gray-900) 98%, transparent);
}
}
.bg-green-500 {
background-color: var(--color-green-500);
}
.bg-red-500 {
background-color: var(--color-red-500);
}
.bg-teal-400 {
background-color: var(--color-teal-400);
}
@@ -559,6 +587,12 @@
.text-gray-300 {
color: var(--color-gray-300);
}
.text-gray-400 {
color: var(--color-gray-400);
}
.text-red-400 {
color: var(--color-red-400);
}
.text-teal-300 {
color: var(--color-teal-300);
}

View File

@@ -88,4 +88,47 @@ footer {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.particle {
position: absolute;
width: 10px;
height: 10px;
background: rgba(255, 200, 100, 0.8);
border-radius: 50%;
pointer-events: auto;
animation: float-up linear infinite;
}
.large {
width: 15px;
height: 15px;
}
.mini-particle {
position: absolute;
width: 5px;
height: 5px;
background: rgba(255, 100, 50, 0.9);
border-radius: 50%;
animation: explode 2s linear forwards;
}
.glow {
box-shadow: 0 0 10px 5px rgba(255, 200, 100, 1);
}
.fade-out {
opacity: 0;
transition: opacity 0.5s;
}
@keyframes float-up {
0% { transform: translateY(0); }
100% { transform: translateY(-100vh); }
}
@keyframes explode {
0% { transform: translate(0, 0); }
100% { transform: translate(var(--dx), var(--dy)); }
}