Fix/minor adjustments in the tags page (#9)

* Fix: fixing broken link

* Refactor: removing ternary if condition

* Refactor: minor adjustments to tags page

* Chore: annotating now unused media query

to be checked later

Author: RichardsonWTR

src/components/TagList.astro

@@ -11,7 +11,7 @@ const { tags = [], class: className = '' } = Astro.props;
   <div class={`flex flex-wrap gap-2 mt-3 ${className}`}>
     {tags.map(tag => (
       <a 
-        href={`/tag/${tag}`}
+        href={`/tags/${tag}`}
         class="inline-flex items-center rounded-full bg-zinc-100 px-2.5 py-0.5 text-xs font-medium text-zinc-800 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700"
       >
         {tag}

src/pages/tags/index.astro

@@ -50,7 +50,7 @@ const sortedTags = [...tagObjects].sort((a, b) => b.count - a.count);
       </p>
     </div>
 
-    {tags.length === 0 ? (
+    {tags.length === 0 && (
       <div class="text-center py-8 sm:py-12 md:py-16 theme-transition-element">
         <div class="inline-flex items-center justify-center w-16 sm:w-20 md:w-24 h-16 sm:h-20 md:h-24 rounded-full bg-zinc-100 dark:bg-zinc-800 mb-3 sm:mb-4 md:mb-6 shadow-inner theme-transition-bg">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 sm:w-10 md:w-12 h-8 sm:h-10 md:h-12 text-zinc-500 dark:text-zinc-400 theme-transition-color">
@@ -61,7 +61,9 @@ const sortedTags = [...tagObjects].sort((a, b) => b.count - a.count);
         <p class="text-lg sm:text-xl md:text-2xl font-medium text-zinc-800 dark:text-zinc-200 theme-transition-color">No tags found yet.</p>
         <p class="mt-2 text-xs sm:text-sm md:text-base text-zinc-500 dark:text-zinc-500 theme-transition-color">Check back later for categorized content.</p>
       </div>
-    ) : (
+    )}
+    
+    {tags.length > 0 && (
       <div class="flex justify-center w-full">
         <!-- Featured Tags Section - ultra-responsive design -->
         <div class="tag-cloud relative p-3 sm:p-4 md:p-6 lg:p-8 rounded-lg sm:rounded-xl md:rounded-2xl lg:rounded-3xl border border-zinc-100 dark:border-zinc-800 bg-white/50 dark:bg-zinc-900/50 backdrop-blur-sm hover-3d glass theme-transition-all w-full">
@@ -72,7 +74,7 @@ const sortedTags = [...tagObjects].sort((a, b) => b.count - a.count);
           <h2 class="text-lg sm:text-xl md:text-2xl lg:text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-3 sm:mb-4 md:mb-6 lg:mb-8 text-center theme-transition-color">Popular Topics</h2>
 
           <!-- Ultra-responsive grid layout with fallbacks -->
-          <div class="grid grid-cols-2 xxxs:grid-cols-2 xxs:grid-cols-2 xs:grid-cols-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-1.5 xxxs:gap-2 xxs:gap-2 xs:gap-2 sm:gap-3 md:gap-4 w-full">
+          <div class="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-2 gap-1.5 xs:gap-2 sm:gap-3 md:gap-4 w-full">
             {sortedTags.map((tag) => (
               <a 
                 href={`/tags/${tag.name}`}
@@ -81,16 +83,16 @@ const sortedTags = [...tagObjects].sort((a, b) => b.count - a.count);
               >
                 <div class="absolute inset-0 bg-gradient-to-br from-zinc-50/90 to-zinc-100/90 dark:from-zinc-800/90 dark:to-zinc-900/90 opacity-100 group-hover:opacity-95 transition-opacity theme-transition-bg"></div>
 
-                <div class="relative px-1.5 xxxs:px-2 xxs:px-2 xs:px-2 sm:px-3 md:px-4 py-1.5 xxxs:py-2 xxs:py-2 xs:py-2 sm:py-3 md:py-4 flex items-center gap-1.5 xxs:gap-2 w-full">
-                  <div class="flex-shrink-0 flex items-center justify-center w-5 h-5 xxxs:w-6 xxxs:h-6 xxs:w-6 xxs:h-6 xs:w-7 xs:h-7 sm:w-8 sm:h-8 md:w-10 md:h-10 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 group-hover:bg-accent/20 dark:group-hover:bg-accent/20 group-hover:text-accent-dark dark:group-hover:text-accent-light transition-all duration-300 shadow-sm theme-transition-all">
-                    <span class="text-xs xxxs:text-xs xxs:text-xs xs:text-sm sm:text-base md:text-lg font-semibold">#</span>
+                <div class="relative px-1.5 xxs:px-2 xs:px-2 sm:px-3 md:px-4 py-1.5 xxs:py-2 xs:py-2 sm:py-3 md:py-4 flex items-center gap-1.5 xxs:gap-2 w-full">
+                  <div class="flex-shrink-0 flex items-center justify-center w-5 h-5 xxs:w-6 xxs:h-6 xs:w-7 xs:h-7 sm:w-8 sm:h-8 md:w-10 md:h-10 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 group-hover:bg-accent/20 dark:group-hover:bg-accent/20 group-hover:text-accent-dark dark:group-hover:text-accent-light transition-all duration-300 shadow-sm theme-transition-all">
+                    <span class="text-xs xxs:text-xs xs:text-sm sm:text-base md:text-lg font-semibold">#</span>
                   </div>
 
                   <div class="flex-1 min-w-0 overflow-hidden">
-                    <h3 class="text-[10px] xxxs:text-xs xxs:text-xs xs:text-xs sm:text-sm md:text-base font-bold text-zinc-900 dark:text-zinc-100 group-hover:text-zinc-700 dark:group-hover:text-zinc-300 transition-colors theme-transition-color break-words hyphens-auto truncate">
+                    <h3 class="text-[10px] xxs:text-sm xs:text-sm sm:text-base md:text-base lg:text-[15px] xl:text-[16px] 2xl:text-[16px] font-bold text-zinc-900 dark:text-zinc-100 group-hover:text-zinc-700 dark:group-hover:text-zinc-300 transition-colors theme-transition-color break-words hyphens-auto truncate">
                       {tag.name}
                     </h3>
-                    <p class="text-[8px] xxxs:text-[9px] xxs:text-[9px] xs:text-[10px] sm:text-xs md:text-xs text-zinc-500 dark:text-zinc-400 theme-transition-color truncate">{tag.count} article{tag.count !== 1 ? 's' : ''}</p>
+                    <p class="text-[10px] xxs:text-[11px] xs:text-[12px] sm:text-sm md:text-sm text-zinc-500 dark:text-zinc-400 theme-transition-color truncate">{tag.count} article{tag.count !== 1 ? 's' : ''}</p>
                   </div>
                 </div>
               </a>
@@ -348,7 +350,7 @@ const sortedTags = [...tagObjects].sort((a, b) => b.count - a.count);
     }
   }
 
-  /* Extra extra extra small screens (240px-279px) */
+  /* Extra extra extra small screens (240px-279px) - used until commit c8d6eb29aff7168e60dbbeae14452a9ffbc301ca */
   @media (min-width: 240px) and (max-width: 279px) {
     .xxxs\:grid-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));