Add impressum to the footer

3 files changed, 90 insertions, 45 deletions

diff --git a/index.html b/index.html
index 8f1a411..8be56b8 100644
--- a/index.html
+++ b/index.html
@@ -234,42 +234,52 @@
       <div class="push"></div>
     </div>
     <div id="footer" class="footer">
-      <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()">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 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>
         </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="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>
         </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>
     </div>
   </body>
 </html>
diff --git a/js/abmahn.js b/js/abmahn.js
index 7ecdff4..c8e5e9a 100644
--- a/js/abmahn.js
+++ b/js/abmahn.js
@@ -65,6 +65,7 @@ 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 hide_impressum() { setClass('footer', 'footer'); }
 function show_impressum() { setClass('footer', 'footer show-imprint'); }
 
 function waldorf() {
diff --git a/style.css b/style.css
index 8a14966..8570410 100644
--- a/style.css
+++ b/style.css
@@ -468,13 +468,16 @@ select.zeit {
 
 .footer .partner a:link,
 .footer .implementor a:link,
-.footer .imprint a:link,
 .footer .partner a:visited,
 .footer .implementor a:visited,
-.footer .imprint a:visited {
+.footer .imprint span {
   border-bottom: dotted 1px rgba(0,0,0,0.25);
 }
 
+.footer .imprint {
+  cursor: pointer;
+}
+
 .credit {
   display: inline-block;
   vertical-align: top;
@@ -524,31 +527,62 @@ select.zeit {
   width: 100px;
 }
 
+.scrollcontainer {
+  width: 200%;
+}
+
 .impressum {
-  width: 100%;
-  float: left;
-  display: inline;
+  float: right;
+  width: 50%;
+  height: 260px;
   position: relative;
   transition: left 2s;
   top: 0;
-  left: 100%;
+  left: 0%;
+}
+
+.impressum p {
+  margin: 0 0 .1em 0;
 }
 
 .footer.show-imprint .impressum {
-  left: 0%;
+  left: -50%;
+  top: 0;
 }
 
 .credits {
-  width: 100%;
+  width: 50%;
   float: left;
-  display: inline;
   position: relative;
+  overflow: hidden;
   left: 0;
   transition: max-width 2s, left 2s, width 2s;
 }
 
 .footer.show-imprint .credits {
-  left: -100%;
-  width: 0;
-  max-width: 0;
+  left: -50%;
+}
+
+.visdp,
+.datenschutz {
+  vertical-align: top;
+  display: inline-block;
+  width: 250px;
+  margin-top: 2em;
+}
+
+.back {
+  background-color: #8E99A0;
+  display: inline-block;
+  float: none;
+  color: #F1F2E3;
+  line-height: 1.4em;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  margin-top: 65px;
+}
+
+.back:hover {
+  background-color: black;
 }