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

layouts/_default/app.html

@@ -86,6 +86,15 @@
                     </p>
                     {{ end }}
                 </div>
+                <div class="grid flex-center">&nbsp;
+                    {{ range .Params.Technical.Links }}
+                    <div>
+                        <a href="{{ .URL | safeURL }}" role="button" class="primary" title="{{ .Title }}">
+                            <img src="/icons/{{ .Icon }}.svg" class="icon-as-text" alt="{{ .Icon }}">{{ .Title }}
+                        </a>&nbsp;
+                    </div>
+                    {{ end }}
+                </div>
             </section>
             {{ if .Params.Download.Show }}
             <!-- download section -->

layouts/partials/header.html

@@ -1,4 +1,5 @@
-<nav>
+{{ $white := .Params.HeaderTextWhite }}
+<nav class="{{ if $white }}dark{{ end }} {{ if $white }}text-white{{ end }}">
     <div class="center nav-flex">
         {{ $currentPage := . }}
         <div class="nav-mobile ">
@@ -8,11 +9,11 @@
             </a>
         
             <button id="navbar-toggler">
-                <img src="/icons/menu.svg" class=""/>
+                <img src="/icons/menu.svg" class="icon-monochrome"/>
             </button>
         </div>
         
-        <div class="navbar-menu">
+        <div class="navbar-menu {{ if $white }}dark{{ end }}">
             <ul class="navbar-list">
             {{ range .Site.Menus.main.ByWeight }}
                 {{ if .HasChildren }}
@@ -47,11 +48,11 @@
                 <div class="menu-with-sub">
                     <a href="#" role="button">
                         <li>
-                            <img src="/icons/lang.svg" class="icon-as-text"/>
+                            <img src="/icons/lang.svg" class="icon-as-text icon-monochrome"/>
                             <span>{{ i18n "language" }}</span>
                         </li>
                     </a>
-                    <ul class="sub-menu">
+                    <ul class="sub-menu center dark">
                         {{ range .Translations }}
                         <a href="{{ .Permalink }}" role="button">
                             <li class="background">

layouts/partials/section-app-header.html

@@ -28,9 +28,6 @@
             <img class="vertical-center-img" src="/img/full/{{ .AppIndex }}.png"/>
         </div>
     </div>
-    <div style="background: {{ .BottomBackground | safeCSS }}; height: {{ .BottomHeight | safeCSS }}; width: 100%; margin-top: -{{ .BottomHeight | safeCSS }};">
+    <div class="section-end-triangle"></div>
-        <div style="float: left; max-width: 100%;">{{ .BottomLeft | safeHTML }}</div>
-        <div style="float: right; max-width: 100%;">{{ .BottomRight | safeHTML }}</div>
-    </div>
 </section>
 {{ end }}

layouts/partials/section1.html

@@ -2,6 +2,8 @@
 <section style="background-image: url({{ .Image }});" class="section1">
     <div class="columns-container">
         <div class="column">
+            <br>
+            <br>
             <br>
             {{ .Content | safeHTML }}
             <br>

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;
+    padding: 0;
-    width: 100%;
+    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);
+    height: calc(100vh + 3em);
-}
-
-section.section-header > div {
-    height: 100%;
 }
 
 .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;
+    }
+}

static/icons/bug.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.074 1.408c0-.778.641-1.408 1.431-1.408.942 0 1.626.883 1.38 1.776-.093.336-.042.695.138.995.401.664 1.084 1.073 1.977 1.078.88-.004 1.572-.408 1.977-1.078.181-.299.231-.658.138-.995-.246-.892.436-1.776 1.38-1.776.79 0 1.431.63 1.431 1.408 0 .675-.482 1.234-1.118 1.375-.322.071-.6.269-.769.548-.613 1.017.193 1.917.93 2.823-1.21.562-2.524.846-3.969.846-1.468 0-2.771-.277-3.975-.84.748-.92 1.555-1.803.935-2.83-.168-.279-.446-.477-.768-.548-.636-.14-1.118-.699-1.118-1.374zm13.485 14.044h2.387c.583 0 1.054-.464 1.054-1.037s-.472-1.037-1.054-1.037h-2.402c-.575 0-1.137-.393-1.227-1.052-.092-.677.286-1.147.765-1.333l2.231-.866c.541-.21.807-.813.594-1.346-.214-.533-.826-.795-1.367-.584l-2.294.891c-.329.127-.734.036-.926-.401-.185-.423-.396-.816-.62-1.188-1.714.991-3.62 1.501-5.7 1.501-2.113 0-3.995-.498-5.703-1.496-.217.359-.421.738-.601 1.146-.227.514-.646.552-.941.437l-2.295-.89c-.542-.21-1.153.051-1.367.584-.213.533.053 1.136.594 1.346l2.231.866c.496.192.854.694.773 1.274-.106.758-.683 1.111-1.235 1.111h-2.402c-.582 0-1.054.464-1.054 1.037s.472 1.037 1.054 1.037h2.387c.573 0 1.159.372 1.265 1.057.112.728-.228 1.229-.751 1.462l-2.42 1.078c-.53.236-.766.851-.526 1.373s.865.753 1.395.518l2.561-1.14c.307-.137.688-.106.901.259 1.043 1.795 3.143 3.608 6.134 3.941 2.933-.327 5.008-2.076 6.073-3.837.261-.432.628-.514.963-.364l2.561 1.14c.529.236 1.154.005 1.395-.518.24-.522.004-1.137-.526-1.373l-2.42-1.078c-.495-.221-.867-.738-.763-1.383.128-.803.717-1.135 1.276-1.135z"/></svg>