From 8e19ddc398dd0a2db5fc6093af467131255a8cbb Mon Sep 17 00:00:00 2001
From: to7m <ThomasHoweMain@gmail.com>
Date: Tue, 6 Aug 2024 15:03:11 +0100
Subject: [PATCH] added section links

---
 public_html/index.html        |  8 ++++----
 public_html/style.css         | 19 ++++++++++++++++++-
 public_html/style.css.map     |  2 +-
 scss/body/_header.scss        |  7 +++++++
 scss/layout/_positioning.scss | 26 ++++++++++++++++++--------
 scss/text/_sizes.scss         |  3 ++-
 6 files changed, 50 insertions(+), 15 deletions(-)

diff --git a/public_html/index.html b/public_html/index.html
index 62fdde1..fd3f2b6 100644
--- a/public_html/index.html
+++ b/public_html/index.html
@@ -38,12 +38,12 @@
     </ul></nav>
   </aside>
   <div id="all-except-aside">
-    <header>
+    <header id="header">
       <h1>My Name is Thomas Howe</h1>
       <p>I'm a web developer</p>
-      <a href="#" id="scroll-down">Scroll Down</a>
+      <a href="#main" id="scroll-down">Scroll Down</a>
     </header>
-    <main><ul>
+    <main id="main"><ul>
       <li><a href="#">
         <img src="">
         <h3>Project One</h1>
@@ -103,7 +103,7 @@ <h2>Get In Touch</h2>
 
         <button type="submit" id="contact-form__submit-button">Submit</button>
       </form>
-      <a href="#">Back To Top</a>
+      <a href="#header">Back To Top</a>
     </footer>
   </div>
 </body>
diff --git a/public_html/style.css b/public_html/style.css
index 6aa5d07..a8b84f8 100644
--- a/public_html/style.css
+++ b/public_html/style.css
@@ -166,17 +166,34 @@ header {
 }
 
 h1 {
+  width: 100%;
   font-family: arial;
   font-size: 3rem;
   font-weight: bold;
   line-height: 3.5rem;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 45%;
+  left: 50%;
   text-shadow: 0 0 10px rgb(0, 0, 0);
 }
 
+header p {
+  position: absolute;
+  transform: translate(-50%, 50%);
+  bottom: 45%;
+  left: 50%;
+  font-family: arial;
+  font-size: 1.2rem;
+  font-weight: normal;
+  line-height: 1.7rem;
+}
+
 #scroll-down {
   position: absolute;
-  transform: translate(0, 50%);
+  transform: translate(-50%, 50%);
   bottom: 35px;
+  left: 50%;
 }
 #scroll-down::after {
   content: "\e909";
diff --git a/public_html/style.css.map b/public_html/style.css.map
index 7f41029..c358ed5 100644
--- a/public_html/style.css.map
+++ b/public_html/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/_reset.scss","../scss/text/_icon.scss","../scss/body/_aside.scss","../scss/_colours.scss","../scss/_accessibility.scss","../scss/body/_header.scss","../scss/text/_sizes.scss","../scss/layout/_positioning.scss","../scss/body/_index.scss"],"names":[],"mappings":"AAAA;AAEA;AACI;AAAA;EAEA;;;AAGJ;AACI;EACA;EACA;EACA;;;AAGJ;AACI;AAAA;AAAA;EAGA;AAEA;EACA;EACA;;;AAGJ;AACI;EACA;;;AAGJ;AACI;EACA;;;AAIJ;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;ACzDJ;EACI;EACA;EACA,KACI;EAIJ;EACA;EACA;;ACRJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;;AAIR;EAAc;;;AAEd;EACI;EACA;;AAEA;EAAO;;;AAGX;EACI;EACA;;AAEA;EACI;;;AAIR;EACI;EACA;EACA,OCvCG;;;ACAH;EF0CJ;IEzCQ;;;;AF0CR;EAGI;;AExCA;EFqCJ;IEpCQ;;;;AHoFJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AANJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AANJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AANJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AI7FR;EACI;EACA;EACA;EFAA;EEEA;EACA;EACA,OFRI;;;AEWR;ECXI,aAJa;EAKb,WAOwC;EANxC,aAM4D;EAL5D;EDUA;;;AAGJ;EEHI;EACA;EAGA;;ANuEA;EACI;EACA;EACA;EACA;EACA;EACA;EI1EA;EACA;EACA;;;AGnBR;EACI,kBLJI;EKMJ;EACA;EACA;EACA;EACA;EFVA,aAJa;EAKb,WAM4C;EAL5C,aAHsE;EAItE;EEUA,OLjBI;;;AKoBR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/_reset.scss","../scss/text/_icon.scss","../scss/body/_aside.scss","../scss/_colours.scss","../scss/_accessibility.scss","../scss/body/_header.scss","../scss/text/_sizes.scss","../scss/layout/_positioning.scss","../scss/body/_index.scss"],"names":[],"mappings":"AAAA;AAEA;AACI;AAAA;EAEA;;;AAGJ;AACI;EACA;EACA;EACA;;;AAGJ;AACI;AAAA;AAAA;EAGA;AAEA;EACA;EACA;;;AAGJ;AACI;EACA;;;AAGJ;AACI;EACA;;;AAIJ;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;ACzDJ;EACI;EACA;EACA,KACI;EAIJ;EACA;EACA;;ACRJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;;AAIR;EAAc;;;AAEd;EACI;EACA;;AAEA;EAAO;;;AAGX;EACI;EACA;;AAEA;EACI;;;AAIR;EACI;EACA;EACA,OCvCG;;;ACAH;EF0CJ;IEzCQ;;;;AF0CR;EAGI;;AExCA;EFqCJ;IEpCQ;;;;AHoFJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AANJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AANJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AANJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AI7FR;EACI;EACA;EACA;EFAA;EEEA;EACA;EACA,OFRI;;;AEWR;EACI;ECZA,aAJa;EAKb,WAMwC;EALxC,aAK4D;EAJ5D;ECoBA;EACA;EACA;EAGA;EFbA;;;AAGJ;EEKI;EACA;EAGA,QFRmD;EESnD;ED5BA,aAJa;EAKb,WAO8C;EAN9C,aAHsE;EAItE;;;ADoBJ;EEAI;EACA;EAGA,QFHmD;EEInD;;AN4DA;EACI;EACA;EACA;EACA;EACA;EACA;EInEA;EACA;EACA;;;AG1BR;EACI,kBLJI;EKMJ;EACA;EACA;EACA;EACA;EFVA,aAJa;EAKb,WAQ4C;EAP5C,aAHsE;EAItE;EEUA,OLjBI;;;AKoBR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA","file":"style.css"}
\ No newline at end of file
diff --git a/scss/body/_header.scss b/scss/body/_header.scss
index 4117bb3..2b134bf 100644
--- a/scss/body/_header.scss
+++ b/scss/body/_header.scss
@@ -14,10 +14,17 @@ header {
 }
 
 h1 {
+    width: 100%;
     @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%);
+    @include text.header_p_text_sizes;
+}
+
 #scroll-down {
     @include layout.absolute_position_centred($bottom: 35px);
 
diff --git a/scss/layout/_positioning.scss b/scss/layout/_positioning.scss
index 5592f52..23285e5 100644
--- a/scss/layout/_positioning.scss
+++ b/scss/layout/_positioning.scss
@@ -1,24 +1,34 @@
-@function _translate_amount($start, $stop) {
+@function _translate_amount($stop) {
+    @if $stop == null {
+        @return -50%;
+    } @else {
+        @return 50%;
+    }
+}
+
+
+@function _sanitise_start($start, $stop) {
     @if $start == null {
         @if $stop == null {
-            @return 0;
-        } @else {
             @return 50%;
+        } @else {
+            @return null;
         }
     } @else {
         @if $stop == null {
-            @return -50%;
+            @return $start;
         } @else {
-            @error "too many positioning args";
+            @error "clashing positioning args";
         }
     }
 }
 
+
 @mixin absolute_position_centred($top: null, $right: null, $bottom: null, $left: null) {
     position: absolute;
-    transform: translate(_translate_amount($left, $right), _translate_amount($top, $bottom));
-    top: $top;
+    transform: translate(_translate_amount($right), _translate_amount($bottom));
+    top: _sanitise_start($top, $bottom);
     right: $right;
     bottom: $bottom;
-    left: $left;
+    left: _sanitise_start($left, $right);
 }
diff --git a/scss/text/_sizes.scss b/scss/text/_sizes.scss
index 4e7e390..3cd1353 100644
--- a/scss/text/_sizes.scss
+++ b/scss/text/_sizes.scss
@@ -9,5 +9,6 @@ $_DEFAULT_FONTS: arial;
 }
 
 
-@mixin normal_text_sizes { @include _text_sizes(1rem); }
 @mixin h1_text_sizes { @include _text_sizes(3rem, $font-weight: bold); }
+@mixin header_p_text_sizes { @include _text_sizes(1.2rem); }
+@mixin normal_text_sizes { @include _text_sizes(1rem); }