Commit 131f93927c3d033221fc05e4944c130edcad7ce1

Authored by Georg Hopp
1 parent db964b4e

Make teaser sections always 100% viewport size and content sections variable length

... ... @@ -116,26 +116,29 @@ p {
116 116 border-bottom: 2px solid rgb(255,255,255);
117 117 }
118 118
119   -#content {
120   - position: absolute;
121   - top: 0px;
122   - left: 0px;
123   - width: 100%;
124   - height: 100%;
125   -}
126 119 #section1 .content, #section3 .content, #section5 .content {
127 120 color: rgb(214,206,204);
128 121 }
129 122 #section2, #section4, #section6 {
130 123 background-color: rgb(255,255,255);
  124 + padding: 2em 0 2em 0;
131 125 }
132 126 #section1 {
133   - background: image_url("me.jpg") fixed;
134   - background-position: center top;
  127 + background: image_url("me.jpg") center top fixed;
135 128 }
136 129 #section3 {
137   - background: image_url("waldschrat.jpg") fixed;
138   - background-position: center top;
  130 + background: image_url("waldschrat.jpg") center top fixed;
  131 +}
  132 +#section1, #section3, #section5 {
  133 + height: 100vh; // make this responsive...
  134 +}
  135 +.content {
  136 + position: relative;
  137 + width: 90%;
  138 + top: 50%;
  139 + left: 50%;
  140 + transform: translate(-50%, 0);
  141 + z-index: 1;
139 142 }
140 143
141 144 #footer {
... ... @@ -230,7 +233,6 @@ p {
230 233
231 234 .section {
232 235 position: relative;
233   - height: 100%;
234 236 overflow: hidden;
235 237 }
236 238 .section .watermark {
... ... @@ -330,15 +332,6 @@ p {
330 332 position: relative;
331 333 }
332 334
333   -.content {
334   - position: relative;
335   - width: 90%;
336   - height: 90%;
337   - top: 50%;
338   - left: 50%;
339   - transform: translate(-50%, -50%);
340   - z-index: 1;
341   -}
342 335 .textbox {
343 336 text-align: center;
344 337 border-style: solid;
... ...
... ... @@ -24,52 +24,50 @@
24 24 </div>
25 25 </header>
26 26
27   - <div id="content">
28   - <%= yield %>
  27 + <%= yield %>
29 28
30   - <footer id="footer">
31   - <ul>
32   - <li><a href="">about us</a></li>
33   - <li><a href="">contact</a></li>
34   - </ul>
35   - <div class="license">
36   - <div>
37   - <p>
38   - Copyright &copy; 2016 Georg Hopp | All rights reserved
39   - </p>
40   - <p>
41   - All code (no matter which language) used to create this page is
42   - licensed under a
43   - <a href="http://www.gnu.org/licenses/gpl-3.0.en.html"
44   - rel="license"
45   - target="_blank">
46   - GNU General Public License (Version 3)
47   - </a>.
48   - </p>
49   - <p>
50   - All other work is licensed under a
51   - <a href="http://creativecommons.org/licenses/by/4.0/"
52   - rel="license"
53   - target="_blank">
54   - Creative Commons Attribution 4.0 International License
55   - </a>.
56   - </p>
57   - </div>
58   - <a href="http://creativecommons.org/licenses/by/4.0/"
  29 + <footer id="footer">
  30 + <ul>
  31 + <li><a href="">about us</a></li>
  32 + <li><a href="">contact</a></li>
  33 + </ul>
  34 + <div class="license">
  35 + <div>
  36 + <p>
  37 + Copyright &copy; 2016 Georg Hopp | All rights reserved
  38 + </p>
  39 + <p>
  40 + All code (no matter which language) used to create this page is
  41 + licensed under a
  42 + <a href="http://www.gnu.org/licenses/gpl-3.0.en.html"
59 43 rel="license"
60 44 target="_blank">
61   - <img alt="Creative Commons License"
62   - style="border-width:0"
63   - src="https://i.creativecommons.org/l/by/4.0/88x31.png" />
64   - </a>
65   - <a href="http://www.gnu.org/licenses/gpl-3.0.en.html"
  45 + GNU General Public License (Version 3)
  46 + </a>.
  47 + </p>
  48 + <p>
  49 + All other work is licensed under a
  50 + <a href="http://creativecommons.org/licenses/by/4.0/"
66 51 rel="license"
67 52 target="_blank">
68   - <%= image_tag("gpl-v3-red.svg", height: "30") %>
69   - </a>
  53 + Creative Commons Attribution 4.0 International License
  54 + </a>.
  55 + </p>
70 56 </div>
71   - </footer>
72   - </div>
  57 + <a href="http://creativecommons.org/licenses/by/4.0/"
  58 + rel="license"
  59 + target="_blank">
  60 + <img alt="Creative Commons License"
  61 + style="border-width:0"
  62 + src="https://i.creativecommons.org/l/by/4.0/88x31.png" />
  63 + </a>
  64 + <a href="http://www.gnu.org/licenses/gpl-3.0.en.html"
  65 + rel="license"
  66 + target="_blank">
  67 + <%= image_tag("gpl-v3-red.svg", height: "30") %>
  68 + </a>
  69 + </div>
  70 + </footer>
73 71 </body>
74 72 </html>
75 73 <!-- vim: set ts=2 sw=2: -->
... ...
Please register or login to post a comment