site: add footer

5 files changed, 131 insertions, 7 deletions

diff --git a/components/footer.luax b/components/footer.luax
new file mode 100644
index 0000000..47d9532
--- /dev/null
+++ b/components/footer.luax
@@ -0,0 +1,28 @@
+return function()
+  return
+    <div class="footer-container">
+      <div class="footer">
+        <div class="footer-begin">
+          <p class="footer-item">
+            <strong>© {$ os.date("%Y ") $}</strong>
+            <a class="footer-link" href="https://duckonaut.dev">duckonaut.dev</a>
+          </p>
+          <p class="footer-item">
+            Made with <span class="footer-heart">♥ </span> in
+            <a class="footer-link" href="https://github.com/Duckonaut/reluax">Reluax</a>
+          </p>
+        </div>
+        <div class="footer-middle">
+        </div>
+        <div class="footer-end">
+          <a href="https://github.com/Duckonaut">
+            <img
+              class="footer-icon"
+              src={(reluax.dev_mode and "" or "https://cdn.duckonaut.dev")
+                .. "/assets/images/github.svg"
+              } alt="Github" />
+          </a>
+        </div>
+      </div>
+    </div>
+end
diff --git a/public/assets/app.css b/public/assets/app.css
index c98e9b0..4b0ad1f 100644
--- a/public/assets/app.css
+++ b/public/assets/app.css
@@ -4,6 +4,8 @@
   margin: 0 auto;
   padding: 1rem 1rem 1rem 1rem;
   text-align: center;
+  display: flex;
+  flex-grow: 1;
 }
 
 #app {
@@ -11,6 +13,9 @@
   text-align: center;
   align-content: center;
   justify-content: center;
+  min-height: 100% !important;
+  display: flex;
+  flex-direction: column;
 }
 
 .logo {
diff --git a/public/assets/index.css b/public/assets/index.css
index 9941a36..7bffb22 100644
--- a/public/assets/index.css
+++ b/public/assets/index.css
@@ -37,6 +37,10 @@
   --color-magenta: #b071fc;
 }
 
+html, body {
+  height: 100%;
+}
+
 a:link {
   font-weight: 500;
   color: #4fc1ff;
diff --git a/public/assets/navbar.css b/public/assets/navbar.css
index 9120052..1d80e35 100644
--- a/public/assets/navbar.css
+++ b/public/assets/navbar.css
@@ -1,7 +1,6 @@
 /* on big screens, navbar is fixed to the top of the screen */
 .navbar-container {
   position: fixed;
-  /* gradient from top to bottom, full to transparent */
   top: 0;
   width: 100%;
   z-index: 9999;
@@ -276,3 +275,88 @@
   color: #f2ce89;
   text-decoration: underline;
 }
+
+/* footer */
+/* if #app-main is taller than the viewport, push the footer to the bottom of the page */
+.footer-container {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  z-index: 9999;
+  margin: auto;
+}
+
+/* if #app-main is shorter than the viewport, push the footer to the bottom of the page */
+@media (max-height: 100vh) {
+  .footer-container {
+    position: static;
+  }
+}
+
+.footer {
+  max-width: 1280px;
+  margin-top: 2em;
+  margin-left: auto;
+  margin-right: auto;
+  padding-top: 20pt;
+  padding-bottom: 12pt;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  border-top: 2px solid #3e4451;
+  display: flex;
+  flex-direction: row;
+}
+
+.footer-begin {
+  align-self: left;
+  align-items: flex-start;
+  align-content: flex-start;
+}
+
+.footer-middle {
+  align-self: center;
+  align-items: center;
+  align-content: center;
+  flex-grow: 1;
+}
+
+.footer-end {
+  align-self: right;
+  align-items: flex-end;
+  align-content: flex-end;
+}
+
+.footer-item {
+  font-family: Hack, monospace;
+  font-size: 12pt;
+  color: #647089;
+  text-align: center;
+  float: none;
+  clear: left;
+  display: inline-block;
+  margin: 0 0.25em;
+  transition: all 0.2s ease-in-out;
+}
+
+.footer-link:link {
+  color: #647089;
+  text-decoration: underline;
+}
+
+.footer-link:visited {
+  color: #647089;
+  text-decoration: underline;
+}
+
+.footer-icon {
+  transition: all 0.2s ease-in-out;
+  width: 1.5em;
+  height: 1.5em;
+  filter: brightness(50%);
+}
+
+.footer-icon:hover {
+  transition: all 0.2s ease-in-out;
+  filter: brightness(100%) drop-shadow(0 0 0.5em #647089);
+}
diff --git a/reluax.luax b/reluax.luax
index 1cfc04c..cb45ae6 100644
--- a/reluax.luax
+++ b/reluax.luax
@@ -1,5 +1,6 @@
 local Common = require("common")
 local Navbar = require("components.navbar")
+local Footer = require("components.footer")
 local AnimatedBg = require("components.animated_bg")
 
 local Home = require("pages.home")
@@ -17,12 +18,13 @@ math.randomseed(os.time())
 local function wrap_component(component)
     return
     <Common>
-        <Navbar />
-        <div class="back-shadows"></div>
-        <div id="app-main">
-            {$ component $}
-            <AnimatedBg />
-        </div>
+      <Navbar />
+      <div class="back-shadows"></div>
+      <div id="app-main">
+        {$ component $}
+        <AnimatedBg />
+      </div>
+      <Footer />
     </Common>
 end
 
@@ -56,6 +58,7 @@ local function route(path)
               <Blogpost post={post} />
               <AnimatedBg />
             </div>
+            <Footer />
           </Common>
 
         return 200, article