Integrating header with each page, removing bottom section of section-app-header template, fixing a few bugs

static/css/common.css

@@ -6,6 +6,7 @@ body {
     --primary-color: #50DC71;
     --secondary-color: #FAFAFA;
     --nav-background: var(--secondary-color);
+    --nav-background-dark: #282828;
     --footer-background: #111111; 
 }
 
@@ -50,6 +51,10 @@ a[role=button].primary:hover, a[role=button].secondary:hover {
     box-shadow: 0px 0px 4px 0px #000000;
 }
 
+.text-white a[role=button]:not(.primary), a[role=button]:not(.primary).text-white {
+    color: white;
+}
+
 /* format */
 
 .fill-width {
@@ -159,7 +164,7 @@ p {
 }
 
 .col1:not(.col1-fill) {
-    width: 33%;
+    width: 50%;
     margin-right: auto !important;
     margin-left: auto !important;
 }

static/css/header.css

@@ -2,13 +2,15 @@
 nav {
     font-size: 1.3em;
     height: 3em;
-    background: var(--nav-background);
+    /*background: var(--nav-background);*/
+    position: absolute;
     width: 100vw;
     font-family: var(--light-font);
 }
 
 nav .nav-flex {
     display: flex;
+    max-width: 99%;
 }
 
 nav .navbar-brand {
@@ -53,6 +55,10 @@ nav .navbar-list {
     background-color: var(--nav-background);
 }
 
+.dark .navbar-list li.background {
+    background-color: var(--nav-background-dark);
+}
+
 
 .menu-with-sub {
     display: block;
@@ -61,8 +67,8 @@ nav .navbar-list {
 .menu-with-sub .sub-menu {
     display: none;
     position: absolute;
-    margin-left: -1.2em;
-    width: 100%;
+    padding: 0;
+    margin-top: -2px;
 }
 
 .menu-with-sub.toggled .sub-menu {
@@ -93,15 +99,22 @@ nav .navbar-list {
     }
     
     nav {
-        position: absolute;
+        /*background: var(--nav-background);*/
     }
     
     nav.menuShown {
         position: fixed;
+        z-index: 1;
+        background: var(--nav-background);
+    }
+    
+    nav.menuShown.dark {
+        background: var(--nav-background-dark);
     }
     
     nav .nav-flex {
         display: block;
+        max-width: 100%;
     }
     
     .nav-mobile {
@@ -120,6 +133,10 @@ nav .navbar-list {
         background: var(--nav-background);
     }
     
+    .navbar-menu.dark {
+        background: var(--nav-background-dark);
+    }
+    
     .navbar-menu.shown {
         display: block !important;
     }
@@ -146,6 +163,6 @@ nav .navbar-list {
     }
     
     #content {
-        padding-top: 4em;
+        /*padding-top: 4em;*/
     }
 }

static/css/sections.css

@@ -9,17 +9,12 @@ section.section1 {
 }
 
 section.section-header {
-    min-height: calc(100vh - 4em);
-}
-
-section.section-header > div {
-    height: 100%;
+    height: calc(100vh + 3em);
 }
 
 .section-end-triangle {
     width: 0;
     height: 0;
-    margin-left: -1em;
     border-top-width: 3em;
     border-top-style: solid;
     border-top-color: transparent;
@@ -27,3 +22,14 @@ section.section-header > div {
     border-right-style: solid;
     border-right-color: #FFFFFF;
 }
+
+section.section-header > div.columns-container {
+    padding-top: 3em !important;
+    height: calc(100% - 6em);
+}
+
+@media screen and (max-width: 700px) {
+    section.section-header {
+        height: auto;
+    }
+}