3 files changed, 94 insertions, 1 deletions
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);
+}