Merge branch 'initial-layout'

public/css/home.css

@@ -71,7 +71,6 @@
   justify-content: center;
   position: relative;
 }
-
 .diamond::after {
   content: "";
   position: absolute;
@@ -88,7 +87,6 @@
 main {
   display: flex;
   flex-direction: column;
-  min-height: calc(100% - var(--navbar-height) - var(--footer-height));
 }
 main > * {
   padding: 3rem;
@@ -126,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);
 }
@@ -210,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

@@ -1,6 +1,5 @@
 :root {
   --navbar-height: 96px;
-  --footer-height: 24px;
 
   --teal: 162, 223, 203;
   --black: 25, 23, 30;
@@ -43,7 +42,6 @@ header {
 footer {
   background-color: var(--footer-color);
   border-top: var(--borders);
-  height: var(--footer-height);
 }
 
 .color-teal {
@@ -72,33 +70,79 @@ nav {
   align-items: center;
   justify-content: space-between;
 }
-
+nav > div:first-child {
+  margin-left: 1.25rem;
+}
+nav > div:last-child {
+  margin-right: 1rem;
+}
+nav > * {
+  width: 33.33%;
+}
+nav .hamburger {
+  border: none;
+  background-color: transparent;
+}
+nav .hamburger ion-icon {
+  margin-top: 0.15rem;
+}
 .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-hyperlinks li:not([data-mobile]) {
+  display: none;
+}
+.nav-hyperlinks li[data-mobile] {
+  display: list-item;
+}
 
-.nav-socials > a > svg {
+.nav-hyperlinks a span {
-  padding: 0.5rem;
+  display: inline-block;
-  border: var(--borders);
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 0;
+  transition: max-width 0.25s linear;
+  margin-left: 0.25rem;
+}
+
+.nav-hyperlinks a:hover span {
+  max-width: 100px;
 }
 
 .flex-adaptive {
@@ -109,6 +153,85 @@ nav {
   flex: 1;
 }
 
+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: 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: 2rem;
+}
+
 /* -xs */
 @media (min-width: 576px) {
   .container {
@@ -126,9 +249,37 @@ nav {
   .container {
     max-width: 960px;
   }
+  nav > div:first-child,
+  nav > div:last-child {
+    margin: 0;
+  }
+  .nav-hyperlinks li[data-mobile] {
+    display: none;
+  }
+  .nav-hyperlinks li:not([data-mobile]) {
+    display: list-item;
+  }
   .flex-adaptive {
     flex-direction: row;
   }
+  footer ul {
+    width: fit-content;
+  }
+  footer > div {
+    flex-direction: row;
+  }
+  footer > div > * {
+    width: fit-content;
+  }
+  footer > div > *:first-child {
+    text-align: start;
+  }
+  footer > div > :last-child {
+    margin-top: 0;
+  }
+  .footer-links {
+    text-align: start;
+  }
 }
 /* -lg */
 @media (min-width: 1200px) {

src/_data/metadata.js

@@ -11,7 +11,7 @@ export default {
 		url: "https://cyper.cc"
 	},
   
-	title: "Cy by Side!",
+	title: "Cy-by-Side",
 	url: "https://cy.cyper.cc/",
 	language: "en",
 	description: "Cy by Side with Cyper: Tangents, Tech, and Thoughtful Takes.",

src/_includes/layout.html

@@ -44,22 +44,39 @@
 </head>
 <body>
   <header>
-    <nav class="container h-100">
+    <nav class="container h-100" aria-label="Main nav">
       <div class="nav-logo">
         <img class="site-logo" src="/img/logo.png" alt="CyBySide logo" />
       </div>
       <div class="nav-title">
         <h1>{{ metadata.title }}</h1>
-        <ul>
-          <li><a href="/">Home</a></li>
-          <li><a href="/posts">Posts</a></li>
-          <li><a href="/about">About</a></li>
-        </ul>
       </div>
-      <div class="nav-socials">
+      <div class="nav-hyperlinks">
-        <a href="#"><i data-lucide="twitter"></i></a>
+        <ul>
-        <a href="#"><i data-lucide="youtube"></i></a>
+          <li data-mobile>
-        <a href="#"><i data-lucide="rss"></i></a>
+            <button class="hamburger" aria-label="Toggle menu">
+              <ion-icon name="menu-sharp"></ion-icon>
+            </button>
+          </li>
+          <li>
+            <a href="/">
+              <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>
   </header>
@@ -123,13 +140,40 @@
   </main>
   <footer>
     <div class="container">
-      <a style="text-decoration: none;" href="{{ metadata.author.url }}">{{ metadata.author.name }}</a> &copy; {{ metadata.year }}
+      <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>by {{ metadata.author.name }}</p>
+        <h4>Connect with me!</h4>
+        
+        <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>
   </footer>
 
-  <script src="https://unpkg.com/lucide@latest"></script>
+  <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
-  <script>
+  <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
-    lucide.createIcons();
-  </script>
 </body>
 </html>