From cd52b53cf229f2f027dfe5b35a7f2b710447dcc8 Mon Sep 17 00:00:00 2001
From: ld3zian <42660576+ld3z@users.noreply.github.com>
Date: Mon, 27 Jan 2025 16:53:34 -0700
Subject: [PATCH] try this

---
 src/components/ComicCard.astro | 16 ++++++++--------
 src/components/SlugInput.astro | 10 +++++-----
 src/layouts/Layout.astro       | 10 +++++-----
 src/pages/custom.astro         |  8 ++++----
 tailwind.config.mjs            |  9 +++++++++
 5 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/src/components/ComicCard.astro b/src/components/ComicCard.astro
index deba8ea..52f4f12 100644
--- a/src/components/ComicCard.astro
+++ b/src/components/ComicCard.astro
@@ -17,8 +17,8 @@ const coverUrl = comic.md_comics.md_covers[0]
 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">
-  <a href={`https://comick.io/comic/${comic.md_comics.slug}`} target="_blank" rel="noopener noreferrer" class="flex flex-col h-full">
+<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}`} class="flex flex-col h-full group relative">
     <div class="relative overflow-hidden aspect-[2/3] rounded-t-xl">
       {!isAvif ? (
         <Image 
@@ -45,15 +45,15 @@ const isNSFW = comic.md_comics.content_rating === 'erotica';
       )}
     </div>
     
-    <div class="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">
-        <h3 class="text-lg font-bold line-clamp-1 text-center text-primary drop-shadow-[0_1px_1px_rgba(0,0,0,0.5)]">
+    <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-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-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}
         </h3>
       </div>
       
-      <div class="mt-6">
-        <p class="inline-block bg-accent/20 text-accent px-4 py-1 rounded-full text-sm font-semibold">
+      <div class="mt-4 sm:mt-6">
+        <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}
         </p>
         
@@ -96,7 +96,7 @@ const isNSFW = comic.md_comics.content_rating === 'erotica';
         )}
       </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">
           <time datetime={comic.updated_at}>
             {new Date(comic.updated_at).toLocaleString(undefined, { 
diff --git a/src/components/SlugInput.astro b/src/components/SlugInput.astro
index f33b2b4..42a3dc0 100644
--- a/src/components/SlugInput.astro
+++ b/src/components/SlugInput.astro
@@ -21,20 +21,20 @@ const languages = [
 ];
 ---
 
-<div class="space-y-6">
-  <div class="flex flex-col gap-4">
-    <div class="flex gap-2">
+<div class="space-y-4 sm:space-y-6">
+  <div class="flex flex-col gap-3 sm:gap-4">
+    <div class="flex flex-col sm:flex-row gap-2">
       <div class="flex-1">
         <input
           type="text"
           id="search-input"
           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>
       <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 => (
           <option value={lang.value}>{lang.label}</option>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 26d47ce..7c27522 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -51,21 +51,21 @@ const isCreditsPage = Astro.url.pathname === '/credits';
     style={`--bg-url: url('${background.url}')`}
   >
     {!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">
           <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"
           >
-            <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="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>
-            <span class="text-sm">Settings</span>
+            <span class="text-xs sm:text-sm">Settings</span>
           </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="flex items-center justify-between">
                 <span class="text-sm">Theme</span>
diff --git a/src/pages/custom.astro b/src/pages/custom.astro
index 87f97a8..58b00f3 100644
--- a/src/pages/custom.astro
+++ b/src/pages/custom.astro
@@ -7,14 +7,14 @@ const description = "Create a custom RSS feed for your favorite comics";
 ---
 
 <Layout title={title} description={description}>
-  <main class="mx-auto px-4 sm:px-6 lg:px-8 max-w-[800px] py-8">
-    <h1 class="text-4xl font-bold text-center mb-8">Custom RSS Feed</h1>
+  <main class="mx-auto px-3 sm:px-4 lg:px-8 max-w-[800px] py-4 sm:py-8">
+    <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 />
     </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 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>
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index cf4a274..820c6cd 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -17,6 +17,15 @@ export default {
       textColor: {
         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: [],