Changed design of cards in blog-entrys via the web component implem…

…entation The cards now look like Cards commonly used in Material Design.
chrsrns · May 17, 2024 · 00d2c7a · 00d2c7a
1 parent 3787277
commit 00d2c7a
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 30 deletions.
diff --git 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
@@ -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");