My personal site
cherry.computer
cherry.computer
htmx
tailwind
axum
askama
feat: remove animations
-34
frontend/src/css/tailwind.css
-34
frontend/src/css/tailwind.css
···
1
@import "tailwindcss" source(none);
2
@source "../../../server/templates";
3
@source ".";
4
-
5
-
@theme {
6
-
--animate-marquee: marquee-start 1s linear 2, marquee-end 1s 2s ease-out;
7
-
--animate-glow: glow 0.5s 3.12s backwards ease-in;
8
-
9
-
@keyframes marquee-start {
10
-
0% {
11
-
transform: translateX(-75vw);
12
-
}
13
-
100% {
14
-
transform: translateX(75vw);
15
-
}
16
-
}
17
-
18
-
@keyframes marquee-end {
19
-
0% {
20
-
transform: translateX(-75vw);
21
-
}
22
-
100% {
23
-
}
24
-
}
25
-
26
-
@keyframes glow {
27
-
0% {
28
-
color: var(--color-gray-200);
29
-
}
30
-
50% {
31
-
color: var(--color-pink-900);
32
-
}
33
-
100% {
34
-
color: var(--color-pink-700);
35
-
}
36
-
}
37
-
}
+2
-5
server/templates/index.html
+2
-5
server/templates/index.html
···
10
<body class="bg-gray-900">
11
<div class="flex flex-col">
12
<div class="bg-gray-950 text-center">
13
-
<h1
14
-
class="font-serif text-4xl text-gray-200 motion-safe:animate-marquee sm:text-6xl md:text-8xl"
15
-
>
16
-
<span class="text-pink-700 motion-safe:animate-glow">cherry</span
17
-
>.computer
18
</h1>
19
</div>
20
<div class="flex w-full max-w-xl flex-col self-center">
···
10
<body class="bg-gray-900">
11
<div class="flex flex-col">
12
<div class="bg-gray-950 text-center">
13
+
<h1 class="font-serif text-4xl text-gray-200 sm:text-6xl md:text-8xl">
14
+
<span class="text-pink-700">cherry</span>.computer
15
</h1>
16
</div>
17
<div class="flex w-full max-w-xl flex-col self-center">