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,16 +74,19 @@ __        ____________________
     </main>
 
     <footer>
+      <div class="footer__top_bar_left"></div>
+      <div class="footer__top_bar_mid"></div>
+      <div class="footer__top_bar_right"></div>
       <div class="footer__wrapper">
         <ul class="footer__nav">
-                <li class="footer__navitem">
+            <li class="footer__navitem -first">
                 <p>folgt uns auf:</p>
                 <a href="https://chaos.social/@HackerGeno">
                   <img alt="Mastodon Logo" class="social-logo" src="{{ '/images/mastodon_logo.svg'|url }}"/>
                 </a>
 
             </li>
-                <li class="footer__navitem">
+            <li class="footer__navitem -second">
                 WTF Kooperative eG<br/>
                 Forsmannstr. 14b<br/>
                 22303 Hamburg<br/>
@@ -92,7 +95,7 @@ __        ____________________
                 Registergericht: AG Hamburg<br/>
                 Registernummer: GnR 1113<br/>
             </li>
-                <li class="footer__navitem">
+            <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