mirror of
https://github.com/ld3z/new-manga.git
synced 2026-11-11 01:33:45 -07:00
add tailwind
This commit is contained in:
ld3zian
parent
a8b95aa752
commit
618901a871
11 changed files with 855 additions and 375 deletions
|
|
@ -10,152 +10,45 @@ interface Props {
|
|||
|
||||
const { comic, genres } = Astro.props;
|
||||
const genreNames = getGenreNames(comic.md_comics.genres, genres);
|
||||
|
||||
// Determine if the file is AVIF based on the URL
|
||||
const isAvif = comic.md_comics.md_covers[0]?.b2key.endsWith('.avif');
|
||||
|
||||
const coverUrl = comic.md_comics.md_covers[0]
|
||||
? `https://meo.comick.pictures/${comic.md_comics.md_covers[0].b2key}`
|
||||
: '/placeholder.png';
|
||||
---
|
||||
<div class="comic-card">
|
||||
<a href={`https://comick.io/comic/${comic.md_comics.slug}`} target="_blank" rel="noopener noreferrer">
|
||||
|
||||
<div class="group bg-secondary rounded-xl overflow-hidden shadow-md transition-all duration-300 hover:-translate-y-1 hover:shadow-lg h-full flex flex-col max-w-[250px] mx-auto">
|
||||
<a href={`https://comick.io/comic/${comic.md_comics.slug}`} target="_blank" rel="noopener noreferrer" class="flex flex-col h-full">
|
||||
{!isAvif ? (
|
||||
<Image src={coverUrl} alt={comic.md_comics.title} inferSize={true} />
|
||||
<Image
|
||||
src={coverUrl}
|
||||
alt={comic.md_comics.title}
|
||||
inferSize={true}
|
||||
class="w-full h-[375px] object-cover transition-transform duration-300 group-hover:scale-105"
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
src={coverUrl}
|
||||
alt={comic.md_comics.title}
|
||||
width="300"
|
||||
height="300"
|
||||
style={{ objectFit: 'cover' }}
|
||||
width="250"
|
||||
height="375"
|
||||
class="w-full h-[375px] object-cover transition-transform duration-300 group-hover:scale-105"
|
||||
/>
|
||||
)}
|
||||
<div class="comic-info">
|
||||
<h3>{comic.md_comics.title}</h3>
|
||||
<p class="chapter">Chapter {comic.chap}</p>
|
||||
<div class="p-4 md:p-5 flex-grow flex flex-col bg-secondary">
|
||||
<h3 class="text-lg font-semibold mb-2 line-clamp-2">{comic.md_comics.title}</h3>
|
||||
<p class="text-accent font-medium">Chapter {comic.chap}</p>
|
||||
{genreNames.length > 0 && (
|
||||
<div class="genres" aria-label="Comic genres">
|
||||
<div class="flex flex-wrap gap-2 my-3" aria-label="Comic genres">
|
||||
{genreNames.map(genre => (
|
||||
<span class="genre-tag" title={genre}>
|
||||
<span class="bg-accent/10 text-accent px-3 py-1 rounded-full text-xs font-medium truncate max-w-[150px] md:max-w-[120px] transition-all hover:bg-accent/15 hover:-translate-y-0.5" title={genre}>
|
||||
{genre}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<p class="date">{new Date(comic.updated_at).toLocaleString(undefined, { timeStyle: "short" })}</p>
|
||||
<p class="mt-auto text-sm text-primary/60">
|
||||
{new Date(comic.updated_at).toLocaleString(undefined, { timeStyle: "short" })}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.comic-card {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.comic-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.comic-card a {
|
||||
text-decoration: none;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.comic-card img {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.comic-card:hover img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.comic-info {
|
||||
padding: 1.25rem;
|
||||
position: relative;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.comic-info h3 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 0.5rem;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chapter {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
color: rgb(var(--accent));
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.date {
|
||||
margin-top: 0.75rem;
|
||||
font-size: 0.8rem !important;
|
||||
color: var(--text-color);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.genres {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
margin: 0.75rem 0;
|
||||
max-height: 4.8rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.genre-tag {
|
||||
background: rgba(var(--accent), 0.1);
|
||||
color: rgb(var(--accent));
|
||||
padding: 0.25rem 0.6rem;
|
||||
border-radius: 100px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.genre-tag:hover {
|
||||
background: rgba(var(--accent), 0.15);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.comic-info {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.comic-info h3 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.genres {
|
||||
margin: 0.5rem 0;
|
||||
max-height: 3.6rem;
|
||||
}
|
||||
|
||||
.genre-tag {
|
||||
padding: 0.2rem 0.5rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
|
|
@ -9,8 +9,12 @@ interface Props {
|
|||
const { currentLang, currentType } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="filters">
|
||||
<select name="language" id="language">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<select
|
||||
name="language"
|
||||
id="language"
|
||||
class="px-4 py-2 rounded-md bg-secondary text-primary border border-hover focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent transition-colors"
|
||||
>
|
||||
{availableLanguages.map(lang => (
|
||||
<option value={lang} selected={lang === currentLang}>
|
||||
{getLanguageName(lang)}
|
||||
|
|
@ -18,7 +22,11 @@ const { currentLang, currentType } = Astro.props;
|
|||
))}
|
||||
</select>
|
||||
|
||||
<select name="contentType" id="contentType">
|
||||
<select
|
||||
name="contentType"
|
||||
id="contentType"
|
||||
class="px-4 py-2 rounded-md bg-secondary text-primary border border-hover focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent transition-colors"
|
||||
>
|
||||
{availableContentTypes.map(type => (
|
||||
<option value={type} selected={type === currentType}>
|
||||
{type.toUpperCase()}
|
||||
|
|
@ -39,25 +47,4 @@ const { currentLang, currentType } = Astro.props;
|
|||
|
||||
langSelect.addEventListener('change', updateURL);
|
||||
typeSelect.addEventListener('change', updateURL);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
select {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-color);
|
||||
border: 1px solid var(--bg-hover);
|
||||
}
|
||||
|
||||
select:focus {
|
||||
outline: none;
|
||||
border-color: rgb(var(--accent));
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
|
|
@ -7,35 +7,25 @@ interface Props {
|
|||
const { lang, type } = Astro.props;
|
||||
---
|
||||
|
||||
<a href={`/rss/${lang}/${type}.xml`} class="rss-link" target="_blank" rel="noopener noreferrer">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<a
|
||||
href={`/rss/${lang}/${type}.xml`}
|
||||
class="inline-flex items-center gap-2 px-4 py-2 bg-secondary hover:bg-accent text-primary hover:text-white rounded-md transition-colors duration-200"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M4 11a9 9 0 0 1 9 9"></path>
|
||||
<path d="M4 4a16 16 0 0 1 16 16"></path>
|
||||
<circle cx="5" cy="19" r="1"></circle>
|
||||
</svg>
|
||||
RSS Feed
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.rss-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
background: var(--bg-secondary);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.rss-link:hover {
|
||||
background: rgb(var(--accent));
|
||||
color: white;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
</a>
|
||||
|
|
@ -1,7 +1,21 @@
|
|||
---
|
||||
---
|
||||
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
|
||||
<svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<button
|
||||
id="theme-toggle"
|
||||
class="fixed top-4 right-4 z-50 p-2 w-10 h-10 rounded-full bg-secondary hover:bg-hover flex items-center justify-center transition-colors"
|
||||
aria-label="Toggle theme"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5 absolute transition-transform duration-500"
|
||||
data-theme-icon="light"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="5"></circle>
|
||||
<line x1="12" y1="1" x2="12" y2="3"></line>
|
||||
<line x1="12" y1="21" x2="12" y2="23"></line>
|
||||
|
|
@ -12,7 +26,17 @@
|
|||
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
|
||||
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
|
||||
</svg>
|
||||
<svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<svg
|
||||
class="w-5 h-5 absolute transition-transform duration-500"
|
||||
data-theme-icon="dark"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
|
@ -21,6 +45,20 @@
|
|||
const setTheme = (theme: 'light' | 'dark') => {
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
localStorage.setItem('theme', theme);
|
||||
updateIcons(theme);
|
||||
};
|
||||
|
||||
const updateIcons = (theme: string) => {
|
||||
const lightIcon = document.querySelector('[data-theme-icon="light"]');
|
||||
const darkIcon = document.querySelector('[data-theme-icon="dark"]');
|
||||
|
||||
if (theme === 'light') {
|
||||
lightIcon?.classList.remove('translate-y-full');
|
||||
darkIcon?.classList.add('translate-y-full');
|
||||
} else {
|
||||
lightIcon?.classList.add('translate-y-full');
|
||||
darkIcon?.classList.remove('translate-y-full');
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize theme
|
||||
|
|
@ -35,48 +73,4 @@
|
|||
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
|
||||
setTheme(newTheme);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.theme-toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
color: var(--text-color);
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
z-index: 100;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.sun-icon,
|
||||
.moon-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
transition: transform 0.5s ease, opacity 0.5s ease;
|
||||
}
|
||||
|
||||
:global([data-theme="dark"]) .sun-icon {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
:global([data-theme="light"]) .moon-icon {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
import ThemeToggle from '../components/ThemeToggle.astro';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
|
|
@ -10,82 +10,70 @@ const { title } = Astro.props;
|
|||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description" content="Astro description" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<ThemeToggle />
|
||||
<slot />
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description" content="Astro description" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body class="min-h-screen bg-primary text-primary">
|
||||
<ThemeToggle />
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style is:global>
|
||||
:root {
|
||||
--accent: 136, 58, 234;
|
||||
--accent-light: 224, 204, 250;
|
||||
--accent-dark: 49, 10, 101;
|
||||
--accent-gradient: linear-gradient(
|
||||
45deg,
|
||||
rgb(var(--accent)),
|
||||
rgb(var(--accent-light)) 30%,
|
||||
white 60%
|
||||
);
|
||||
}
|
||||
:root {
|
||||
--accent: 136, 58, 234;
|
||||
--accent-light: 224, 204, 250;
|
||||
--accent-dark: 49, 10, 101;
|
||||
--accent-gradient: linear-gradient(
|
||||
45deg,
|
||||
rgb(var(--accent)),
|
||||
rgb(var(--accent-light)) 30%,
|
||||
white 60%
|
||||
);
|
||||
}
|
||||
|
||||
/* Light theme */
|
||||
:root[data-theme="light"] {
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f0f0f0;
|
||||
--bg-hover: #e0e0e0;
|
||||
--text-color: #13151a;
|
||||
--card-bg: #f5f5f5;
|
||||
}
|
||||
/* Light theme */
|
||||
:root[data-theme="light"] {
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f0f0f0;
|
||||
--bg-hover: #e0e0e0;
|
||||
--text-color: #13151a;
|
||||
}
|
||||
|
||||
/* Dark theme */
|
||||
:root[data-theme="dark"] {
|
||||
--bg-primary: #13151a;
|
||||
--bg-secondary: #23262d;
|
||||
--bg-hover: #2a2d35;
|
||||
--text-color: #ffffff;
|
||||
--card-bg: #23262d;
|
||||
}
|
||||
/* Dark theme */
|
||||
:root[data-theme="dark"] {
|
||||
--bg-primary: #13151a;
|
||||
--bg-secondary: #23262d;
|
||||
--bg-hover: #2a2d35;
|
||||
--text-color: #ffffff;
|
||||
}
|
||||
|
||||
/* Default to dark theme if no data-theme is set */
|
||||
:root:not([data-theme]) {
|
||||
--bg-primary: #13151a;
|
||||
--bg-secondary: #23262d;
|
||||
--bg-hover: #2a2d35;
|
||||
--text-color: #ffffff;
|
||||
--card-bg: #23262d;
|
||||
}
|
||||
/* Default to dark theme if no data-theme is set */
|
||||
:root:not([data-theme]) {
|
||||
--bg-primary: #13151a;
|
||||
--bg-secondary: #23262d;
|
||||
--bg-hover: #2a2d35;
|
||||
--text-color: #ffffff;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: system-ui, sans-serif;
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-color);
|
||||
}
|
||||
html {
|
||||
font-family: system-ui, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-color);
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family:
|
||||
Menlo,
|
||||
Monaco,
|
||||
Lucida Console,
|
||||
Liberation Mono,
|
||||
DejaVu Sans Mono,
|
||||
Bitstream Vera Sans Mono,
|
||||
Courier New,
|
||||
monospace;
|
||||
}
|
||||
code {
|
||||
font-family:
|
||||
Menlo,
|
||||
Monaco,
|
||||
Lucida Console,
|
||||
Liberation Mono,
|
||||
DejaVu Sans Mono,
|
||||
Bitstream Vera Sans Mono,
|
||||
Courier New,
|
||||
monospace;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -37,91 +37,33 @@ try {
|
|||
---
|
||||
|
||||
<Layout title={`Comick - ${lang?.toUpperCase()} ${type?.toUpperCase()}`}>
|
||||
<main>
|
||||
<h1>ComicK-RSS</h1>
|
||||
<div class="controls">
|
||||
<main class="mx-auto px-4 sm:px-6 lg:px-8 max-w-[1400px] text-primary">
|
||||
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-center mb-8 sm:mb-12 bg-gradient-to-r from-accent via-accent-light to-white bg-clip-text text-transparent bg-[length:400%] bg-[0%]">
|
||||
ComicK-RSS
|
||||
</h1>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
|
||||
<LanguageSelector currentLang={lang!} currentType={type!} />
|
||||
<RSSLink lang={lang!} type={type!} />
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div class="error-message">
|
||||
<div class="bg-red-500 text-white p-4 rounded-lg mb-8">
|
||||
<p>Error: {error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{comics.length > 0 ? (
|
||||
<div class="comics-grid">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
|
||||
{comics.map(comic => (
|
||||
<ComicCard comic={comic} genres={genres} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div class="no-comics">
|
||||
<p>No comics found. Please try a different language or content type.</p>
|
||||
<p class="debug-info">Language: {lang}, Type: {type}</p>
|
||||
<div class="text-center bg-secondary p-6 rounded-lg">
|
||||
<p class="mb-4">No comics found. Please try a different language or content type.</p>
|
||||
<p class="text-sm opacity-70">Language: {lang}, Type: {type}</p>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
main {
|
||||
margin: auto;
|
||||
padding: 1rem;
|
||||
width: 1200px;
|
||||
max-width: calc(100% - 2rem);
|
||||
color: var(--text-color);
|
||||
font-size: 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
margin-bottom: 1em;
|
||||
background-image: var(--accent-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-size: 400%;
|
||||
background-position: 0%;
|
||||
}
|
||||
|
||||
.comics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.no-comics {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: #ff4444;
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.debug-info {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-color);
|
||||
opacity: 0.7;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
</style>
|
||||
</Layout>
|
||||
|
|
@ -1,5 +1,15 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
|
||||
export const prerender = false;
|
||||
---
|
||||
|
||||
<meta http-equiv="refresh" content="0;url=/en/sfw">
|
||||
<Layout title="ComicK-RSS">
|
||||
<main class="min-h-screen flex items-center justify-center">
|
||||
<h1 class="text-6xl font-bold text-center bg-gradient-to-r from-accent via-accent-light to-white bg-clip-text text-transparent">
|
||||
ComicK-RSS
|
||||
</h1>
|
||||
</main>
|
||||
|
||||
<meta http-equiv="refresh" content="0;url=/en/sfw">
|
||||
</Layout>
|
||||
Loading…
Add table
Add a link
Reference in a new issue