Continue Header, Footer, add SkipNavLink

src/components/Footer.astro

@@ -1,4 +1,6 @@
 ---
+// import Logo from "../assets/ci/side-gradient.svg";
+
 function getCurrentYear() {
     return new Date().getFullYear();
 }
@@ -9,35 +11,39 @@ function getCurrentYear() {
     <nav>
         {/* Explore */}
         <div class="explore">
-            <span>Explore</span>
+            <span class="list-title">Explore</span>
             <ul>
-                <li>Home</li>
-                <li>Blog</li>
+                <li><a href="/">Home</a></li>
+                <li><a href="/blog">Blog</a></li>
             </ul>
         </div>
 
         {/* Follow us */}
         <div class="follow">
-            <span>Reach out to us</span>
+            <span class="list-title">Reach out to us</span>
             <ul>
-                <li>+43 670 4011 885</li>
-                <li>office@tideshiftdigital.com</li>
+                <li><a href="tel:+436704011885">+43 670 4011 885</a></li>
+                <li>
+                    <a href="mailto:office@tideshiftdigital.com"
+                        >office@tideshiftdigital.com</a
+                    >
+                </li>
             </ul>
 
             {/* Socials */}
-            <ul class="socials">
+            {/*<ul class="socials">
                 <li>icon</li>
                 <li>icon</li>
                 <li>icon</li>
-            </ul>
+            </ul> */}
         </div>
 
         {/* Legal */}
         <div class="legal">
-            <span>Legal</span>
+            <span class="list-title">Legal</span>
             <ul>
-                <li>Privacy Policy</li>
-                <li>Imprint</li>
+                <li><a href="/privacy-policy">Privacy Policy</a></li>
+                <li><a href="/imprint">Imprint</a></li>
             </ul>
         </div>
     </nav>
@@ -46,16 +52,13 @@ function getCurrentYear() {
     <div class="info">
         <span>&copy; {getCurrentYear()} Tideshift Digital e.U.</span>
 
-        <span>Made with ❤️ in Vienna</span>
+        <span class="made">Made with ❤️ in Vienna.</span>
 
-        <div>
-            <span>Vienna, 12:09 CET</span>
-            <span>⛅ 12C</span>
-        </div>
+        <div class="no-ai">All content made by humans.</div>
     </div>
-    
-    {/* Typemark */}
-    <div></div>
+
+    {/* Logo, commented out because of gradient issues */}
+    {/* <Logo class="logo"/> */}
 </footer>
 
 <style>
@@ -66,35 +69,64 @@ function getCurrentYear() {
         padding-inline: 5rem;
     }
 
-    nav, .info {
-        display: flex;
-        justify-content: space-between;
+    nav,
+    .info {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
         gap: 2remm;
+        font-size: 0.875rem;
+        line-height: var(--leading-title);
     }
 
     ul {
         list-style: none;
+
+        & * {
+            margin-top: 0.75rem;
+        }
     }
 
     .explore {
-
     }
 
     .follow {
-
+        text-align: center;
     }
 
     .socials {
         display: flex;
+        justify-content: center;
         align-items: center;
         gap: 2rem;
+        margin-top: 2rem;
     }
 
     .legal {
+        text-align: end;
+    }
 
+    .list-title {
+        color: var(--clr-light-600);
     }
 
     .info {
         align-items: center;
+        justify-content: center;
+        margin-top: 3.5rem;
+        color: var(--clr-light-600);
+
+        & .made {
+            text-align: center;
+        }
+
+        & .no-ai {
+            text-align: end;
+        }
+    }
+
+    .logo {
+        width: 100%;
+        height: auto;
+        margin-top: 8rem;
     }
 </style>