add and style footer, keep footer always on bottom of the viewport

2017-09-26 17:59:56 +02:00
parent 500b103c03
commit ceca213bfe
8 changed files with 339 additions and 117 deletions
--- a/assets/stylesheets/footer.css
+++ b/assets/stylesheets/footer.css
@@ -0,0 +1,66 @@
+#footer {
+  margin: var(--grid-gutter) 0;
+  padding-top: var(--grid-gutter);
+
+  border-top: 2px solid var(--color-bg-separator);
+
+  & .upper {
+    display: flex;
+
+    & > * {
+      display: flex;
+      align-items: center;
+    }
+
+    & .navigation {
+      flex: 1 0 auto;
+      font-size: 0.9em;
+
+      & ul {
+        display: flex;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        & li {
+          margin: 0;
+
+          & + li {
+            margin-left: calc(var(--grid-gutter) * 2);
+          }
+        }
+      }
+    }
+
+    & .apps {
+      flex: 0 0 auto;
+
+      & a {
+        display: inline-block;
+        width: 150px;
+
+        & + a {
+          margin-left: var(--grid-gutter);
+        }
+
+        & img {
+          width: 100%;
+          height: auto;
+        }
+      }
+    }
+  }
+  & .lower {
+    display: flex;
+
+    & .disclaimer {
+      flex: 1 0 auto;
+      font-size: 0.7em;
+      color: var(--color-text-grey);
+    }
+    & .social {
+      flex: 0 0 auto;
+    }
+  }
+}
+