Added placeholder image, finalized <main> layout

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;
   }
 }

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);

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">