re-construct footer, once again

2 files changed, 67 insertions, 80 deletions

diff --git a/index.html b/index.html
index f539edd..30a0988 100644
--- a/index.html
+++ b/index.html
@@ -247,47 +247,42 @@
     <div id="footer" class="footer">
       <div class="scrollcontainer">
         <div class="credits">
-          <div class="creditline">
-            <div class="credit partner"><a href="https://ccc.de/">Chaos Computer Club</a></div>
-            <a href="https://www.ccc.de/"><div class="credit ccc"><img src="img/ccc.svg" height="50px" alt="Logo des Chaos Computer Clubs"/></div></a>
-            <div class="credit imprint" onclick="show_impressum()"><span>Impressum + Datenschutz<span></div>
-          </div>
-          <div class="creditline small">
-            <div class="credit empty"></div>
-            <div class="credit noimg empty"></div>
-            <div class="credit implementor"><a href="http://elektrowecker.de/">Pepo</a> – UX</div>
-          </div>
-          <div class="creditline">
-            <div class="credit partner"><a href="https://freifunk.net/">Förderverein Freie Netzwerke</a></div>
-            <a href="https://freifunk.net/"><div class="credit freifunk"><img src="img/freifunk.svg" height="50px" alt="Logo des Freifunk e. V.s"/></div></a>
-            <div class="credit implementor"><a href="http://www.schlicht-und-ergreifend.de">Malik Aziz</a> – Design</div>
-          </div>
-          <div class="creditline small">
-            <div class="credit empty"></div>
-            <div class="credit noimg empty"></div>
-            <div class="credit implementor"><a href="https://erdgeist.org/">erdgeist</a> – Konzept &amp; Umsetzung</div>
-          </div>
-          <div class="creditline">
-            <div class="credit partner"><a href="https://freiheitsrechte.org/">Gesellschaft für Freiheitsrechte</a></div>
-            <a href="https://freiheitsrechte.org/"><div class="credit gff"><img src="img/gff.svg" height=50px" alt="Logo des Gesellschaft für Freiheitsrechte e. V."/></div></a>
-            <div class="credit implementor"><a href="https://kanzlei-hubrig.de/">Beata Hubrig</a> – Rechtliches</div>
+          <div class="partners">
+            <a href="https://www.ccc.de/"><div id="ccc" class="partner">
+              <img src="img/ccc.svg" height="50px" alt="Logo des Chaos Computer Clubs"/>
+              <div>Chaos Computer Club Ultras</div>
+            </div></a><!-- this comment is important as white spaces leave gaps between divs
+         --><a href="https://freifunk.net/"><div id="freifunk" class="partner">
+              <img src="img/freifunk.svg" height="50px" alt="Logo des Freifunk e. V.s"/>
+              <div>Förderverein Freie Netzwerke</div>
+            </div></a><!-- this comment is important as white spaces leave gaps between divs
+         --><a href="https://freiheitsrechte.org/"><div id="gff" class="partner">
+              <img src="img/gff.svg" height=50px" alt="Logo des Gesellschaft für Freiheitsrechte e. V."/>
+              <div>Gesellschaft für Freiheitsrechte</div>
+            </div></a>
           </div>
+          <div class="credit imprint" onclick="show_impressum()"><span>Impressum + Datenschutz<span></div>
+          <hr/>
+          <div class="credit implementor"><a href="https://erdgeist.org/">erdgeist</a> (Konzept + Umsetzung)</div>
+          <div class="credit implementor"><a href="https://kanzlei-hubrig.de/">Beata Hubrig</a> (Rechtliches)</div>
+          <div class="credit implementor"><a href="http://www.schlicht-und-ergreifend.de">Malik Aziz</a> (Design) ∙ <a href="http://elektrowecker.de/">Pepo</a> (UX)</div>
         </div>
         <div class="impressum">
-          <p>Der Abmahnbeantworter ist ein Projekt des Chaos Computer Club e. V.,</p>
-          <p>des Fördervereins Freie Netzwerke e. V. und der Gesellschaft für Freiheitsrechte e. V.</p>
-          <div class="back circle_num" onclick="hide_impressum()">⇦</div>
-          <div class="visdp">
-            <p><strong>V.i.S.d.P.</strong>
-            <p>Dirk Engling</p>
-            <p>c/o Chaos Computer Club</p>
-            <p>Zeiseweg 9</p>
-            <p>22765 Hamburg</p>
-            <p><a href="mailto:erdgeist@ccc.de">E-Mail: erdgeist@ccc.de</a></p>
-          </div>
-          <div class="datenschutz">
-            <p><strong>Datenschutzerklärung</strong></p>
-            <p>Eine Erhebung von personenbezogenen Daten der Nutzer dieser Website findet nicht statt. Auch der Webserver speichert keine IP-Adressen der Nutzer.</p>
+          <div class="partners">
+            <p>Der Abmahnbeantworter ist ein Projekt des Chaos Computer Club e. V., des Fördervereins Freie Netzwerke e. V. und der Gesellschaft für Freiheitsrechte e. V.</p>
+            <div class="back circle_num" onclick="hide_impressum()">⇦</div><!--
+         --><div class="visdp">
+              <p><strong>V.i.S.d.P.</strong>
+              <p>Dirk Engling</p>
+              <p>c/o Chaos Computer Club</p>
+              <p>Zeiseweg 9</p>
+              <p>22765 Hamburg</p>
+              <p><a href="mailto:erdgeist@ccc.de">E-Mail: erdgeist@ccc.de</a></p>
+            </div><!--
+         --><div class="datenschutz">
+              <p><strong>Datenschutzerklärung</strong></p>
+              <p>Eine Erhebung von personenbezogenen Daten der Nutzer dieser Website findet nicht statt. Auch der Webserver speichert keine IP-Adressen der Nutzer.</p>
+            </div>
           </div>
         </div>
       </div>
diff --git a/style.css b/style.css
index 0ef5891..9d48498 100644
--- a/style.css
+++ b/style.css
@@ -36,6 +36,7 @@
 html, body {
   height: 100%;
   margin: 0px !important;
+  min-width: 480px;
 
   font-family: 'SourceSansPro', sans-serif;
   font-size: 14pt;
@@ -459,26 +460,27 @@ select.zeit {
   min-height: 100%;
   height: auto !important;
   height: 100%;
-  margin: 0 auto -260px;
+  margin: 0 auto -300px;
 }
 
 .footer, .push {
-  height: 260px;
+  height: 300px;
 }
 
 .footer {
   width: 100%;
   min-width: 540px;
   margin: 0;
-  padding: 72px 0 0 0;
+  padding: 50px 0 0 0;
 
-  font-size: 12pt;
+  font-size: 11pt;
   font-weight: 300;
 
   overflow: hidden;
   text-align: center;
 }
 
+/* Footer links have a softer color than in block 1 */
 .footer a:link,
 .footer a:visited {
   color: #8E99A0;
@@ -494,56 +496,45 @@ select.zeit {
 
 .footer .imprint {
   cursor: pointer;
+  margin-bottom: 1em;
 }
 
-.credit {
-  display: inline-block;
-  vertical-align: top;
-  width: 210px;
-  margin: 0 0 0 0 !important;
-  padding: 15px 0 0 0;
-
-  height: 35px;
-}
-
-.credit.imprint,
-.credit.implementor {
-  text-align: left;
+.partners {
+  width: 480px;
+  padding: 0;
+  margin: 0 auto 24px auto;
+  border: none;
 }
 
 .partner {
-  text-align: right;
+  display: inline-block;
+  vertical-align: bottom;
+  width: 160px;
+  height: 120px;
+  margin: 0px 0px 0px 0px;
 }
 
-.credit > img {
+.partner > img {
   opacity: 0.5;
+  padding: 0 0 0 10px;
+  margin-bottom: 10px;
 }
 
-.creditline {
-  height: 50px;
-}
-
-.creditline.small {
-  height: 35px;
+.partner#ccc > img {
+  padding: 10px 0 0 0;
+  margin: 0;
 }
 
-.creditline.small > .credit {
-  vertical-align: middle;
-  padding-top: 6px;
-  height: 29px;
+.implementor {
+  margin-bottom: 0.3em;
 }
 
-.credit.noimg {
-  padding-top: 0;
-  height: 35px;
-  width: 100px;
+.credits hr {
+  width: 60px;
+  margin-bottom: 1em;
 }
 
-.credit.freifunk, .credit.ccc, .credit.gff {
-  padding-top: 0;
-  height: 50px;
-  width: 100px;
-}
+/* ******** Horizontal footer slide magic ******** */
 
 .scrollcontainer {
   width: 200%;
@@ -572,7 +563,6 @@ select.zeit {
   width: 50%;
   float: left;
   position: relative;
-  overflow: hidden;
   left: 0;
   transition: left 1s;
 }
@@ -585,8 +575,10 @@ select.zeit {
 .datenschutz {
   vertical-align: top;
   display: inline-block;
-  width: 250px;
-  margin-top: 2em;
+  width: 188px;
+  margin: 2em 0 0 32px;
+  text-align: left;
+  padding: 0 0 0 0;
 }
 
 .back {
@@ -597,7 +589,7 @@ select.zeit {
   width: 40px;
   height: 40px;
   cursor: pointer;
-  margin-top: 65px;
+  margin: 65px 0 0 0;
 }
 
 .back:hover {