Progress sync to test on live

public/css/home.css

@@ -68,27 +68,119 @@
   margin: auto;
 }
 
+main > * {
+  padding: 3rem;
+}
+main > :nth-child(2n) {
+  background-color: rgba(var(--brown), 0.21);
+}
+
+.home-text {
+  display: grid;
+  place-items: center;
+  text-align: center;
+}
+.home-text > div > * {
+  margin: 2rem 0;
+}
+.home-text h1 {
+  font-size: 3rem;
+  font-weight: 600;
+}
+
+.featured {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.featured > h1 {
+  font-size: 3.25rem;
+  font-weight: 400;
+  color: rgba(var(--black), 0.86);
+}
+.featured > div {
+  display: flex;
+  flex-direction: column;
+  margin-top: 2rem;
+}
+.featured p, .featured a {
+  margin-top: 1rem;
+  display: inline-block;
+}
+.featured > div > * {
+  text-align: end;
+}
+.featured h2 {
+  font-size: 2.25rem;
+  font-weight: 300;
+}
+
 /* Grid Pattern */
 .home-grid-container {
   padding: 0 15% 2rem 15%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .home-grid {
   display: grid;
   aspect-ratio: 1 / 1;
-  width: 100%;
+  width: 30rem;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 1fr);
   box-sizing: border-box;
 }
+.home-grid > * {
+  animation: spin-out 0.5s cubic-bezier(0.67, -0.02, 0.23, 0.99);
+}
+.home-grid > *:hover {
+  animation: spin-in 0.5s cubic-bezier(0.67, -0.02, 0.23, 0.99);
+}
 .home-grid svg {
   width: 100%;
   height: 100%;
   display: block;
 }
 
+@keyframes spin-in {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes spin-out {
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}
+
 /* -md */
 @media (min-width: 992px) {
   .home-grid-container {
     padding: 0;
   }
+  .home-text {
+    padding: 0 2rem;
+  }
+  .home-text h1 {
+    font-size: 4rem;
+  }
+  .featured > h1 {
+    font-size: 4rem;
+  }
+  .featured > div {
+    flex-direction: row;
+  }
+  .featured > div > :first-child {
+    flex: 1;
+  }
+  .featured > div > :last-child {
+    flex: 2;
+  }
 }

public/css/style.css

@@ -8,12 +8,16 @@
   --tan: 158, 144, 112;
   --lightblue: 147, 225, 242;
 
-  --background-color: white;
+  --background-color: rgba(var(--tan), .12);
-  --header-color: white;
+  --header-color: var(--background-color);
   --footer-color: rgba(var(--teal));
   --borders: 1px solid rgba(var(--black), .86);
 }
 
+* {
+  font-family: "Lato", sans-serif;
+}
+
 html, body {
   height: 100vh;
   width: 100vw;
@@ -26,8 +30,6 @@ html, body, p, h1, h2, h3, h4, h5, h6 {
 }
 
 body {
-  /* display: grid;
-  grid-template-rows: var(--navbar-height) calc(100% - var(--navbar-height) - var(--footer-height)) var(--footer-height); */
   background-color: var(--background-color);
 }
 body > * {
@@ -40,10 +42,6 @@ header {
   font-variant: small-caps;
   height: var(--navbar-height);
 }
-main {
-  padding: 1rem;
-  height: calc(100% - var(--navbar-height) - var(--footer-height));
-}
 footer {
   background-color: var(--footer-color);
   border-top: var(--borders);
@@ -52,7 +50,10 @@ footer {
 
 .color-teal {
   color: rgba(var(--teal), .86);
-  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
+  text-shadow: -1px -1px 0 rgba(var(--black), .52),
+                1px -1px 0 rgba(var(--black), .52),
+               -1px 1px 0 rgba(var(--black), .52), 
+                1px 1px 0 rgba(var(--black), .52);
 }
 .color-tan {
   color: rgba(var(--tan), .86);
@@ -79,13 +80,6 @@ nav {
   height: 64px;
 }
 
-.nav-logo > p {
-  color: red;
-}
-.nav-logo > p > span {
-  color: blue;
-}
-
 .nav-title {
   display: flex;
   align-items: center;

src/_includes/layout.html

@@ -7,6 +7,10 @@
 
   <!-- TODO: Meta tags for embedding -->
 
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
+
   <link rel="stylesheet" href="/css/style.css">
   <link rel="stylesheet" href="/css/home.css">
 
@@ -34,11 +38,14 @@
     </nav>
   </header>
   <main>
+    <div>
       <div class="container flex-adaptive">
-      <div class="flex-1">
+        <div class="flex-1 home-text">
-        <h1>Welcome to <span class="color-teal">Cyper's Blog</span>!</h1>
+          <div>
+            <h1 class="color-teal">Cyper's Blog</h1>
             <p>Where you can experience stories <span class="">side-by-side</span> with <span class="">Cyper</span></p>
           </div>
+        </div>
         <div class="flex-1 home-grid-container">
           <div class="home-grid">
             <div class="fill-background fill-teal border-round-1 border-round-tl border-round-bl"></div>
@@ -46,8 +53,10 @@
             <div class="fill-background fill-brown border-round-2 border-round-tr"></div>
 
             <div class="fill fill-tan">
+              <div>
                 {% squareSvg 10 %}
               </div>
+            </div>
             <div class="fill-background fill-lightblue border-round border-round-2"></div>
             <div class="fill-background fill-brown border-round-2 border-round-br"></div>
 
@@ -59,6 +68,22 @@
           </div>
         </div>
       </div>
+    </div>
+    <div>
+      <div class="container featured">
+        <h1>Featured Posts</h1>
+        <div>
+          <div>
+            <!-- image -->
+          </div>
+          <div>
+            <h2>Latest Post Title Goes Here</h2>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias nisi dolorem velit facere ea? Fugit dolor libero dolorem laborum sapiente labore quidem eos, ratione deleniti. Hic sunt ea aspernatur iusto!</p>
+            <a href="#">Read more...</a>
+          </div>
+        </div>
+      </div>
+    </div>
   </main>
   <footer>
     <div class="container">