From 2ccb68d1b6bd53b813d05e5086df7d53ab6058e4 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Mon, 6 Nov 2023 23:50:46 +0100
Subject: [PATCH] Footer wip

---
 assets/css/baseof.css          |  1 +
 assets/css/partials/footer.css | 22 ++++++++++++++++++++++
 assets/js/baseof.js            |  6 ++++++
 layouts/_default/baseof.html   |  2 ++
 layouts/partials/footer.html   | 18 ++++++++++++++++++
 layouts/partials/header.html   |  5 -----
 6 files changed, 49 insertions(+), 5 deletions(-)
 create mode 100644 assets/css/partials/footer.css
 create mode 100644 layouts/partials/footer.html

diff --git a/assets/css/baseof.css b/assets/css/baseof.css
index cd9296a..1a142a1 100644
--- a/assets/css/baseof.css
+++ b/assets/css/baseof.css
@@ -55,6 +55,7 @@ body {
 
 main {
   width: 85%;
+  min-height: 70vh;
   margin: auto;
 }
 
diff --git a/assets/css/partials/footer.css b/assets/css/partials/footer.css
new file mode 100644
index 0000000..8c909a4
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/assets/js/baseof.js b/assets/js/baseof.js
index bc05e52..ebd5a1c 100644
--- a/assets/js/baseof.js
+++ b/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'
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 10760ee..c246b4d 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -24,5 +24,7 @@
     <main>
       {{ block "main" . }}{{ end }}
     </main>
+
+    {{ partial "footer.html" . }}
   </body>
 </html>
\ No newline at end of file
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
new file mode 100644
index 0000000..ed28a0e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 95d260a..7777613 100644
--- a/layouts/partials/header.html
+++ b/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>