Added signature edge to footer.

assets/css/style.css

@@ -801,16 +801,41 @@ hr.-even {
 
 /* footer - Start */
 footer {
-    margin-top: 2px;
     background-color: var(--wtf-footer-grey);
     color: white;
-    padding: 3% 1%;
+    padding: 0 0 3% 0;
+    display: grid;
+    grid-template-rows: 46px auto;
+    grid-template-columns: auto 68px 15%;
+}
+
+.footer__wrapper {
+    grid-column: 1 / span 3;
     display: flex;
     flex-direction: row;
     justify-content: center;
+    padding-top: 3%;
+    max-width: 1200px;
+    margin: 0 auto;
 }
 
-.footer__wrapper, .footer__nav {
+.footer__top_bar_left {
+    background-color: var(--wtf-light-grey);
+}
+
+.footer__top_bar_mid {
+    background-image: url("../images/footer_triangles.svg");
+}
+
+.footer__top_bar_right {
+    background-color: var(--wtf-footer-grey);
+}
+
+.footer__content_box {
+
+}
+
+.footer__nav {
     display: flex;
     flex-direction: row;
     justify-content: center;
@@ -1464,4 +1489,28 @@ footer {
         max-width: 450px;
     }
     /* homepage - end */
+
+    /* footer - start */
+    footer {
+        grid-template-rows: 23px auto;
+        grid-template-columns: auto 34px 15%;
+    }
+
+    .footer__wrapper {
+        padding: 6% 0%;
+    }
+    .footer__nav {
+        flex-direction: column;
+    }
+
+    .footer__navitem {
+        margin: 1rem 0;
+        padding: 0;
+        order: 2;
+    }
+
+    .footer__navitem.-second {
+        order: 1;
+    }
+    /* footer - end */
 }

assets/images/footer_triangles.svg

@@ -0,0 +1,14 @@
+<?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 68 46" 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.829268,0,0,0.836364,-311.805,-398.945)">
+        <g id="bottom-left-corner" serif:id="bottom left corner">
+            <path d="M458,532L458,477L376,532L458,532Z" style="fill:#344b5d;"/>
+        </g>
+    </g>
+    <g transform="matrix(-0.829268,-8.68929e-19,-8.68929e-19,-0.836364,379.805,444.945)">
+        <g id="bottom-left-corner1" serif:id="bottom left corner">
+            <path d="M458,532L458,477L376,532L458,532Z" style="fill:#edefeb;"/>
+        </g>
+    </g>
+</svg>

templates/layout.html

@@ -74,31 +74,34 @@ __        ____________________
     </main>
 
     <footer>
-        <div class="footer__wrapper">
+      <div class="footer__top_bar_left"></div>
-            <ul class="footer__nav">
+      <div class="footer__top_bar_mid"></div>
-                <li class="footer__navitem">
+      <div class="footer__top_bar_right"></div>
-                    <p>folgt uns auf:</p>
+      <div class="footer__wrapper">
-                    <a href="https://chaos.social/@HackerGeno">
+        <ul class="footer__nav">
-                      <img alt="Mastodon Logo" class="social-logo" src="{{ '/images/mastodon_logo.svg'|url }}"/>
+            <li class="footer__navitem -first">
-                    </a>
+                <p>folgt uns auf:</p>
-                    
+                <a href="https://chaos.social/@HackerGeno">
-                </li>
+                  <img alt="Mastodon Logo" class="social-logo" src="{{ '/images/mastodon_logo.svg'|url }}"/>
-                <li class="footer__navitem">
+                </a>
-                    WTF Kooperative eG<br/>
-                    Forsmannstr. 14b<br/>
-                    22303 Hamburg<br/>
-                    <a class="footer__navlink" href="mailto:info@wtf-eg.de">info@wtf-eg.de</a><br/>
-                    <br/>
-                    Registergericht: AG Hamburg<br/>
-                    Registernummer: GnR 1113<br/>
-                </li>
-                <li class="footer__navitem">
-                  <a class="footer__navlink" href="{{ '/impressum'|url }}">Impressum</a> | <a class="footer__navlink" href="{{ '/datenschutz'|url }}">Datenschutzerklärung</a> <br/>
 
-                  © 2021 WTF Kooperative eG
+            </li>
-                </li>
+            <li class="footer__navitem -second">
-            </ul>
+                WTF Kooperative eG<br/>
-        </div>
+                Forsmannstr. 14b<br/>
+                22303 Hamburg<br/>
+                <a class="footer__navlink" href="mailto:info@wtf-eg.de">info@wtf-eg.de</a><br/>
+                <br/>
+                Registergericht: AG Hamburg<br/>
+                Registernummer: GnR 1113<br/>
+            </li>
+            <li class="footer__navitem -third">
+              <a class="footer__navlink" href="{{ '/impressum'|url }}">Impressum</a> | <a class="footer__navlink" href="{{ '/datenschutz'|url }}">Datenschutzerklärung</a> <br/>
+
+              © 2021 WTF Kooperative eG
+            </li>
+        </ul>
+      </div>
     </footer>
     <script type="text/javascript" src="{{ '/js/nav_toggle.js'|url }}"></script>
 </body>