From: Ardis Lu <ardisglu@gmail.com>
Date: Mon, 29 Mar 2021 03:14:01 +0000 (-0700)
Subject: Refactor CSS to be reusable in both index.html and 404.html
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=083b6c3489d31b8cefd7ec299b4d2eb5c5ea2538;p=ardislu.dev

Refactor CSS to be reusable in both index.html and 404.html

Added class names to distinguish common elements between both pages.
---

diff --git a/404.html b/404.html
index b89b03c..07deb26 100644
--- a/404.html
+++ b/404.html
@@ -15,7 +15,7 @@
       </a>
     </header>
     <main>
-      <article></article>
+      <article class="post"></article>
     </main>
     <script>
       const article = document.getElementsByTagName("article")[0];
diff --git a/index.html b/index.html
index 10f7ad0..12b93c9 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@
         <img src="/github.svg" width="24" height="24" alt="GitHub" />
       </a>
     </header>
-    <main></main>
+    <main class="card-container"></main>
     <script src="/script.js"></script>
   </body>
 </html>
diff --git a/script.js b/script.js
index bc757bf..467525d 100644
--- a/script.js
+++ b/script.js
@@ -14,12 +14,14 @@ const createColumnElement = () => {
 
 const createSkeletonElement = () => {
   const el = document.createElement("article");
+  el.classList.add("card");
   el.innerHTML = '<div class="skeleton-line"></div>'.repeat(6);
   return el;
 };
 
 const createArticleElement = (article) => {
   const el = document.createElement("article");
+  el.classList.add("card");
   el.innerHTML = `<h2>${article[0]}</h2><p>${article[1]}</p><p><a href="/posts/${article[2]}">Read More</a></p>`;
   return el;
 };
diff --git a/style.css b/style.css
index cd74ce5..8b53010 100644
--- a/style.css
+++ b/style.css
@@ -23,11 +23,15 @@ a:hover, a:focus {
   text-decoration: underline;
 }
 
-main {
+.card-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
   grid-gap: 1rem;
-  justify-items: center;
+  margin: 0 auto;
+  max-width: 1440px;
+}
+
+.post {
   margin: 0 auto;
   max-width: 1440px;
 }
@@ -39,7 +43,7 @@ main {
   width: 100%;
 }
 
-article {
+.card {
   margin-bottom: 1rem;
   padding: 0 1rem;
   width: 100%;