melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: consolidate skeleton styles into global css

Browse Source
This commit is contained in:
mkelvers
2026-06-04 10:06:22 +02:00
committed by Milas Holsting
parent 1e6e619a3f
commit 95b1e2b93e
5 changed files with 51 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
static/assets/style.css
View File

@@ -17,6 +17,8 @@
:root {
color-scheme: light dark;
--skeleton-base: light-dark(#e5e5e5, #1f1f1f);
--skeleton-highlight: light-dark(#d4d4d4, #2a2a2a);
--bg: var(--color-background);
--panel: light-dark(#f7f7f7, #181818);
--panel-soft: light-dark(#ececec, #202020);
@@ -61,6 +63,31 @@ body {
color: var(--text);
}
.skeleton {
background: linear-gradient(
90deg,
var(--skeleton-base) 25%,
var(--skeleton-highlight) 50%,
var(--skeleton-base) 75%
);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
}
.skeleton-subtle {
opacity: 0.7;
}
@keyframes skeleton-loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
[data-watchlist-toggle] .watchlist-icon,
[data-watchlist-toggle] .watchlist-icon path {
fill: none;

20
templates/anime.gohtml
View File

@@ -262,9 +262,9 @@
<section>
<h3 class="mb-4 text-base font-normal text-foreground">Statistics</h3>
<div hx-get="/anime/{{$anime.MalID}}?section=statistics" hx-trigger="load" hx-swap="innerHTML">
<div class="flex flex-col gap-3 pt-1 animate-pulse">
<div class="flex flex-col gap-3 pt-1">
{{range (seq 5)}}
<div class="h-4 rounded bg-background-surface"></div>
<div class="skeleton h-4"></div>
{{end}}
</div>
</div>
@@ -299,13 +299,13 @@
<div hx-get="/anime/{{$anime.MalID}}?section=characters" hx-trigger="revealed" hx-swap="outerHTML">
<div class="mt-12 w-full">
<h2 class="mb-6 text-lg font-normal text-foreground">Characters & Cast</h2>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 animate-pulse">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
{{range (seq 5)}}
<div class="flex gap-3 bg-background-surface p-3 h-20">
<div class="h-16 w-12 shrink-0 bg-background-button"></div>
<div class="flex h-20 gap-3 bg-background-surface p-3">
<div class="skeleton h-16 w-12 shrink-0"></div>
<div class="flex flex-col justify-center gap-2 grow">
<div class="h-3 w-2/3 bg-background-button rounded"></div>
<div class="h-2 w-1/2 bg-background-button rounded"></div>
<div class="skeleton h-3 w-2/3"></div>
<div class="skeleton skeleton-subtle h-2 w-1/2"></div>
</div>
</div>
{{end}}
@@ -325,11 +325,11 @@
<div hx-get="/anime/{{$anime.MalID}}?section=recommendations" hx-trigger="revealed" hx-swap="outerHTML">
<div class="w-full">
<h2 class="mb-6 text-lg font-normal text-foreground">Recommendations</h2>
<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 animate-pulse">
<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
{{range (seq 8)}}
<div class="flex flex-col gap-2">
<div class="aspect-2/3 bg-background-surface"></div>
<div class="h-3 w-full bg-background-surface rounded"></div>
<div class="skeleton aspect-2/3"></div>
<div class="skeleton h-3 w-full"></div>
</div>
{{end}}
</div>

18
templates/discover.gohtml
View File

@@ -74,18 +74,6 @@
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1rem;
}
.skeleton {
background: light-dark(
linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%),
linear-gradient(90deg, #1f1f1f 25%, #2a2a2a 50%, #1f1f1f 75%)
);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
}
@keyframes skeleton-loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
</style>
{{end}}
@@ -109,9 +97,9 @@
<div class="discover-grid">
{{range (seq 8)}}
<div class="flex flex-col gap-2">
<div class="skeleton aspect-2/3 w-full rounded-xl"></div>
<div class="skeleton h-4 w-3/4 rounded"></div>
<div class="skeleton h-3 w-1/2 rounded opacity-50"></div>
<div class="skeleton aspect-2/3 w-full"></div>
<div class="skeleton h-4 w-3/4"></div>
<div class="skeleton skeleton-subtle h-3 w-1/2"></div>
</div>
{{end}}
</div>

24
templates/index.gohtml
View File

@@ -34,20 +34,6 @@
</section>
</div>
<style>
.skeleton {
background: light-dark(
linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%),
linear-gradient(90deg, #1f1f1f 25%, #2a2a2a 50%, #1f1f1f 75%)
);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
}
@keyframes skeleton-loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
</style>
{{end}}
{{define "catalog_section"}}
@@ -68,8 +54,8 @@
<div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6">
{{range (seq 6)}}
<div class="flex flex-col gap-2">
<div class="skeleton aspect-2/3 w-full rounded-xl"></div>
<div class="skeleton h-4 w-3/4 rounded"></div>
<div class="skeleton aspect-2/3 w-full"></div>
<div class="skeleton h-4 w-3/4"></div>
</div>
{{end}}
</div>
@@ -81,9 +67,9 @@
<div class="flex snap-x snap-mandatory gap-2 overflow-x-auto pb-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden lg:[-ms-overflow-style:auto] lg:[scrollbar-width:thin] lg:[scrollbar-color:var(--scrollbar-thumb)_var(--scrollbar-track)] lg:[&::-webkit-scrollbar]:block lg:[&::-webkit-scrollbar]:h-2 lg:[&::-webkit-scrollbar-track]:bg-[var(--scrollbar-track)] lg:[&::-webkit-scrollbar-track]:rounded-none lg:[&::-webkit-scrollbar-thumb]:bg-[var(--scrollbar-thumb)] lg:[&::-webkit-scrollbar-thumb]:rounded-none lg:[&::-webkit-scrollbar-thumb:hover]:bg-[var(--scrollbar-thumb-hover)]">
{{range (seq 3)}}
<div class="flex w-70 shrink-0 snap-start flex-col gap-2 2xl:w-lg">
<div class="skeleton aspect-video w-full overflow-hidden rounded-xl"></div>
<div class="skeleton h-5 w-2/3 rounded"></div>
<div class="skeleton h-4 w-1/2 rounded opacity-70"></div>
<div class="skeleton aspect-video w-full overflow-hidden"></div>
<div class="skeleton h-5 w-2/3"></div>
<div class="skeleton skeleton-subtle h-4 w-1/2"></div>
</div>
{{end}}
</div>

12
templates/schedule.gohtml
View File

@@ -222,18 +222,18 @@
<div class="flex flex-col bg-background-surface ring-1 ring-[var(--border)]">
<div class="flex items-baseline justify-between border-b border-[var(--border-light)] px-7 py-6">
<div class="flex flex-col gap-2">
<div class="h-6 w-32 bg-foreground-muted/10 animate-pulse"></div>
<div class="h-4 w-20 bg-foreground-muted/10 animate-pulse"></div>
<div class="skeleton h-6 w-32"></div>
<div class="skeleton skeleton-subtle h-4 w-20"></div>
</div>
<div class="h-4 w-10 bg-foreground-muted/10 animate-pulse"></div>
<div class="skeleton skeleton-subtle h-4 w-10"></div>
</div>
<div class="flex flex-col pb-8 pt-4">
{{range (seq 3)}}
<div class="flex gap-6 px-7 py-6 border-b border-[var(--border-light)] last:border-b-0">
<div class="h-28 w-20 shrink-0 bg-foreground-muted/10 animate-pulse"></div>
<div class="skeleton h-28 w-20 shrink-0"></div>
<div class="flex flex-1 flex-col justify-center gap-4">
<div class="h-5 w-full bg-foreground-muted/10 animate-pulse"></div>
<div class="h-4 w-2/3 bg-foreground-muted/10 animate-pulse opacity-60"></div>
<div class="skeleton h-5 w-full"></div>
<div class="skeleton skeleton-subtle h-4 w-2/3"></div>
</div>
</div>
{{end}}