HÄLLO THE LÄND

assets/scss/_fonts.scss

@@ -1,7 +1,7 @@
 
 /* mochiy-pop-one-regular - latin */
 @font-face {
-  font-family: $headline_font;
+  font-family: 'Mochiy Pop One';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
@@ -13,7 +13,7 @@
 
 // Lato font
 @font-face {
-  font-family: $main_font;
+  font-family: 'Lato';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
@@ -24,7 +24,7 @@
 }
 
 @font-face {
-  font-family: $main_font;
+  font-family: 'Lato';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
@@ -35,7 +35,7 @@
 }
 
 @font-face {
-  font-family: $main_font;
+  font-family: 'Lato';
   font-style: normal;
   font-weight: 900;
   font-display: swap;
@@ -46,7 +46,7 @@
 }
 
 @font-face {
-  font-family: $main_font;
+  font-family: 'Lato';
   font-style: italic;
   font-weight: 400;
   font-display: swap;
@@ -57,7 +57,7 @@
 }
 
 @font-face {
-  font-family: $main_font;
+  font-family: 'Lato';
   font-style: italic;
   font-weight: 700;
   font-display: swap;
@@ -68,7 +68,7 @@
 }
 
 @font-face {
-  font-family: $main_font;
+  font-family: 'Lato';
   font-style: italic;
   font-weight: 900;
   font-display: swap;

assets/scss/_footer.scss

@@ -1,4 +1,7 @@
 footer {
+    @if $hide_footer == true {
+        display: none;
+    }
     margin: 0 auto;
     background: $background_accent_2;
     padding: 20px 30px;

assets/scss/_general.scss

@@ -2,4 +2,5 @@ body {
     font-family: $main_font, sans-serif;
     margin: 25px 25px 50px 25px;
     background: $background_accent_2;
+    font-weight: $font_weight_default;
 }

assets/scss/_header.scss

@@ -22,9 +22,10 @@ header {
             background: $shadow_accent_1;
             padding: 6px 18px;
             border-radius: 5px;
+            text-transform: $menu_text_transform;
         }
         a:hover, a:active {
-            color: $font_accent_3;
+            color: $font_accent_2_hover;
             box-shadow: 0px 0px 1px 1px $shadow_accent_1;
         }
         li {

assets/scss/_laend.scss

@@ -0,0 +1,84 @@
+div.laend {
+    margin: 0 auto;
+    padding: 80px 30px;
+    background: transparent;
+    background-image: url("data:image/svg+xml,%3Csvg class='m-collage-slider__shape' style='fill: white;transform:translate3d(0px, 0.94vh, 0px) scale(0.9944, 0.99436)' version='1.1' viewBox='0 0 197 225' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M76.453 18.472L92.18 34.005a2.433 2.433 0 003.271.138l26.211-21.89a3.486 3.486 0 001.042-1.482l3.095-8.477a3.481 3.481 0 013.826-2.25l17.686 2.859a3.486 3.486 0 012.508 1.781l10.084 18.593a3.442 3.442 0 003.246 1.795l4.943-.321a3.486 3.486 0 013.439 2.133l24.719 58.924a9.627 9.627 0 01.288 6.672l-11.147 34.685a3.487 3.487 0 01-1.735 2.043l-14.784 7.544a3.5 3.5 0 00-1.809 3.919l14.173 60.03a3.498 3.498 0 01-1.777 3.901l-31.353 16.429a3.493 3.493 0 01-1.43.392l-10.505.556a3.448 3.448 0 01-1.037-.102l-35.805-9.071a7.04 7.04 0 01-3.45-2.052l-6.858-7.421a3.483 3.483 0 00-2.398-1.117l-12.502-.568a3.482 3.482 0 00-2.731 1.132l-2.592 2.841a1.853 1.853 0 00-.048 2.44l5.583 6.627a2.3 2.3 0 01-.402 3.339l-4.787 3.494a3.496 3.496 0 01-1.874.665l-54.776 2.81a3.484 3.484 0 01-3.16-1.682l-8.83-14.629a3.499 3.499 0 01-.432-2.516l18.285-88.522a14.602 14.602 0 013.347-6.706l31.504-35.748c.418-.474.7-1.055.815-1.678l9.22-50.073a3.492 3.492 0 012.069-2.583l7.334-3.115a3.482 3.482 0 013.807.728z'/%3E%3C/svg%3E");
+    background-position: center; /* Center the image */
+    background-repeat: no-repeat; /* Do not repeat the image */
+    background-size: auto;
+    text-align: center;
+    max-width: 80%;
+    p {
+        color: $font_default;
+        font-size: $font_size_default;
+        font-weight: $font_weight_default;
+    }
+    code{
+        color: $font_default;
+        font-size: $font_size_h2;
+        font-weight: $font_weight_default;
+    }
+    a, a:link, a:visited, a:active {
+        color: $font_default;
+    }
+
+    h1 {
+        color: $font_accent_3;
+        font-size: $font_size_h1;
+        text-shadow: 0px 0px 1px black;
+    }
+    h2 {
+        color: $font_accent_3;
+        font-size: $font_size_h2;
+        text-shadow: 0px 0px 1px white;
+    }
+    img {
+        max-width: 40%;
+        margin-top: 50px;
+    }
+}
+
+@media (min-width: $large_view) {
+    div.laend {
+        margin: auto;
+        max-width: $large_min_width;
+        p {
+            font-size: $font_size_default_large;
+        }
+        h1 {
+            font-size: $font_size_h1_large;
+        }
+        h2 {
+            font-size: $font_size_h2_large;
+        }
+    }
+}
+
+@media (max-width: $mobile_view) {
+    div.laend {
+        max-width: 100%;
+        p, a{
+          font-size: $font_size_default_mobile;
+        }
+        code {
+            font-size: $font_size_code_mobile;
+        }
+        img {
+            max-width: 60%;
+        }
+        h1 {
+            font-size: $font_size_h1_mobile;
+        }
+        h2 {
+            font-size: $font_size_h2_mobile;
+        }
+    }
+}
+
+@media (max-width: $tiny_view) {
+    div.laend {
+        p, a{
+          font-size: $font_size_default_tiny;
+        }
+    }
+}

assets/scss/_laend_fonts.scss

@@ -0,0 +1,33 @@
+/* eb-garamond-regular - latin */
+@font-face {
+  font-family: 'EB Garamond';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local(''),
+       url('/fonts/eb-garamond-v19-latin-regular.woff2') format('woff2'),
+       url('/fonts/eb-garamond-v19-latin-regular.woff') format('woff'),
+       url('/fonts/eb-garamond-v19-latin-regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: Epilogue;
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: local(''),
+      url('/fonts/epilogue-v7-latin-700italic.woff2') format('woff2'),
+      url('/fonts/epilogue-v7-latin-700italic.woff') format('woff'),
+      url('/fonts/epilogue-v7-latin-700italic.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: Epilogue;
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: local(''),
+      url('/fonts/epilogue-v7-latin-700italic.woff2') format('woff2'),
+      url('/fonts/epilogue-v7-latin-700italic.woff') format('woff'),
+      url('/fonts/epilogue-v7-latin-700italic.ttf') format('truetype');
+}

assets/scss/_laend_variables.scss

@@ -0,0 +1,45 @@
+$background_accent_1: rgb(255,255,0);
+$background_accent_2: $background_accent_1;
+
+$font_accent_1: black;
+$font_accent_2: white;
+$font_accent_2_hover: silver;
+$font_accent_3: black;
+$font_accent_4: black;
+$font_default: black;
+$font_default_inverted: white;
+
+$shadow_accent_1: rgba(0,0,0,1);
+$font_size_default: 1.3em;
+$font_weight_default: 700;
+$font_size_default_large: 2.2em;
+$font_size_default_mobile: 1em;
+$font_size_default_tiny: 0.9em;
+$font_size_default_pico: 0.7em;
+$font_size_code: 1.6em;
+$font_size_code_large: 2.6em;
+$font_size_code_mobile: 1.1em;
+$font_size_h1: 2.3em;
+$font_size_h1_large: 4.5em;
+$font_size_h1_mobile: 1.4em;
+$font_size_h1_tiny: 1em;
+$font_size_h1_pico: 0.8em;
+$font_size_h2: 1.9em;
+$font_size_h2_large: 3.2em;
+$font_size_h2_mobile: 1.25em;
+$font_size_h2_tiny: 0.9em;
+$font_size_h2_pico: 0.75em;
+
+$headline_font: 'EB Garamond';
+$main_font: 'Epilogue';
+
+$large_min_width: 1800px;
+
+$large_view: 1920px;
+$mobile_view: 900px;
+$tiny_view: 450px;
+$pico_view: 320px;
+
+$the_laend_yellow: rgb(255, 255, 0);
+$menu_text_transform: uppercase;
+$hide_footer: true;

assets/scss/_page.scss

@@ -22,7 +22,6 @@ div.page {
         text-shadow: 0px 0px 1px black;
     }
     img {
-        max-height: 7dh;
         max-width: 100%;
     }
 }
@@ -52,7 +51,6 @@ div.page {
             font-size: $font_size_code_mobile;
         }
         img {
-            max-height: 5dh;
             max-width: 90%;
         }
         h1 {

assets/scss/_start.scss

@@ -14,7 +14,6 @@ div.start {
         flex: 55%;
     }
     img {
-        max-height: 6dh;
         max-width: 100%;
     }
 
@@ -54,7 +53,6 @@ div.start {
             text-shadow: 0px 0px 4px black;
         }
         img {
-            max-height: 8dh;
             max-width: 100%;
         }
 
@@ -75,7 +73,6 @@ div.start {
             margin-top: 40px;
         }
         img {
-            max-height: 4dh;
             max-width: 90%;
 
         }

assets/scss/_variables.scss

@@ -3,11 +3,13 @@ $background_accent_2: black;
 
 $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_default: white;
 
 $shadow_accent_1: rgba(255, 190, 14, 0.5);
+$font_weight_default: 400;
 $font_size_default: 1.3em;
 $font_size_default_large: 2.2em;
 $font_size_default_mobile: 1em;
@@ -36,3 +38,6 @@ $large_view: 1920px;
 $mobile_view: 900px;
 $tiny_view: 450px;
 $pico_view: 320px;
+
+$menu_text_transform: none;
+$hide_footer: false;

assets/scss/laend.scss

@@ -0,0 +1,8 @@
+@import "_laend_variables";
+@import "_laend_fonts";
+
+@import "_laend";
+
+@import "_general";
+@import "_header";
+@import "_footer";

assets/scss/main.scss

@@ -1,7 +1,7 @@
 @import "_variables";
 @import "_fonts";
 
-@import "_page.scss";
+@import "_page";
 
 @import "_general";
 @import "_header";

content/haello/contents.lr

@@ -0,0 +1,19 @@
+_model: laend
+---
+title: HÄLLO
+---
+body:
+
+Das Winkenkätzle Videö Operation Centär ist eine kleine Gruppe von chaosnahen Wesen aus THE LÄND - Baden-Württemberg.
+
+Wir sind begeistert von Video- und Veranstaltungstechnik und Streamän und Recordän gerne Vorträge von Häckern, Tüftlern und kreativ denkenden Wesen aus [THE LÄND](https://vimeo.com/639541607) *oder auch aus weiterer Ferne.*
+
+Gibt es bei bei dir auch spannende Vorträge oder ähnliches, die gerne gestreamt und recordet wären? Dann Sprich uns an!
+
+```
+video [at] winkekatze.tv
+```
+
+[![Baden-Württemberg ist THE LÄND](bw-thelaend.svg)](https://thelaend.xn--see-br-0xa.se/)
+---
+sitename: Winkekätzle TV

models/laend.ini

@@ -0,0 +1,18 @@
+[model]
+name = Page (THE LAEND Style)
+label = {{ this.title }}
+
+[fields.title]
+label = Title
+type = string
+width = 1/2
+
+[fields.sitename]
+label = Site Name overwrite
+type = string
+default = Hällo
+width = 1/2
+
+[fields.body]
+label = Body
+type = markdown

templates/laend.html

@@ -0,0 +1,17 @@
+{%- extends "layout.html" -%}
+{%- block title -%}
+  {{- this.title -}}
+{%- endblock -%}
+{%- block body -%}
+    <h2>{{ this.title }}</h2>
+    {{ this.body }}
+{%- endblock -%}
+{%- block class -%}
+  laend
+{%- endblock -%}
+{%- block scss -%}
+  css/laend.min.css
+{%- endblock -%}
+{%- block sitetitle -%}
+  {{- this.sitename -}}
+{%- endblock -%}

templates/layout.html

@@ -34,16 +34,17 @@
 </head>
 <body>
   <header>
-    <h1 id="top"><a href="/">winkekatze.tv</a></h1>
+    <h1 id="top"><a href="/">
+      {%- block sitetitle -%}
+        winkekatze.tv
+      {%- endblock -%}
+        </a></h1>
     <nav>
       <ul class="nav navbar-nav">
-        <li
-          {%- if this._path == '/' %} class="active"{%- endif -%}>
-          <a href="{{ '/'|url }}">Hallo</a>
-        </li>
         {%- for href, title in [
-          ['/events' , 'Veranstaltungen'],
-          ['/datenschutz' , 'Datenschutzerklärung'],
+          ['/haello', 'Hällo'],
+          ['/events', 'Veranstaltungen'],
+          ['/datenschutz', 'Datenschutzerklärung'],
           ['https://c3woc.de/impressum/', 'Impressum']
         ] %}
         <li