From bb3d31e896e7475696d8c8ef747d77af13373b68 Mon Sep 17 00:00:00 2001
From: Jonathan van der Ceelen <j.vanderceelen@minddistrict.com>
Date: Mon, 1 Feb 2021 11:12:08 +0100
Subject: [PATCH] Remove positioning absolute from sections

---
 index.html | 80 +++++++++++++++++++++++++++---------------------------
 style.css  | 34 ++++++++++++-----------
 2 files changed, 58 insertions(+), 56 deletions(-)
diff --git a/index.html b/index.html
index 314d3b1..41ec643 100644
--- a/index.html
+++ b/index.html
@@ -5,22 +5,22 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
-    
+
     <title>Site title</title>
     <meta name="description" content="Site description">
-    
+
     <!-- Recommended minimum -->
     <meta property="og:title" content="Site title">
     <meta property="og:description" content="Site description">
     <meta property="og:image" content="img/site-image.jpg">
     <meta name="twitter:card" content="summary_large_image">
-    
+
     <!-- You could also inline the stylesheet -->
     <link rel="stylesheet" href="style.css">
-    
+
   </head>
   <body>
-    
+
     <header>
       <h1>
         <a href="#home">Site title</a>
@@ -32,52 +32,46 @@ <h1>
         <a href="#portfolio">Portfolio</a>
       </nav>
     </header>
-    
+
     <main>
-      
-      <section id="home"> <!-- HOME -->
-        
-        <p>This is the homepage, displayed by default.</p>
-        
-      </section>
-      
+
       <section id="about"> <!-- ABOUT -->
-        
+
         <p>This is the about page. <a href="#another-page">This is a link to another page</a>.</p>
-        
-        <figure> 
-          <a href="#img-about">         
+
+        <figure>
+          <a href="#img-about">
             <img loading="lazy" alt="" src="//dummyimage.com/1200x600/ddd/bbb" width="1200" height="600">
           </a>
           <figcaption>Example of an image with a link to a larger version.</figcaption>
         </figure>
-        
+
       </section>
-      
+
       <section id="news"> <!-- NEWS -->
-        
+
         <article>
           <h2>Blogging with Joe Bloggs <time datetime="2020-10-10">10.10.2020</time></h2>
           <p> One <em>could</em> use this setup to write <s>a blog</s> short updates. For images make sure to use the <code>loading="lazy"</code> attribute, so they get loaded only when needed.<label for="lazy">1</label><input type="checkbox" id="lazy"><small>
-            
+
             You might be able to use it for <code>iframe</code> embeds too(?), but maybe just write a link to the Youtube video instead.
-            
+
            </small></p>
         </article>
-              
+
         <article>
           <h2><a href="https://example.com">Why Your Cat Bites You</a> <time datetime="2004-12-12">12.12.2004</time></h2>
           <p>Honestly you don't want to know.</p>
         </article>
-      
+
       </section>
-      
+
       <section id="photos"> <!-- PHOTOS -->
-        
+
         <p>An example of a photo gallery with a lightbox.</p>
 
         <!-- You can use this grid of images in any page -->
-        
+
         <div class="grid">
           <a href="#img-01"><img loading="lazy" alt="" src="//dummyimage.com/300x300/ddd/bbb"></a>
           <a href="#img-02"><img loading="lazy" alt="" src="//dummyimage.com/400x300/ddd/bbb"></a>
@@ -95,9 +89,9 @@ <h2><a href="https://example.com">Why Your Cat Bites You</a> <time datetime="200
           <a href="#img-14"><img loading="lazy" alt="" src="//dummyimage.com/400x300/ddd/bbb"></a>
           <a href="#img-15"><img loading="lazy" alt="" src="//dummyimage.com/300x400/ddd/bbb"></a>
         </div>
-        
+
       </section>
-      
+
       <section id="portfolio"> <!-- PORTFOLIO -->
 
         <div class="slides">
@@ -122,22 +116,28 @@ <h2><a href="https://example.com">Why Your Cat Bites You</a> <time datetime="200
         </div>
 
       </section>
-        
+
       <section id="another-page"> <!-- ANOTHER PAGE -->
-        
+
         <p>This page is not referenced in the menu, yet it exists.</p>
         <p><a href="#about">← back</a></p>
-        
+
       </section>
-      
+
+      <section id="home"> <!-- HOME -->
+
+        <p>This is the homepage, displayed by default.</p>
+
+      </section>
+
     </main>
-    
+
     <!-- ----------
     LIGHTBOX IMAGES
     ----------- -->
 
     <!-- PHOTOS grid -->
-    
+
     <a href="#photos" class="lightbox" id="img-01"><img loading="lazy" alt="" src="//dummyimage.com/3000x3000/ddd/bbb"></a>
     <a href="#photos" class="lightbox" id="img-02"><img loading="lazy" alt="" src="//dummyimage.com/4000x3000/ddd/bbb"></a>
     <a href="#photos" class="lightbox" id="img-03"><img loading="lazy" alt="" src="//dummyimage.com/3000x4000/ddd/bbb"></a>
@@ -152,11 +152,11 @@ <h2><a href="https://example.com">Why Your Cat Bites You</a> <time datetime="200
     <a href="#photos" class="lightbox" id="img-12"><img loading="lazy" alt="" src="//dummyimage.com/3000x4000/ddd/bbb"></a>
     <a href="#photos" class="lightbox" id="img-13"><img loading="lazy" alt="" src="//dummyimage.com/3000x3000/ddd/bbb"></a>
     <a href="#photos" class="lightbox" id="img-14"><img loading="lazy" alt="" src="//dummyimage.com/4000x3000/ddd/bbb"></a>
-    <a href="#photos" class="lightbox" id="img-15"><img loading="lazy" alt="" src="//dummyimage.com/3000x4000/ddd/bbb"></a>    
-    
+    <a href="#photos" class="lightbox" id="img-15"><img loading="lazy" alt="" src="//dummyimage.com/3000x4000/ddd/bbb"></a>
+
     <!-- Other images -->
-    
+
     <a href="#about" class="lightbox" id="img-about"><img loading="lazy" alt="" src="//dummyimage.com/2400x1200/ddd/bbb"></a>
-    
+
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/style.css b/style.css
index 48a7d14..dacf5ba 100644
--- a/style.css
+++ b/style.css
@@ -1,7 +1,7 @@
 * { margin: 0; padding: 0; box-sizing: border-box;
-  
+
   /* Color scheme */
-  
+
   --textcolor: #121212;
   --bgcolor: #fff;
   --highlight: #2749c9;
@@ -33,10 +33,7 @@ section {
   padding: calc(6em + 5vw) 5vw 8vw 5vw;
   /* ! Everything below is needed ! */
   display: none;
-  position: absolute;
-  top: 0;
   min-height: 100vh;
-  width: 100%;
   background: var(--bgcolor);
 }
 
@@ -48,6 +45,11 @@ section#home { /* Show #home by default */
   display: block;
 }
 
+/* When a section is shown, hide default home section */
+section:target ~ section#home {
+  display: none;
+}
+
 /* ------- Header ------- */
 
 header {
@@ -162,7 +164,7 @@ img, svg, video, audio {
   height: auto;
   fill: currentColor;
 }
-  
+
 code, textarea {
   font-family: ui-monospace, SF Mono, Menlo, Monaco, Andale Mono, monospace;
   font-size: 1em;
@@ -253,7 +255,7 @@ section:target iframe {
 
 /* External links */
 
-a[href*="//"]:after { 
+a[href*="//"]:after {
   font-weight: 300;
   font-size: .85em;
   content: "\2197"; /* top right arrow: ↗ */
@@ -268,7 +270,7 @@ a[href*="//"]:hover:after {
 
 /* File links */
 
-a:before { 
+a:before {
   font-size: .7em;
   margin-right: .4em;
 }
@@ -445,22 +447,22 @@ article time {
 /* ------- Print ------- */
 
 @media print {
-  
+
   nav, .lightbox:target:after { display: none; }
-  
+
   article, figure, img {
     page-break-inside: avoid;
     break-inside: avoid;
   }
-  
+
   /* Inline footnotes */
-  
+
   label + input + small { display: inline; }
   label + input + small:before { content: "["; }
   label + input + small:after { content: "]"; }
-  
+
   /* Slides */
-  
+
   .slides, .slides figure {
     position: relative;
     height: auto;
@@ -475,5 +477,5 @@ article time {
     height: 100vh;
     object-fit: contain;
   }
-    
-}
\ No newline at end of file
+
+}
