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

This commit is contained in:
Adsooi 2021-06-18 19:41:15 +02:00
parent dfc8175367
commit 4a881df172
Signed by: Ad5001
GPG key ID: EF45F9C6AFE20160
8 changed files with 60 additions and 22 deletions

View file

@ -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 -->

View file

@ -1,18 +1,19 @@
<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">
<div class="nav-mobile ">
<a class="navbar-brand" href="{{ .Site.Params.brandWebsite }}" role="button">
<img src="/img/icon.png" class="icon-brand" alt=""/>
Ad5001
</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">

View file

@ -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 style="float: left; max-width: 100%;">{{ .BottomLeft | safeHTML }}</div>
<div style="float: right; max-width: 100%;">{{ .BottomRight | safeHTML }}</div>
</div>
<div class="section-end-triangle"></div>
</section>
{{ end }}

View file

@ -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>

View file

@ -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;
}

View file

@ -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;*/
}
}

View file

@ -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;
}
}

1
static/icons/bug.svg Normal file
View file

@ -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>

After

Width:  |  Height:  |  Size: 1.5 KiB