added section links

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>

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);
 

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);
 }

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); }