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 b89b03cbfc2383f8a103d508b6f61f4415efaec3..07deb26f73f3fea0216bdbb68c0926a8050e6c12 100644 (file)
--- 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 10f7ad00ba9a25d9ba998fa42af4d56e66c83a93..12b93c93108b64e1b65c5cc53c04572e7614051e 100644 (file)
--- 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 bc757bfa3160c8d3573b9c81bb07c6c19adf85c4..467525dac82484a22f1c078ea0b6b8b5d535eeca 100644 (file)
--- 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 cd74ce5d8b831010f71941284bbb9908af619ab9..8b5301004be57d6ce362f5c042c14dab782386c2 100644 (file)
--- 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%;