Slim header and pixel header now in full working condition.
This commit is contained in:
parent
7be5f8e641
commit
3ec6218b90
@ -249,19 +249,19 @@ header {
|
|||||||
margin-top: -0.75rem;
|
margin-top: -0.75rem;
|
||||||
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: 46px 18px 0rem 1rem 55px 18px auto;
|
grid-template-rows: 46px 18px;
|
||||||
grid-template-columns: 15% 82px auto 96px 22.5%;
|
grid-template-columns: 15% 82px auto 96px 22.5%;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg_box__top_bar_left {
|
.bg_box__top_bar_left, .slim_box__top_bar_left {
|
||||||
grid-row: 2 / span 1;
|
grid-row: 2 / span 1;
|
||||||
grid-column: 1 / span 3;
|
grid-column: 1 / span 3;
|
||||||
background-color: var(--wtf-light-blue);
|
background-color: var(--wtf-light-blue);
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg_box__top_bar_middle {
|
.bg_box__top_bar_middle, .slim_box__top_bar_middle {
|
||||||
grid-row: 1 / span 2;
|
grid-row: 1 / span 2;
|
||||||
grid-column: 4 / span 1;
|
grid-column: 4 / span 1;
|
||||||
background-image: url("../images/header_top_triangles.svg");
|
background-image: url("../images/header_top_triangles.svg");
|
||||||
@ -269,13 +269,21 @@ header {
|
|||||||
z-index: 5;
|
z-index: 5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg_box__top_bar_right {
|
.slim_box__top_bar_middle {
|
||||||
|
background-image: url("../images/header_top_triangles_dark_blue.svg");
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg_box__top_bar_right, .slim_box__top_bar_right {
|
||||||
grid-row: 1 / span 2;
|
grid-row: 1 / span 2;
|
||||||
grid-column: 5 / span 1;
|
grid-column: 5 / span 1;
|
||||||
/* background-color: var(--wtf-light-orange); */
|
background-color: transparent;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.slim_box__top_bar_right {
|
||||||
|
background-color: var(--wtf-dark-blue);
|
||||||
|
}
|
||||||
|
|
||||||
.bg_box__unicorns {
|
.bg_box__unicorns {
|
||||||
grid-row: 2 / span 6;
|
grid-row: 2 / span 6;
|
||||||
grid-column: 1 / span 5;
|
grid-column: 1 / span 5;
|
||||||
@ -289,14 +297,12 @@ header {
|
|||||||
.bg_box__big_bg {
|
.bg_box__big_bg {
|
||||||
grid-row: 3 / span 2;
|
grid-row: 3 / span 2;
|
||||||
grid-column: 1 / span 5;
|
grid-column: 1 / span 5;
|
||||||
/* background-color: var(--wtf-light-orange); */
|
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg_box__bottom_bar_left {
|
.bg_box__bottom_bar_left {
|
||||||
grid-row: 5 / span 1;
|
grid-row: 5 / span 1;
|
||||||
grid-column: 1 / span 3;
|
grid-column: 1 / span 3;
|
||||||
/* background-color: var(--wtf-light-orange); */
|
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -362,7 +368,6 @@ header {
|
|||||||
.header__sub_claim {
|
.header__sub_claim {
|
||||||
grid-row: 4 / span 4;
|
grid-row: 4 / span 4;
|
||||||
grid-column: 3 / span 3;
|
grid-column: 3 / span 3;
|
||||||
/*margin: 0 2rem 1.5rem 1.5rem;*/
|
|
||||||
margin: 1rem 2rem -3rem 1.5rem;
|
margin: 1rem 2rem -3rem 1.5rem;
|
||||||
padding: 0.5rem 1.5rem 0 1.5rem;
|
padding: 0.5rem 1.5rem 0 1.5rem;
|
||||||
background-color: var(--wtf-orange);
|
background-color: var(--wtf-orange);
|
||||||
@ -415,7 +420,7 @@ header {
|
|||||||
|
|
||||||
/* main - Start */
|
/* main - Start */
|
||||||
main {
|
main {
|
||||||
margin: 0.75rem 0 0 0;
|
margin: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -523,8 +528,12 @@ li {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.content__inner_box.-logo_header {
|
||||||
|
margin: 3.5rem 1.5rem 0 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.content__inner_box {
|
.content__inner_box {
|
||||||
margin: 2.5rem 1.5rem 0 1.5rem;
|
margin: -0.5rem 1.5rem 0 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__wrapper, .header__wrapper, .content__box, .footer__wrapper {
|
.nav__wrapper, .header__wrapper, .content__box, .footer__wrapper {
|
||||||
@ -583,12 +592,6 @@ footer {
|
|||||||
/* footer - Ende */
|
/* footer - Ende */
|
||||||
|
|
||||||
@media screen and (min-width: 1200px) {
|
@media screen and (min-width: 1200px) {
|
||||||
/*
|
|
||||||
.header__bg_box {
|
|
||||||
grid-template-columns: 15% 82px auto 96px 22.5%;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
.primary_nav__members, .primary_nav__lang_switch {
|
.primary_nav__members, .primary_nav__lang_switch {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -600,6 +603,10 @@ footer {
|
|||||||
.primary_nav__navlist {
|
.primary_nav__navlist {
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.content__inner_box {
|
||||||
|
margin: -0.5rem 1.5rem 0 1.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 1100px) and (max-width: 1200px) {
|
@media screen and (min-width: 1100px) and (max-width: 1200px) {
|
||||||
@ -622,6 +629,10 @@ footer {
|
|||||||
.primary_nav__navlist {
|
.primary_nav__navlist {
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.content__inner_box {
|
||||||
|
margin: -0.5rem 1.5rem 0 1.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 1099px) and (min-width: 910px) {
|
@media screen and (max-width: 1099px) and (min-width: 910px) {
|
||||||
@ -654,7 +665,7 @@ footer {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.content__inner_box {
|
.content__inner_box {
|
||||||
margin-top: 2.5rem;
|
margin: -0.5rem 1.5rem 0 1.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -688,6 +699,10 @@ footer {
|
|||||||
.secondary_nav__navlist {
|
.secondary_nav__navlist {
|
||||||
margin-right: 0.5rem;
|
margin-right: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.content__inner_box {
|
||||||
|
margin: -0.5rem 1.5rem 0 1.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 959px) and (min-width: 790px) {
|
@media screen and (max-width: 959px) and (min-width: 790px) {
|
||||||
@ -710,18 +725,9 @@ footer {
|
|||||||
.header__sub_claim {
|
.header__sub_claim {
|
||||||
grid-column: 1 / span 5;
|
grid-column: 1 / span 5;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
/*margin: 0 1.5rem;*/
|
|
||||||
margin: 2rem 1.5rem -3rem 1.5rem;
|
margin: 2rem 1.5rem -3rem 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content__inner_box {
|
|
||||||
margin-top: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
margin-top: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header__top_box .header__button {
|
.header__top_box .header__button {
|
||||||
display: auto;
|
display: auto;
|
||||||
}
|
}
|
||||||
@ -741,6 +747,10 @@ footer {
|
|||||||
.secondary_nav__navlist {
|
.secondary_nav__navlist {
|
||||||
margin-right: 0.5rem;
|
margin-right: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.content__inner_box {
|
||||||
|
margin: -0.5rem 1.5rem 0 1.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 850px) and (min-width: 790px) {
|
@media screen and (max-width: 850px) and (min-width: 790px) {
|
||||||
@ -775,10 +785,6 @@ footer {
|
|||||||
.secondary_nav__navlist {
|
.secondary_nav__navlist {
|
||||||
margin-right: 0.5rem;
|
margin-right: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content__inner_box {
|
|
||||||
margin: 2.5rem 1.5rem 0 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 789px) and (min-width: 596px) {
|
@media screen and (max-width: 789px) and (min-width: 596px) {
|
||||||
@ -786,7 +792,7 @@ footer {
|
|||||||
--column-count: 2
|
--column-count: 2
|
||||||
}
|
}
|
||||||
|
|
||||||
header, .header__bg_box {
|
header, .header__bg_box, .header__slim_box {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -796,10 +802,6 @@ footer {
|
|||||||
background-image: none;
|
background-image: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg_box__top_bar_left,
|
.bg_box__top_bar_left,
|
||||||
.bg_box__top_bar_middle,
|
.bg_box__top_bar_middle,
|
||||||
.bg_box__top_bar_right,
|
.bg_box__top_bar_right,
|
||||||
@ -812,6 +814,15 @@ footer {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.slim_box__top_bar_left {
|
||||||
|
margin-top: 1rem;
|
||||||
|
height: 1.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slim_box__top_bar_middle, .slim_box__top_bar_right {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.header__claim {
|
.header__claim {
|
||||||
margin: 1.2rem 1.5rem 0 1.5rem;
|
margin: 1.2rem 1.5rem 0 1.5rem;
|
||||||
grid-row: 3 / span 1;
|
grid-row: 3 / span 1;
|
||||||
@ -862,7 +873,7 @@ footer {
|
|||||||
display: flex !important;
|
display: flex !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content__inner_box {
|
.content__inner_box.-logo_header {
|
||||||
margin: -0.5rem 1.5rem 0 1.5rem;
|
margin: -0.5rem 1.5rem 0 1.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -884,7 +895,7 @@ footer {
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
header, .header__bg_box {
|
header, .header__bg_box, .header__slim_box {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -894,6 +905,10 @@ footer {
|
|||||||
background-image: none;
|
background-image: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.header__slim_box {
|
||||||
|
margin-top: -3rem;
|
||||||
|
}
|
||||||
|
|
||||||
.header__claim {
|
.header__claim {
|
||||||
margin: 0.5rem 0.5rem 0 0.5rem;
|
margin: 0.5rem 0.5rem 0 0.5rem;
|
||||||
grid-row: 3 / span 1;
|
grid-row: 3 / span 1;
|
||||||
@ -921,10 +936,6 @@ footer {
|
|||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
|
||||||
margin-top: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg_box__top_bar_left,
|
.bg_box__top_bar_left,
|
||||||
.bg_box__top_bar_middle,
|
.bg_box__top_bar_middle,
|
||||||
.bg_box__top_bar_right,
|
.bg_box__top_bar_right,
|
||||||
@ -937,8 +948,14 @@ footer {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
.slim_box__top_bar_left {
|
||||||
margin-top: 0;
|
grid-column: 1 / span 5;
|
||||||
|
margin-top: 3rem;
|
||||||
|
height: 1.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slim_box__top_bar_middle, .slim_box__top_bar_right {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sub_claim__box {
|
.sub_claim__box {
|
||||||
@ -1014,7 +1031,7 @@ footer {
|
|||||||
}
|
}
|
||||||
/* mobile nav - Ende */
|
/* mobile nav - Ende */
|
||||||
|
|
||||||
.content__inner_box {
|
.content__inner_box.-logo_header {
|
||||||
margin: -0.5rem 1.5rem 0 1.5rem;
|
margin: -0.5rem 1.5rem 0 1.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
12
assets/images/header_top_triangles_dark_blue.svg
Normal file
12
assets/images/header_top_triangles_dark_blue.svg
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 96 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||||
|
<g transform="matrix(1,0,0,1,-1137,0)">
|
||||||
|
<g>
|
||||||
|
<g id="blue-corner" serif:id="blue corner" transform="matrix(1,0,0,1,-93,-106)">
|
||||||
|
<path d="M1257.2,152L1230,170L1230,152L1257.2,152Z" style="fill:#2a7fff;"/>
|
||||||
|
</g>
|
||||||
|
<path id="top-right-triangle" serif:id="top right triangle" d="M1233,0L1233,64L1137,64" style="fill:#003380;"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 854 B |
@ -1,72 +1,72 @@
|
|||||||
{% extends "layout.html" %}
|
{% extends "layout.html" %}
|
||||||
{% block header %}
|
{% block header %}
|
||||||
<div class="header__top_box">
|
<div class="header__top_box">
|
||||||
<div class="header__logo_box">
|
<div class="header__logo_box">
|
||||||
<a class="header__homelink" href="{{ '/'|url }}" title="Startseite">
|
<a class="header__homelink" href="{{ '/'|url }}" title="Startseite">
|
||||||
{% if '/images/wtf_logo.svg'|asseturl is defined -%}
|
{% if '/images/wtf_logo.svg'|asseturl is defined -%}
|
||||||
<img class="header__logo" src="{{ '/images/wtf_logo.svg'|asseturl }}" style="height: 7rem;">
|
<img class="header__logo" src="{{ '/images/wtf_logo.svg'|asseturl }}" style="height: 7rem;">
|
||||||
{%- endif %}
|
{%- endif %}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
|
||||||
<nav class="header__secondary_nav">
|
|
||||||
<ul class="secondary_nav__navlist">
|
|
||||||
{% for alt in get_alts(this) %}
|
|
||||||
{%- if this.alt != alt %}
|
|
||||||
<li class="secondary_nav__navitem">
|
|
||||||
<a class="secondary_nav__navlink" href="{{ '.'|url(alt=alt) }}">{{ alt|title|upper }}</a>
|
|
||||||
</li>
|
|
||||||
{% endif -%}
|
|
||||||
{% endfor %}
|
|
||||||
<li class="secondary_nav__navitem">
|
|
||||||
<a class="secondary_nav__navlink" href="https://meta.vebit.xyz">Login</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="header__slim_box">
|
<nav class="header__secondary_nav">
|
||||||
<nav class="header__primary_nav">
|
<ul class="secondary_nav__navlist">
|
||||||
<div class="primary_nav__toggle">
|
{% for alt in get_alts(this) %}
|
||||||
<svg viewBox="0 0 100 80" width="32" height="32">
|
{%- if this.alt != alt %}
|
||||||
<rect width="100" height="15"></rect>
|
<li class="secondary_nav__navitem">
|
||||||
<rect y="30" width="100" height="15"></rect>
|
<a class="secondary_nav__navlink" href="{{ '.'|url(alt=alt) }}">{{ alt|title|upper }}</a>
|
||||||
<rect y="60" width="100" height="15"></rect>
|
</li>
|
||||||
</svg>
|
{% endif -%}
|
||||||
<p>menu</p>
|
{% endfor %}
|
||||||
</div>
|
<li class="secondary_nav__navitem">
|
||||||
|
<a class="secondary_nav__navlink" href="https://meta.vebit.xyz">Login</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="header__slim_box">
|
||||||
|
<nav class="header__primary_nav">
|
||||||
|
<div class="primary_nav__toggle">
|
||||||
|
<svg viewBox="0 0 100 80" width="32" height="32">
|
||||||
|
<rect width="100" height="15"></rect>
|
||||||
|
<rect y="30" width="100" height="15"></rect>
|
||||||
|
<rect y="60" width="100" height="15"></rect>
|
||||||
|
</svg>
|
||||||
|
<p>menu</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<ul class="primary_nav__navlist">
|
<ul class="primary_nav__navlist">
|
||||||
{% for title, mapping in bag("navigation").items() %}
|
{% for title, mapping in bag("navigation").items() %}
|
||||||
{% if mapping.visible|default(true) %}
|
{% if mapping.visible|default(true) %}
|
||||||
<li class="primary_nav__navitem
|
<li class="primary_nav__navitem
|
||||||
{%- if this._path == mapping.href or mapping.href != '/' and this.is_child_of(mapping.href) %}
|
{%- if this._path == mapping.href or mapping.href != '/' and this.is_child_of(mapping.href) %}
|
||||||
-active
|
-active
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
{%- if loop.index == 1 %}
|
{%- if loop.index == 1 %}
|
||||||
-first
|
-first
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
">
|
">
|
||||||
<a class="primary_nav__navlink {% if this._path == mapping.href %}-active{% endif %}" href="{{ mapping.href|url }}">
|
<a class="primary_nav__navlink {% if this._path == mapping.href %}-active{% endif %}" href="{{ mapping.href|url }}">
|
||||||
{{ title }}
|
{{ title }}
|
||||||
</a>
|
</a>
|
||||||
{% if mapping.list_childs %}
|
{% if mapping.list_childs %}
|
||||||
<ul class="primary_nav__sub_navlist">
|
<ul class="primary_nav__sub_navlist">
|
||||||
{% set sub_menu = mapping['items'].items() %}
|
{% set sub_menu = mapping['items'].items() %}
|
||||||
{% for sub_title, href in sub_menu %}
|
{% for sub_title, href in sub_menu %}
|
||||||
<li class="primary_nav__sub_navitem {%- if this._path == href %} -active{%- endif %}">
|
<li class="primary_nav__sub_navitem {%- if this._path == href %} -active{%- endif %}">
|
||||||
<a class="primary_nav__navlink {% if this._path == href %}-active{% endif %}" href="{{ href|url }}">
|
<a class="primary_nav__navlink {% if this._path == href %}-active{% endif %}" href="{{ href|url }}">
|
||||||
{{ sub_title }}
|
{{ sub_title }}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</li>
|
</li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<!-- background for header box - start -->
|
<div class="slim_box__top_bar_left"></div>
|
||||||
<div class="bg_box__top_bar_left"></div>
|
<div class="slim_box__top_bar_middle"></div>
|
||||||
<div class="bg_box__top_bar_middle"></div>
|
<div class="slim_box__top_bar_right"></div>
|
||||||
<div class="bg_box__top_bar_right"></div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
@ -1,95 +1,95 @@
|
|||||||
{% extends "layout.html" %}
|
{% extends "layout.html" %}
|
||||||
{% block header %}
|
{% block header %}
|
||||||
<div class="header__top_box">
|
<div class="header__top_box">
|
||||||
<div class="header__logo_box">
|
<div class="header__logo_box">
|
||||||
<a class="header__homelink" href="{{ '/'|url }}" title="Startseite">
|
<a class="header__homelink" href="{{ '/'|url }}" title="Startseite">
|
||||||
{% if '/images/wtf_logo.svg'|asseturl is defined -%}
|
{% if '/images/wtf_logo.svg'|asseturl is defined -%}
|
||||||
<img class="header__logo" src="{{ '/images/wtf_logo.svg'|asseturl }}" style="height: 7rem;">
|
<img class="header__logo" src="{{ '/images/wtf_logo.svg'|asseturl }}" style="height: 7rem;">
|
||||||
{%- endif %}
|
{%- endif %}
|
||||||
</a>
|
</a>
|
||||||
|
</div>
|
||||||
|
<nav class="header__secondary_nav">
|
||||||
|
<ul class="secondary_nav__navlist">
|
||||||
|
{% for alt in get_alts(this) %}
|
||||||
|
{%- if this.alt != alt %}
|
||||||
|
<li class="secondary_nav__navitem">
|
||||||
|
<a class="secondary_nav__navlink" href="{{ '.'|url(alt=alt) }}">{{ alt|title|upper }}</a>
|
||||||
|
</li>
|
||||||
|
{% endif -%}
|
||||||
|
{% endfor %}
|
||||||
|
<li class="secondary_nav__navitem">
|
||||||
|
<a class="secondary_nav__navlink" href="https://meta.vebit.xyz">Login</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="header__bg_box">
|
||||||
|
<nav class="header__primary_nav -logo_header">
|
||||||
|
<div class="primary_nav__toggle">
|
||||||
|
<svg viewBox="0 0 100 80" width="32" height="32">
|
||||||
|
<rect width="100" height="15"></rect>
|
||||||
|
<rect y="30" width="100" height="15"></rect>
|
||||||
|
<rect y="60" width="100" height="15"></rect>
|
||||||
|
</svg>
|
||||||
|
<p>menu</p>
|
||||||
</div>
|
</div>
|
||||||
<nav class="header__secondary_nav">
|
|
||||||
<ul class="secondary_nav__navlist">
|
|
||||||
{% for alt in get_alts(this) %}
|
|
||||||
{%- if this.alt != alt %}
|
|
||||||
<li class="secondary_nav__navitem">
|
|
||||||
<a class="secondary_nav__navlink" href="{{ '.'|url(alt=alt) }}">{{ alt|title|upper }}</a>
|
|
||||||
</li>
|
|
||||||
{% endif -%}
|
|
||||||
{% endfor %}
|
|
||||||
<li class="secondary_nav__navitem">
|
|
||||||
<a class="secondary_nav__navlink" href="https://meta.vebit.xyz">Login</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<div class="header__bg_box">
|
|
||||||
<nav class="header__primary_nav">
|
|
||||||
<div class="primary_nav__toggle">
|
|
||||||
<svg viewBox="0 0 100 80" width="32" height="32">
|
|
||||||
<rect width="100" height="15"></rect>
|
|
||||||
<rect y="30" width="100" height="15"></rect>
|
|
||||||
<rect y="60" width="100" height="15"></rect>
|
|
||||||
</svg>
|
|
||||||
<p>menu</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ul class="primary_nav__navlist">
|
<ul class="primary_nav__navlist">
|
||||||
{% for title, mapping in bag("navigation").items() %}
|
{% for title, mapping in bag("navigation").items() %}
|
||||||
{% if mapping.visible|default(true) %}
|
{% if mapping.visible|default(true) %}
|
||||||
<li class="primary_nav__navitem
|
<li class="primary_nav__navitem
|
||||||
{%- if this._path == mapping.href or mapping.href != '/' and this.is_child_of(mapping.href) %}
|
{%- if this._path == mapping.href or mapping.href != '/' and this.is_child_of(mapping.href) %}
|
||||||
-active
|
-active
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
{%- if loop.index == 1 %}
|
{%- if loop.index == 1 %}
|
||||||
-first
|
-first
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
">
|
">
|
||||||
<a class="primary_nav__navlink {% if this._path == mapping.href %}-active{% endif %}" href="{{ mapping.href|url }}">
|
<a class="primary_nav__navlink {% if this._path == mapping.href %}-active{% endif %}" href="{{ mapping.href|url }}">
|
||||||
{{ title }}
|
{{ title }}
|
||||||
</a>
|
</a>
|
||||||
{% if mapping.list_childs %}
|
{% if mapping.list_childs %}
|
||||||
<ul class="primary_nav__sub_navlist">
|
<ul class="primary_nav__sub_navlist">
|
||||||
{% set sub_menu = mapping['items'].items() %}
|
{% set sub_menu = mapping['items'].items() %}
|
||||||
{% for sub_title, href in sub_menu %}
|
{% for sub_title, href in sub_menu %}
|
||||||
<li class="primary_nav__sub_navitem {%- if this._path == href %} -active{%- endif %}">
|
<li class="primary_nav__sub_navitem {%- if this._path == href %} -active{%- endif %}">
|
||||||
<a class="primary_nav__navlink {% if this._path == href %}-active{% endif %}" href="{{ href|url }}">
|
<a class="primary_nav__navlink {% if this._path == href %}-active{% endif %}" href="{{ href|url }}">
|
||||||
{{ sub_title }}
|
{{ sub_title }}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</li>
|
</li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<!-- background for header box - start -->
|
<!-- background for header box - start -->
|
||||||
<div class="bg_box__top_bar_left"></div>
|
<div class="bg_box__top_bar_left"></div>
|
||||||
<div class="bg_box__top_bar_middle"></div>
|
<div class="bg_box__top_bar_middle"></div>
|
||||||
<div class="bg_box__top_bar_right"></div>
|
<div class="bg_box__top_bar_right"></div>
|
||||||
<div class="bg_box__unicorns"></div>
|
<div class="bg_box__unicorns"></div>
|
||||||
<div class="bg_box__big_bg"></div>
|
<div class="bg_box__big_bg"></div>
|
||||||
<div class="bg_box__bottom_bar_left"></div>
|
<div class="bg_box__bottom_bar_left"></div>
|
||||||
<div class="bg_box__bottom_bar_middle"></div>
|
<div class="bg_box__bottom_bar_middle"></div>
|
||||||
<div class="bg_box__bottom_bar_right"></div>
|
<div class="bg_box__bottom_bar_right"></div>
|
||||||
<div class="bg_box__very_bottom_bar"></div>
|
<div class="bg_box__very_bottom_bar"></div>
|
||||||
<!-- background for header box - end -->
|
<!-- background for header box - end -->
|
||||||
<section class="header__claim">
|
<section class="header__claim">
|
||||||
<!-- TODO: Claims in Lektor editierbar. -->
|
<!-- TODO: Claims in Lektor editierbar. -->
|
||||||
{{ this.claim_heading }}
|
{{ this.claim_heading }}
|
||||||
{{ this.claim_content }}
|
{{ this.claim_content }}
|
||||||
</section>
|
</section>
|
||||||
<section class="header__sub_claim">
|
<section class="header__sub_claim">
|
||||||
<div class="sub_claim__box">
|
<div class="sub_claim__box">
|
||||||
{{ this.subclaim_heading }}
|
{{ this.subclaim_heading }}
|
||||||
{{ this.subclaim_content }}
|
{{ this.subclaim_content }}
|
||||||
</div>
|
</div>
|
||||||
<!-- TODO: Zielseite für "MEMBER WERDEN"-Button -->
|
<!-- TODO: Zielseite für "MEMBER WERDEN"-Button -->
|
||||||
<button class="header__button sub_claim__button">
|
<button class="header__button sub_claim__button">
|
||||||
<a class="header__button_link" href={{ '/mitglieder'|url }}>MEMBER WERDEN</a>
|
<a class="header__button_link" href={{ '/mitglieder'|url }}>MEMBER WERDEN</a>
|
||||||
</button>
|
</button>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
{% extends "header_with_logo.html" %}
|
{% extends "header_with_logo.html" %}
|
||||||
{% block body %}
|
{% block body %}
|
||||||
<div class="content__box">
|
<div class="content__box">
|
||||||
<div class="content__inner_box">
|
<div class="content__inner_box -logo_header">
|
||||||
<h1>{{ this.title }}</h1>
|
<h1>{{ this.title }}</h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user