Integrating header with each page, removing bottom section of section-app-header template, fixing a few bugs
This commit is contained in:
parent
dfc8175367
commit
4a881df172
GPG Key ID:
EF45F9C6AFE20160
|
|
@ -86,6 +86,15 @@
|
|||
</p>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="grid flex-center">
|
||||
{{ 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>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{ if .Params.Download.Show }}
|
||||
<!-- download section -->
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;*/
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 |
Loading…
Reference in New Issue