summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--index.html6
-rw-r--r--style.css625
2 files changed, 301 insertions, 330 deletions
diff --git a/index.html b/index.html
index 29b1327..17c98be 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
9 <script src="js/abmahn.js"></script> 9 <script src="js/abmahn.js"></script>
10 </head> 10 </head>
11 <body> 11 <body>
12 <div id="wrapper" class="step1"> 12 <div id="wrapper" class="not-confirmed step1">
13 <div class="collapsable block-step1"> 13 <div class="collapsable block-step1">
14 <div onclick="step0_done()" class="block-header"> 14 <div onclick="step0_done()" class="block-header">
15 <h1 id="head1"><div class="circle_num">☂</div> Abmahnbeantworter</h1> 15 <h1 id="head1"><div class="circle_num">☂</div> Abmahnbeantworter</h1>
@@ -239,7 +239,9 @@
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 <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>
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://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>
241 </div> 241 </div>
242 <p><a href="https://ccc.de/impressum.html">Impressum</a>    ·    UX: <a href="http://elektrowecker.de/">Pepo</a>    ·    Design: <a href="http://www.schlicht-und-ergreifend.de">Malik Aziz</a>    ·    Konzept: <a href="https://erdgeist.org/">erdgeist</a></p> 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>
243 </div> 245 </div>
244 </body> 246 </body>
245</html> 247</html>
diff --git a/style.css b/style.css
index a8f1444..0f1422e 100644
--- a/style.css
+++ b/style.css
@@ -30,237 +30,37 @@
30 font-weight: 300; 30 font-weight: 300;
31} 31}
32 32
33body { 33/* There's another global layout option in the footer
34 font-family: 'SourceSansPro', sans-serif; 34 section, that pushes the main #wrapper down */
35 background-color: black;
36}
37 35
38html, body { 36html, body {
39 height: 100%; 37 height: 100%;
40} 38 margin: 0px !important;
41
42html {
43 overflow-y: scroll;
44}
45
46#wrapper {
47 min-height: 100%;
48 height: auto !important;
49 height: 100%;
50 margin: 0 auto -200px;
51}
52
53h1 {
54 font-size: 30pt;
55 font-weight: 300;
56 text-transform: uppercase;
57 cursor: pointer;
58}
59
60h2 {
61 font-size: 24pt;
62 font-weight: 300;
63 line-height: 1.1em;
64 cursor: pointer;
65 color: #F1F2E3;
66}
67
68.circle_num {
69 float: left;
70 width: 40px;
71 height: 40px;
72 line-height: 1.2em;
73 font-size: 23pt;
74 border-radius: 50%;
75 transition: border-radius, 2s;
76 border: 0px;
77 margin: 0 28px 0 0;
78 text-align: center;
79 background-color: #F1F2E3;
80 font-weight: normal;
81}
82
83.block-header, .juice {
84 width: 480px;
85 margin: 0.5em auto 0 auto;
86}
87 39
88.juice { 40 font-family: 'SourceSansPro', sans-serif;
89 font-size: 14pt; 41 font-size: 14pt;
90 font-weight: 300; 42 font-weight: 300;
91}
92
93#wrapper.step1 .block-header {
94 pointer-events: none;
95}
96
97.hint {
98 font-style: italic;
99 font-weight: 300;
100}
101
102.juice,
103#unsicher,
104#wrapper.stepcancel h2 {
105 overflow: hidden;
106 max-height: 0px;
107 transition: max-height, height;
108 transition-timing-function: ease;
109 transition-duration: 0.5s;
110 transition-delay: 0s;
111}
112 43
113.block-step1 {
114 background-color: #F1F2E3;
115 color: black !important;
116}
117
118.block-step1 .circle_num {
119 background-color: black; 44 background-color: black;
120 color: #F1F2E3; 45 color: white;
121 margin: 4px 28px 0 0;
122 line-height: 1.3em;
123}
124
125.block-step2 {
126 background-color: #047e7c;
127}
128
129.block-step2 .circle_num {
130 color: #047e7c;
131}
132
133.block-step3 {
134 background-color: #0c6d74;
135}
136
137.block-step3 .circle_num {
138 color: #0c6d74;
139}
140
141.block-step4 {
142 background-color: #145c6c;
143}
144
145.block-step4 .circle_num {
146 color: #145c6c;
147}
148
149.block-step5 {
150 background-color: #1c4b64;
151}
152
153.block-step5 .circle_num {
154 color: #1c4b64;
155}
156
157.block-step6 {
158 background-color: #243a5c;
159}
160
161.block-step6 .circle_num {
162 color: #243a5c;
163}
164
165.block-step7 {
166 background-color: #2c2954;
167}
168
169.block-step7 .circle_num {
170 color: #2c2954;
171
172} 46}
173 47
174#unsicher { 48html {
175 background-color: #B77662; 49 overflow-y: scroll;
176 padding: 0;
177} 50}
178 51
52/* These describe our vertical hierarchy elementes */
179.collapsable { 53.collapsable {
180 width: 100%; 54 width: 100%;
181 min-width: 480px;
182 color: white;
183 padding: 0.4em 0 0.4em 0; 55 padding: 0.4em 0 0.4em 0;
184 margin-left: 0; 56 margin-left: 0;
185 margin-right: 0; 57 margin-right: 0;
186} 58}
187 59
188.block-step2, .block-step3, .block-step4, .block-step5, .block-step6, .block-step7, #unsicher { 60/* This defindes our content width */
189 box-shadow: inset 0px 8px 6px -5px rgba(0, 0, 0, 0.5); 61.block-header, .juice {
190} 62 width: 480px;
191 63 margin: 0.5em auto 0 auto;
192.two-buttons,
193.one-button {
194 height: 4em;
195 margin: 2.5em 0 1.5em 0;
196}
197
198.button {
199 width: 45%;
200 height: 2em;
201 padding-top: 0.7em;
202 padding-bottom: 0;
203 color: white;
204 font-weight: bold;
205 text-align: center;
206 border-radius: 10px;
207 text-transform: uppercase;
208 transition-duration: 0.2s;
209 cursor: pointer;
210}
211
212.button-small {
213 background-color: white;
214 color: #222;
215 font-weight: normal;
216 font-size: 13pt;
217 display: inline-block;
218 border-radius: 4px;
219 padding: 0.2em 0.4em 0.2em 0.4em;
220 margin: 0 0.4em 1em 0;
221 cursor: pointer;
222 transition-duration: 0.2s;
223}
224
225.one-button a:link,
226.one-button a:visited,
227.one-button a {
228 text-decoration: none;
229}
230
231.button-red {
232 float: right;
233 background-color: #E65946;
234}
235
236.button-green {
237 background-color: #8ECA63;
238}
239
240.button-green:hover {
241 background-color: #96E65C;
242}
243
244.button-red:hover {
245 background-color: #FF1E00;
246}
247
248.button-small:hover {
249 /* background-color: #F1F2E3; */
250 background-color: #D0B66B;
251}
252
253.one-button .button-green {
254 margin-right: auto;
255 margin-left: auto;
256}
257
258.two-buttons .button-green {
259 float: left;
260}
261
262body {
263 margin: 0px !important;
264} 64}
265 65
266ul { 66ul {
@@ -268,83 +68,50 @@ ul {
268 padding-left:0; 68 padding-left:0;
269} 69}
270 70
271.footer { 71h1 {
272 background-color: #F1F2E3; 72 font-size: 30pt;
273 box-shadow: inset 0px 12px 6px -6px rgba(0, 0, 0, 0.5);
274 color: #8E99A0;
275 font-size: 13pt;
276 font-weight: 300; 73 font-weight: 300;
277 margin: 0; 74 text-transform: uppercase;
278 padding: 72px 0 0 0; 75 cursor: pointer;
279 text-align: center;
280 width: 100%;
281}
282
283.footer, .push {
284 height: 200px;
285} 76}
286 77
287.footer p { 78h2 {
288 margin-bottom: 0px; 79 font-size: 24pt;
289 margin-top: 0px; 80 font-weight: 300;
81 cursor: pointer;
290} 82}
291 83
292p a:link, 84/* Never show links with underlines, if we need to, we make
293p a:visited { 85 dotted bottom borders */
86a:link,
87a:visited {
294 text-decoration: none; 88 text-decoration: none;
295 border-bottom: dotted 1px rgba(0,0,0,0.25);
296}
297
298.footer a:link,
299.footer a:visited {
300 color: #8E99A0;
301}
302
303.juice a:link,
304.juice a:visited {
305 color: black; 89 color: black;
306} 90}
307 91
308#wrapper.step3 .block-step2 .circle_num, 92/* ******** Style text input boxes ******** */
309#wrapper.step4 .block-step2 .circle_num,
310#wrapper.step5 .block-step2 .circle_num,
311#wrapper.step6 .block-step2 .circle_num,
312#wrapper.step7 .block-step2 .circle_num,
313#wrapper.step4 .block-step3 .circle_num,
314#wrapper.step5 .block-step3 .circle_num,
315#wrapper.step6 .block-step3 .circle_num,
316#wrapper.step7 .block-step3 .circle_num,
317#wrapper.step5 .block-step4 .circle_num,
318#wrapper.step6 .block-step4 .circle_num,
319#wrapper.step7 .block-step4 .circle_num,
320#wrapper.step6 .block-step5 .circle_num,
321#wrapper.step7 .block-step5 .circle_num,
322#wrapper.step7 .block-step6 .circle_num {
323 border-radius: 1px !important;
324 transition: border-radius, 2s;
325}
326
327input[type="text"] { 93input[type="text"] {
328 width: 95%; 94 width: 95%;
329 background-color : rgba(255, 255, 255, 0.30); 95 padding: 0.4em 0.6em 0.4em 0.6em;
96 margin-bottom: 0.7em;
97
330 border: 0px solid rgba(255, 255, 255, 0.30); 98 border: 0px solid rgba(255, 255, 255, 0.30);
331 border-radius: 6px; 99 border-radius: 6px;
100
332 font-family: 'SourceSansPro', sans-serif; 101 font-family: 'SourceSansPro', sans-serif;
333 font-size: 13pt; 102 font-size: 13pt;
334 font-weight: normal; 103 font-weight: normal;
104
105 background-color : rgba(255, 255, 255, 0.30);
335 color: white; 106 color: white;
336 padding: 0.4em 0.6em 0.4em 0.6em;
337 margin-bottom: 0.7em;
338} 107}
339 108
109/* Remove blue focus hint */
340input:focus { 110input:focus {
341 outline: none !important; 111 outline: none !important;
342} 112}
343 113
344input:focus::placeholder { 114/* Style place holder text (and repeat for each browser namespace :( */
345 opacity: 0;
346}
347
348::placeholder { 115::placeholder {
349 color: white; 116 color: white;
350 opacity: 0.5; 117 opacity: 0.5;
@@ -353,11 +120,6 @@ input:focus::placeholder {
353 letter-spacing: 0.15em; 120 letter-spacing: 0.15em;
354} 121}
355 122
356
357:focus::-moz-placeholder {
358 opacity: 0
359}
360
361::-moz-placeholder { 123::-moz-placeholder {
362 color: white; 124 color: white;
363 opacity: 0.5; 125 opacity: 0.5;
@@ -374,9 +136,6 @@ input:focus::placeholder {
374 letter-spacing: 0.15em; 136 letter-spacing: 0.15em;
375} 137}
376 138
377:focus::-webkit-input-placeholder {
378 opacity: 0;
379}
380::-webkit-input-placeholder { 139::-webkit-input-placeholder {
381 color: white; 140 color: white;
382 opacity: 0.5; 141 opacity: 0.5;
@@ -385,33 +144,21 @@ input:focus::placeholder {
385 letter-spacing: 0.15em; 144 letter-spacing: 0.15em;
386} 145}
387 146
388select.tag { 147/* Placeholder text should disappear when giving input the focus */
389 width: 15%; 148input:focus::placeholder { opacity: 0; }
390 margin-right: 3%; 149:focus::-moz-placeholder { opacity: 0; }
391} 150:focus::-ms-placeholder { opacity: 0; }
392select.monat { 151:focus::-webkit-input-placeholder { opacity: 0; }
393 width: 25%;
394 margin-right: 3%;
395}
396select.jahr {
397 width: 15%;
398 margin-right: 3%;
399}
400select.zeit {
401 min-width: 20%;
402 width: 25%;
403}
404 152
153/* ********* Style select boxes ******** */
405select { 154select {
406 height: 2em; 155 height: 2em;
156
157 border-radius: 4px;
158
407 font-family: 'SourceSansPro', sans-serif; 159 font-family: 'SourceSansPro', sans-serif;
408 font-size: 13pt; 160 font-size: 13pt;
409 font-weight: 300; 161 font-weight: 300;
410 border-radius: 4px;
411}
412
413label {
414 margin-bottom: 1em;
415} 162}
416 163
417input[type=checkbox]:not(old) { 164input[type=checkbox]:not(old) {
@@ -454,75 +201,279 @@ input[type=checkbox]:not(old):checked + label > span:before {
454 margin-left : 144px; 201 margin-left : 144px;
455} 202}
456 203
204label {
205 margin-bottom: 1em;
206}
207
208/* Global element definitions done.
209 Now for basic color scheme */
210#unsicher { background-color: #6276B7; }
211.footer { background-color: #F1F2E3; }
212.block-step1 { background-color: #F1F2E3; }
213.block-step2 { background-color: #047E7C; }
214.block-step3 { background-color: #0C6D74; }
215.block-step4 { background-color: #145C6C; }
216.block-step5 { background-color: #1C4B64; }
217.block-step6 { background-color: #243A5C; }
218.block-step7 { background-color: #2C2954; }
219
220/* Those background definitions must match font colors of circles
221 with numbers to appear as cut-outs */
222.block-step1 .circle_num { color: #F1F2E3; }
223.block-step2 .circle_num { color: #047E7C; }
224.block-step3 .circle_num { color: #0C6D74; }
225.block-step4 .circle_num { color: #145C6C; }
226.block-step5 .circle_num { color: #1C4B64; }
227.block-step6 .circle_num { color: #243A5C; }
228.block-step7 .circle_num { color: #2C2954; }
229
230/* Block 1 needs black font and circles for contrast */
231.block-step1 {
232 color: black !important;
233}
234.block-step1 .circle_num {
235 background-color: black;
236}
237
238.footer {
239 color: #8E99A0;
240}
241
242/* Shadows between sections give the user a sense of depth between
243 stacked cards */
244.block-step2, .block-step3, .block-step4,
245.block-step5, .block-step6, .block-step7, #unsicher {
246 box-shadow: inset 0px 8px 6px -5px rgba(0, 0, 0, 0.5);
247}
248
249/* Footer shadow is inverted an marks end of stacked cards */
250.footer {
251 box-shadow: inset 0px 12px 6px -6px rgba(0, 0, 0, 0.5);
252}
253
254/* Circles in headings guide the user through the 5 step process */
255.circle_num {
256 float: left;
257 margin: 0 28px 0 0;
258
259 width: 40px;
260 height: 40px;
261
262 border-radius: 50%;
263 border: 0px;
264
265 line-height: 1.2em;
266 font-size: 23pt;
267 text-align: center;
268
269 background-color: #F1F2E3;
270 font-weight: normal;
271}
272
273/* step1 has a h1 and the circle needs more finetuning to fit headline */
274.block-step1 .circle_num {
275 margin: 4px 28px 0 0;
276 line-height: 1.3em;
277}
278
279/* Define rest of font styles */
280.hint {
281 font-style: italic;
282 font-weight: 300;
283}
284
285
286/* Our intra-step animations rely on the section's max-height being
287 transitioned from 0 to the original height.
288 Initially hide all sections and only unhide them depending on the
289 global state (as set with a class on the wrapper element)
290*/
291.juice,
292#unsicher,
293#wrapper.stepcancel h2 {
294 overflow: hidden;
295 max-height: 0px;
296 transition: max-height, height;
297 transition-timing-function: ease;
298 transition-duration: 0.5s;
299 transition-delay: 0s;
300}
301
302/* These are the heights of the expanded sections, only shown if the
303 wrapper has the appropriate class */
304
305#wrapper.step1 .block-step1 .juice { max-height: 450px; }
306#wrapper.step2 .block-step2 .juice { max-height: 950px; }
307#wrapper.step3 .block-step3 .juice { max-height: 950px; }
308#wrapper.step4 .block-step4 .juice { max-height: 1050px; }
309#wrapper.step5 .block-step5 .juice { max-height: 1200px; }
310#wrapper.step6 .block-step6 .juice { max-height: 850px; }
311#wrapper.step7 .block-step7 .juice { max-height: 650px; }
312
313/* The unsicher section does not have a headline initially visible,
314 so the sections padding must be hidden and everything must be unhidden together */
315#unsicher {
316 padding: 0;
317}
457#wrapper.stepcancel .block-stepcancel .juice, 318#wrapper.stepcancel .block-stepcancel .juice,
458#wrapper.stepcancel #unsicher, 319#wrapper.stepcancel #unsicher {
459#wrapper.step1 .block-step1 .juice {
460 max-height: 450px; 320 max-height: 450px;
461} 321}
462 322
463#wrapper.step2 .block-step2 .juice { 323/* If the user did not yet confirm that he's sure, disallow expanding blocks */
464 max-height: 950px; 324#wrapper.not-confirmed .block-header {
325 pointer-events: none;
465} 326}
466 327
467#wrapper.step3 .block-step3 .juice { 328
468 max-height: 950px; 329/* Our navigational buttons have a consistent height defined by its wrapper box */
330.two-buttons,
331.one-button {
332 height: 4em;
333 margin: 2.5em 0 1.5em 0;
469} 334}
470 335
471#wrapper.step4 .block-step4 .juice { 336/* Style our buttons */
472 max-height: 1200px; 337.button {
338 width: 45%;
339 height: 2em;
340
341 padding-top: 0.7em;
342 padding-bottom: 0;
343
344 border-radius: 10px;
345
346 color: white;
347 font-weight: bold;
348 text-align: center;
349 text-transform: uppercase;
350
351 transition-duration: 0.2s;
352
353 cursor: pointer;
473} 354}
474 355
475#wrapper.step5 .block-step5 .juice { 356.button-green { background-color: #8ECA63; }
476 max-height: 1200px; 357.button-green:hover { background-color: #96E65C; }
358.button-red { background-color: #E65946; }
359.button-red:hover { background-color: #FF1E00; }
360.one-button .button-green {
361
362/* Place buttons, single green is centered, two buttons float */
363 margin-right: auto;
364 margin-left: auto;
477} 365}
478 366
479#wrapper.step6 .block-step6 .juice { 367.two-buttons .button-green {
480 max-height: 850px; 368 float: left;
481} 369}
482 370
483#wrapper.step7 .block-step7 .juice { 371.button-red {
484 max-height: 650px; 372 float: right;
485} 373}
486 374
487/* On older phones our blocks need to accomodate 375/* Smaller buttons are for non-navigational purposes */
488 for zoomed fonts */ 376.button-small {
489@media only screen and (max-device-width: 480px) { 377 display: inline-block;
490#wrapper.stepcancel .block-stepcancel .juice, 378 padding: 0.2em 0.4em 0.2em 0.4em;
491#wrapper.step1 .block-step1 .juice { 379 margin: 0 0.4em 1em 0;
492 max-height: 450px !important; 380
381 border-radius: 4px;
382
383 background-color: white;
384 color: #222;
385
386 font-weight: normal;
387 font-size: 13pt;
388
389 cursor: pointer;
390 transition-duration: 0.2s;
493} 391}
494 392
495#wrapper.step2 .block-step2 .juice { 393.button-small:hover {
496 max-height: 950px; 394 background-color: #D0B66B;
497} 395}
498 396
499#wrapper.step3 .block-step3 .juice { 397/* Style things that depend on the progress.
500 max-height: 950px; 398 Example: circles turn squares when a step is finished */
399#wrapper.step3 .block-step2 .circle_num,
400#wrapper.step4 .block-step2 .circle_num,
401#wrapper.step5 .block-step2 .circle_num,
402#wrapper.step6 .block-step2 .circle_num,
403#wrapper.step7 .block-step2 .circle_num,
404#wrapper.step4 .block-step3 .circle_num,
405#wrapper.step5 .block-step3 .circle_num,
406#wrapper.step6 .block-step3 .circle_num,
407#wrapper.step7 .block-step3 .circle_num,
408#wrapper.step5 .block-step4 .circle_num,
409#wrapper.step6 .block-step4 .circle_num,
410#wrapper.step7 .block-step4 .circle_num,
411#wrapper.step6 .block-step5 .circle_num,
412#wrapper.step7 .block-step5 .circle_num,
413#wrapper.step7 .block-step6 .circle_num {
414 border-radius: 1px !important;
415 transition: border-radius, 2s;
501} 416}
502 417
503#wrapper.step4 .block-step4 .juice { 418/* Make shift date selector */
504 max-height: 1050px; 419select.tag {
420 width: 15%;
421 margin-right: 3%;
505} 422}
423select.monat {
424 width: 25%;
425 margin-right: 3%;
426}
427select.jahr {
428 width: 15%;
429 margin-right: 3%;
430}
431select.zeit {
432 min-width: 20%;
433 width: 25%;
434}
435
436/* ******** FOOTER ******** */
506 437
507#wrapper.step5 .block-step5 .juice { 438/* This ensures there's always enough space to push
508 max-height: 1200px; 439 footer to the bottom of the screen */
440#wrapper {
441 min-height: 100%;
442 height: auto !important;
443 height: 100%;
444 margin: 0 auto -200px;
509} 445}
510 446
511#wrapper.step6 .block-step6 .juice { 447.footer, .push {
512 max-height: 850px; 448 height: 200px;
513} 449}
514 450
515#wrapper.step7 .block-step7 .juice { 451.footer {
516 max-height: 650px; 452 width: 100%;
453 margin: 0;
454 padding: 72px 0 0 0;
455
456 font-size: 12pt;
457 font-weight: 300;
458
459 text-align: center;
517} 460}
518 461
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);
519} 466}
520 467
468.footer a:link,
469.footer a:visited {
470 color: #8E99A0;
471}
521.credits { 472.credits {
522 min-width: 480px; 473 min-width: 480px;
523 width: 50%; 474 width: 50%;
524 max-width: 640px; 475 max-width: 640px;
525 margin: 0 auto 72px auto; 476 margin: 0 auto 0 auto;
526} 477}
527 478
528.partner img { 479.partner img {
@@ -545,3 +496,21 @@ input[type=checkbox]:not(old):checked + label > span:before {
545.partner.ccc img { 496.partner.ccc img {
546 vertical-align: top; 497 vertical-align: top;
547} 498}
499
500.footer-left {
501 float: left;
502 text-align: right;
503 width: 48%;
504 margin: 0;
505 padding-right: 10px;
506 border: none;
507}
508
509.footer-right {
510 float: right;
511 text-align: left;
512 width: 48%;
513 margin: 0;
514 padding-left: 10px;
515 border: none;
516}
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-22 09:01:35 +0000