diff options
-rw-r--r-- | index.html | 3 | ||||
-rw-r--r-- | style.css | 24 |
2 files changed, 16 insertions, 11 deletions
@@ -1,7 +1,8 @@ | |||
1 | <!DOCTYPE html> | 1 | <!DOCTYPE html> |
2 | <html lang="en"> | 2 | <html lang="en"> |
3 | <head> | 3 | <head> |
4 | <meta charset="utf-8"> | 4 | <meta charset="utf-8" /> |
5 | <meta name="viewport" content="width=540"> | ||
5 | <title>Abmahnbeantworter</title> | 6 | <title>Abmahnbeantworter</title> |
6 | <link rel="stylesheet" href="style.css"> | 7 | <link rel="stylesheet" href="style.css"> |
7 | <script src="js/pdfmake.min.js"></script> | 8 | <script src="js/pdfmake.min.js"></script> |
@@ -36,7 +36,7 @@ | |||
36 | html, body { | 36 | html, body { |
37 | height: 100%; | 37 | height: 100%; |
38 | margin: 0px !important; | 38 | margin: 0px !important; |
39 | min-width: 480px; | 39 | min-width: 540px; |
40 | 40 | ||
41 | font-family: 'SourceSansPro', sans-serif; | 41 | font-family: 'SourceSansPro', sans-serif; |
42 | font-size: 14pt; | 42 | font-size: 14pt; |
@@ -53,14 +53,15 @@ html { | |||
53 | /* These describe our vertical hierarchy elementes */ | 53 | /* These describe our vertical hierarchy elementes */ |
54 | .collapsable { | 54 | .collapsable { |
55 | width: 100%; | 55 | width: 100%; |
56 | padding: 0.4em 0 0.4em 0; | 56 | padding: 0.4em 20px 0.4em 20px; |
57 | margin-left: 0; | 57 | margin-left: 0; |
58 | margin-right: 0; | 58 | margin-right: 0; |
59 | } | 59 | } |
60 | 60 | ||
61 | /* This defindes our content width */ | 61 | /* This defindes our content width */ |
62 | .block-header, .juice { | 62 | .block-header, .juice { |
63 | width: 480px; | 63 | overflow: hidden; |
64 | width: 540px; | ||
64 | margin: 0.5em auto 0 auto; | 65 | margin: 0.5em auto 0 auto; |
65 | } | 66 | } |
66 | 67 | ||
@@ -75,7 +76,7 @@ h1 { | |||
75 | text-transform: uppercase; | 76 | text-transform: uppercase; |
76 | cursor: pointer; | 77 | cursor: pointer; |
77 | vertical-align: top; | 78 | vertical-align: top; |
78 | padding-top: 0px; | 79 | padding: 0px 0px 0px 20px; |
79 | } | 80 | } |
80 | 81 | ||
81 | h1 svg { | 82 | h1 svg { |
@@ -351,20 +352,21 @@ dd { | |||
351 | /* These are the heights of the expanded sections, only shown if the | 352 | /* These are the heights of the expanded sections, only shown if the |
352 | wrapper has the appropriate class */ | 353 | wrapper has the appropriate class */ |
353 | 354 | ||
354 | #wrapper.step-1 .block-step1 .juice { max-height: 450px; } | 355 | #wrapper.step-1 .block-step1 .juice { max-height: 550px; } |
355 | #wrapper.step-2 .block-step2 .juice { max-height: 950px; } | 356 | #wrapper.step-2 .block-step2 .juice { max-height: 950px; } |
356 | #wrapper.step-3 .block-step3 .juice { max-height: 950px; } | 357 | #wrapper.step-3 .block-step3 .juice { max-height: 950px; } |
357 | #wrapper.step-4 .block-step4 .juice { max-height: 1050px; } | 358 | #wrapper.step-4 .block-step4 .juice { max-height: 1050px; } |
358 | #wrapper.step-5 .block-step5 .juice { max-height: 1200px; } | 359 | #wrapper.step-5 .block-step5 .juice { max-height: 1200px; } |
359 | #wrapper.step-6 .block-step6 .juice { max-height: 850px; } | 360 | #wrapper.step-6 .block-step6 .juice { max-height: 850px; } |
360 | #wrapper.step-7 .block-step7 .juice { max-height: 650px; } | 361 | #wrapper.step-7 .block-step7 .juice { max-height: 650px; } |
361 | #wrapper.moreinfo-shown .block-moreinfo { max-height: 3500px; } | 362 | #wrapper.moreinfo-shown .block-moreinfo { max-height: 3700px; } |
362 | #wrapper.step-1.moreinfo-shown .block-step1 .juice { max-height: 3800px;} | 363 | #wrapper.step-1.moreinfo-shown .block-step1 .juice { max-height: 4500px;} |
363 | 364 | ||
364 | /* The unsicher section does not have a headline initially visible, | 365 | /* The unsicher section does not have a headline initially visible, |
365 | so the sections padding must be hidden and everything must be unhidden together */ | 366 | so the sections padding must be hidden and everything must be unhidden together */ |
366 | #unsicher { | 367 | #unsicher { |
367 | padding: 0; | 368 | padding-top: 0; |
369 | padding-bottom: 0; | ||
368 | } | 370 | } |
369 | #wrapper.step-0 .block-step0 .juice, | 371 | #wrapper.step-0 .block-step0 .juice, |
370 | #wrapper.step-0 #unsicher { | 372 | #wrapper.step-0 #unsicher { |
@@ -514,13 +516,14 @@ select.zeit { | |||
514 | 516 | ||
515 | #footer, .push { | 517 | #footer, .push { |
516 | height: 300px; | 518 | height: 300px; |
519 | border: none; | ||
517 | } | 520 | } |
518 | 521 | ||
519 | #footer { | 522 | #footer { |
520 | width: 100%; | 523 | width: 100%; |
521 | min-width: 540px; | 524 | min-width: 520px; |
522 | margin: 0; | 525 | margin: 0; |
523 | padding: 50px 0 0 0; | 526 | padding: 50px 20px 0 20px; |
524 | 527 | ||
525 | font-size: 11pt; | 528 | font-size: 11pt; |
526 | font-weight: 300; | 529 | font-weight: 300; |
@@ -615,6 +618,7 @@ select.zeit { | |||
615 | position: relative; | 618 | position: relative; |
616 | left: 0; | 619 | left: 0; |
617 | transition: left 1s; | 620 | transition: left 1s; |
621 | margin: 0; | ||
618 | } | 622 | } |
619 | 623 | ||
620 | #footer.impressum-shown .block-credits { | 624 | #footer.impressum-shown .block-credits { |