Footer wip

assets/css/baseof.css

@@ -55,6 +55,7 @@ body {
 
 main {
   width: 85%;
+  min-height: 70vh;
   margin: auto;
 }
 

assets/css/partials/footer.css

@@ -0,0 +1,22 @@
+:root {
+    --footer-light-background: #ECECEC;
+    --footer-dark-background: #131212;
+}
+
+footer {
+    width: 100%;
+    min-height: 25rem;
+    padding: 3rem 5rem;
+    margin-top: 2.5rem;
+
+    display: flex;
+    align-items: start;
+    column-gap: 6rem;
+
+    background-color: var(--footer-background);
+    color: var(--text);
+}
+
+footer div {
+    width: 20rem;
+}

assets/js/baseof.js

@@ -34,6 +34,12 @@ function loadTheme() {
       ? 'var(--nav-light-background)'
       : 'var(--nav-dark-background)'
   );
+  root.style.setProperty(
+    '--footer-background',
+    theme === 'light'
+      ? 'var(--footer-light-background)'
+      : 'var(--footer-dark-background)'
+  );
   root.style.setProperty(
     '--header-shadow',
     theme === 'light' ? 'var(--shadow)' : 'none'

layouts/_default/baseof.html

@@ -24,5 +24,7 @@
     <main>
       {{ block "main" . }}{{ end }}
     </main>
+
+    {{ partial "footer.html" . }}
   </body>
 </html>

layouts/partials/footer.html

@@ -0,0 +1,18 @@
+{{ $styles := resources.Get "css/partials/footer.css" | toCSS | minify }}
+
+<link rel="stylesheet" href="{{ $styles.Permalink }}">
+
+<footer>
+    <div>
+        <h3>Recent Blogs</h3>
+    </div>
+    <div>
+        <h3>Recent Projects</h3>
+    </div>
+    <div>
+        <h3>About</h3>
+    </div>
+    <div>
+        <h3>Contact</h3>
+    </div>
+</footer>

layouts/partials/header.html

@@ -1,4 +1,3 @@
-
 {{ define "styles" }}
   {{ $styles := resources.Get "css/partials/header.css" | toCSS | minify }}
   
@@ -12,10 +11,6 @@
 {{ end }}
 
 {{ $headerFaceImage := resources.Get "images/header-face.png" }}
-{{ $sun := resources.Get "icons/sun.svg" }}
-{{ $moon := resources.Get "icons/moon.svg" }}
-{{ $burger := resources.Get "icons/burger.svg" }}
-{{ $close := resources.Get "icons/close.svg" }}
 {{ $cv := resources.Get "cv.pdf" }}
 
 <header>