ldez/new-manga
1
0
Fork 0
mirror of https://github.com/ld3z/new-manga.git synced 2026-11-09 20:13:44 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

try this

Browse source
This commit is contained in:
ld3zian 2025-01-27 16:53:34 -07:00
parent 5e95e0d921
commit cd52b53cf2
5 changed files with 31 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/ComicCard.astro
View file

@ -17,8 +17,8 @@ const coverUrl = comic.md_comics.md_covers[0]
const isNSFW = comic.md_comics.content_rating === 'erotica'; const isNSFW = comic.md_comics.content_rating === 'erotica';
--- ---
<div class="group relative bg-secondary rounded-xl overflow-visible shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-xl h-full flex flex-col max-w-[280px] mx-auto border border-hover/30"> <div class="bg-secondary rounded-xl overflow-hidden shadow-lg h-full flex flex-col max-w-[280px] mx-auto border border-hover/30 hover:border-accent/50 transition-all duration-300">
<a href={`https://comick.io/comic/${comic.md_comics.slug}`} target="_blank" rel="noopener noreferrer" class="flex flex-col h-full"> <a href={`https://comick.io/comic/${comic.md_comics.slug}`} class="flex flex-col h-full group relative">
<div class="relative overflow-hidden aspect-[2/3] rounded-t-xl"> <div class="relative overflow-hidden aspect-[2/3] rounded-t-xl">
{!isAvif ? ( {!isAvif ? (
<Image <Image
@ -45,15 +45,15 @@ const isNSFW = comic.md_comics.content_rating === 'erotica';
)} )}
</div> </div>
<div class="p-4 md:p-5 flex-grow flex flex-col bg-secondary relative rounded-b-xl"> <div class="p-3 sm:p-4 md:p-5 flex-grow flex flex-col bg-secondary relative rounded-b-xl">
<div class="absolute -top-8 left-3 right-3 bg-secondary/95 backdrop-blur-[12px] p-3 rounded-lg shadow-lg border border-hover/30"> <div class="absolute -top-6 sm:-top-8 left-2 right-2 sm:left-3 sm:right-3 bg-secondary/95 backdrop-blur-[12px] p-2 sm:p-3 rounded-lg shadow-lg border border-hover/30">
<h3 class="text-lg font-bold line-clamp-1 text-center text-primary drop-shadow-[0_1px_1px_rgba(0,0,0,0.5)]"> <h3 class="text-base sm:text-lg font-bold line-clamp-1 text-center text-primary drop-shadow-[0_1px_1px_rgba(0,0,0,0.5)]">
{comic.md_comics.title} {comic.md_comics.title}
</h3> </h3>
</div> </div>
<div class="mt-6"> <div class="mt-4 sm:mt-6">
<p class="inline-block bg-accent/20 text-accent px-4 py-1 rounded-full text-sm font-semibold"> <p class="inline-block bg-accent/20 text-accent px-3 sm:px-4 py-1 rounded-full text-xs sm:text-sm font-semibold">
Chapter {comic.chap} Chapter {comic.chap}
</p> </p>
@ -96,7 +96,7 @@ const isNSFW = comic.md_comics.content_rating === 'erotica';
)} )}
</div> </div>
<div class="mt-auto pt-4 flex items-center justify-between text-sm text-primary/60 border-t border-hover/30"> <div class="mt-auto pt-3 sm:pt-4 flex items-center justify-between text-xs sm:text-sm text-primary/60 border-t border-hover/30">
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<time datetime={comic.updated_at}> <time datetime={comic.updated_at}>
{new Date(comic.updated_at).toLocaleString(undefined, { {new Date(comic.updated_at).toLocaleString(undefined, {

10
src/components/SlugInput.astro
View file

@ -21,20 +21,20 @@ const languages = [
]; ];
--- ---
<div class="space-y-6"> <div class="space-y-4 sm:space-y-6">
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-3 sm:gap-4">
<div class="flex gap-2"> <div class="flex flex-col sm:flex-row gap-2">
<div class="flex-1"> <div class="flex-1">
<input <input
type="text" type="text"
id="search-input" id="search-input"
placeholder="Search for comics..." placeholder="Search for comics..."
class="w-full px-4 py-2 bg-primary rounded-lg border border-hover/30 focus:outline-none focus:border-accent/50 transition-colors" class="w-full px-3 sm:px-4 py-2 bg-primary rounded-lg border border-hover/30 focus:outline-none focus:border-accent/50 transition-colors text-sm sm:text-base"
/> />
</div> </div>
<select <select
id="lang-select" id="lang-select"
class="px-4 py-2 bg-primary rounded-lg border border-hover/30 focus:outline-none focus:border-accent/50 transition-colors" class="px-3 sm:px-4 py-2 bg-primary rounded-lg border border-hover/30 focus:outline-none focus:border-accent/50 transition-colors text-sm sm:text-base"
> >
{languages.map(lang => ( {languages.map(lang => (
<option value={lang.value}>{lang.label}</option> <option value={lang.value}>{lang.label}</option>

10
src/layouts/Layout.astro
View file

@ -51,21 +51,21 @@ const isCreditsPage = Astro.url.pathname === '/credits';
style={`--bg-url: url('${background.url}')`} style={`--bg-url: url('${background.url}')`}
> >
{!isCreditsPage && ( {!isCreditsPage && (
<div class="fixed top-4 right-4 z-50"> <div class="fixed bottom-4 sm:bottom-6 right-4 sm:right-6 z-50">
<div class="relative" id="settings-dropdown"> <div class="relative" id="settings-dropdown">
<button <button
id="settings-button" id="settings-button"
class="p-2 bg-secondary/80 backdrop-blur rounded-lg hover:bg-hover transition-colors shadow-lg border border-hover/30 flex items-center gap-2" class="p-2.5 sm:p-3 bg-secondary rounded-lg hover:bg-hover transition-colors shadow-lg border border-hover/30 flex items-center gap-2"
aria-label="Settings" aria-label="Settings"
> >
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg class="w-4 h-4 sm:w-5 sm:h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 15a3 3 0 100-6 3 3 0 000 6z" /> <path d="M12 15a3 3 0 100-6 3 3 0 000 6z" />
<path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" /> <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" />
</svg> </svg>
<span class="text-sm">Settings</span> <span class="text-xs sm:text-sm">Settings</span>
</button> </button>
<div id="dropdown-menu" class="hidden absolute right-0 mt-2 w-64 bg-secondary/95 backdrop-blur rounded-lg shadow-lg border border-hover/30"> <div id="dropdown-menu" class="hidden absolute bottom-full right-0 mb-2 w-56 sm:w-64 bg-secondary rounded-lg shadow-lg border border-hover/30">
<div class="p-4 space-y-4"> <div class="p-4 space-y-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="text-sm">Theme</span> <span class="text-sm">Theme</span>

8
src/pages/custom.astro
View file

@ -7,14 +7,14 @@ const description = "Create a custom RSS feed for your favorite comics";
--- ---
<Layout title={title} description={description}> <Layout title={title} description={description}>
<main class="mx-auto px-4 sm:px-6 lg:px-8 max-w-[800px] py-8"> <main class="mx-auto px-3 sm:px-4 lg:px-8 max-w-[800px] py-4 sm:py-8">
<h1 class="text-4xl font-bold text-center mb-8">Custom RSS Feed</h1> <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-center mb-4 sm:mb-8">Custom RSS Feed</h1>
<div class="bg-secondary/50 p-6 rounded-lg shadow-lg"> <div class="bg-secondary/50 p-3 sm:p-6 rounded-lg shadow-lg">
<SlugInput /> <SlugInput />
</div> </div>
<div class="mt-8 text-center text-primary/60"> <div class="mt-4 sm:mt-8 text-center text-primary/60 text-sm sm:text-base">
<p>Search for your favorite comics using the search box above, or add their slugs manually.</p> <p>Search for your favorite comics using the search box above, or add their slugs manually.</p>
<p class="mt-2">Manual example: For <a href="https://comick.io/comic/01-one-piece" class="text-accent hover:underline">https://comick.io/comic/01-one-piece</a>, the slug is "01-one-piece"</p> <p class="mt-2">Manual example: For <a href="https://comick.io/comic/01-one-piece" class="text-accent hover:underline">https://comick.io/comic/01-one-piece</a>, the slug is "01-one-piece"</p>
</div> </div>

9
tailwind.config.mjs
View file

@ -17,6 +17,15 @@ export default {
textColor: { textColor: {
primary: 'var(--text-color)', primary: 'var(--text-color)',
}, },
spacing: {
'safe-top': 'env(safe-area-inset-top)',
'safe-bottom': 'env(safe-area-inset-bottom)',
'safe-left': 'env(safe-area-inset-left)',
'safe-right': 'env(safe-area-inset-right)',
},
screens: {
'xs': '475px',
},
}, },
}, },
plugins: [], plugins: [],