Finished layout for footer

public/css/home.css

@@ -71,7 +71,6 @@
   justify-content: center;
   position: relative;
 }
-
 .diamond::after {
   content: "";
   position: absolute;
@@ -125,7 +124,7 @@ main > :last-child {
 }
 .featured > h1,
 .about > h1 {
-  font-size: 3.25rem;
+  font-size: 2.5rem;
   font-weight: 400;
   color: rgba(var(--black), 0.86);
 }
@@ -209,10 +208,10 @@ main > :last-child {
     padding: 0 2rem;
   }
   .home-text h1 {
-    font-size: 4rem;
+    font-size: 3rem;
   }
   .featured > h1 {
-    font-size: 4rem;
+    font-size: 3rem;
   }
   .featured > div {
     flex-direction: row;

public/css/style.css

@@ -70,38 +70,60 @@ nav {
   align-items: center;
   justify-content: space-between;
 }
-
+nav > * {
+  width: 33.33%;
+}
 .nav-logo > img {
   width: 64px;
   height: 64px;
 }
-
 .nav-title {
-  display: flex;
   align-items: center;
+}
+.nav-hyperlinks, .nav-title {
+  display: flex;
   flex-direction: column;
 }
-.nav-title > ul {
+.nav-hyperlinks {
+  align-items: end;
+}
+.nav-hyperlinks > ul {
   list-style: none;
   margin: 0.5rem 0;
   padding: 0;
 }
-.nav-title > ul > li {
+.nav-hyperlinks > ul > li {
   display: inline;
   float: left;
 }
-.nav-title > ul > li > a {
+.nav-hyperlinks > ul > li > a {
   padding: 0 1rem;
 }
+.nav-hyperlinks a {
+  display: flex;
+  align-items: center;
+  align-content: center;
+  text-decoration: none;
+  color: rgba(var(--black), .52);
+}
+.nav-hyperlinks a:hover {
+  color: rgba(var(--black), .86);
+}
+.nav-hyperlinks ion-icon {
+  font-size: 28px;
+}
 
-.nav-socials > a > ion-icon {
+.nav-hyperlinks a span {
-  color: rgba(var(--lightblue), .86);
+  display: inline-block;
-  background-color: rgba(var(--brown), .86);
+  overflow: hidden;
-  border-radius: 100%;
+  white-space: nowrap;
-  border: var(--borders);
+  max-width: 0;
-  box-sizing: content-box;
+  transition: max-width 0.25s linear;
-  padding: 0.5rem;
+  margin-left: 0.25rem;
-  margin: 1rem 0.5rem;
+}
+
+.nav-hyperlinks a:hover span {
+  max-width: 100px;
 }
 
 .flex-adaptive {
@@ -114,17 +136,81 @@ nav {
 
 footer {
   padding: 3rem 1.5rem;
+  color: rgba(var(--black), .86);
+}
+footer a {
+  text-decoration: none;
+  color: rgba(var(--black), .52);
+}
+footer a:hover {
+  color: rgba(var(--black), .86);
 }
 footer h3 {
   font-size: 2rem;
 }
+footer h4 {
+  font-size: 1.25rem;
+  font-weight: 400;
+  margin-bottom: 1rem;
+}
+footer p {
+  margin: 0 0 0.5rem 0;
+  font-size: 0.85rem;
+  color: rgba(var(--black), .52);
+}
 footer > div {
   display: flex;
   flex-direction: column;
+  justify-content: space-around;
   width: 100%;
 }
 footer > div > * {
-  width: 50%;
+  width: 100%;
+  text-align: center;
+}
+footer > div > :last-child {
+  margin-top: 1rem;
+}
+footer ul {
+  width: 100%;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+footer ul li {
+  margin: 0.5rem 0;
+}
+footer ul li:first-child {
+  margin-top: 0;
+}
+footer ul li:last-child {
+  margin-bottom: 0;
+}
+.footer-socials > a > ion-icon {
+  color: rgba(var(--lightblue), .86);
+  background-color: rgba(var(--brown), .86);
+  border-radius: 100%;
+  border: var(--borders);
+  box-sizing: content-box;
+  padding: 0.5rem;
+  margin: 0 0.5rem;
+}
+.footer-socials > a:first-child > ion-icon {
+  margin-left: 0;
+}
+.footer-socials > a:last-child > ion-icon {
+  margin-right: 0;
+}
+.footer-links {
+  display: flex;
+  text-align: center;
+  margin: 1rem 0 0 0;
+}
+.footer-links > * {
+  flex-grow: 1;
+}
+.footer-links > :last-child {
+  margin-left: rem;
 }
 
 /* -xs */
@@ -147,14 +233,23 @@ footer > div > * {
   .flex-adaptive {
     flex-direction: row;
   }
+  footer ul {
+    width: fit-content;
+  }
   footer > div {
     flex-direction: row;
   }
-  footer > div > :first-child {
+  footer > div > * {
-    text-align: left;
+    width: fit-content;
+  }
+  footer > div > *:first-child {
+    text-align: start;
   }
   footer > div > :last-child {
-    text-align: right;
+    margin-top: 0;
+  }
+  .footer-links {
+    text-align: start;
   }
 }
 /* -lg */

src/_includes/layout.html

@@ -24,10 +24,27 @@
       </div>
       <div class="nav-title">
         <h1>{{ metadata.title }}</h1>
+      </div>
+      <div class="nav-hyperlinks">
         <ul>
-          <li><a href="/">Home</a></li>
+          <li>
-          <li><a href="/posts">Posts</a></li>
+            <a href="/">
-          <li><a href="/about">About</a></li>
+              <ion-icon name="home-sharp"></ion-icon>
+              <span>Home</span>
+            </a>
+          </li>
+          <li>
+            <a href="/posts">
+              <ion-icon name="newspaper-sharp"></ion-icon>
+              <span>Posts</span>
+            </a>
+          </li>
+          <li>
+            <a href="/about">
+              <ion-icon name="help-circle-sharp"></ion-icon>
+              <span>About</span>
+            </a>
+          </li>
         </ul>
       </div>
     </nav>
@@ -92,20 +109,36 @@
   </main>
   <footer>
     <div class="container">
+      <div>
+        <h3>Cyper Catalog</h3>
+        <div class="footer-links">
+          <div>
+            <h4>Websites</h4>
+            <ul>
+              <li><a href="#">Main Site</a></li>
+              <li><a href="#">Gitea</a></li>
+            </ul>
+          </div>
+          <div>
+            <h4>Consumables</h4>
+            <ul>
+              <li><a href="#">RSS Feed</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
       <div>
         <h3>{{ metadata.title }}</h3>
-        <p>Connect with me!</p>
+        <p>by {{ metadata.author.name }}</p>
+        <h4>Connect with me!</h4>
         
-        <div class="nav-socials">
+        <div class="footer-socials">
           <a href="#"><ion-icon name="logo-twitter"></ion-icon></a>
           <a href="#"><ion-icon name="logo-youtube"></ion-icon></a>
           <a href="#"><ion-icon name="logo-tiktok"></ion-icon></a>
           <a href="#"><ion-icon name="logo-rss"></ion-icon></a>
         </div>
       </div>
-      <div>
-        test
-      </div>
     </div>
   </footer>