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

Reviewed-on: https://git.vebit.xyz/muli/wtf-public-website/pulls/9
This commit is contained in:
muli 2021-02-17 22:31:26 +01:00
commit b48e795c42
18 changed files with 209 additions and 100 deletions

View File

@ -239,10 +239,19 @@ header {
z-index: 0; 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 { .bg_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-dark-blue); background-color: var(--wtf-light-blue);
z-index: 5; z-index: 5;
} }

View File

@ -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>
</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>
</g> </g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 965 B

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File