chore: Paketverwaltungsgedöns ausgeblendet.

.gitignore

@@ -96,3 +96,9 @@ $RECYCLE.BIN/
 .venv
 env
 venv
+
+# Lockfies and package management
+poetry.lock
+pyproject.toml
+package-lock.json
+package.json

assets/css/style.css

@@ -378,7 +378,7 @@ header {
     z-index: 15;
 }
 
-.header__claim h2 {
+.header__claim h2, .header__claim ul {
     font-family: 'Noto Serif', serif;
     font-weight: 700;
     font-weight: normal;
@@ -387,6 +387,10 @@ header {
     margin-top: 0.5em;
 }
 
+.header__claim h2 {
+    margin-left: 7rem;
+}
+
 .header__claim h2 em {
     color: var(--wtf-orange);
 }
@@ -398,7 +402,34 @@ header {
     padding: 0 1rem;
 }
 
-.header__claim p, .header__sub_claim p {
+.header__claim ul {
+    margin: 0;
+    font-size: 2rem;
+}
+
+.header__claim ul li {
+    margin: 0;
+    list-style: none;
+    list-style-image: url('../images/frontpage_tirangle_bullet.svg');
+    list-style-position: inside;
+}
+
+.header__claim ul li.-first {
+    margin-left: 4rem;
+}
+
+.header__claim ul li.-second{
+    margin-left: 2rem;
+}
+
+.header__claim ul li.-third{
+}
+
+.header__claim ul li::marker {
+    font-size: 4.5rem;
+}
+
+.header__sub_claim p {
     font-family: 'Lato', sans-serif;
     font-weight: normal;
     line-height: 1.4rem;
@@ -621,6 +652,7 @@ hr.-even {
 }
 
 .content__box,
+.contact__box,
 .content__half_box,
 .content__third_box,
 .content__aggregate_box {
@@ -745,6 +777,40 @@ hr.-even {
     width: 100%;
 }
 
+/* Contact form on homepage - start */
+.contact__box {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
+}
+
+.contact__box h1 {
+    grid-area: 1 / 1 / 2 / 3;
+    text-align: right;
+    transform-origin: top right;
+    transform: translateX(-95%) rotate(-80deg);
+    padding: 0;
+    max-width: 50%;
+    font-size: 9rem;
+    z-index: 0;
+}
+
+.contact__box .contact_info__box {
+    grid-area: 1 / 1 / 2 / 2;
+    margin-left: 11rem;
+    z-index: 1;
+}
+
+.contact__box .contact_form_box {
+    grid-area: 1 / 2 / 3 / 2;
+    z-index: 1;
+}
+
+.contact_info__box {
+    align-self: end;
+}
+/* Contact form on homepage - end */
+
 .content__box p, .content__box li {
     hyphens: auto;
 }
@@ -802,6 +868,7 @@ hr.-even {
 .nav__wrapper,
 .header__wrapper,
 .content__box,
+.contact__box,
 .content__half_box,
 .footer__wrapper,
 .content__third_box,

assets/images/frontpage_tirangle_bullet.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 25 47" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.103761,0,0,0.0889382,-41.6202,-74.494)">
+        <path d="M400,840L400,1360L640,1120L640,1080L400,840Z" style="fill:rgb(241,155,78);"/>
+    </g>
+</svg>

content/contents.lr

@@ -2,14 +2,19 @@ _model: homepage
 ---
 title: Die WTF Kooperative eG
 ---
-claim_heading: <span>Boosten Sie Ihr <em>Projekt</em> mit der</span><br>
+claim_heading: <span>Boosten Sie Ihr <em>IT-Projekt</em> mit der</span><br>
 <span>chaosnahen Genossen&shy;schaft.</span>
 ---
-claim_content: Setzen Sie Projekte mit Unterstützung von über 200 GenossInnen um.<br>Genossen&shy;schaftlich & solidarisch.
+claim_content:
+<ul>
+<li class="-first">Beratung</li>
+<li class="-second">Entwicklung</li>
+<li class="-third">Betrieb</li>
+</ul>
 ---
 subclaim_heading: Die WTF Kooperative eG ist Ihr kompetenter Partner!
 ---
-subclaim_content: Profitieren Sie von dem Know-how der ExpertInnen der WTF Kooperative eG aus den verschiedensten Disziplinen der Informationstechnologie. Sie haben ein Projekt, das Sie umsetzen wollen? Sprechen Sie uns an!
+subclaim_content: Profitieren Sie von dem Know-how der Expert*innen der WTF Kooperative eG aus den verschiedensten Disziplinen der Informationstechnologie. Sie haben ein Projekt, das Sie umsetzen wollen? Sprechen Sie uns an!
 
 ---
 meta_description: Die Hackergenossenschaft für chaosnahes Wirtschaften 🚀
@@ -17,113 +22,20 @@ meta_description: Die Hackergenossenschaft für chaosnahes Wirtschaften 🚀
 section:
 
 #### flow_text_image_section ####
-title: Genossenschaftlich stark
+title: Wo wir herkommen
 ----
-content_teaser: Die Genossenschaft als solidarische Form des Wirtschaftens.
+# content_teaser: Die Genossenschaft als solidarische Form des Wirtschaftens.
 ----
 content_body:
 
-Die Idee der „Hackergenossenschaft“ wurde zum ersten Mal auf dem 34C3 vorgestellt. Vom Start weg haben sich über 150 Personen gefunden und dafür gearbeitet, dass die Gründung gelingt.
+Die WTF Kooperative eG (Werkkooperative der Technikfreund*innen) ist im Dezember 2020 gegründet worden und bringt geballtes Experten-Know-How aus den verschiedensten Disziplinen der Informationstechnologie an den Start.<br>
+Vom Start weg haben sich über 150 Personen gefunden und dafür gearbeitet, dass die Gründung gelingt.
 
-Ein Unternehmen, dass allen von uns gehört, in dem jeder von uns eine Stimme und das Recht auf Mitsprache hat. Das alles ist nun machbar - in unserer WTF Kooperative eG.
+Ein Unternehmen, dass allen von uns gehört, in dem jeder von uns eine Stimme und das Recht auf Mitsprache hat.<br>
+Wir verstehen uns als Platform für Hackende, auf der mit Gleichgesinnten wirtschaftliche Projekte möglich werden, die es anders nicht gäbe. Wir fördern und bewirtschaften im Kollektiv als Genossenschaft die Leistungen unserer Mitglieder.
 ----
-content_image: Soyuz_ASTP_rocket_launch.jpg
+content_image: map.png
 ----
-content_image_alt: Eine Sojus-Rakete hebt in Baikonur ab (1975)
+content_image_alt: Karte der Bundesrepublik mit Regionen in denen Member aktiv sind
 ----
 content_footer:
-----
-content_image_src:
-#### flow_seperator ####
-#### flow_third_box_section ####
-inner_box:
-
-##### flow_one_innerbox_section #####
-title: Das Wichtigste gibt es jetzt auf die Ohren
------
-box_image: wtf_camp_2020.jpg
------
-box_content: Unser WTF-Podcast fasst für Mitglieder und Interessierte die wichtigsten Nachrichten und Entwicklungen aus dem genossenschaftlichen Leben zusammen.
------
-box_link: Podcast
------
-box_url: /podcast/
-##### flow_one_innerbox_section #####
-title: Zusammen arbyten, die eigene Idee fliegen sehen
------
-box_image: cccamp19.jpg
------
-box_content: Wir verstehen uns als Plattform für Hackende, auf der mit Gleichgesinnten wirtschaftliche Projekte möglich werden, die es anders nicht gäbe. Wir fördern und bewirtschaften im Kollektiv als Genossenschaft die Leistungen unserer Mitglieder.
------
-box_link: Projekte
------
-box_url: /blog/office-as-a-service/
-##### flow_one_innerbox_section #####
-title: Genossenschafts­anteile sind eine Anlage, kein Geschenk.
------
-box_image: wtf-geld.jpg
------
-box_content: Wir bieten unseren Mitgliedern nicht nur ein gutes Netzwerk, sondern auch eine sichere Anlagemöglichkeit. Hier kannst Du Dich über die Anlagekriterien informieren.
------
-box_link: Mitglied werden
------
-box_url: /mitglieder/beitreten/
-#### flow_boxes_section ####
-title: Vielfältige Vorteile
-----
-background_box_title: Sei Teil der Community!
-----
-background_box_claim: Hackergemeinschaft, Crowdfunding, Crowdbuying, Startup, Ausschreibung, …<br> Wir realisieren gemeinsam Projekte, in bester Genossenschaft.
-----
-claim__background_link: Mitglied werden
-----
-claim__background_url: /mitglieder/beitreten/
-----
-claim_boxes:
-
-##### flow_claim_boxes #####
-card_title: Genossenschaftlich solidarisch
------
-card_image: images/circle_icon_building.svg
------
-card_text: Eine Hackergemeinschaft ist eine Aufstellung, die im Markt allerhand bewegen kann.
-##### flow_claim_boxes #####
-card_title: Genossenschaftlich stark
------
-card_image: images/circle_icon_institution.svg
------
-card_text: Was jemand allein nicht kann, das schaffen viele zusammen. Sowohl intellektuell, finanziell und in rechtsicherer, wirtschaftlich stabiler Umgebung.
-##### flow_claim_boxes #####
-card_title: Auf eigene Rechnung oder angestellt
------
-card_image: images/circle_icon_briefcase.svg
------
-card_text: Mach Deine Genossenschaft zu deinem Arbeitgeber, indem Du Dich bei der Genossenschaft anstellen lässt.
-##### flow_claim_boxes #####
-card_title: Helfen und lernen
------
-card_image: images/circle_icon_fist.svg
------
-card_text: Profitiere von Know-How und Erfahrungsaustausch in der Genossenschaft.
-##### flow_claim_boxes #####
-card_title: Die eigene Arbeit managen und abrechnen lassen
------
-card_image: images/circle_icon_clippy.svg
------
-card_text: Rechnungen schreiben? Gewerbeanmeldung? Mehraufwand für Buchführung und Steuererklärung? Spare Dir den Aufwand, lass' das Deine Genossenschaft machen!
-##### flow_claim_boxes #####
-card_title: Virtuelle Teams, großartige Jobs
------
-card_image: images/circle_icon_group.svg
------
-card_text: Viele von uns arbeiten freiberuflich. Von überall her, überall hin, flexibel und freundlich, klein und häufig allein. An manche interessanten Aufgaben und Kunden kommt man als Einzelkämpfer nicht ran. An öffentliche Aufträge schon gar nicht.
-##### flow_claim_boxes #####
-card_title: Langfristige Träume verwirklichen
------
-card_image: images/circle_icon_dragon.svg
------
-card_text: Ein Wohnungsprojekt, einen Altersruhesitz für Haecksen und Hacker einrichten, Geld zurücklegen, Förderung beantragen…
----
-subclaim_address: KONTAKT AUFNEHMEN
----
-subclaim_url: /kontakt/

templates/header_with_logo.html

@@ -47,9 +47,6 @@
                 <h2>{{ this.subclaim_heading }}</h2>
                 {{ this.subclaim_content }}
             </div>
-            <button class="header__button sub_claim__button">
-                <a class="header__button_link" href={{ this.subclaim_url }}>{{ this.subclaim_address }}</a>
-            </button>
         </section>
     </div>
 {% endblock %}

templates/homepage.html

@@ -1,5 +1,7 @@
 {% extends "header_with_logo.html" %}
+
 {%- block title -%}{{ this.title }}{%- endblock -%}
+
 {%- block meta_description -%}
   {%- if this.meta_description is defined and this.meta_description != "" -%}
     {{ this.meta_description }}
@@ -7,12 +9,70 @@
     Werkkooperative der Technikfreundinnen eG
   {%- endif -%}
 {%- endblock -%}
-{% block body %}
 
-    <!-- Startpage content looop -->
+{% block body %}
   {% for blk in this.section.blocks %}
     {{ blk }}
   {% endfor %}
-    <!-- Startpage content loop ende -->
 
+  <div class="contact__box">
+    <h1>Kontakt</h1>
+
+      <div class="contact_info__box">
+      <p>
+        <strong>WTF Kooperative eG</strong><br>
+        Forsmannstr. 14 b<br>
+        22303 Hamburg
+      </p>
+      <p>
+        <strong>E-Mail:</strong><br>
+        office@wtf-eg.de
+      </p>
+      <p>
+        <strong>GnuPG Key:</strong><br>
+        <a href="/gnupg/1129A9F509FE1B36287202A2FE8772F9FB5D572F.asc">1129A9F509FE1B36287202A2FE8772F9FB5D572F</a>
+      </p>
+    </div>
+      <section class="contact_form_box">
+      <div class="content__box">
+          <div class="content__inner_box -width_constraint">
+              {{ this.body }}
+          </div>
+          <div class="content__inner_box -width_constraint content__contact_form_wrapper" style="display:none">
+            <h2>Kontaktformular</h2>
+            <form id="contact_form" class="content__contact_form">
+              <p class="contact_form__note">
+                Deine E-Mail-Adresse wird nicht veröffentlicht.<br>
+                <span aria-hidden="true">Erforderliche Felder sind gekennzeichnet <span class="contact_form--required" aria-hidden="true">*</span></span>
+              </p>
+              <p class="contact_form__text_input">
+                <label for="name">Betreff <span class="contact_form--required" aria-hidden="true">*</span></label>
+                <input id="name" class="contact_form__subject" name="subject" type="text" value="" size="30" maxlength="245" required />
+              </p>
+              <p class="contact_form__textarea">
+                <label for="message">Nachricht <span class="contact_form--required" aria-hidden="true">*</span></label>
+                <textarea id="message" class="contact_form__message" aria-label="message" aria-hidden="true" cols="65" rows="7" name="message" required></textarea>
+              </p>
+              <p class="contact_form__text_input">
+                <label for="name">Name <span class="contact_form--required" aria-hidden="true">*</span></label>
+                <input id="name" class="contact_form__name" name="name" type="text" value="" size="30" maxlength="245" required />
+              </p>
+              <p class="contact_form__text_input">
+                <label for="email">E-Mail-Adresse <span class="contact_form--required" aria-hidden="true">*</span></label>
+                <input id="email" class="contact_form__email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-address" required />
+              </p>
+              <p class="contact_form__captcha">
+                <label for="captcha">Captcha <span class="contact_form--required" aria-hidden="true">*</span></label>
+                <input id="captcha" class="contact_form__captcha" name="captcha" type="captcha" value="…" size="30" maxlength="100" required placeholder="Wie viele Ecken hat ein Pentagramm?"/>
+              </p>
+              <p class="contact_form__submit">
+                <input name="submit" type="submit" id="submit" class="contact_form__submit_button" value="Kommentar abschicken" />
+                <p class="contact_form__feedback"></p>
+              </p>
+            </form>
+          </div>
+      </div>
+    </section>
+
+  </div>
 {% endblock %}

templates/layout.html

@@ -18,7 +18,6 @@ __        ____________________
 -->
 <head>
 {#-
-
   Namensschema der CSS-Klassen nach BEM (Block Element Modifier,
   http://getbem.com/naming/). Mit der Erweiterung, dass Modifier einzeln
   mit Bindestrich angegeben werden. Also:
@@ -37,8 +36,7 @@ __        ____________________
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <title>{% block title %}Werkkooperative der Technikfreundinnen eG{% endblock %} | WTF eG</title>
   <meta name="description" content="{% block meta_description %}{% endblock %}">
-  {#- OG Values
+  {#- OG Values https://ogp.me/ #}
-  https://ogp.me/ #}
   <meta property="og:title" content="{{ self.title() }}">
   <meta property="og:description" content="{{ self.meta_description() }}">
   <meta property="og:url" content="{{ this | url(external=true) }}">
@@ -63,7 +61,7 @@ __        ____________________
   {% if 'manifest.json'|asseturl is defined -%}
     <link rel="manifest" href="{{ 'manifest.json'|asseturl }}">
   {%- endif %}
-  {% if '/js/contact_form_toggle.js'|asseturl is defined and this.title == 'Kontakt' -%}
+  {% if '/js/contact_form_toggle.js'|asseturl is defined and this.title == 'Die WTF Kooperative eG' -%}
     <script type="text/javascript" src="{{ '/js/contact_form_toggle.js'|asseturl }}"></script>
   {%- endif %}
 </head>
@@ -131,7 +129,7 @@ __        ____________________
   {%- if '/js/nav_toggle.js'|asseturl is defined -%}
     <script type="text/javascript" src="{{ '/js/nav_toggle.js'|asseturl }}"></script>
   {%- endif %}
-    {% if '/js/contact_form_toggle.js'|asseturl is defined and this.title == 'Kontakt' -%}
+  {% if '/js/contact_form.js'|asseturl is defined and this.title == 'Die WTF Kooperative eG' -%}
     <script type="text/javascript" src="{{ '/js/contact_form.js'|asseturl }}"></script>
   {%- endif %}
 </body>