took out absolute positioning

to7m · Aug 6, 2024 · ed10fb9 · ed10fb9
1 parent 8e19ddc
commit ed10fb9
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 21 deletions.
diff --git a/public_html/index.html b/public_html/index.html
@@ -39,8 +39,10 @@
   </aside>
   <div id="all-except-aside">
     <header id="header">
-      <h1>My Name is Thomas Howe</h1>
-      <p>I'm a web developer</p>
+      <div>
+        <h1>My Name is Thomas Howe</h1>
+        <p>I'm a web developer</p>
+      </div>
       <a href="#main" id="scroll-down">Scroll Down</a>
     </header>
     <main id="main"><ul>

diff --git a/public_html/style.css b/public_html/style.css
diff --git a/public_html/style.css.map b/public_html/style.css.map
diff --git a/scss/body/_header.scss b/scss/body/_header.scss
@@ -7,30 +7,42 @@ header {
     position: relative;
     min-height: 100vh;
     width: 100%;
+
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 1fr auto;
+    grid-template-areas:
+        "div"
+        "scroll-down";
+
     @include colours.background_img_blend(colours.$darken, "stromatolites.png");
     background-size: cover;
     background-position: center;
     color: colours.$white;
 }
 
-h1 {
+header div {
+    grid-area: div;
     width: 100%;
+}
+
+h1 {
     @include text.h1_text_sizes;
-    @include layout.absolute_position_centred($top: 45%);
     text-shadow: 0 0 10px colours.$black;
 }
 
 header p {
-    @include layout.absolute_position_centred($bottom: 45%);
+    margin-top: 20px;
     @include text.header_p_text_sizes;
 }
 
 #scroll-down {
-    @include layout.absolute_position_centred($bottom: 35px);
+    grid-area: scroll-down;
+    margin: 15px 0;
 
     @include text.append_icon("icon-keyboard_arrow_down") {
         display: block;
         font-size: 35px;
         font-weight: 600;
     };
-}
+}