Progress commit

public/css/home.css

@@ -88,7 +88,6 @@
 main {
   display: flex;
   flex-direction: column;
-  min-height: calc(100% - var(--navbar-height) - var(--footer-height));
 }
 main > * {
   padding: 3rem;

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 {
@@ -96,9 +94,14 @@ nav {
   padding: 0 1rem;
 }
 
-.nav-socials > a > svg {
+.nav-socials > a > ion-icon {
-  padding: 0.5rem;
+  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: 1rem 0.5rem;
 }
 
 .flex-adaptive {
@@ -109,6 +112,21 @@ nav {
   flex: 1;
 }
 
+footer {
+  padding: 3rem 1.5rem;
+}
+footer h3 {
+  font-size: 2rem;
+}
+footer > div {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+footer > div > * {
+  width: 50%;
+}
+
 /* -xs */
 @media (min-width: 576px) {
   .container {
@@ -129,6 +147,15 @@ nav {
   .flex-adaptive {
     flex-direction: row;
   }
+  footer > div {
+    flex-direction: row;
+  }
+  footer > div > :first-child {
+    text-align: left;
+  }
+  footer > div > :last-child {
+    text-align: right;
+  }
 }
 /* -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

@@ -30,11 +30,6 @@
           <li><a href="/about">About</a></li>
         </ul>
       </div>
-      <div class="nav-socials">
-        <a href="#"><i data-lucide="twitter"></i></a>
-        <a href="#"><i data-lucide="youtube"></i></a>
-        <a href="#"><i data-lucide="rss"></i></a>
-      </div>
     </nav>
   </header>
   <main>
@@ -97,13 +92,24 @@
   </main>
   <footer>
     <div class="container">
-      <a style="text-decoration: none;" href="{{ metadata.author.url }}">{{ metadata.author.name }}</a> &copy; {{ metadata.year }}
+      <div>
+        <h3>{{ metadata.title }}</h3>
+        <p>Connect with me!</p>
+        
+        <div class="nav-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>
 
-  <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>