Creating layout for startpage (and copy winkekatze.svg)

.gitignore

@@ -58,6 +58,8 @@ assets/css/main.css.map
 assets/css/ie9.css.map
 assets/css/main.min.css.map
 assets/css/ie9.min.css.map
+assets/css/start.min.css
+assets/css/*.min.css
 tmp/
 libsass/
 sass-spec/

assets/images/winkekatze.svg

@@ -0,0 +1,71 @@
+<svg width="1024" height="1024" version="1.1" viewBox="0 0 270.93 270.93" 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#">
+ <title>Winkekatze</title>
+ <g>
+  <g transform="translate(4.6053 -.36263)">
+   <g transform="matrix(2.4069 0 0 2.4069 -11.812 -615.3)" fill="#ffff58">
+    <path d="m78.925 359.49c-9.5175 5.6142-40.77 4.392-47.491 1.868-6.7129-2.5208-7.7352-10.756-6.2872-20.274 1.4781-9.7156 7.5354-19.432 7.9513-25.551 0.41593-6.1193 0.89258-13.243 4.5041-12.429 3.6115 0.81383 8.4047 4.107 16.827 4.2484 8.4225 0.14141 13.88-5.8024 17.093-2.7686 3.2135 3.0338 7.3557 8.6777 8.712 13.763 1.3563 5.0852 0.93597 6.2978 1.5869 9.3793 0.68664 3.2508 2.6365 7.3981 2.0955 18.919-0.5056 10.766-1.4408 10.747-4.992 12.845z"/>
+    <path d="m47.034 262.05s3.8166-1.8803 8.397-1.6893c4.5804 0.19101 7.7775 2.201 7.7775 2.201s4.2626-3.6475 8.9353-4.5534 9.623-0.82987 9.1114 6.9942c-0.51155 7.824-1.916 11.596-1.916 11.596s2.5129 8.5123 1.0471 13.008c-1.4657 4.4957-4.5124 14.926-22.853 15.205-18.341 0.27922-25.676-7.0318-27.622-14.018-1.9466-6.9864 0.95156-13.734 0.95156-13.734s-2.7962-6.6901-1.954-11.699c0.84226-5.0084 1.4953-8.6825 8.4407-7.1765 6.9454 1.506 9.6851 3.8649 9.6851 3.8649z"/>
+    <path d="m88.807 275.33c6.9566 1.2496 8.0946 4.2005 7.3114 8.4484-0.72782 3.9474-3.9398 3.4424-8.5756 3.1508-5.052-0.31787-7.009-2.4092-6.9343-6.2301 0.09947-5.0901 3.3974-5.5359 8.1985-5.369z" stop-color="#000000" style="-inkscape-stroke:none;font-variation-settings:normal"/>
+   </g>
+   <g transform="matrix(2.4069 0 0 2.4069 -307.01 -620.06)">
+    <g fill="#ffc000">
+     <g transform="translate(122.64 1.9758)">
+      <path d="m32.857 353.07c7.5772-0.0254 16.055 4.2543 16.167 8.3743 0.11247 4.12-4.7816 4.6595-11.634 5.0272-6.8528 0.36774-10.463-1.2321-11.694-3.7942-1.2313-2.5622-0.5547-9.6502 7.161-9.6073z" fill="#ffc000"/>
+     </g>
+     <path d="m199.48 355.05c-7.8872-0.28752-16.238 4.0993-16.167 8.3743 0.0684 4.121 4.7816 4.6595 11.634 5.0272 6.8528 0.36774 10.463-1.2321 11.694-3.7942 1.2313-2.5622 0.5547-9.6502-7.161-9.6073z"/>
+     <path d="m215.92 301.28c1.0493-4.2434 0.56703-11.047 0.46307-12.479-1.3447 0.2156-2.8001 0.24997-4.305 0.21062-2.0138-0.0527-4.1503-0.34766-6.081-1.0744-0.53665 2.5559-0.67124 7.0193-1.7298 9.7253-1.7595 4.2773-9.2404 9.7456-9.0131 10.014 3.9079 4.6132 4.2446 5.486 6.8345 10.246 7.5306-6.9022 12.273-10.34 13.831-16.642z"/>
+     <path d="m157.33 276.51c0.36624 2e-3 2.1114-2.4258 4.0221-4.0942 1.354-1.1823 2.739-2.1769 3.5667-2.7041 0.68126-0.43398-7.1963-3.4205-7.9901-2.7004-0.79381 0.72006-0.16659 9.4717 0.40128 9.4988z" stop-color="#000000" style="-inkscape-stroke:none;font-variation-settings:normal"/>
+     <path d="m198.35 275.56c-0.61349-0.61545-2.5262-2.9874-4.0221-4.0942-1.5458-1.1437-3.0223-2.1074-3.5667-2.7041-0.54438-0.59676 7.1963-3.4205 7.9901-2.7004 0.79381 0.72006 0.16659 9.4717-0.40128 9.4988z" stop-color="#000000" style="-inkscape-stroke:none;font-variation-settings:normal"/>
+    </g>
+    <path d="m160.85 313.73c1.1052 13.051 0.68683 26.362 0 39.719l36.637-19.849-36.637-19.849z" stroke-width="10.447"/>
+    <g>
+     <g>
+      <path transform="translate(122.64 1.9758)" d="m42.685 358.99c-0.0579 1.7389 0.74849 5.1987 1.2387 5.7561 0.55215-2.1961-0.08045-5.1271-1.2387-5.7561z"/>
+      <path transform="translate(122.64 1.9758)" d="m37.315 359.76c-0.18004 1.766 0.58529 4.9213 1.0755 5.4786 0.55215-2.1961 0.08275-4.8497-1.0755-5.4786z"/>
+      <path transform="translate(122.64 1.9758)" d="m32.399 360c-0.0579 1.7389 0.51654 4.6806 1.0068 5.238 0.73483-2.2481 0.1515-4.609-1.0068-5.238z"/>
+      <path transform="translate(122.64 1.9758)" d="m67.006 358.99c0.0579 1.7389-0.24469 4.9871-1.0524 5.8777-0.55215-2.1961-0.10591-5.2488 1.0524-5.8777z"/>
+      <path transform="translate(122.64 1.9758)" d="m72.376 359.76c0.3979 2.0107-0.56109 5.1973-1.0513 5.7547-0.55215-2.1961-0.10695-5.1257 1.0513-5.7547z"/>
+      <path transform="translate(122.64 1.9758)" d="m77.038 359.82c0.0579 1.7389-0.0076 4.845-0.7305 5.5545-0.73483-2.2481-0.42776-4.9256 0.7305-5.5545z"/>
+     </g>
+     <path d="m174.48 288.86c0.27053-0.91282 1.1645-1.1736 3.8334-1.1883 2.7483-0.0152 3.5905 0.53004 3.8636 1.3155 0.27301 0.78549-0.44981 3.062-3.6709 3.0707-3.2211 9e-3 -4.2847-2.0575-4.026-3.1979z"/>
+     <path d="m179.4 292.06c0.57748 1.9935 2.3202 3.6952 4.1348 3.6961 1.8146 0 3.6044-2.2931 3.6924-2.613 0.28852-1.0495 1.8273-1.2561 1.3745 0.32135-0.36787 1.2816-1.3436 4.24-4.9422 4.254-3.5938 0.014-6.2256-3.1856-5.9858-5.8047 0.25362-2.7693 1.7263 0.14623 1.7263 0.14623z"/>
+     <path d="m188.52 285.56c1.9564-1.1184 4.4886-0.99907 6.4149 0.12408 1.403 1.0415 3.2586 0.91085 2.4275-0.65016-0.64625-0.96881-1.624-1.7042-2.6178-2.295-1.4778-0.7798-3.2702-0.70491-5.4505-0.32946-2.6444 0.74613-4.0526 2.5916-3.6447 3.3643 0.24928 0.47213 1.2241 0.47088 2.8706-0.21372z"/>
+     <path d="m195.2 290.7c0.20324-0.53989 0.77605-0.48741 1.2043-0.40978 0.57946 0.0997 1.1565 0.21383 1.7363 0.31275 0.66569 0.13284 1.3558 0.26955 1.9366 0.63863 0.30207 0.17053 0.40631 0.54735 0.25473 0.8528-0.13551 0.44027-0.51351 0.81612-0.98759 0.85286-0.77164 0.0729-1.4928-0.2899-2.1857-0.57726-0.60499-0.28967-1.2765-0.51594-1.7487-1.0142-0.16666-0.17118-0.25556-0.41842-0.21003-0.65582z"/>
+     <path d="m194.93 293.39c0.96015 0.5418 2.0364 0.92189 2.8786 1.6448 0.58122 0.5383 0.61088 1.5156-0.15711 1.7042-0.83275 0.0969-1.5985-0.39004-2.2714-0.82222-0.5357-0.38764-1.068-0.80751-1.4771-1.3292-0.35774-0.64627 0.29933-1.5168 1.027-1.1975z"/>
+     <path d="m177.38 292.06c-0.57749 1.9935-2.2101 3.6952-4.0248 3.6961-1.8146 0-3.4825-2.1396-3.5704-2.4595-0.28852-1.0495-1.9493-1.4096-1.4965 0.16787 0.36788 1.2816 1.3439 4.2083 4.9422 4.254 3.5983 0.0457 6.2471-3.0361 5.9858-5.8047-0.26136-2.7686-1.8364 0.14623-1.8364 0.14623z"/>
+     <path d="m168.37 285.56c-1.9564-1.1184-4.4886-0.99907-6.4149 0.12408-1.403 1.0415-3.5791 1.334-2.4275-0.65016 0.64625-0.96881 1.624-1.7042 2.6178-2.295 2.9639-1.0805 7.3657-0.62239 8.8322 1.7386 0.78669 2.1029-1.4795 1.7091-2.6076 1.0825z"/>
+     <path d="m161.69 290.7c-0.20323-0.53989-0.77604-0.48741-1.2043-0.40978-0.57946 0.0997-1.1565 0.21383-1.7363 0.31275-0.66569 0.13284-1.3559 0.26955-1.9366 0.63863-0.30206 0.17053-0.4063 0.54735-0.25472 0.8528 0.13551 0.44027 0.51351 0.81612 0.98758 0.85286 0.77164 0.0729 1.4928-0.2899 2.1857-0.57726 0.605-0.28967 1.2765-0.51594 1.7487-1.0142 0.16666-0.17118 0.25556-0.41842 0.21002-0.65582z"/>
+     <path d="m161.85 293.48c-0.84875 0.37168-1.9271 0.82827-2.7693 1.5512-0.58121 0.5383-0.61088 1.5156 0.15711 1.7042 0.83276 0.0969 1.5985-0.39004 2.2714-0.82222 0.53571-0.38764 1.068-0.80751 1.4771-1.3292 0.35775-0.64627-0.25475-1.2464-1.1363-1.1039z"/>
+    </g>
+   </g>
+   <path d="m68.325 140.52c-0.47407 8.1075 3.706 14.92 10.662 15.91 6.9559 0.98987 24.34 0.41794 22.945 20.802-1.3956 20.384-20.098 18.866-21.872 18.8-1.7739-0.0659-29.71-3.0324-36.452-26.252-6.742-23.22 5.3911-48.512 16.758-53.225 6.9407-2.8779 10.574-1.5563 13.369-0.75551-3.1718 7.3596-4.8961 17.376-5.4105 24.72z" fill="#ffc000"/>
+   <path d="m75.464 105.9c19.079 11.595 32.618 11.836 46.268 12.101 13.721 0.26712 30.513-3.3381 37.858-6.9272 2.3822-1.1641 1.7009 3.6057-0.22096 5.9417-1.6732 2.0338-22.071 10.819-40.479 10.939-18.312 0.11963-41.086-11.857-42.385-13.56-1.7158-2.2483-3.5869-9.5682-1.0416-8.4952z" fill="#f00"/>
+  </g>
+ </g>
+ <metadata>
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <cc:license rdf:resource="http://creativecommons.org/licenses/by-sa/4.0/"/>
+    <dc:creator>
+     <cc:Agent>
+      <dc:title>L3D &lt;l3d@c3woc.de&gt;</dc:title>
+     </cc:Agent>
+    </dc:creator>
+    <dc:rights>
+     <cc:Agent>
+      <dc:title>CC-BY-SA  4.0</dc:title>
+     </cc:Agent>
+    </dc:rights>
+    <dc:title>Winkekatze</dc:title>
+   </cc:Work>
+   <cc:License rdf:about="http://creativecommons.org/licenses/by-sa/4.0/">
+    <cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction"/>
+    <cc:permits rdf:resource="http://creativecommons.org/ns#Distribution"/>
+    <cc:requires rdf:resource="http://creativecommons.org/ns#Notice"/>
+    <cc:requires rdf:resource="http://creativecommons.org/ns#Attribution"/>
+    <cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks"/>
+    <cc:requires rdf:resource="http://creativecommons.org/ns#ShareAlike"/>
+   </cc:License>
+  </rdf:RDF>
+ </metadata>
+</svg>

assets/scss/_footer.scss

@@ -0,0 +1,6 @@
+footer {
+    margin: 0 auto;
+    background: $background_accent_1;
+    padding: 20px 30px;
+    box-shadow: 5px 5px 5px 10px $background_accent_1;
+}

assets/scss/_general.scss

@@ -0,0 +1,13 @@
+body {
+    font-family: 'Verdana', sans-serif;
+    margin: 25px 25px 50px 25px;
+    background: $background_accent_2;
+}
+
+a {
+    color: $font_accent_2;
+}
+
+a:hover {
+    color: $font_accent_3;
+}

assets/scss/_header.scss

@@ -0,0 +1,22 @@
+header {
+    margin: 0 auto;
+    background: $background_accent_1;
+    padding: 20px 30px;
+    box-shadow: 5px 5px 5px 10px $background_accent_1;
+    h1 {
+        color: $font_accent_1;
+        margin: 0;
+        font-weight: normal;
+        font-size: 42px;
+    }
+    nav ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        li {
+            display: inline;
+            margin: 0 8px 0 0;
+            padding: 0;
+        }
+    }
+}

assets/scss/_page.scss

@@ -0,0 +1,5 @@
+div.page {
+    margin: 0 auto;
+    padding: 20px 30px;
+    background: transparent;
+}

assets/scss/_start.scss

@@ -0,0 +1,16 @@
+div.start {
+    margin: 0 auto;
+    padding: 50px 0px;
+    background: transparent;
+    display: flex;
+    .left {
+        flex: 45%;
+        text-align: center;
+    }
+    .right {
+        flex: 55%;
+    }
+    img {
+        width: 100%;
+    }
+}

assets/scss/_variables.scss

@@ -0,0 +1,6 @@
+$background_accent_1: rgb(247, 196, 24 );
+$background_accent_2: rgba(227, 223, 99, 0.6);
+
+$font_accent_1: red;
+$font_accent_2: maroon;
+$font_accent_3: orangered;

assets/scss/main.scss

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

assets/scss/start.scss

@@ -0,0 +1,7 @@
+@import "_variables";
+
+@import "_start";
+
+@import "_general";
+@import "_header";
+@import "_footer";

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/layout.html

@@ -1,14 +1,25 @@
 <!doctype html>
 {%- macro titlestring() -%}
-  {% block title %}Welcome{% endblock %} — winkekatze.tv
+  {%- block title -%}
+    Welcome
+  {%- endblock -%}
+  {{ ' — winkekatze.tv' }}
 {%- endmacro -%}
 {%- macro descriptionstring() -%}
-  {% block description %}Winkekatze Video Operation Center{% endblock %} — winkekatze.tv
+  {%- block description -%}
+    Winkekatze Video Operation Center
+  {%- endblock -%}
+  {{ ' — winkekatze.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="{{ '/static/style.css'|url }}">
+  <link rel="stylesheet" href="{{ cssfile()|asseturl }}">
   <title>{{- titlestring() -}}</title>
 
   <meta name="generator" content="lektor" />
@@ -42,9 +53,13 @@
       </ul>
     </nav>
   </header>
-  <div class="page">
+  <div class="
+    {%- block class -%}
+      page
+    {%- endblock -%}">
     {%- block body -%}
-    {%- endblock -%}
+      <p>Hello World</p>
+    {%- endblock %}
   </div>
   <footer>
     &copy; Copyright 2022 by L3D under <a href="https://backwesen.de/voc/winkekatze.tv/src/branch/main/LICENCE">MIT License</a> | <a href="https://backwesen.de/voc/winkekatze.tv.git">Source Code</a>

templates/page.html

@@ -3,6 +3,12 @@
   {{- this.title -}}
 {%- endblock -%}
 {%- block body -%}
-  <h2>{{ this.title }}</h2>
+    <h2>{{ this.title }}</h2>
-  {{ this.body }}
+    {{ this.body }}
+{%- endblock -%}
+{%- block class -%}
+  page
+{%- endblock -%}
+{%- block scss -%}
+  css/main.min.css
 {%- endblock -%}

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

winkekatze.tv.lektorproject

@@ -16,4 +16,5 @@ name = Englisch
 locale = en_US
 url_prefix = /en/
 
-
+[packages]
+lektor-scss = 1.4.1