From 00d2c7a732389d33ced39db102d42b07a8e2cf1b Mon Sep 17 00:00:00 2001
From: Christian Aranas <aranaschristianlouise@gmail.com>
Date: Fri, 17 May 2024 20:09:55 +0800
Subject: [PATCH] Changed design of cards in `blog-entry`s via the web
 component implementation

The cards now look like Cards commonly used in Material Design.
---
 components/blog-entry.webc |  2 +-
 pages/index.webc           | 54 ++++++++++++++++++--------------------
 2 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/components/blog-entry.webc b/components/blog-entry.webc
index b45ab1a..553de55 100644
--- a/components/blog-entry.webc
+++ b/components/blog-entry.webc
@@ -1,7 +1,7 @@
 <div webc:root class="mx-auto w-full flex flex-wrap justify-evenly">
   <div
     id="template"
-    class="hidden w-full lg:w-1/3 m-6 p-4 bg-[rgba(230,81,0,0.90)] rounded-lg shadow-lg"
+    class="hidden w-full lg:w-1/3 m-6 bg-[rgba(230,81,0,0.90)] rounded-lg shadow-lg"
   ></div>
   <slot></slot>
 </div>
diff --git a/pages/index.webc b/pages/index.webc
index fb711c1..09d7524 100644
--- a/pages/index.webc
+++ b/pages/index.webc
@@ -69,37 +69,33 @@
                   loadingSpinner.remove();
                   for (let article of res.data.articles.data) {
                     let content = `
-                  <div class="rounded-lg">
-                    <article class="group">
-                      <a href="/tailwind-infinix-website/blog/${article.attributes.BlogID}">
-                        <img
-                          alt=""
-                          src="https://chrsrns-database.domcloud.dev${article.attributes.HeaderImg.data.attributes.url}"
-                          class="w-full rounded-xl object-cover shadow-xl transition group-hover:grayscale-[50%]"
-                        />
-                      </a>
+                      <div class="rounded-lg">
+                        <article class="group">
+                          <a href="/tailwind-infinix-website/blog/${article.attributes.BlogID}">
+                            <img
+                              alt=""
+                              src="https://chrsrns-database.domcloud.dev${article.attributes.HeaderImg.data.attributes.url}"
+                              class="w-full rounded-lg object-cover shadow-xl transition group-hover:grayscale-[50%]"
+                            />
+                          </a>
 
-                      <div class="p-4">
-                        <a href="/tailwind-infinix-website/blog/${article.attributes.BlogID}">
-                          <h3 class="text-lg font-medium text-gray-900">
-                            ${article.attributes.Title}
-                          </h3>
-                        </a>
-
-                        <p class="my-2 text-sm/relaxed text-gray-900">
-                          This is a functional, full-stack website that is complete with
-                          an interactible calendar, a websocket notification and chat
-                          system and roles.
-                        </p>
+                          <div class="p-4">
+                            <a href="/tailwind-infinix-website/blog/${article.attributes.BlogID}">
+                              <h3 class="text-lg font-medium text-gray-900">
+                                ${article.attributes.Title}
+                              </h3>
+                            </a>
+                          </div>
+                          <div class="px-4 pb-4">
+                            <a href="/tailwind-infinix-website/blog/${article.attributes.BlogID}">
+                              <button class="bg-yellow-500 hover:bg-yellow-700 text-gray-900 font-medium py-2 px-4 rounded">
+                                Visit Page
+                              </button>
+                            </a>
+                          </div>
+                        </article>
                       </div>
-                      <a href="/tailwind-infinix-website/blog/${article.attributes.BlogID}">
-                        <button class="bg-yellow-500 hover:bg-yellow-700 text-gray-900 font-medium py-2 px-4 rounded">
-                          Visit Page
-                        </button>
-                      </a>
-                    </article>
-                  </div>
-                  `;
+                      `;
                     let clone = template.cloneNode(false);
                     clone.removeAttribute("id");
                     clone.classList.remove("hidden");