diff options
| author | Dirk Engling <erdgeist@erdgeist.org> | 2016-08-21 19:19:12 +0200 |
|---|---|---|
| committer | Dirk Engling <erdgeist@erdgeist.org> | 2016-08-21 19:19:12 +0200 |
| commit | 2fc950358ecac526bfdbdc34d36c19e6ba3efdae (patch) | |
| tree | fd22d99fad60f6138d554f8e8e7a2be3530545fe | |
| parent | e6104f2165283b284aafb0e62dda09530ac52065 (diff) | |
set mobile friendly viewport
| -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 { |