web / steffers.org · Commits

Commit 131f93927c3d033221fc05e4944c130edcad7ce1

Authored by Georg Hopp
1 parent db964b4e

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

Inline Side-by-side
Showing 2 changed files with 52 additions and 61 deletions
@@ -116,26 +116,29 @@ p { @@ -116,26 +116,29 @@ p {
116 border-bottom: 2px solid rgb(255,255,255); 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 #section1 .content, #section3 .content, #section5 .content { 119 #section1 .content, #section3 .content, #section5 .content {
127 color: rgb(214,206,204); 120 color: rgb(214,206,204);
128 } 121 }
129 #section2, #section4, #section6 { 122 #section2, #section4, #section6 {
130 background-color: rgb(255,255,255); 123 background-color: rgb(255,255,255);
  124 + padding: 2em 0 2em 0;
131 } 125 }
132 #section1 { 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 #section3 { 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 #footer { 144 #footer {
@@ -230,7 +233,6 @@ p { @@ -230,7 +233,6 @@ p {
230 233
231 .section { 234 .section {
232 position: relative; 235 position: relative;
233 - height: 100%;  
234 overflow: hidden; 236 overflow: hidden;
235 } 237 }
236 .section .watermark { 238 .section .watermark {
@@ -330,15 +332,6 @@ p { @@ -330,15 +332,6 @@ p {
330 position: relative; 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 .textbox { 335 .textbox {
343 text-align: center; 336 text-align: center;
344 border-style: solid; 337 border-style: solid;
@@ -24,52 +24,50 @@ @@ -24,52 +24,50 @@
24 </div> 24 </div>
25 </header> 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 rel="license" 43 rel="license"
60 target="_blank"> 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 rel="license" 51 rel="license"
67 target="_blank"> 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 </div> 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 </body> 71 </body>
74 </html> 72 </html>
75 <!-- vim: set ts=2 sw=2: --> 73 <!-- vim: set ts=2 sw=2: -->
Please register or login to post a comment