improved the look of the tag buttons in blog

CodingBull-dev · May 4, 2024 · e158950 · e158950
1 parent 1775cc3
commit e158950
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/src/_includes/blog.html b/src/_includes/blog.html
@@ -9,7 +9,8 @@ <h3 class="text-4xl lg:text-6xl font-bold blog-title">{{ title }}</h3>
     <div class="my-4">
         {% for tag in tags %}
         {% if tag !== 'posts' %}
-        <a class="tag bg-base-300 hover:bg-primary rounded-xl py-1 px-3" href="/tags/{{ tag }}">
+        <a class="transition ease-in-out delay-50 tag bg-base-300 hover:bg-primary hover:text-primary-content rounded-xl py-1 px-3"
+            href="/tags/{{ tag }}">
             #{{ tag }}
         </a>
         {% endif %}

diff --git a/src/_includes/feed.html b/src/_includes/feed.html
@@ -16,17 +16,21 @@
     <ul class="list-none space-y-6">
         {% for post in list %}
         <li>
-            <a href="{{ post.url }}" class="w-full h-full block bg-base-300 shadow-md p-4 text-primary-content">
+            <a href="{{ post.url }}"
+                class="transition ease-in-out delay-150 w-full h-full block bg-base-300 hover:scale-110 hover:bg-base-200 shadow-md p-4 text-primary-content">
                 <div class="flex justify-between text-xl">
                     {{ post.data.title }}
 
-                    {% for tag in post.data.tags %}
-                    {% if tag !== 'posts' %}
-                    <span class="tag bg-primary rounded-xl py-1 px-3 text-sm" href="/tags/{{ tag }}">
-                        #{{ tag }}
-                    </span>
-                    {% endif %}
-                    {% endfor %}
+                    <div class="flex gap-x-3">
+                        {% for tag in post.data.tags %}
+                        {% if tag !== 'posts' %}
+                        <span class="hidden lg:block tag bg-primary rounded-xl py-1 px-3 text-sm"
+                            href="/tags/{{ tag }}">
+                            #{{ tag }}
+                        </span>
+                        {% endif %}
+                        {% endfor %}
+                    </div>
                 </div>
                 <h6 class="text-sm text-base-content">{{ post.date | w3DateFilter }}</h6>
             </a>