📱 Improve responsive for webtoon list

Open-Webtoon-Reader · Jun 15, 2024 · f741149 · f741149
1 parent 6e315ba
commit f741149
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/assets/css/index.css b/assets/css/index.css
@@ -72,7 +72,7 @@
         @apply border-border;
     }
     body {
-        @apply bg-background text-foreground;
+        @apply bg-background text-foreground font-sans antialiased text-xs sm:text-sm md:text-base lg:text-lg xl:text-xl 2xl:text-2xl;
     }
 
     h1{
@@ -85,7 +85,7 @@
         @apply scroll-m-20 text-2xl font-semibold tracking-tight;
     }
     h4{
-        @apply scroll-m-20 text-xl font-semibold tracking-tight;
+        @apply scroll-m-20 text-base sm:text-lg md:text-xl lg:text-2xl font-semibold tracking-tight;
     }
     p{
         @apply leading-7 [&:not(:first-child)]:mt-6;

diff --git a/components/webtoons/webtoons/WebtoonItem.vue b/components/webtoons/webtoons/WebtoonItem.vue
@@ -31,12 +31,14 @@ onMounted(() => {
 <template>
     <Collapsible>
         <div id="main" class="flex items-center">
-            <NuxtImg :src="sumToImageUrl(webtoon.thumbnail)" loading="lazy" class="h-20 aspect-square"/>
-            <div id="infos" class="flex items-center w-full justify-between px-2">
-                <div id="text-infos" class="flex flex-col">
-                    <h4>{{ webtoon.title }}</h4>
-                    <p class="!m-0">{{ webtoon.author }}</p>
-                    <!--<Badge variant="secondary" class="w-fit">{{ webtoon.language.toUpperCase() }}</Badge>-->
+            <NuxtImg :src="sumToImageUrl(webtoon.thumbnail)" loading="lazy" class="aspect-square h-20 md:h-24 xl:h-28"/>
+            <div id="infos" class="flex items-center w-full justify-between px-2 h-20 md:h-24 xl:h-28">
+                <div id="text-infos" class="flex flex-col justify-between gap-2 h-full py-1">
+                    <div class="flex flex-col gap-1">
+                        <h4>{{ webtoon.title }}</h4>
+                        <p class="!m-0 leading-4 xl:leading-6">{{ webtoon.author }}</p>
+                    </div>
+                    <Badge variant="secondary" class="w-fit">{{ webtoon.language.toUpperCase() }}</Badge>
                 </div>
                 <CollapsibleTrigger>
                     <Button variant="ghost">