From 7de8d94e989463e3c9cbaa04b178db891a9c27ec Mon Sep 17 00:00:00 2001
From: Cyper <cyperita@gmail.com>
Date: Tue, 15 Jul 2025 02:23:47 -0400
Subject: [PATCH] Added placeholder image, finalized <main> layout

---
 public/css/home.css       | 40 ++++++++++++++++++++++++++++++---------
 public/css/style.css      |  4 +---
 src/_includes/layout.html | 12 +++++++++++-
 3 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/public/css/home.css b/public/css/home.css
index ea115be..17182c3 100644
--- a/public/css/home.css
+++ b/public/css/home.css
@@ -85,12 +85,20 @@
   border-radius: 75%;
 }
 
+main {
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100% - var(--navbar-height) - var(--footer-height));
+}
 main > * {
   padding: 3rem;
 }
 main > :nth-child(2n) {
   background-color: rgba(var(--brown), 0.21);
 }
+main > :last-child {
+  flex: 1 0 auto;
+}
 
 .home-text {
   display: grid;
@@ -105,13 +113,19 @@ main > :nth-child(2n) {
   font-weight: 600;
 }
 
-.featured {
+.featured,
+.about {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
 }
-.featured > h1 {
+.featured img {
+  object-fit: cover;
+  object-position: center;
+  width: 100%;
+}
+.featured > h1,
+.about > h1 {
   font-size: 3.25rem;
   font-weight: 400;
   color: rgba(var(--black), 0.86);
@@ -120,17 +134,27 @@ main > :nth-child(2n) {
   display: flex;
   flex-direction: column;
   margin-top: 2rem;
+  width: 100%;
 }
 .featured p, .featured a {
   margin-top: 1rem;
   display: inline-block;
 }
 .featured > div > * {
-  text-align: end;
+  text-align: center;
 }
 .featured h2 {
   font-size: 2.25rem;
   font-weight: 300;
+  margin-top: 1rem;
+}
+
+.about > div {
+  margin-top: 2rem;
+}
+
+.about * {
+  text-align: center;
 }
 
 /* Grid Pattern */
@@ -194,10 +218,8 @@ main > :nth-child(2n) {
   .featured > div {
     flex-direction: row;
   }
-  .featured > div > :first-child {
-    flex: 1;
-  }
-  .featured > div > :last-child {
-    flex: 2;
+  .featured > div > * {
+    text-align: end;
+    padding-left: 2rem;
   }
 }
\ No newline at end of file
diff --git a/public/css/style.css b/public/css/style.css
index 7da5963..e34ffbb 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -16,6 +16,7 @@
 
 * {
   font-family: "Lato", sans-serif;
+  box-sizing: border-box;
 }
 
 html, body {
@@ -32,9 +33,6 @@ html, body, p, h1, h2, h3, h4, h5, h6 {
 body {
   background-color: var(--background-color);
 }
-body > * {
-  box-sizing: border-box;
-}
 
 header {
   background-color: var(--header-color);
diff --git a/src/_includes/layout.html b/src/_includes/layout.html
index f65c613..14d590c 100644
--- a/src/_includes/layout.html
+++ b/src/_includes/layout.html
@@ -74,7 +74,7 @@
         <h1>Featured Posts</h1>
         <div>
           <div>
-            <!-- image -->
+            <img src="https://dummyimage.com/1280x720/fff/aaa" alt="Featured Post Image" />
           </div>
           <div>
             <h2>Latest Post Title Goes Here</h2>
@@ -84,6 +84,16 @@
         </div>
       </div>
     </div>
+    <div>
+      <div class="container about">
+        <h1>The Skinny</h1>
+        <div>
+          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut dolore, architecto voluptates eaque minima doloremque aperiam quaerat quidem veniam animi earum debitis suscipit cum quod sint laudantium, dolores tempore aut. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut dolore, architecto voluptates eaque minima doloremque aperiam quaerat quidem veniam animi earum debitis suscipit cum quod sint laudantium, dolores tempore aut.</p>
+          <br>
+          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut dolore, architecto voluptates eaque minima doloremque aperiam quaerat quidem veniam animi earum debitis suscipit cum quod sint laudantium, dolores tempore aut.</p>
+        </div>
+      </div>
+    </div>
   </main>
   <footer>
     <div class="container">