create menu, add some templates

assets/scss/_header.scss

@@ -1,8 +1,9 @@
+$transition: 280ms all 120ms ease-out;
+
 header {
-    margin: -25px -25px 0px -25px;
     background: $background_accent_1;
-    padding: 20px 30px;
+    top: 0;
-    box-shadow: 5px 5px 5px 10px $background_accent_1;
+    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,76 +12,240 @@ header {
         font-size: $font_size_h1;
         text-decoration: none;
     }
-    nav ul {
+    nav {
-        font-size: $font_size_default;
+        grid-template-rows: auto 1fr auto;
-        list-style: none;
+        padding: 0 1rem;
-        margin: 0;
+        position: sticky;
-        padding: 0;
+        display: grid;
-        a, a:link, a:visited {
+        place-items: flex-start;
-            color: $font_accent_2;
+        margin-left: -25px;
-            text-decoration: none;
+        .title_dropdown {
-            background: $shadow_accent_1;
+            background-color: transparent;
-            padding: 8px 24px;
+            border: none;
-            border-radius: 5px;
+            font-family: inherit;
-            text-transform: $menu_text_transform;
         }
-        a:hover, a:active {
+        > ul {
-            color: $font_accent_2_hover;
+            grid-auto-flow: column;
-            box-shadow: 0px 0px 1px 1px $shadow_accent_1;
+            > li {
+                margin: 0 0.5rem;
+
+                a, .title_dropdown {
+                    text-decoration: none;
+                    text-align: center;
+                    display: inline-block;
+                    color: #fff;
+                    font-size: 1.125rem;
+
+                    &: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;
+        ul {
-            margin: 0 8px 0 0;
+            list-style: none;
+            margin: 0;
             padding: 0;
-        }
+            display: grid;
-    }
-}
 
-@media (min-width: $large_view) {
+            li {
-    header {
+                padding: 0;
-        max-width: $large_min_width;
-        margin: auto;
-        box-shadow: 0px -10000px 0px 10000px $background_accent_1;
-        h1 a, h1 a:hover, h1 a:link {
-            font-size: $font_size_h1_large;
-        }
-        nav ul {
-            font-size: $font_size_default_large;
-        }
-    }
-}
-
-@media (max-width: $mobile_view) {
-    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;
             }
         }
     }
-}
 
-@media (max-width: $tiny_view) {
+    .dropdown {
-    header {
+        position: relative;
-        h1 a, h1 a:hover, h1 a:link {
+
-            font-size: $font_size_h1_tiny;
+        .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);
+            }
         }
-        nav ul {
+
-            font-size: $font_size_default_tiny;
+        .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: 1.125rem;
+            line-height: 1.5;
         }
     }
 }
 
-@media (max-width: $pico_view) {
+
-    header {
+// header {
-        h1 a, h1 a:hover, h1 a:link {
+//     margin: -25px -25px 0px -25px;
-            font-size: $font_size_h1_pico;
+//     background: $background_accent_1;
-        }
+//     padding: 20px 30px;
-    }
+//     box-shadow: 5px 5px 5px 10px $background_accent_1;
-}
+//     h1 a, h1 a:hover, h1 a:link, h1 a:visited {
+//         font-family: $headline_font, sans-serif;
+//         color: $font_accent_1;
+//         margin: 0;
+//         font-weight: bold;
+//         font-size: $font_size_h1;
+//         text-decoration: none;
+//     }
+//     nav ul {
+//         list-style: none;
+//         margin: 0;
+//         padding: 0;
+//         display: inline;
+//         position: relative;
+//         li {
+//             margin: 0 8px 0 0;
+//             padding: 0;
+//             a, a:link, a:visited {
+//                 font-size: $font_size_default;
+//                 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;
+//             }
+//             ul li {
+//                 display: none;
+//                 position: absolute;
+//                 background: green;
+//             }
+//         }
+//     }
+// }
+
+// @media (min-width: $large_view) {
+//     header {
+//         max-width: $large_min_width;
+//         margin: auto;
+//         box-shadow: 0px -10000px 0px 10000px $background_accent_1;
+//         h1 a, h1 a:hover, h1 a:link {
+//             font-size: $font_size_h1_large;
+//         }
+//         nav ul {
+//             font-size: $font_size_default_large;
+//         }
+//     }
+// }
+//
+// @media (max-width: $mobile_view) {
+//     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;
+//             }
+//         }
+//     }
+// }
+// 
+// @media (max-width: $tiny_view) {
+//     header {
+//         h1 a, h1 a:hover, h1 a:link {
+//             font-size: $font_size_h1_tiny;
+//         }
+//         nav ul {
+//             font-size: $font_size_default_tiny;
+//         }
+//     }
+// }
+// 
+// @media (max-width: $pico_view) {
+//     header {
+//         h1 a, h1 a:hover, h1 a:link {
+//             font-size: $font_size_h1_pico;
+//         }
+//     }
+// }

assets/scss/_start.scss

@@ -5,7 +5,7 @@ div.start {
     display: flex;
     .left {
         flex: 45%;
-        text-align: center;
+        text-align: left;
         background: rgba(128,128,128,0.15);
         padding: 12px;
         box-shadow: 0px 0px 2px 8px rgba(128,128,128,0.1);

assets/scss/_variables.scss

@@ -1,11 +1,14 @@
 $background_accent_1: rgb(247, 196, 24 );
 $background_accent_2: black;
+$menu_background_dropdown_color: white;
+$menu_accent_hover: red;
 
 $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);

models/blog-post.ini

@@ -0,0 +1,27 @@
+[model]
+name = Blog Post
+label = {{ this.title }}
+hidden = yes
+
+[fields.title]
+label = Event Name
+type = string
+size = large
+
+[fields.event_start_date]
+label = event start
+type = date
+width = 1/2
+
+[fields.event_end_date]
+label = event end
+type = date
+width = 1/2
+
+[fields.preview]
+label = Preview
+type = markdown
+
+[fields.body]
+label = Body
+type = markdown

models/blog.ini

@@ -0,0 +1,16 @@
+[model]
+name = Blog
+label = Blog
+hidden = true
+
+[fields.title]
+label = Title
+type = string
+
+[children]
+model = blog-post
+order_by = -event_start_date,title
+
+[pagination]
+enabled = true
+per_page = 7

models/page.ini

@@ -0,0 +1,11 @@
+[model]
+name = Page
+label = {{ this.title }}
+
+[fields.title]
+label = Title
+type = string
+
+[fields.body]
+label = Body
+type = markdown

models/start.ini

@@ -0,0 +1,17 @@
+[model]
+name = Start
+label = {{ this.title }}
+hidden = true
+
+[fields.title]
+label = Title
+type = string
+
+[fields.image]
+label = Image
+description = Image URL Path
+type = string
+
+[fields.body]
+label = Body
+type = markdown

templates/blocks/navigation.html

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

templates/blog-post.html

@@ -0,0 +1,12 @@
+{% extends "layout.html" %}
+{% from "macros/blog.html" import render_blog_post %}
+{% block title %}{{ this.title }}{% endblock %}
+{% block body %}
+  {{ render_blog_post(this) }}
+{% endblock %}
+{%- block class -%}
+  events
+{%- endblock -%}
+{%- block scss -%}
+  css/events.min.css
+{%- endblock -%}

templates/blog.html

@@ -0,0 +1,17 @@
+{% extends "layout.html" %}
+{% from "macros/blog.html" import render_blog_post %}
+{% from "macros/pagination.html" import render_pagination %}
+{% block title %}{{ this.title }}{% endblock %}
+{% block body %}
+  {% for child in this.pagination.items %}
+    {{ render_blog_post(child, from_index=true) }}
+  {% endfor %}
+
+  {{ render_pagination(this.pagination) }}
+{% endblock %}
+{%- block class -%}
+  events
+{%- endblock -%}
+{%- block scss -%}
+  css/events.min.css
+{%- endblock -%}

templates/layout.html

@@ -0,0 +1,55 @@
+<!doctype html>
+{%- macro titlestring() -%}
+  {%- block title -%}
+    Welcome
+  {%- endblock -%}
+  {{ ' — chaoswest.tv' }}
+{%- endmacro -%}
+{%- macro descriptionstring() -%}
+  {%- block description -%}
+    Winkekatze Video Operation Center
+  {%- endblock -%}
+  {{ ' — chaoswest.tv' }}
+{%- endmacro -%}
+{%- macro cssfile() -%}
+  {%- block scss -%}
+    css/main.min.css
+  {%- endblock -%}
+{%- endmacro -%}
+<html lang="{{ this.alt }}">
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="{{ cssfile()|asseturl }}">
+  <title>{{- titlestring() -}}</title>
+
+  <meta name="generator" content="lektor" />
+  <meta name="description" content="{{- descriptionstring() -}}">
+  <meta name="author" content="L3D">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml">
+  <meta property="og:url" content="{{ this | url(external=true) }}">
+  <meta property="og:type" content="website">
+  <meta property="og:title" content="{{- titlestring() -}}">
+  <meta property="og:description" content="{{- descriptionstring() -}}">
+</head>
+<body>
+  <header>
+    <h1 id="top"><a href="/">
+      {%- block sitetitle -%}
+        chaoswest.tv
+      {%- endblock -%}
+        </a></h1>
+      {%- include "blocks/navigation.html" -%}
+  </header>
+  <div class="
+    {%- block class -%}
+      page
+    {%- endblock -%}">
+    {%- block body -%}
+      <p>Hello World</p>
+    {%- endblock %}
+  </div>
+  <footer>
+    &copy; Copyright {{ none|datetimeformat('YYYY', 'UTC') }} by Montage2 under <a href="https://gitlab.montage2.de/montage2/chaoswest.tv/-/blob/main/LICENSE">MIT License</a> | <a href="https://gitlab.montage2.de/montage2/chaoswest.tv.git">Source Code</a>
+  </footer>
+</body>

templates/macros/blog.html

@@ -0,0 +1,21 @@
+{%- macro render_blog_post(post, from_index=false) %}
+  <div class="blog-post">
+  {% if from_index -%}
+    <h2 class="headline"><a href="{{ post|url }}">{{ post.title }}</a></h2>
+  {% else -%}
+    <h2 class="headline"><a>{{ post.title }}</a></h2>
+  {% endif -%}
+  <p class="meta">
+    {% if post.event_start_date != post.event_end_date -%}
+      Vom {{ post.event_start_date | dateformat('long', locale=post.alt ) }} bis {{ post.event_end_date | dateformat('long', locale=post.alt) }}.
+    {%- else -%}
+      Am {{ post.event_start_date | dateformat('long', locale=post.alt) }}.
+    {%- endif %}
+  </p>
+  {% if from_index -%}
+    {{ post.preview }}
+  {% else -%}
+    {{ post.body }}
+  {% endif -%}
+  </div>
+{% endmacro -%}

templates/macros/pagination.html

@@ -0,0 +1,29 @@
+{%- macro render_pagination(pagination) %}
+  <div class="pagination">
+    {% if pagination.has_prev -%}
+      <a href="{{ pagination.prev|url }}">&laquo; Previous</a>
+    {% else -%}
+      <a class="disabled">&laquo; Previous</a>
+    {% endif -%}
+    {% for site in range(pagination.pages) -%}
+      {% if site == 0 -%}
+        {%- if pagination.page == site + 1 -%}
+          <a class="disabled">{{ pagination.page }}</a>
+        {%- else -%}
+          <a href="{{ './'| url }}">{{ site + 1 }}</a>
+        {%- endif -%}
+      {%- else -%}
+        {%- if pagination.page == site + 1 -%}
+          <a class="disabled" >{{ pagination.page }}</a>
+        {%- else -%}
+          <a href="{{ './'| url }}page/{{ site + 1  }}/">{{ site + 1 }}</a>
+        {%- endif -%}
+      {%- endif %}
+    {% endfor -%}
+    {% if pagination.has_next -%}
+      <a href="{{ pagination.next|url }}">Next &raquo;</a>
+    {%- else -%}
+      <a class="disabled">Next &raquo;</a>
+    {%- endif %}
+  </div>
+{% endmacro -%}

templates/page.html

@@ -0,0 +1,14 @@
+{%- extends "layout.html" -%}
+{%- block title -%}
+  {{- this.title -}}
+{%- endblock -%}
+{%- block body -%}
+    <h2>{{ this.title }}</h2>
+    {{ this.body }}
+{%- endblock -%}
+{%- block class -%}
+  page
+{%- endblock -%}
+{%- block scss -%}
+  css/main.min.css
+{%- endblock -%}

templates/sitemap.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet href="{{ 'css/sitemap.min.css'|asseturl }}" type="text/css" ?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  {%- for page in [site.root] if page != this recursive %}
+    {%- if not page.hide_from_global_index %}
+  <url><loc>{{ page|url(external=true) }}</loc></url>
+  {{- loop(page.children) }}
+    {%- endif %}
+  {%- endfor %}
+</urlset>

templates/start.html

@@ -0,0 +1,19 @@
+{%- extends "layout.html" -%}
+{%- block title -%}
+  {{- this.title -}}
+{%- endblock -%}
+{%- block body %}
+    <div class="left">
+      <h2>{{ this.title }}</h2>
+      {{ this.body }}
+    </div>
+    <div class="right">
+      <img src="{{ this.image }}" />
+    </div>
+{% endblock -%}
+{%- block class -%}
+  start
+{%- endblock -%}
+{%- block scss -%}
+  css/start.min.css
+{%- endblock -%}