Add kontakt page and new menu
This commit is contained in:
parent
2f4132dc02
commit
8641c7fdbc
GPG key ID:
CD08445BFF4313D1
7 changed files with 277 additions and 48 deletions
|
|
@ -1,8 +1,9 @@
|
|||
$transition: 280ms all 120ms ease-out;
|
||||
|
||||
header {
|
||||
margin: -25px -25px 0px -25px;
|
||||
background: $background_accent_1;
|
||||
padding: 20px 30px;
|
||||
box-shadow: 5px 5px 5px 10px $background_accent_1;
|
||||
top: 0;
|
||||
box-shadow: 0px -10000px 0px 10000px $background_accent_1;
|
||||
h1 a, h1 a:hover, h1 a:link, h1 a:visited {
|
||||
font-family: $headline_font, sans-serif;
|
||||
color: $font_accent_1;
|
||||
|
|
@ -11,31 +12,155 @@ header {
|
|||
font-size: $font_size_h1;
|
||||
text-decoration: none;
|
||||
}
|
||||
nav ul {
|
||||
nav {
|
||||
grid-template-rows: auto 1fr auto;
|
||||
padding: 0 1rem;
|
||||
position: sticky;
|
||||
display: grid;
|
||||
place-items: flex-start;
|
||||
margin-left: -25px;
|
||||
background: $menu_background_color;
|
||||
box-shadow: 300px 0px 0px 0px $menu_background_color,
|
||||
-300px 0px 0px 0px $menu_background_color;
|
||||
.title_dropdown {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
}
|
||||
> ul {
|
||||
grid-auto-flow: column;
|
||||
> li {
|
||||
margin: 0 0.5rem;
|
||||
|
||||
a, .title_dropdown {
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
font-size: $font_size_default;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
> a, .title_dropdown {
|
||||
padding: 1rem 0.5rem;
|
||||
border-top: 3px solid transparent;
|
||||
transition: $transition;
|
||||
|
||||
&:hover, &:focus {
|
||||
border-top-color: $menu_accent_hover;
|
||||
color: $menu_accent_hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
a, a:link, a:visited {
|
||||
color: $font_accent_2;
|
||||
text-decoration: none;
|
||||
background: $shadow_accent_1;
|
||||
padding: 8px 24px;
|
||||
border-radius: 5px;
|
||||
text-transform: $menu_text_transform;
|
||||
}
|
||||
a:hover, a:active {
|
||||
color: $font_accent_2_hover;
|
||||
box-shadow: 0px 0px 1px 1px $shadow_accent_1;
|
||||
}
|
||||
display: grid;
|
||||
|
||||
li {
|
||||
display: inline;
|
||||
margin: 0 8px 0 0;
|
||||
padding: 0;
|
||||
background: $menu_box_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
|
||||
.title_dropdown {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
border: 0.35rem solid transparent;
|
||||
border-top-color: rgba(#fff, 0.45);
|
||||
margin-left: 0.25em;
|
||||
transform: translateY(0.15em);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown__menu {
|
||||
position: absolute;
|
||||
min-width: 15ch;
|
||||
left: 50%;
|
||||
top: calc(100% - 0.25rem);
|
||||
transition: $transition;
|
||||
transform: rotateX(-90deg) translateX(-50%);
|
||||
transform-origin: top center;
|
||||
visibility: hidden;
|
||||
opacity: 0.3;
|
||||
padding: 0.5em 0;
|
||||
background-color: $menu_background_dropdown_color;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0.15em 0.25em rgba(black, 0.25);
|
||||
|
||||
a {
|
||||
color: $font_menu;
|
||||
display: block;
|
||||
padding: 0.5em;
|
||||
opacity: 0;
|
||||
transition: $transition;
|
||||
|
||||
&:hover {
|
||||
background-color: $background_accent_1;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
background-color: $background_accent_1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
border: 0.5rem solid transparent;
|
||||
border-bottom-color: $menu_background_dropdown_color;
|
||||
position: absolute;
|
||||
top: calc(100% - 1.25rem);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
transition: $transition;
|
||||
opacity: 0;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
&:hover, &:focus-within {
|
||||
.title_dropdown {
|
||||
border-top-color: $menu_accent_hover;
|
||||
}
|
||||
|
||||
.dropdown__menu {
|
||||
opacity: 1;
|
||||
transform: rotateX(0) translateX(-50%);
|
||||
visibility: visible;
|
||||
|
||||
a {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
font-size: $font_size_default;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: $large_view) {
|
||||
header {
|
||||
max-width: $large_min_width;
|
||||
|
|
@ -44,10 +169,21 @@ header {
|
|||
h1 a, h1 a:hover, h1 a:link {
|
||||
font-size: $font_size_h1_large;
|
||||
}
|
||||
nav ul {
|
||||
nav {
|
||||
box-shadow: $large_view 0px 0px 0px $menu_background_color,
|
||||
-$large_view 0px 0px 0px $menu_background_color;
|
||||
> ul {
|
||||
> li {
|
||||
a, .title_dropdown {
|
||||
font-size: $font_size_default_large;
|
||||
}
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: $font_size_default_large;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $mobile_view) {
|
||||
|
|
@ -55,12 +191,21 @@ header {
|
|||
h1 a, h1 a:hover, h1 a:link {
|
||||
font-size: $font_size_h1_mobile;
|
||||
}
|
||||
nav ul {
|
||||
font-size: $font_size_default_mobile;
|
||||
a, a:link, a:visited {
|
||||
display: block;
|
||||
padding: 5px 8px;
|
||||
margin: -6px 0px;
|
||||
@if $show_mobile_menu == true {
|
||||
nav {
|
||||
ul {
|
||||
display: table;
|
||||
|
||||
}
|
||||
.dropdown {
|
||||
.dropdown__menu {
|
||||
left: 180%;
|
||||
}
|
||||
&:after {
|
||||
content: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -71,9 +216,6 @@ header {
|
|||
h1 a, h1 a:hover, h1 a:link {
|
||||
font-size: $font_size_h1_tiny;
|
||||
}
|
||||
nav ul {
|
||||
font-size: $font_size_default_tiny;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
$background_accent_1: rgb(255,255,0);
|
||||
$background_accent_1: rgb(255,192,0);
|
||||
$background_accent_2: $background_accent_1;
|
||||
$menu_background_color: transparent;
|
||||
$menu_background_dropdown_color: white;
|
||||
$menu_accent_hover: white;
|
||||
$menu_box_background: black;
|
||||
|
||||
$font_accent_1: black;
|
||||
$font_accent_2: white;
|
||||
|
|
@ -8,6 +11,7 @@ $font_accent_2_hover: silver;
|
|||
$font_accent_3: black;
|
||||
$font_accent_4: black;
|
||||
$font_default: black;
|
||||
$font_menu: white;
|
||||
$font_default_inverted: white;
|
||||
|
||||
$shadow_accent_1: rgba(0,0,0,1);
|
||||
|
|
@ -43,3 +47,4 @@ $pico_view: 320px;
|
|||
$the_laend_yellow: rgb(255, 255, 0);
|
||||
$menu_text_transform: uppercase;
|
||||
$hide_footer: true;
|
||||
$show_mobile_menu: false;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,16 @@
|
|||
$background_accent_1: rgb(247, 196, 24 );
|
||||
$background_accent_2: black;
|
||||
$menu_background_color: transparent;
|
||||
$menu_background_dropdown_color: white;
|
||||
$menu_accent_hover: red;
|
||||
$menu_box_background: transparent;
|
||||
|
||||
$font_accent_1: red;
|
||||
$font_accent_2: maroon;
|
||||
$font_accent_2_hover: orangered;
|
||||
$font_accent_3: orangered;
|
||||
$font_accent_4: rgb(247, 196, 24);
|
||||
$font_menu: black;
|
||||
$font_default: white;
|
||||
|
||||
$shadow_accent_1: rgba(255, 190, 14, 0.5);
|
||||
|
|
@ -40,3 +45,4 @@ $pico_view: 320px;
|
|||
|
||||
$menu_text_transform: none;
|
||||
$hide_footer: false;
|
||||
$show_mobile_menu: false;
|
||||
|
|
|
|||
18
content/kontakt/contents.lr
Normal file
18
content/kontakt/contents.lr
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
_model: page
|
||||
---
|
||||
title: Stream start
|
||||
---
|
||||
body:
|
||||
|
||||
Du veranstaltest ein Event mit Vortragsprogramm, das diese Vorträge gerne für ein größeres Publikum zugänglich machen möchte?
|
||||
Du oder Wesen mit denen du gerne Zeit verbringst, haben ein spannedes Projekt, einen cooleen Hack oder eine unterhaltsamme Entdeckung, das Sie gerne der Welt erzählen wollen?
|
||||
|
||||
Sehr cool! Dann nimm gerne Kontakt mit uns auf!
|
||||
|
||||
```
|
||||
video [at] winkekatze.tv
|
||||
```
|
||||
|
||||
Das Winkekatzen Video Operation Center hilft gerne dabei, Wissen mit der Welt zu teilen. Wir haben gute Erfahrungen damit gesammelt, auch zusammen mit anderen von Streaming begeisterten Hackern kleine oder auch größere Streamingprojekte zu ermöglichen. Zum Beispiel an der Jahresendveranstaltung des Chaos Computer Club sind wir bei [Chaos West TV](https://chaoswest.tv) dabei, das Studio zu betreiben, eine Bühne zu bauen und haben am Ende gemeinsam viele spannende Vorträge gestreamt und veröffentlich.
|
||||
|
||||
Auch beim Winterkongress oder der CoSin haben wir mit dem CHVOC, dem Video Operation Center aus der Schweiz zusammen das Vortragsprogramm mit dem Internet geteilt und aufgezeichnet.
|
||||
16
databags/navigation.json
Normal file
16
databags/navigation.json
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"Hällo": {
|
||||
"href": "/haello"
|
||||
},
|
||||
"Veranstaltungen": {
|
||||
"href": "/events"
|
||||
},
|
||||
"Kontakt": {
|
||||
"list_childs": true,
|
||||
"items": {
|
||||
"Kontakt": "/kontakt",
|
||||
"Datenschutz": "/datenschutz",
|
||||
"Impressum": "https://c3woc.de/impressum/"
|
||||
}
|
||||
}
|
||||
}
|
||||
56
templates/blocks/navigation.html
Normal file
56
templates/blocks/navigation.html
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
{% block navigation %}
|
||||
<nav>
|
||||
<ul>
|
||||
{% for title, mapping in bag("navigation").items() %}
|
||||
{% if mapping.visible|default(true) %}
|
||||
{% if not mapping.list_childs %}
|
||||
<li>
|
||||
<a
|
||||
{% if this._path == mapping.href %} class="active"
|
||||
{% endif %} {{- ' ' -}}
|
||||
href="{{ mapping.href|url }}">
|
||||
{{- title -}}
|
||||
</a>
|
||||
{% else %}
|
||||
<li class="dropdown">
|
||||
<button type="button" class="title_dropdown" aria-expanded="false" aria-controls="sweets-dropdown">
|
||||
{{ title }}
|
||||
</button>
|
||||
<ul class="dropdown__menu">
|
||||
{% set sub_menu = mapping['items'].items() %}
|
||||
{% for sub_title, href in sub_menu %}
|
||||
{% if sub_title != "list_namespace" %}
|
||||
<li>
|
||||
<a
|
||||
{% if this._path == href %}
|
||||
{{- ' class="active"' }}
|
||||
{% endif %} {{- ' ' -}}
|
||||
href="{{ href }}">
|
||||
{{- sub_title -}}
|
||||
</a>
|
||||
</li>
|
||||
{% else %}
|
||||
{% set children = site.get(href).children %}
|
||||
{% for child in children %}
|
||||
{% if loop.index <= 3 %}
|
||||
<li>
|
||||
<a
|
||||
{% if this._path + '/' == child.url_path %}
|
||||
{{- ' class="active"' -}}
|
||||
{% endif %} {{- ' ' -}}
|
||||
href="{{ child.url_path }}">
|
||||
{{- child.title -}}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
{% endblock %}
|
||||
|
|
@ -39,21 +39,7 @@
|
|||
winkekatze.tv
|
||||
{%- endblock -%}
|
||||
</a></h1>
|
||||
<nav>
|
||||
<ul class="nav navbar-nav">
|
||||
{%- for href, title in [
|
||||
['/haello', 'Hällo'],
|
||||
['/events', 'Veranstaltungen'],
|
||||
['/datenschutz', 'Datenschutzerklärung'],
|
||||
['https://c3woc.de/impressum/', 'Impressum']
|
||||
] %}
|
||||
<li
|
||||
{%- if this.is_child_of(href) %} class="active"{%- endif -%}>
|
||||
<a href="{{ href }}">{{ title }}</a>
|
||||
</li>
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
{%- include "blocks/navigation.html" -%}
|
||||
</header>
|
||||
<div class="
|
||||
{%- block class -%}
|
||||
|
|
|
|||
Loading…
Reference in a new issue