particle changes
This commit is contained in:
34
css/style.min.css
vendored
34
css/style.min.css
vendored
@@ -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);
|
||||
}
|
||||
|
@@ -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)); }
|
||||
}
|
Reference in New Issue
Block a user