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

app/assets/stylesheets/welcome.scss

@@ -116,26 +116,29 @@ p {
 	border-bottom: 2px solid rgb(255,255,255);
 }
 
-#content {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	width: 100%;
-	height: 100%;
-}
 #section1 .content, #section3 .content, #section5 .content {
 	color: rgb(214,206,204);
 }
 #section2, #section4, #section6 {
 	background-color: rgb(255,255,255);
+	padding: 2em 0 2em 0;
 }
 #section1 {
-	background: image_url("me.jpg") fixed;
-	background-position: center top;
+	background: image_url("me.jpg") center top fixed;
 }
 #section3 {
-	background: image_url("waldschrat.jpg") fixed;
-	background-position: center top;
+	background: image_url("waldschrat.jpg") center top fixed;
+}
+#section1, #section3, #section5 {
+	height: 100vh; // make this responsive...
+}
+.content {
+	position: relative;
+	width: 90%;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, 0);
+	z-index: 1;
 }
 
 #footer {
@@ -230,7 +233,6 @@ p {
 
 .section {
 	position: relative;
-	height: 100%;
 	overflow: hidden;
 }
 .section .watermark {
@@ -330,15 +332,6 @@ p {
 	position: relative;
 }
 
-.content {
-	position: relative;
-	width: 90%;
-	height: 90%;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	z-index: 1;
-}
 .textbox {
 	text-align: center;
 	border-style: solid;

app/views/layouts/application.html.erb

@@ -24,52 +24,50 @@
 			</div>
 		</header>
 
-		<div id="content">
-			<%= yield %>
+		<%= yield %>
 
-			<footer id="footer">
-				<ul>
-					<li><a href="">about us</a></li>
-					<li><a href="">contact</a></li>
-				</ul>
-				<div class="license">
-					<div>
-						<p>
-						Copyright &copy; 2016 Georg Hopp | All rights reserved
-						</p>
-						<p>
-						All code (no matter which language) used to create this page is
-						licensed under a
-						<a href="http://www.gnu.org/licenses/gpl-3.0.en.html"
-							rel="license"
-							target="_blank">
-							GNU General Public License (Version 3)
-						</a>.
-						</p>
-						<p>
-						All other work is licensed under a
-						<a href="http://creativecommons.org/licenses/by/4.0/"
-							rel="license"
-							target="_blank">
-							Creative Commons Attribution 4.0 International License
-						</a>.
-						</p>
-					</div>
-					<a href="http://creativecommons.org/licenses/by/4.0/"
+		<footer id="footer">
+			<ul>
+				<li><a href="">about us</a></li>
+				<li><a href="">contact</a></li>
+			</ul>
+			<div class="license">
+				<div>
+					<p>
+					Copyright &copy; 2016 Georg Hopp | All rights reserved
+					</p>
+					<p>
+					All code (no matter which language) used to create this page is
+					licensed under a
+					<a href="http://www.gnu.org/licenses/gpl-3.0.en.html"
 						rel="license"
 						target="_blank">
-						<img alt="Creative Commons License"
-							style="border-width:0"
-							src="https://i.creativecommons.org/l/by/4.0/88x31.png" />
-					</a>
-					<a href="http://www.gnu.org/licenses/gpl-3.0.en.html"
+						GNU General Public License (Version 3)
+					</a>.
+					</p>
+					<p>
+					All other work is licensed under a
+					<a href="http://creativecommons.org/licenses/by/4.0/"
 						rel="license"
 						target="_blank">
-						<%= image_tag("gpl-v3-red.svg", height: "30") %>
-					</a>
+						Creative Commons Attribution 4.0 International License
+					</a>.
+					</p>
 				</div>
-			</footer>
-		</div>
+				<a href="http://creativecommons.org/licenses/by/4.0/"
+					rel="license"
+					target="_blank">
+					<img alt="Creative Commons License"
+						style="border-width:0"
+						src="https://i.creativecommons.org/l/by/4.0/88x31.png" />
+				</a>
+				<a href="http://www.gnu.org/licenses/gpl-3.0.en.html"
+					rel="license"
+					target="_blank">
+					<%= image_tag("gpl-v3-red.svg", height: "30") %>
+				</a>
+			</div>
+		</footer>
 	</body>
 </html>
 <!-- vim: set ts=2 sw=2: -->