wip of the footer

assets/sass/components/_programmers.scss

@@ -0,0 +1,5 @@
+.programmer img{
+    border-radius: 100%;
+    height: 25vh;
+    width: auto;
+}

assets/sass/layout/_section.scss

@@ -5,6 +5,7 @@ section {
     // align-items: center;
     justify-content: center;
     padding-top: 10vh;
+    flex-wrap: wrap;
 
     background: whitesmoke;
     
@@ -21,28 +22,45 @@ section img {
 
 section.dark {
     background: rgba(0, 0, 0, 0);
+    height: 900px;
+    flex-wrap: wrap;
 }
 
 section #programmers {
-    height: 50vh;
+    min-height: 50vh;
     width: 100%;
 
     position: absolute;
     margin-top: -10vh;
+    margin-bottom: 50vh;
+    padding-top: 10vh;
+
+    display: flex;
+    flex-flow: wrap;
 
     z-index: -1;
 
     background: whitesmoke;
 }
 
+.programmer {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 20px;
+}
+
 section #footer {
     height: 50vh;
     width: 100%;
 
     position: fixed;
-    top: 50vh;
+    bottom: 0px;
     z-index: -2;
 
+    display: flex;
+
     color: whitesmoke;
 }
 

assets/sass/styles.css

@@ -550,6 +550,7 @@ section {
   display: flex;
   justify-content: center;
   padding-top: 10vh;
+  flex-wrap: wrap;
   background: whitesmoke; }
 
 section img {
@@ -561,22 +562,36 @@ section img {
   justify-content: center; */ }
 
 section.dark {
-  background: rgba(0, 0, 0, 0); }
+  background: rgba(0, 0, 0, 0);
+  height: 900px;
+  flex-wrap: wrap; }
 
 section #programmers {
-  height: 50vh;
+  min-height: 50vh;
   width: 100%;
   position: absolute;
   margin-top: -10vh;
+  margin-bottom: 50vh;
+  padding-top: 10vh;
+  display: flex;
+  flex-flow: wrap;
   z-index: -1;
   background: whitesmoke; }
 
+.programmer {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px; }
+
 section #footer {
   height: 50vh;
   width: 100%;
   position: fixed;
-  top: 50vh;
+  bottom: 0px;
   z-index: -2;
+  display: flex;
   color: whitesmoke; }
 
 /* MODULES - Re-usable site elements.
@@ -621,5 +636,9 @@ button:hover {
 @media (max-width: 480px) {
   #download {
     display: none; } }
+.programmer img {
+  border-radius: 100%;
+  height: 25vh;
+  width: auto; }
 
 /*# sourceMappingURL=styles.css.map */

assets/sass/styles.scss

@@ -19,6 +19,7 @@
 
 @import 'components/_backgrounds.scss';
 @import 'components/_buttons.scss';
+@import 'components/_programmers.scss';
 
 // @import 'modules/_buttons.scss';
 // @import 'modules/_lists.scss';

index.html

@@ -17,6 +17,8 @@
         $(function() {
           $.scrollify({
             section : ".section",
+            interstitialSection : ".footer",
+            setHeights: false,
           });
         });
       </script>
@@ -35,24 +37,31 @@
         </div>
     </header>
     <main>
-        <section class="section" id="1">
+        <section class="section" id="MainApp">
             <img src="images/main_web.svg#MainApp" alt="">
         </section>
-        <section class="section" id="2">
+        <section class="section" id="DarkMode">
             <img src="images/main_web.svg#MainAppDark" alt=""></img>
         </section>
-        <section class="section" id="3">
+        <section class="section" id="InlinePreview">
             <img src="images/main_web.svg#InlinePreview" alt=""></img>
         </section>
-        <section class="section" id="4">
+        <section class="section" id="InlinePreview-2">
             <img src="images/main_web.svg#InlinePrevi2w" alt=""></img>
         </section>
-        <section class="section" id="5">
+        <section class="section" id="InlinePreview-3">
             <img src="images/main_web.svg#InlinePrevi3w" alt=""></img>
         </section>
         <section class="section dark" id="footer">
             <div id="programmers">
-                <p></p>
+                <div class="programmer left">
+                    <img src="/images/Wolf.jpeg" alt="Wolf Vollprecht">
+                    <p>Blablabla</p>
+                </div>
+                <div class="programmer right">
+                    <img src="/images/Manu.jpeg" alt="Wolf Vollprecht">
+                    <p>Blebleble</p>
+                </div>
             </div>
             <div id="footer">
                 <div id="about">
@@ -60,11 +69,10 @@
 
                 </div>
                 <div id="links">
-                    <p>Github</p>
-                    <p>Translations</p>
-                    <p>Flathub</p>
-                    <p>Donate</p>
-
+                    <a href="https://github.com/UberWriter">Github</a>
+                    <a href="https://poeditor.com/join/project/gxVzFyXb2x">Localization</a>
+                    <a href="https://flathub.org/apps/details/de.wolfvollprecht.UberWriter">Flathub</a>
+                    <a href="https://www.paypal.me/WolfVollprecht">Donate</a>
                 </div>
             </div>