summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorDirk Engling <erdgeist@erdgeist.org>2016-08-16 04:28:05 +0200
committerDirk Engling <erdgeist@erdgeist.org>2016-08-16 04:28:05 +0200
commit76eda06a46431b26955c1347161cb91d9de4dae5 (patch)
tree215bcc5e7f0dc8eeecc5ececc337aab429477d40
parent8d722522790cfdffcf2b4229d58aa23511764328 (diff)
Redesign footer, start scrollable impressum
-rw-r--r--index.html42
-rw-r--r--js/abmahn.js4
-rw-r--r--style.css112
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 @@
233 </div> 233 </div>
234 <div class="push"></div> 234 <div class="push"></div>
235 </div> 235 </div>
236 <div class="footer"> 236 <div id="footer" class="footer">
237 <div class="credits"> 237 <div class="credits">
238 <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> 238 <div class="creditline">
239 <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> 239 <div class="credit partner"><a href="https://ccc.de/">Chaos Computer Club</a></div>
240 <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> 240 <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>
241 <div class="credit imprint" onclick="show_impressum()">Impressum + Datenschutz</div>
242 </div>
243 <div class="creditline small">
244 <div class="credit empty"></div>
245 <div class="credit noimg empty"></div>
246 <div class="credit implementor"><a href="http://elektrowecker.de/">Pepo</a> – UX</div>
247 </div>
248 <div class="creditline">
249 <div class="credit partner"><a href="https://freifunk.net/">Förderverein Freie Netzwerke</a></div>
250 <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>
251 <div class="credit implementor"><a href="http://www.schlicht-und-ergreifend.de">Malik Aziz</a> – Design</div>
252 </div>
253 <div class="creditline small">
254 <div class="credit empty"></div>
255 <div class="credit noimg empty"></div>
256 <div class="credit implementor"><a href="https://erdgeist.org/">erdgeist</a> – Konzept &amp; Umsetzung</div>
257 </div>
258 <div class="creditline">
259 <div class="credit partner"><a href="https://freiheitsrechte.org/">Gesellschaft für Freiheitsrechte</a></div>
260 <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>
261 <div class="credit implementor"><a href="https://kanzlei-hubrig.de/">Beata Hubrig</a> – Rechtliches</div>
262 </div>
263 </div>
264 <div class="impressum">
265 <p>Ein Projekt des Chaos Computer Club e. V.,</p>
266 <p>des Fördervereins Freie Netzwerke e. V. und der Gesellschaft für Freiheitsrechte e. V.</p>
267 <p>V.i.S.d.P: Dirk Engling</p>
268 <p>c/o Chaos Computer Club</p>
269 <p>Zeiseweg 9</p>
270 <p>22765 Hamburg</p>
271 <p><a href="mailto:erdgeist@ccc.de">E-Mail: erdgeist@ccc.de</a></p>
241 </div> 272 </div>
242 <p><a href="https://ccc.de/impressum.html">Impressum</a></p>
243 <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>
244 <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>
245 </div> 273 </div>
246 </body> 274 </body>
247</html> 275</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) {
56 step(); 56 step();
57} 57}
58 58
59function step0_cancel() { scrollTo(0); setClass('wrapper', 'stepcancel'); } 59function step0_cancel() { scrollTo(0); setClass('wrapper', 'not-confirmed stepcancel'); }
60function step0_done() { scrollTo(0); setClass('wrapper', 'step1'); } 60function step0_done() { scrollTo(0); setClass('wrapper', 'step1'); }
61function step1_done() { scrollTo(0); setClass('wrapper', 'step2'); } 61function step1_done() { scrollTo(0); setClass('wrapper', 'step2'); }
62function step2_done() { scrollTo(103); setClass('wrapper', 'step3'); } 62function step2_done() { scrollTo(103); setClass('wrapper', 'step3'); }
@@ -65,6 +65,8 @@ function step4_done() { scrollTo(289); setClass('wrapper', 'step5'); }
65function step5_done() { scrollTo(382); setClass('wrapper', 'step6'); } 65function step5_done() { scrollTo(382); setClass('wrapper', 'step6'); }
66function step6_done() { scrollTo(475); setClass('wrapper', 'step7'); } 66function step6_done() { scrollTo(475); setClass('wrapper', 'step7'); }
67 67
68function show_impressum() { setClass('footer', 'footer show-imprint'); }
69
68function waldorf() { 70function waldorf() {
69 setText('abmahnender_kanzlei', 'Waldorf & Frommer RAe'); 71 setText('abmahnender_kanzlei', 'Waldorf & Frommer RAe');
70 setText('abmahnender_bearbeiter', ''); 72 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 {
207 207
208/* Global element definitions done. 208/* Global element definitions done.
209 Now for basic color scheme */ 209 Now for basic color scheme */
210#unsicher { background-color: #6276B7; } 210#unsicher { background-color: #840020; }
211.footer { background-color: #F1F2E3; } 211.footer { background-color: #F1F2E3; }
212.block-step1 { background-color: #F1F2E3; } 212.block-step1 { background-color: #F1F2E3; }
213.block-step2 { background-color: #047E7C; } 213.block-step2 { background-color: #047E7C; }
@@ -441,76 +441,114 @@ select.zeit {
441 min-height: 100%; 441 min-height: 100%;
442 height: auto !important; 442 height: auto !important;
443 height: 100%; 443 height: 100%;
444 margin: 0 auto -200px; 444 margin: 0 auto -260px;
445} 445}
446 446
447.footer, .push { 447.footer, .push {
448 height: 200px; 448 height: 260px;
449} 449}
450 450
451.footer { 451.footer {
452 width: 100%; 452 width: 100%;
453 min-width: 540px;
453 margin: 0; 454 margin: 0;
454 padding: 72px 0 0 0; 455 padding: 72px 0 0 0;
455 456
456 font-size: 12pt; 457 font-size: 12pt;
457 font-weight: 300; 458 font-weight: 300;
458 459
460 overflow: hidden;
459 text-align: center; 461 text-align: center;
460} 462}
461 463
462.footer-left a:link, .footer-left a:visited,
463.footer-right a:link, .footer-right a:visited,
464p a:link, p a:visited {
465 border-bottom: dotted 1px rgba(0,0,0,0.25);
466}
467
468.footer a:link, 464.footer a:link,
469.footer a:visited { 465.footer a:visited {
470 color: #8E99A0; 466 color: #8E99A0;
471} 467}
472.credits { 468
473 min-width: 480px; 469.footer .partner a:link,
474 width: 50%; 470.footer .implementor a:link,
475 max-width: 640px; 471.footer .imprint a:link,
476 margin: 0 auto 0 auto; 472.footer .partner a:visited,
473.footer .implementor a:visited,
474.footer .imprint a:visited {
475 border-bottom: dotted 1px rgba(0,0,0,0.25);
477} 476}
478 477
479.partner img { 478.credit {
480 opacity: 0.5; 479 display: inline-block;
480 vertical-align: top;
481 width: 210px;
482 margin: 0 0 0 0 !important;
483 padding: 15px 0 0 0;
484
485 height: 35px;
486}
487
488.credit.imprint,
489.credit.implementor {
490 text-align: left;
481} 491}
482 492
483.partner { 493.partner {
484 display: inline-block; 494 text-align: right;
485 font-size: 10pt;
486} 495}
487 496
488.partner.ccc, .partner.freifunk { 497.credit > img {
489 margin-right: 3%; 498 opacity: 0.5;
490} 499}
491 500
492.partner.freifunk img, .partner.gff img{ 501.creditline {
493 padding-bottom: 6px; 502 height: 50px;
494} 503}
495 504
496.partner.ccc img { 505.creditline.small {
497 vertical-align: top; 506 height: 35px;
498} 507}
499 508
500.footer-left { 509.creditline.small > .credit {
510 vertical-align: middle;
511 padding-top: 6px;
512 height: 29px;
513}
514
515.credit.noimg {
516 padding-top: 0;
517 height: 35px;
518 width: 100px;
519}
520
521.credit.freifunk, .credit.ccc, .credit.gff {
522 padding-top: 0;
523 height: 50px;
524 width: 100px;
525}
526
527.impressum {
528 width: 100%;
501 float: left; 529 float: left;
502 text-align: right; 530 display: inline;
503 width: 48%; 531 position: relative;
504 margin: 0; 532 transition: left 2s;
505 padding-right: 10px; 533 top: 0;
506 border: none; 534 left: 100%;
507} 535}
508 536
509.footer-right { 537.footer.show-imprint .impressum {
510 float: right; 538 left: 0%;
511 text-align: left; 539}
512 width: 48%; 540
513 margin: 0; 541.credits {
514 padding-left: 10px; 542 width: 100%;
515 border: none; 543 float: left;
544 display: inline;
545 position: relative;
546 left: 0;
547 transition: max-width 2s, left 2s, width 2s;
548}
549
550.footer.show-imprint .credits {
551 left: -100%;
552 width: 0;
553 max-width: 0;
516} 554}