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;
-  --header-color: white;
+  --background-color: rgba(var(--tan), .12);
+  --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;