Footer + fixing bugs

static/css/common.css

@@ -5,18 +5,24 @@ body {
     --light-font: 'Metropolis Light', 'Fira Sans Light','Ubuntu Light', 'Noto Sans Light', sans-serif;
     --primary-color: #50DC71;
     --nav-background: #FAFAFA;
+    --footer-background: #111111;
 }
 
-a:not(.default) {
-    text-decoration: none;
-    color: black;
-}
+
 
 .center {
     margin-right: auto;
     margin-left: auto;
 }
 
+.text-center {
+    text-align: center;
+}
+
+.right-center {
+    text-align: right;
+}
+
 .icon-as-text {
     width: 1em;
     height: 1em;
@@ -25,5 +31,17 @@ a:not(.default) {
 
 #content {
     padding: 1em;
-    width: 88rem;
+}
+
+/* Columns */
+.columns-container {
+    display: flex;
+}
+
+.column {
+    flex: auto;
+}
+
+.col3 {
+    width: 33%;
 }

static/css/footer.css

@@ -0,0 +1,17 @@
+
+footer {
+    width: 100%;
+    background: var(--footer-background);
+    color: white;
+}
+
+.footer-social-list {
+    display: flex;
+    font-size: 17px;
+}
+
+@media screen and (max-width: 550px) {
+    footer {
+        font-size: 10px;
+    }
+}

static/css/header.css

@@ -4,8 +4,7 @@ nav {
     height: 3em;
     background: var(--nav-background);
     width: 100%;
-    font-family: var(--light-font)
-    z-index: 3;
+    font-family: var(--light-font);
 }
 
 nav .nav-flex {
@@ -19,20 +18,20 @@ nav .navbar-brand {
     display: flex;
 }
 
-.navbar-brand .icon-brand {
+nav .navbar-brand .icon-brand {
     width: 2.5em;
     height: 2.5em;
     margin-top: -0.7em;
     margin-right: 5px;
 }
 
-.navbar-menu {
+nav .navbar-menu {
     flex: auto;
     display: block;
     width: 2em;
 }
 
-.navbar-list {
+nav .navbar-list {
     float:right;
     flex: auto;
     display: flex;
@@ -41,6 +40,11 @@ nav .navbar-brand {
     text-transform: uppercase;
 }
 
+a[role=button] {
+    text-decoration: none;
+    color: black;
+}
+
 .navbar-list li {
     padding: 1em;
     margin-left: 0;
@@ -67,6 +71,10 @@ nav .navbar-brand {
     }
     
     nav {
+        position: absolute;
+    }
+    
+    nav.menuShown {
         position: fixed;
     }
     
@@ -84,24 +92,24 @@ nav .navbar-brand {
     
     .navbar-menu {
         height: calc(100vh - 3em);
-        width: 100%;
-        display: none;
+        width: 100% !important;
+        display: none !important;
         background: var(--nav-background);
-        z-index: 3;
     }
     
     .navbar-menu.shown {
-        display: block;
+        display: block !important;
     }
     
     .navbar-list {
-        display: block;
+        display: block !important;
         width: 100%;
         height: 100%;
+        padding-left: 0;
     }
     
     .navbar-list li {
-        width: 100%;
+        width: 100% !important;
         display: flex;
     }