Merge pull request 'add slim header' (#9) from header into master

Reviewed-on: https://git.vebit.xyz/muli/wtf-public-website/pulls/9

assets/css/style.css

@@ -239,10 +239,19 @@ header {
     z-index: 0;
 }
 
+.header__slim_box {
+    margin-top: -0.75rem;
+
+    display: grid;
+    grid-template-rows: 46px 18px 0rem 1rem 55px 18px auto;
+    grid-template-columns: 15% 82px auto 96px 22.5%;
+    z-index: 0;
+}
+
 .bg_box__top_bar_left {
     grid-row: 2 / span 1;
     grid-column: 1 / span 3;
-    background-color: var(--wtf-dark-blue);
+    background-color: var(--wtf-light-blue);
     z-index: 5;
 }
 

assets/images/header_top_triangles.svg

@@ -1,14 +1,11 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" version="1.1" viewBox="0 0 96 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:serif="http://www.serif.com/"><title>WTF Layout</title><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title>WTF Layout</dc:title><cc:license rdf:resource="MIT License"/><dc:creator><cc:Agent><dc:title>L3D &lt;l3d@c3woc.de&gt;</dc:title></cc:Agent></dc:creator></cc:Work></rdf:RDF></metadata>
-<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="translate(-979)">
-    <g transform="matrix(1,0,0,1,-979,0)">
+        <g transform="translate(-158)">
-        <g transform="matrix(1,0,0,1,-158,0)">
+            <g id="blue-corner" transform="translate(-93 -106)" serif:id="blue corner">
-            <g id="blue-corner" serif:id="blue corner" transform="matrix(1,0,0,1,-93,-106)">
+                <path d="m1257.2 152-27.17 18v-18h27.17z" fill="#2a7fff"/>
-                <path d="M1257.17,152L1230,170L1230,152L1257.17,152Z" style="fill:rgb(0,51,128);"/>
             </g>
-        </g>
+            <path id="top-right-triangle" d="m1233 0v64h-96" fill="#ffcba9" serif:id="top right triangle"/>
-        <g transform="matrix(1,0,0,1,-158,0)">
-            <path id="top-right-triangle" serif:id="top right triangle" d="M1233,0L1233,64L1137,64" style="fill:rgb(255,203,169);"/>
         </g>
     </g>
 </svg>

content/contents.lr

@@ -12,3 +12,58 @@ subclaim_content:
 
 Wir halten Mitglieder und Interessierte durch regelmäßige Rundmails, Beiträge im Wiki und unseren Podcast auf dem Laufenden.<br>
 Unseren Podcast findest du auf [vebit.xyz/podcast](https://vebit.xyz/pocast).
+---
+section:
+
+#### flow_text_section ####
+title: Zusammen Arbyten
+----
+body:
+
+Die WTF KOOPERATIVE eG (WTF eG) versteht sich als Plattform für Hackende, auf der mit Gleichgesinnten wirtschaftliche Projekte möglich werden, die es anders nicht gäbe. Wir fördern und bewirtschaften im Kollektiv als Genossenschaft die Leistungen unserer Mitglieder.
+
+Die WTF eG bietet sowohl nach innen (gegenüber den GenossInnen) als auch nach außen (gegenüber der Wirtschaft/Kunden) einen Wirtschafts-Service zu Projekten und Leistungen. Die GenossInnen erbringen ihre Dienst- und Sachleistung, die Genossenschaft übernimmt das wirtschaftliche Management als Service. Dieser Service umfasst Vermarktung, Auftragsmanagement, Kontrolle, Abrechnung und Inkasso. Oder Teile der Gesamtleistung, soweit dies gewünscht und vorteilhaft ist. Sowohl im Namen und auf Rechnung der Mitglieder als auch auf eigene Rechnung als Genossenschaft.
+
+## WTF - woher, wohin
+
+Die WTF eG startete 2020 mit etwa 170 Mitgliedern im Gründungsverein VEBIT e.V. und plant bis Ende 2021 mit ca. 250 Mitgliedern. Die Mitglieder rekrutieren sich hauptsächlich aus dem Chaos Computer Club und seinem Umfeld.
+
+## WTF eG, das Geschäftsfeld
+
+Die WTF eG agiert in der Regel mit Dienstleistungen im IT-, Kommunikations- und Internetumfeld sowie anderen technischen Lösungen. Beispiele aus dem Leistungsspektrum der Genossenschaft sind:
+
+* Spenden-/Abonnementabwicklung für Podcasts von Mitgliedern
+* Projekte/Innovationen der GenossInnen über eigene Plattform unterstüzen
+* IT-Experten an Unternehmen verleihen
+#### flow_text_section ####
+title: Kacheln mit Claims
+----
+body:
+
+## Bürokratie abgeben, Arbyte ermöglichen
+
+Ehrenamtliche Projekte unkompliziert abrechnen
+
+## Gemeinsam stark
+
+Die eigene Idee endliche fliegen sehen, zusammen mit uns.
+
+## Raketenstarts
+
+Einfach mal eine Nummer größer denken können.
+
+## Events
+
+Mitgliederveranstaltungen mit der WTF eG als Veranstalter
+
+## Frei oder angestellt
+
+Angestellt bei der WTF eG oder freiberuflich über uns arbeiten
+#### flow_text_section ####
+title: WTF, Erfolg vom Start weg
+----
+body:
+
+## Hacker-Kompetenz von bester Genossenschaft
+
+Als ein erster, großartiger Erfolg ist zu werten, dass die WTF eG vom Start weg etwa 200 Genossinnen und Genossen vereinigt, die alle sehr gern – einzeln oder im Team – ihre digitalen Kompetenzen der Wirtschaft zur Verfügung stellen.

content/home-01/contents.lr

@@ -1,23 +0,0 @@
-_model: section
----
-title: Zusammen Arbyten
----
-sort_key: 1
----
-body:
-
-Die WTF KOOPERATIVE eG (WTF eG) versteht sich als Plattform für Hackende, auf der mit Gleichgesinnten wirtschaftliche Projekte möglich werden, die es anders nicht gäbe. Wir fördern und bewirtschaften im Kollektiv als Genossenschaft die Leistungen unserer Mitglieder. 
-
-Die WTF eG bietet sowohl nach innen (gegenüber den GenossInnen) als auch nach außen (gegenüber der Wirtschaft/Kunden) einen Wirtschafts-Service zu Projekten und Leistungen. Die GenossInnen erbringen ihre Dienst- und Sachleistung, die Genossenschaft übernimmt das wirtschaftliche Management als Service. Dieser Service umfasst Vermarktung, Auftragsmanagement, Kontrolle, Abrechnung und Inkasso. Oder Teile der Gesamtleistung, soweit dies gewünscht und vorteilhaft ist. Sowohl im Namen und auf Rechnung der Mitglieder als auch auf eigene Rechnung als Genossenschaft.
-
-## WTF - woher, wohin
-
-Die WTF eG startete 2020 mit etwa 170 Mitgliedern im Gründungsverein VEBIT e.V. und plant bis Ende 2021 mit ca. 250 Mitgliedern. Die Mitglieder rekrutieren sich hauptsächlich aus dem Chaos Computer Club und seinem Umfeld.
-
-## WTF eG, das Geschäftsfeld
-
-Die WTF eG agiert in der Regel mit Dienstleistungen im IT-, Kommunikations- und Internetumfeld sowie anderen technischen Lösungen. Beispiele aus dem Leistungsspektrum der Genossenschaft sind:
-
-* Spenden-/Abonnementabwicklung für Podcasts von Mitgliedern
-* Projekte/Innovationen der GenossInnen über eigene Plattform unterstüzen
-* IT-Experten an Unternehmen verleihen

content/home-02/contents.lr

@@ -1,27 +0,0 @@
-_model: section
----
-title: Kacheln mit Claims
----
-sort_key: 2
----
-body:
-
-## Bürokratie abgeben, Arbyte ermöglichen
-
-Ehrenamtliche Projekte unkompliziert abrechnen
-
-## Gemeinsam stark
-
-Die eigene Idee endliche fliegen sehen, zusammen mit uns.
-
-## Raketenstarts
-
-Einfach mal eine Nummer größer denken können.
-
-## Events
-
-Mitgliederveranstaltungen mit der WTF eG als Veranstalter
-
-## Frei oder angestellt
-
-Angestellt bei der WTF eG oder freiberuflich über uns arbeiten

content/home-03/contents.lr

@@ -1,11 +0,0 @@
-_model: section
----
-title: WTF, Erfolg vom Start weg
----
-sort_key: 3
----
-body:
-
-## Hacker-Kompetenz von bester Genossenschaft
-
-Als ein erster, großartiger Erfolg ist zu werten, dass die WTF eG vom Start weg etwa 200 Genossinnen und Genossen vereinigt, die alle sehr gern – einzeln oder im Team – ihre digitalen Kompetenzen der Wirtschaft zur Verfügung stellen.

flowblocks/flow_text_section.ini

@@ -1,5 +1,6 @@
-[model]
+[block]
-name = Section
+name = Flow Text Section
+button_label = Flow Text Section
 label = {{ this.title }}
 
 [fields.title]
@@ -9,7 +10,3 @@ type = string
 [fields.body]
 label = Body
 type = markdown
-
-[fields.sort_key]
-label = Sort order
-type = sort_key

models/header_slim.ini

@@ -1,6 +1,8 @@
 [model]
-name = Header
+name = Header mit LOGO
-label = Header
+label = Header mit LOGO
+protected = yes
+hidden = yes
 
 [fields.claim_heading]
 label = Claim Heading

models/header_with_logo.ini

@@ -0,0 +1,21 @@
+[model]
+name = Header mit LOGO
+label = Header mit LOGO
+protected = yes
+hidden = yes
+
+[fields.claim_heading]
+label = Claim Heading
+type = markdown
+
+[fields.claim_content]
+label = Claim Content
+type = markdown
+
+[fields.subclaim_heading]
+label = Subclaim Heading
+type = markdown
+
+[fields.subclaim_content]
+label = Subclaim Content
+type = markdown

models/homepage.ini

@@ -1,11 +1,13 @@
 [model]
 name = Homepage
 label = Homepage
-inherits = header
+inherits = header_with_logo
 
 [fields.title]
 label = Title
 type = string
 
-[children]
+[fields.section]
-order_by = sort_key
+label = Sections
+type = flow
+flow_blocks = flow_text_section

models/page.ini

@@ -1,7 +1,7 @@
 [model]
 name = Page
 label = {{ this.title }}
-inherits = header
+inherits = header_slim
 
 [fields.title]
 label = Title

templates/blocks/flow_text_section.html

@@ -0,0 +1,5 @@
+                <div class="content__box -columns">
+                    <div class="content__inner_box">
+                        {{ this.body }}
+                    </div>
+                </div>

templates/header_slim.html

@@ -0,0 +1,91 @@
+{% extends "layout.html" %}
+{% block header %}
+    <div class="header__top_box">
+            <div class="header__logo_box">
+                <a class="header__homelink" href="{{ '/'|url }}" title="Startseite">
+                    <img class="header__logo" src="{{ '/images/wtf_logo.svg'|url }}" style="height: 7rem;">
+                </a>
+            </div>
+            <nav class="header__secondary_nav">
+                <ul class="secondary_nav__navlist">
+                    <!--
+                    <li class="secondary_nav__navitem">
+                        <a class="secondary_nav__navlink" href="#">EN</a>
+                    </li>
+                    -->
+                    <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">
+                    {% for title, mapping in bag("navigation").items() %}
+                        <li class="primary_nav__navitem
+                            {%- if this._path == mapping.href or mapping.href != '/' and this.is_child_of(mapping.href) %}
+                                -active
+                            {%- endif -%}
+                            {%- if loop.index == 1 %}
+                                -first
+                            {%- endif -%}
+                        ">
+                            <a class="primary_nav__navlink {% if this._path == mapping.href %}-active{% endif %}" href="{{ mapping.href|url }}">
+                                {{ title }}
+                            </a>
+                            {% if mapping.list_childs %}
+                                <ul class="primary_nav__sub_navlist">
+                                    {% set sub_menu = mapping['items'].items() %}
+                                    {% for sub_title, href in sub_menu %}
+                                        <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 }}">
+                                                {{ sub_title }}
+                                            </a>
+                                        </li>
+                                    {% endfor %}
+                                </ul>
+                            {% endif %}
+                        </li>
+                    {% endfor %}
+                </ul>
+            </nav>
+            <!-- background for header box - start -->
+            <div class="bg_box__top_bar_left"></div>
+            <div class="bg_box__top_bar_middle"></div>
+            <div class="bg_box__top_bar_right"></div>
+{#
+            <div class="bg_box__unicorns"></div>
+            <div class="bg_box__big_bg"></div>
+            <div class="bg_box__bottom_bar_left"></div>
+            <div class="bg_box__bottom_bar_middle"></div>
+            <div class="bg_box__bottom_bar_right"></div>
+            <div class="bg_box__very_bottom_bar"></div>
+            <!-- background for header box - end -->
+            <section class="header__claim">
+                <!-- TODO: Claims in Lektor editierbar. -->
+                {{ this.claim_heading }}
+                {{ this.claim_content }}
+            </section>
+            <section class="header__sub_claim">
+                <div class="sub_claim__box">
+                    {{ this.subclaim_heading }}
+                    {{ this.subclaim_content }}
+                </div>
+                <!-- TODO: Zielseite für "MEMBER WERDEN"-Button -->
+                <button class="header__button sub_claim__button">
+                    <a class="header__button_link" href={{ '/mitglieder'|url }}>MEMBER WERDEN</a>
+                </button>
+            </section>
+        </div>
+#}
+{% endblock %}

templates/homepage.html

@@ -1,27 +1,21 @@
-{% extends "header.html" %}
+{% extends "header_with_logo.html" %}
-{% from "macros/multisection.html" import render_section %}
 {% block body %}
     <div class="content__box">
         <div class="content__inner_box">
             <h1>{{ this.title }}</h1>
         </div>
     </div>
-    {% for child in this.children %}
+
-        {% if child._model == 'section' %}
+    {% for blk in this.section.blocks %}
             <section class="content {{ loop.cycle('-odd', '-even') }} -columns">
-                {% if child.title %}
+                {% if blk.title %}
                     <div class="content__box">
                         <div class="content__inner_box">
-                            <h2>{{ child.title }}</h2><hr>
+                            <h2>{{ blk.title }}</h2><hr>
                         </div>
                     </div>
                 {% endif %}
-                <div class="content__box -columns">
+                {{ blk }}
-                    <div class="content__inner_box">
-                        {{ render_section(child) }}
-                    </div>
-                </div>
             </section>
-        {% endif %}
     {% endfor %}
 {% endblock %}

templates/macros/multisection.html

@@ -1,3 +0,0 @@
-{% macro render_section(section) %}
-    {{ section.body }}
-{% endmacro %}

templates/page.html

@@ -1,4 +1,4 @@
-{% extends "header.html" %}
+{% extends "header_slim.html" %}
 {% block title %}{{ this.title }}{% endblock %}
 {% block body %}
 	<section class="content -odd -columns">