From 76eda06a46431b26955c1347161cb91d9de4dae5 Mon Sep 17 00:00:00 2001 From: Dirk Engling Date: Tue, 16 Aug 2016 04:28:05 +0200 Subject: Redesign footer, start scrollable impressum --- index.html | 42 ++++++++++++++++++---- js/abmahn.js | 4 ++- style.css | 112 +++++++++++++++++++++++++++++++++++++++-------------------- 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 @@
-
+ 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; } -- cgit v1.2.3