Add kontakt page and new menu

This commit is contained in:
L3D 2022-01-21 03:59:34 +01:00
parent 2f4132dc02
commit 8641c7fdbc
Signed by: l3d
GPG key ID: CD08445BFF4313D1
7 changed files with 277 additions and 48 deletions

View file

@ -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 {
font-size: $font_size_default;
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;
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;
}
a:hover, a:active {
color: $font_accent_2_hover;
box-shadow: 0px 0px 1px 1px $shadow_accent_1;
> 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;
}
}
}
}
li {
display: inline;
margin: 0 8px 0 0;
ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
li {
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,8 +169,19 @@ header {
h1 a, h1 a:hover, h1 a:link {
font-size: $font_size_h1_large;
}
nav ul {
font-size: $font_size_default_large;
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;
}
}
}
}
@ -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;
}
}
}

View file

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

View file

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

View 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
View 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/"
}
}
}

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

View file

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