Redesign footer, start scrollable impressum

3 files changed, 113 insertions, 45 deletions

diff --git a/index.html b/index.html
index 17c98be..8f1a411 100644
--- a/index.html
+++ b/index.html
@@ -233,15 +233,43 @@
       </div>
       <div class="push"></div>
     </div>
-    <div class="footer">
+    <div id="footer" class="footer">
       <div class="credits">
-        <a href="https://www.ccc.de/"><div class="partner ccc"><img src="img/ccc.svg" height="50px" alt="Logo des Chaos Computer Clubs"/><p>Chaos Computer Club</p></div></a>
-        <a href="https://freifunk.net/"><div class="partner freifunk"><img src="img/freifunk.svg" height="50px" alt="Logo des Freifunk e. V.s"/><p>Förderverein Freie Netzwerke</p></div></a>
-        <a href="https://freiheitsrechte.org/"><div class="partner gff"><img src="img/gff.svg" height=50px" alt="Logo des Gesellschaft für Freiheitsrechte e. V."/><p>Gesellschaft für Freiheitsrechte</p></div></a>
+        <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()">Impressum + Datenschutz</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>
+      </div>
+      <div class="impressum">
+        <p>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>
+        <p>V.i.S.d.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>
-      <p><a href="https://ccc.de/impressum.html">Impressum</a></p>
-      <div class="footer-left">UX: <a href="http://elektrowecker.de/">Pepo</a></div><div class="footer-right">Design: <a href="http://www.schlicht-und-ergreifend.de">Malik Aziz</a></div>
-      <div class="footer-left">Konzept: <a href="https://erdgeist.org/">erdgeist</a></div><div class="footer-right">Rechtliches: <a href="https://kanzlei-hubrig.de/">Beata Hubrig</a></div>
     </div>
   </body>
 </html>
diff --git a/js/abmahn.js b/js/abmahn.js
index 0bf6a50..7ecdff4 100644
--- a/js/abmahn.js
+++ b/js/abmahn.js
@@ -56,7 +56,7 @@ function scrollTo(end) {
     step();
 }
 
-function step0_cancel() { scrollTo(0); setClass('wrapper', 'stepcancel'); }
+function step0_cancel() { scrollTo(0); setClass('wrapper', 'not-confirmed stepcancel'); }
 function step0_done()   { scrollTo(0); setClass('wrapper', 'step1'); }
 function step1_done()   { scrollTo(0); setClass('wrapper', 'step2'); }
 function step2_done()   { scrollTo(103); setClass('wrapper', 'step3'); }
@@ -65,6 +65,8 @@ function step4_done()   { scrollTo(289); setClass('wrapper', 'step5'); }
 function step5_done()   { scrollTo(382); setClass('wrapper', 'step6'); }
 function step6_done()   { scrollTo(475); setClass('wrapper', 'step7'); }
 
+function show_impressum() { setClass('footer', 'footer show-imprint'); }
+
 function waldorf() {
   setText('abmahnender_kanzlei', 'Waldorf & Frommer RAe');
   setText('abmahnender_bearbeiter', '');
diff --git a/style.css b/style.css
index 0f1422e..8a14966 100644
--- a/style.css
+++ b/style.css
@@ -207,7 +207,7 @@ label {
 
 /* Global element definitions done.
    Now for basic color scheme */
-#unsicher    { background-color: #6276B7; }
+#unsicher    { background-color: #840020; }
 .footer      { background-color: #F1F2E3; }
 .block-step1 { background-color: #F1F2E3; }
 .block-step2 { background-color: #047E7C; }
@@ -441,76 +441,114 @@ select.zeit {
   min-height: 100%;
   height: auto !important;
   height: 100%;
-  margin: 0 auto -200px;
+  margin: 0 auto -260px;
 }
 
 .footer, .push {
-  height: 200px;
+  height: 260px;
 }
 
 .footer {
   width: 100%;
+  min-width: 540px;
   margin: 0;
   padding: 72px 0 0 0;
 
   font-size: 12pt;
   font-weight: 300;
 
+  overflow: hidden;
   text-align: center;
 }
 
-.footer-left a:link, .footer-left a:visited,
-.footer-right a:link, .footer-right a:visited,
-p a:link, p a:visited {
-  border-bottom: dotted 1px rgba(0,0,0,0.25);
-}
-
 .footer a:link,
 .footer a:visited {
   color: #8E99A0;
 }
-.credits {
-  min-width: 480px;
-  width: 50%;
-  max-width: 640px;
-  margin: 0 auto 0 auto;
+
+.footer .partner a:link,
+.footer .implementor a:link,
+.footer .imprint a:link,
+.footer .partner a:visited,
+.footer .implementor a:visited,
+.footer .imprint a:visited {
+  border-bottom: dotted 1px rgba(0,0,0,0.25);
 }
 
-.partner img {
-  opacity: 0.5;
+.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;
 }
 
 .partner {
-  display: inline-block;
-  font-size: 10pt;
+  text-align: right;
 }
 
-.partner.ccc, .partner.freifunk {
-  margin-right: 3%;
+.credit > img {
+  opacity: 0.5;
 }
 
-.partner.freifunk img, .partner.gff img{
-  padding-bottom: 6px;
+.creditline {
+  height: 50px;
 }
 
-.partner.ccc img {
-  vertical-align: top;
+.creditline.small {
+  height: 35px;
 }
 
-.footer-left {
+.creditline.small > .credit {
+  vertical-align: middle;
+  padding-top: 6px;
+  height: 29px;
+}
+
+.credit.noimg {
+  padding-top: 0;
+  height: 35px;
+  width: 100px;
+}
+
+.credit.freifunk, .credit.ccc, .credit.gff {
+  padding-top: 0;
+  height: 50px;
+  width: 100px;
+}
+
+.impressum {
+  width: 100%;
   float: left;
-  text-align: right;
-  width: 48%;
-  margin: 0;
-  padding-right: 10px;
-  border: none;
+  display: inline;
+  position: relative;
+  transition: left 2s;
+  top: 0;
+  left: 100%;
 }
 
-.footer-right {
-  float: right;
-  text-align: left;
-  width: 48%;
-  margin: 0;
-  padding-left: 10px;
-  border: none;
+.footer.show-imprint .impressum {
+  left: 0%;
+}
+
+.credits {
+  width: 100%;
+  float: left;
+  display: inline;
+  position: relative;
+  left: 0;
+  transition: max-width 2s, left 2s, width 2s;
+}
+
+.footer.show-imprint .credits {
+  left: -100%;
+  width: 0;
+  max-width: 0;
 }