From 000761cbc4d7189c2b2299efe623689ec99e92fc Mon Sep 17 00:00:00 2001
From: Nathan Steel <aney.login+rpi3@gmail.com>
Date: Wed, 4 Jun 2025 11:48:45 +0100
Subject: [PATCH] Simplify vars, new mixins, and addition stylings

Including test styling, etc. too
---
 scss/base/_base.scss                |  18 +-
 scss/base/_grid.scss                | 445 ++++++++++++----------------
 scss/base/_image.scss               |   8 +-
 scss/base/_reset.scss               |  11 -
 scss/base/_typography.scss          |  32 +-
 scss/component/_alert.scss          |  27 +-
 scss/component/_banner.scss         |   4 +-
 scss/component/_button.scss         |  16 +-
 scss/component/_card.scss           |  48 ++-
 scss/component/_form.scss           | 149 ++++++++--
 scss/component/_hero.scss           |   5 +
 scss/component/_list.scss           |  56 +---
 scss/component/_modal.scss          |   8 +-
 scss/component/_quote.scss          |   6 +-
 scss/component/_table.scss          |  18 +-
 scss/component/_tag.scss            |  16 +-
 scss/helpers/_main_helpers.scss     |  14 +-
 scss/layout/_footer.scss            |  39 +++
 scss/layout/_header.scss            |  22 ++
 scss/layout/_nav.scss               |  78 ++++-
 scss/page/_main_page.scss           |   1 +
 scss/page/_testing.scss             | 115 +++++++
 scss/page/error/_error.scss         |   4 +-
 scss/utilities/_functions.scss      |   1 +
 scss/utilities/_main_utilities.scss |   1 +
 scss/utilities/_mixins.scss         |   9 +
 scss/utilities/_variables.scss      | 108 ++++---
 27 files changed, 809 insertions(+), 450 deletions(-)
 create mode 100644 scss/component/_hero.scss
 create mode 100644 scss/page/_testing.scss
 create mode 100644 scss/utilities/_functions.scss

diff --git a/scss/base/_base.scss b/scss/base/_base.scss
index 9bb54c9..c083c0d 100644
--- a/scss/base/_base.scss
+++ b/scss/base/_base.scss
@@ -10,8 +10,14 @@ html,body{height: 100%}
 body{display: flex;flex-direction: column;}
 main, .main{ flex: 1 0 auto }
 
+
+html{
+    font-size: $font-size; /* rem based on this (root element), em is based on the parent element of wherever the change is */
+    // @include media($media-xl){ font-size: 1vw; } /* (Potential) for better responsive scaling on larger monitors. Trying out */
+}
+
 body {
-    background: $color-bg;
+    background: $color-background;
     color: $color-text;
     font-family: $font-family;
     line-height: $line-height;
@@ -19,7 +25,15 @@ body {
     @include reset; /* Margin 0, padding 0. Testing new @use/@forward as globals aren't allowed... */
 
     @include color-scheme(dark) {
-        background: $color-bg--dark;
+        background: $color-background--dark;
         color: $color-text--dark;
     }
 }
+
+// On very small screens allow the text to completetly distort itself to fit on the page
+*{
+    overflow-wrap: anywhere; 
+    @include media($media-xs){
+        overflow-wrap: normal; 
+    }
+}
\ No newline at end of file
diff --git a/scss/base/_grid.scss b/scss/base/_grid.scss
index 37d6033..4ccc4c1 100644
--- a/scss/base/_grid.scss
+++ b/scss/base/_grid.scss
@@ -1,4 +1,5 @@
 @use '../utilities/main_utilities' as *;
+@use "sass:math";
 
 /* https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/ */
 /* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
@@ -8,270 +9,216 @@
 /* grid-template-columns: 1fr repeat(3, 20px 1fr); */
 /* Would prefer to use grid, but there's less support for earlier browsers, so using flex (for now) */
 
-html{
-    font-size: 18px; /* rem based on this (root element), em is based on the parent element of wherever the change is */
-  }
-  
-  .container{
-    margin: 0 auto;
-    max-width: $width-content;
-    padding: 1.4rem 1rem;
-    /* overflow: auto; */
-  }
-  .container--no-topgap{
-    padding-top: 0;
-  }
-  .container--no-botgap{
-    padding-bottom: 0;
-  }
-  .container--no-gap{
-    /* Still has right/left padding, otherwise page looks odd. Can be omitted with no-padd */
-    padding-bottom: 0;
-    padding-top: 0;
-  }
-  
-  
-  .row {
-    position: relative;
-    width: 100%;
-  
-    display: flex;
-    flex-wrap: wrap;
-    align-items: flex-start; 
-    flex-direction: row;
-    row-gap: 1.25rem; /* In-case of flex-wrap content, space it out. Padding left+right */
-  }
-  
-  .row+.row{
-    margin-top: 1.4rem;
-  }
-  
-  /* To make (first level) elements fit within the flex container (h1s, paras, etc. don't use all space by default) */
-  /* Would use :not(x y z) for exceptions, but no i.e. support, and poor support on "older" browsers */
-  /* .col>*{ */
-  .col>address, .col>article, .col>aside, .col>blockquote, .col>canvas, .col>dd, .col>div, .col>dl, .col>dt, .col>fieldset, .col>figcaption,
-  .col>figure, .col>footer, .col>form, .col>h1, .col>h2, .col>h3, .col>h4, .col>h5, .col>h6, .col>header, .col>hr, .col>li, .col>main,
-  .col>main, .col>nav, .col>noscript, .col>ol, .col>p, .col>pre, .col>section, .col>table, .col>tfoot, .col>ul, .col>video{
-    width: 100%;
-  }
-  /* inline elements */
-  .col img{
-    max-width: 100%;
-    height: auto;
-    margin-right: auto;
-    margin-left: auto;
-  }
-  
-  
-  /* Col elements with row should be flex elements to allow flex (eg. section, etc are block by default) */
-  /* MAYBE REMOVE THIS, IF YOU WANT ROW FUNCTIONALITY IN A ROW, ADD ANOTHER ROW!!! */
-  .row [class^="col"]{
-    padding-right: 0.625rem; /* ~20px gap = 20/16(html size)  / 2(as 2 elems next to each other should equat the gap = 0.62625 */
-    padding-left: 0.625rem; /* In place of gap, so it can be full width rows */
-  
-    /* display: flex; */
-    /* flex-wrap: wrap; */
-    min-height: 0.125rem;
-  }
-  
-  
-  .row--scroll{
-    flex-wrap: nowrap;
-    overflow-x: scroll; /* Used instead of auto, as auto changed the height of elements if a tabgroup toggled */
-    justify-content: left;
-    /* Scrollbar stuff */
-    scrollbar-color: $color-scrollbar transparent;
-    scrollbar-width: thin;
-    padding-bottom: .5rem;
-
-    @include color-scheme(dark) {
-      scrollbar-color: $color-scrollbar--dark transparent;
+
+// Add the content to whichever col-xx-xx
+@mixin col-width($width: 100%) {
+  flex: 0 0 $width* 1%; // *1% just to make it a % value, #{$width}% wasn't working
+  max-width: $width * 1%;
+}
+
+// Add all the cols 1..12 of -xs -md -xl, etc. to stylesheet/media without needing to copy/paste or mass modify
+// Just convienient
+@mixin add-cols($modifier: ''){ // $modifier: '-md', etc.
+  $max-cols: 12;
+  $col-width: math.div(100,$max-cols); // 100/12 = 8.33% Then multiply this by the current col count 1..12
+
+  @for $i from 1 through 12 {
+    $width: $col-width * $i;
+    .col#{$modifier}-#{$i} {
+      @include col-width($width);
     }
   }
-  .row--scroll [class^="col"]{
-  
-  }
-  
-  .col{
-    flex: 0 0 auto;
-  }
-  
-  // Default cols to 100% width when below $media-xs (base 360px)
-  .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,
-  .col-7,.col-8,.col-9,.col-10,.col-11,.col-12{
-    flex: 0 0 100%;
-  }
 
-  @include media($media-xs) {
-
-    // Once a breakpoint has been hit, cols will behave regularly,
-    // but will be overwritten/cascaded by their xs,md,lg, etc. counterparts
-    // This is duplicated at md, as the 'default' col will be medium, needed here in-case people just
-    // use .col-4, etc. as an end-all be-all
-    .col-1 { flex: 0 0 8.33%; }
-    .col-2 { flex: 0 0 16.66%; }
-    .col-3 { flex: 0 0 25%; }
-    .col-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page, example. Should be set independantly */
-    .col-4 { flex: 0 0 33.33%; }
-    .col-5 { flex: 0 0 41.66%; }
-    .col-6 { flex: 0 0 50%; }
-    .col-7 { flex: 0 0 58.33%; }
-    .col-8 { flex: 0 0 66.66%; }
-    .col-9 { flex: 0 0 75%; }
-    .col-10 { flex: 0 0 83.33%; }
-    .col-11 { flex: 0 0 91.66%; }
-    .col-12 { flex: 0 0 100%; }
-
-    // Now the actual xs styling
-    .col-xs-1 { flex: 0 0 8.33% }
-    .col-xs-2 { flex: 0 0 16.66% }
-    .col-xs-3 { flex: 0 0 25% }
-    .col-xs-4 { flex: 0 0 33.33% }
-    .col-xs-5 { flex: 0 0 41.66% }
-    .col-xs-6 { flex: 0 0 50% }
-    .col-xs-7 { flex: 0 0 58.33% }
-    .col-xs-8 { flex: 0 0 66.66% }
-    .col-xs-9 { flex: 0 0 75% }
-    .col-xs-10 { flex: 0 0 83.33% }
-    .col-xs-11 { flex: 0 0 91.66% }
-    .col-xs-12 { flex: 0 0 100% }
-    
-    .hidden-xs { display: none }
+}
+
+.container{
+  margin: 0 auto;
+  width: 100%;
+  max-width: $width-content;
+  padding: rems(22px) rems(16px);
+  position: relative; // Default static doesn't like inverse margins atop other block elements
+  /* overflow: auto; */
+}
+.container--no-topgap{
+  padding-top: 0;
+}
+.container--no-botgap{
+  padding-bottom: 0;
+}
+.container--no-gap{
+  /* Still has right/left padding, otherwise page looks odd. Can be omitted with no-padd */
+  padding-bottom: 0;
+  padding-top: 0;
+}
+
+.row {
+  position: relative;
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start; 
+  flex-direction: row;
+  row-gap: rems(19px); /* In-case of flex-wrap content, space it out. Padding left+right */
+
+  // margin-right: -#{$grid-gap}; // Negative margin equal to the padding on cols, to allow elements not in col to be used 1:1 in rows
+  // margin-left: -#{$grid-gap}; // Negative margin equal to the padding on cols, to allow elements not in col to be used 1:1 in rows
+  margin-right: #{$grid-gap--numeric * -.5}rem;
+  margin-left: #{$grid-gap--numeric * -.5}rem;
+
+  
+
+}
+
+.row+.row{
+  margin-top: rems(22px);
+}
+
+/* To make (first level) elements fit within the flex container (h1s, paras, etc. don't use all space by default) */
+/* Would use :not(x y z) for exceptions, but no i.e. support, and poor support on "older" browsers */
+/* .col>*{ */
+.col>address, .col>article, .col>aside, .col>blockquote, .col>canvas, .col>dd, .col>div, .col>dl, .col>dt, .col>fieldset, .col>figcaption,
+.col>figure, .col>footer, .col>form, .col>h1, .col>h2, .col>h3, .col>h4, .col>h5, .col>h6, .col>header, .col>hr, .col>li, .col>main,
+.col>main, .col>nav, .col>noscript, .col>ol, .col>p, .col>pre, .col>section, .col>table, .col>tfoot, .col>ul, .col>video{
+  width: 100%;
+}
+/* inline elements */
+.col img, .col iframe{
+  max-width: 100%;
+  height: auto;
+  margin-right: auto;
+  margin-left: auto;
+}
+
 
-  }
+/* Col elements with row should be flex elements to allow flex (eg. section, etc are block by default) */
+/* MAYBE REMOVE THIS, IF YOU WANT ROW FUNCTIONALITY IN A ROW, ADD ANOTHER ROW!!! */
+.row [class^="col"]{
+  // padding-right: $grid-gap; /* ~20px gap = 20/16(OLD html size)  / 2(as 2 elems next to each other should equat the gap = 0.62625 */
+  // padding-left: $grid-gap; /* In place of gap, so it can be full width rows */
+  padding-right: #{$grid-gap--numeric * .5}rem;
+  padding-left: #{$grid-gap--numeric * .5}rem;
 
-  @include media($media-sm) {
-
-    // THINK .col-3 will need to be re-cascaded each time, otherwise the sm/md will overwrite for ever
-    // if it's recascaded here for instance, any .col-xs that have .col- will be replaced by the (default) col size 
-    .col-1 { flex: 0 0 8.33%; }
-    .col-2 { flex: 0 0 16.66%; }
-    .col-3 { flex: 0 0 25%; }
-    .col-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page, example. Should be set independantly */
-    .col-4 { flex: 0 0 33.33%; }
-    .col-5 { flex: 0 0 41.66%; }
-    .col-6 { flex: 0 0 50%; }
-    .col-7 { flex: 0 0 58.33%; }
-    .col-8 { flex: 0 0 66.66%; }
-    .col-9 { flex: 0 0 75%; }
-    .col-10 { flex: 0 0 83.33%; }
-    .col-11 { flex: 0 0 91.66%; }
-    .col-12 { flex: 0 0 100%; }
-
-    /* (100/12) * x = the flex % */
-    .col-sm-1 { flex: 0 0 8.33% }
-    .col-sm-2 { flex: 0 0 16.66% }
-    .col-sm-3 { flex: 0 0 25% }
-    .col-sm-4 { flex: 0 0 33.33% }
-    .col-sm-5 { flex: 0 0 41.66% }
-    .col-sm-6 { flex: 0 0 50% }
-    .col-sm-7 { flex: 0 0 58.33% }
-    .col-sm-8 { flex: 0 0 66.66% }
-    .col-sm-9 { flex: 0 0 75% }
-    .col-sm-10 { flex: 0 0 83.33% }
-    .col-sm-11 { flex: 0 0 91.66% }
-    .col-sm-12 { flex: 0 0 100% }
-    
-    .hidden-sm { display: none }
-
-    // Any overwrites for previous sizes (as using min-width by preference)
-    // Not sure how hidden display altering will work with flex/block/inline-block differences though...
-    // IN FACT. This may not be needed? Could just be that if it's hidden sm, it's hidden above that too?
-    // but then I guess I'd need a 'show-md' etc, which has the same problem...
-    .hidden-xs { display: unset }
+  /* display: flex; */
+  /* flex-wrap: wrap; */
+  min-height: 2px;
+}
 
-  }
 
-  @include media($media-md){
-
-    /* (100/12) * x = the flex % */
-    // Medium AND .col-4 over-ridden for the 2nd time, as medium is to be the default 'col' size
-    .col-md-1, .col-1 { flex: 0 0 8.33% }
-    .col-md-2, .col-2 { flex: 0 0 16.66% }
-    .col-md-3, .col-3 { flex: 0 0 25% }
-    .col-md-4, .col-4 { flex: 0 0 33.33% }
-    .col-md-5, .col-5 { flex: 0 0 41.66% }
-    .col-md-6, .col-6 { flex: 0 0 50% }
-    .col-md-7, .col-7 { flex: 0 0 58.33% }
-    .col-md-8, .col-8 { flex: 0 0 66.66% }
-    .col-md-9, .col-9 { flex: 0 0 75% }
-    .col-md-10, .col-10 { flex: 0 0 83.33% }
-    .col-md-11, .col-11 { flex: 0 0 91.66% }
-    .col-md-12, .col-12 { flex: 0 0 100% }
-    
-    .hidden-md { display: none }
-
-    // Any overwrites for previous sizes (as using min-width by preference)
-    // Not sure how hidden display altering will work with flex/block/inline-block differences though...
-    .hidden-xs, .hidden-sm { display: unset }
+.row--scroll{
+  flex-wrap: nowrap;
+  overflow-x: scroll; /* Used instead of auto, as auto changed the height of elements if a tabgroup toggled */
+  justify-content: left;
+  /* Scrollbar stuff */
+  scrollbar-color: $color-text transparent;
+  scrollbar-width: thin;
+  padding-bottom: rems(8px);
 
+  @include color-scheme(dark) {
+    scrollbar-color: $color-text--dark transparent;
   }
+}
+.row--scroll [class^="col"]{}
 
-  @include media($media-lg) {
-
-    // Col DOESN'T Need to be redone here as it's medium default. If a lg/xl are set, that SHOULD overwrite
-    // each time. So should be good. Reckon I need mixins/functions to replicate this grid though, as it's a
-    // little uhhhh, jank and repetative atm
-    /* (100/12) * x = the flex % */
-    .col-lg-1 { flex: 0 0 8.33% }
-    .col-lg-2 { flex: 0 0 16.66% }
-    .col-lg-3 { flex: 0 0 25% }
-    .col-lg-4 { flex: 0 0 33.33% }
-    .col-lg-5 { flex: 0 0 41.66% }
-    .col-lg-6 { flex: 0 0 50% }
-    .col-lg-7 { flex: 0 0 58.33% }
-    .col-lg-8 { flex: 0 0 66.66% }
-    .col-lg-9 { flex: 0 0 75% }
-    .col-lg-10 { flex: 0 0 83.33% }
-    .col-lg-11 { flex: 0 0 91.66% }
-    .col-lg-12 { flex: 0 0 100% }
-    
-    .hidden-lg { display: none }
-
-    // Any overwrites for previous sizes (as using min-width by preference)
-    // Not sure how hidden display altering will work with flex/block/inline-block differences though...
-    .hidden-xs, .hidden-sm, .hidden-md { display: unset }
+.col{ flex: 0 1 auto; } // Just allow shrink, no grow
 
-  }
+// Default cols to 100% width when below $media-xs (base 360px)
+.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,
+.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{
+  flex: 0 0 100%;
+}
 
-  @include media($media-xl) {
-
-    /* (100/12) * x = the flex % */
-    .col-xl-1 { flex: 0 0 8.33% }
-    .col-xl-2 { flex: 0 0 16.66% }
-    .col-xl-3 { flex: 0 0 25% }
-    .col-xl-4 { flex: 0 0 33.33% }
-    .col-xl-5 { flex: 0 0 41.66% }
-    .col-xl-6 { flex: 0 0 50% }
-    .col-xl-7 { flex: 0 0 58.33% }
-    .col-xl-8 { flex: 0 0 66.66% }
-    .col-xl-9 { flex: 0 0 75% }
-    .col-xl-10 { flex: 0 0 83.33% }
-    .col-xl-11 { flex: 0 0 91.66% }
-    .col-xl-12 { flex: 0 0 100% }
-    
-    .hidden-xl { display: none }
-
-    // Any overwrites for previous sizes (as using min-width by preference)
-    // Not sure how hidden display altering will work with flex/block/inline-block differences though...
-    .hidden-xs, .hidden-sm, .hidden-md, .hidden-lg { display: unset }
+@include media($media-xs) {
 
-  }
+  // Once a breakpoint has been hit, cols will behave regularly,
+  // but will be overwritten/cascaded by their xs,md,lg, etc. counterparts
+  // This is duplicated at md, as the 'default' col will be medium, needed here in-case people just
+  // use .col-4, etc. as an end-all be-all
+  @include add-cols('');
+  .col-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page, example. Should be set independantly */
+  // Now the actual xs styling
+  @include add-cols('-xs');
 
-  // These things may want to have an indivual xs,md,lg, etc. as well, but for now, leaving...
+  .hidden-xs { display: none }
 
-  /* Try to avoid !important, have each rule set to keep track of */
-  .no-padd, .row.no-padd [class^="col"], .row [class^="col"].no-padd{
-    padding: 0; /* In-case elements want to be full-width, touching, etc */
-  }
+}
+
+@include media($media-sm) {
+
+  // THINK .col-3 will need to be re-cascaded each time, otherwise the sm/md will overwrite for ever
+  // if it's recascaded here for instance, any .col-xs that have .col- will be replaced by the (default) col size 
+  @include add-cols('');
+
+  /* (100/12) * x = the flex % */
+  @include add-cols('-sm');
   
-  .row--align-center{ align-items: center;}
-  .row--justify-center{ justify-content: center; }
-  .col--align-center{ align-self: center; align-self: anchor-center}
+  .hidden-sm { display: none }
+
+  // Any overwrites for previous sizes (as using min-width by preference)
+  // Not sure how hidden display altering will work with flex/block/inline-block differences though...
+  // IN FACT. This may not be needed? Could just be that if it's hidden sm, it's hidden above that too?
+  // but then I guess I'd need a 'show-md' etc, which has the same problem...
+  .hidden-xs { display: unset }
+
+}
+
+@include media($media-md){
+
+  /* (100/12) * x = the flex % */
+  // Medium AND .col-4 over-ridden for the 2nd time, as medium is to be the default 'col' size
+  @include add-cols('');
+  @include add-cols('-md');
   
-  /* Sort into col/sm areas with media queries */
-  .col-grow, .col-grow-sm
-  ,.col-fill, .col-fill-sm{
-    flex-grow: 1;
-  }
+  .hidden-md { display: none }
+
+  // Any overwrites for previous sizes (as using min-width by preference)
+  // Not sure how hidden display altering will work with flex/block/inline-block differences though...
+  .hidden-xs, .hidden-sm { display: unset }
+
+}
+
+@include media($media-lg) {
+
+  // Col DOESN'T Need to be redone here as it's medium default. If a lg/xl are set, that SHOULD overwrite
+  // each time. So should be good. Reckon I need mixins/functions to replicate this grid though, as it's a
+  // little uhhhh, jank and repetative atm
+  /* (100/12) * x = the flex % */
+  @include add-cols('-lg');
+  
+  .hidden-lg { display: none }
+
+  // Any overwrites for previous sizes (as using min-width by preference)
+  // Not sure how hidden display altering will work with flex/block/inline-block differences though...
+  .hidden-xs, .hidden-sm, .hidden-md { display: unset }
+
+}
+
+@include media($media-xl) {
+
+  /* (100/12) * x = the flex % */
+  @include add-cols('-xl');
+  
+  .hidden-xl { display: none }
+
+  // Any overwrites for previous sizes (as using min-width by preference)
+  // Not sure how hidden display altering will work with flex/block/inline-block differences though...
+  .hidden-xs, .hidden-sm, .hidden-md, .hidden-lg { display: unset }
+
+}
+
+// These things may want to have an indivual xs,md,lg, etc. as well, but for now, leaving...
+
+/* Try to avoid !important, have each rule set to keep track of */
+.no-padd, .row.no-padd [class^="col"], .row [class^="col"].no-padd{
+  padding: 0; /* In-case elements want to be full-width, touching, etc */
+}
+
+.row--align-center{ align-items: center;}
+.row--justify-center{ justify-content: center; }
+.col--align-center{ align-self: center; align-self: anchor-center}
+
+/* Sort into col/sm areas with media queries */
+.col-grow, .col-grow-sm
+,.col-fill, .col-fill-sm{
+  flex-grow: 1;
+}
   
\ No newline at end of file
diff --git a/scss/base/_image.scss b/scss/base/_image.scss
index 6d347ef..27fc678 100644
--- a/scss/base/_image.scss
+++ b/scss/base/_image.scss
@@ -11,10 +11,10 @@ figure img {
 }
 
 figure figcaption {
-    color: $color-text-secondary;
+    color: $color-text;
 
     @include color-scheme(dark) {
-        color: $color-text-secondary--dark;
+        color: $color-text--dark;
     }
 }
 
@@ -22,3 +22,7 @@ section img,
 article img {
     max-width: 100%;
 }
+
+.image--center{
+    margin: 0 auto;
+}
\ No newline at end of file
diff --git a/scss/base/_reset.scss b/scss/base/_reset.scss
index 0e110cd..552fc01 100644
--- a/scss/base/_reset.scss
+++ b/scss/base/_reset.scss
@@ -32,17 +32,6 @@ body{
   line-height: 1.5;
 }
 
-/* Set shorter line heights on headings and interactive elements */
-h1, h2, h3, h4, h5, h6,
-button, input, label{
-  line-height: 1.35;
-}
-
-/* Balance text wrapping on headings */
-h1, h2, h3, h4, h5, h6{
-  text-wrap: balance;
-}
-
 /* A elements that don't have a class get default styles */
 a:not([class]){
   text-decoration-skip-ink: auto;
diff --git a/scss/base/_typography.scss b/scss/base/_typography.scss
index 1a66366..ff83410 100644
--- a/scss/base/_typography.scss
+++ b/scss/base/_typography.scss
@@ -5,11 +5,27 @@ p {
     width: 100%;
 }
 p+p, h1+p{ /* Para after para should space out */
-    margin-top: .75rem;
+    margin-top: rems(10px);
+}
+
+/* Set shorter line heights on headings and interactive elements */
+h1,.h1, h2,.h2, h3,.h3, h4,.h4, h5,.h5 h6,.h6,
+button, input, label{
+  line-height: 1.35;
+}
+
+/* Balance text wrapping on headings */
+h1, h2, h3, h4, h5, h6{
+  text-wrap: balance;
+}
+
+h1, .h1{
+    font-size: rems(30px);
+    margin-bottom: rems(18px);
 }
 
 mark, .highlight{ /* Useful for search result highlighting, and general hightlights that aren't strong */
-    padding: 0.1rem;
+    padding: rems(2px);
     background: $color-highlight;
 
     @include color-scheme(dark) {
@@ -18,20 +34,20 @@ mark, .highlight{ /* Useful for search result highlighting, and general hightlig
 }
 
 small {
-    color: $color-text-secondary;
+    color: $color-text;
     @include color-scheme(dark) {
-        color: $color-text-secondary--dark;
+        color: $color-text--dark;
     }
 }
 
 hr{
-    background-color: $color-bg-secondary;
+    background-color: $color-background--dark; // Dark by default so it is shown
     border: none;
-    height: 1px;
+    height: 1px; // Doesn't need to be rem's y'kno
     width: 100%;
     max-width: $width-content;
-    margin: .5rem auto;
+    margin: rems(24px) auto;
     @include color-scheme(dark) {
-        color: $color-bg-secondary--dark;
+        color: $color-background;
     }
 }
\ No newline at end of file
diff --git a/scss/component/_alert.scss b/scss/component/_alert.scss
index 251d76c..6b3fc56 100644
--- a/scss/component/_alert.scss
+++ b/scss/component/_alert.scss
@@ -3,38 +3,39 @@
 
 // Alerts
 .alert{
-    background: $color-secondary-accent;
-    border-left: 4px solid $color-secondary;
-    border-right: 4px solid $color-secondary;
+    background: color.adjust($color-tertiary, $saturation: -25%);
+    border-left: 4px solid $color-tertiary;
+    border-right: 4px solid $color-tertiary;
     padding: .1rem .8rem;
     margin-bottom:.5rem;
+    color: $color-background;
 
     @include color-scheme(dark) {
-        color: $color-secondary-accent--dark;
+        color: $color-tertiary--dark;
         border-color: $color-secondary--dark;
     }
 }
 .alert--error{
-    background: desaturate($alert-color--error, 40);
-    border-color: $alert-color--error;
+    background: color.adjust($color-fail, $saturation: -25%);
+    border-color: $color-fail;
 
     @include color-scheme(dark) {
-        color: $color-secondary-accent;
+        color: $color-tertiary;
     }
 }
 .alert--warning{
-    background: desaturate($alert-color--warning, 40);
-    border-color: $alert-color--warning;
+    background: color.adjust($color-warning, $saturation: -25%);
+    border-color: $color-warning;
     
     @include color-scheme(dark) {
-        color: $color-secondary-accent;
+        color: $color-tertiary;
     }
 }
 .alert--success{
-    background: desaturate($alert-color--success, 40);
-    border-color: $alert-color--success;
+    background: color.adjust($color-success, $saturation: -25%);
+    border-color: $color-success;
     
     @include color-scheme(dark) {
-        color: $color-secondary-accent;
+        color: $color-tertiary;
     }
 }
diff --git a/scss/component/_banner.scss b/scss/component/_banner.scss
index adf6835..204b438 100644
--- a/scss/component/_banner.scss
+++ b/scss/component/_banner.scss
@@ -2,9 +2,9 @@
 
 .banner{
     width: 100%;
-    background: $color-banner;
+    background: $color-primary;
 
     @include color-scheme(dark) {
-        background: $color-banner--dark;
+        background: $color-primary--dark;
     }
 }
diff --git a/scss/component/_button.scss b/scss/component/_button.scss
index 6a61e21..8acdb70 100644
--- a/scss/component/_button.scss
+++ b/scss/component/_button.scss
@@ -5,7 +5,7 @@
 button,
 input[type="submit"]
 {
-    color: $color-bg;
+    color: $color-background;
     background: $color-link;
     border: 2px solid $color-accent;
     border-radius: $border-radius;
@@ -61,7 +61,7 @@ button.button--blue,
 input[type="submit"].button--blue
 {
     background-color: $color-link;
-    color: $color-bg;
+    color: $color-background;
 
     @include color-scheme(dark) {
         border-color: $color-link--dark;
@@ -71,15 +71,15 @@ input[type="submit"].button--blue
 .button--disabled,
 button:disabled,
 input:disabled {
-    background: $color-bg-secondary;
-    border-color: $color-bg-secondary;
-    color: $color-text-secondary;
+    background: $color-text-secondary;
+    border-color: $color-text-secondary;
+    color: $color-tertiary;
     cursor: not-allowed;
 
     @include color-scheme(dark) {
-        background-color: $color-bg-secondary--dark;
-        border-color: $color-bg-secondary--dark;
-        color: $color-text-secondary--dark;
+        background-color: $color-text-secondary--dark;
+        border-color: $color-text-secondary--dark;
+        color: $color-tertiary--dark;
     }
 }
 .button--disabled:hover,
diff --git a/scss/component/_card.scss b/scss/component/_card.scss
index d9de1ee..3e4a3b6 100644
--- a/scss/component/_card.scss
+++ b/scss/component/_card.scss
@@ -4,26 +4,29 @@
 /* Best to do this with grid, but there's less browser support... */
 .card{
     /* As not using grid atm, no solution to keep cards the same size when flex-wrapped */
-    border: 1px solid $color-bg-secondary;
+    border: rems(1px) solid $color-tertiary;
     border-radius: $border-radius;
-    box-shadow: $box-shadow $color-shadow;
-    padding: 1.25rem;
-    /* flex: 0 0 $width-card; */
-    background: $color-card;
+    // box-shadow: $box-shadow $color-tertiary;
+    // padding: rems(24px);
+    background: $color-background;
     
-    display: block !important; /* Unset row/col default */
+    // display: block !important; /* Unset row/col default */
+    display: flex !important;
+    flex-direction: column;
 
     @include color-scheme(dark) {
-        border-color: $color-bg-secondary--dark;
-        box-shadow: $box-shadow $color-shadow--dark;
-        background: $color-card--dark;
+        border-color: $color-tertiary--dark;
+        // box-shadow: $box-shadow $color-tertiary--dark;
+        background: $color-background--dark;
     }
 }
 .card:hover {
-    box-shadow: $box-shadow $color-bg-secondary;
+    box-shadow: $box-shadow $color-primary;
+    border-color: $color-primary;
 
     @include color-scheme(dark) {
-        box-shadow: $box-shadow $color-bg-secondary--dark;
+        border-color: $color-primary--dark;
+        box-shadow: $box-shadow $color-primary--dark;
     }
 }
 
@@ -33,3 +36,26 @@
 .row--cards .card{
     height: 100%; /* To make multiple cards next to each other 'same' height */
 }
+
+.card__header, .card__body, .card__footer{
+    padding: rems(24px);
+}
+.card__header{
+    background-color: $color-secondary;
+}
+.card__image{}
+.card__image--top{}
+.card__title{
+    font-size: rems(26px);
+}
+.card__body{
+    height: 100%; // Fill up the space of a card that's stretched
+}
+.card__text{}
+* + .card__text{
+    margin-top: rems(10px);
+}
+.card__footer{
+    margin-top: auto; // Be at bottom of flexed card
+    background-color: $color-primary;
+}
diff --git a/scss/component/_form.scss b/scss/component/_form.scss
index 702ca14..6200c84 100644
--- a/scss/component/_form.scss
+++ b/scss/component/_form.scss
@@ -1,19 +1,12 @@
 @use '../utilities/main_utilities' as *;
 
 form {
-    border: 1px solid $color-bg-secondary;
-    border-radius: $border-radius;
-    box-shadow: $box-shadow $color-shadow;
     display: block;
-    max-width: $width-card-wide;
-    min-width: $width-card;
-    padding: 1.5rem;
     text-align: $justify-normal;
     margin: 0 auto;
 
     @include color-scheme(dark) {
-        border-color: $color-bg-secondary--dark;
-        box-shadow: $color-shadow--dark;
+        border-color: $color-text-secondary--dark;
     }
 }
 
@@ -28,11 +21,10 @@ select,
 textarea {
     display: block;
     font-size: inherit;
-    max-width: $width-card-wide;
 }
 label {
-    font-weight: bold;
-    margin-bottom: 0.2rem;
+    color: $color-text-secondary;
+    margin-bottom: rems(10px);
 }
 
 input[type="checkbox"],
@@ -55,27 +47,146 @@ input[type="range"] {
 input,
 select,
 textarea {
-    border: 1px solid $color-bg-secondary;
+    border: 1px solid $color-text-secondary;
     border-radius: $border-radius;
-    margin-bottom: 1rem;
-    padding: 0.4rem 0.8rem;
+    padding: rems(6px) rems(13px); //0.4rem 0.8rem;
+    width: 100%;
 
     @include color-scheme(dark) {
-        border-color: $color-bg-secondary--dark;
+        border-color: $color-text-secondary--dark;
     }
 }
 
 input[type="text"],
-input[type="password"]
+input[type="password"],
 textarea {
-    width: calc(100% - 1.6rem);
+    width: 100%;
+    background-color: $color-background;
 }
 
 input[readonly],
 textarea[readonly] {
-    background-color: $color-bg-secondary;
+    background-color: $color-text-secondary;
 
     @include color-scheme(dark) {
-        background-color: $color-bg-secondary--dark;
+        background-color: $color-text-secondary--dark;
+    }
+}
+
+// This is weird, needs work
+input[type="color"]{
+    padding: rems(4.5px) rems(13px);
+    box-sizing: content-box;
+}
+
+select{
+    -webkit-appearance: menulist-button;
+    color: black;
+}
+input::placeholder
+, select option[value=""], select:invalid
+,textarea::placeholder
+{
+	color: $color-text-secondary;
+}
+
+
+// Fancy inputs
+.input-group{
+    @include flex();
+    width: 100%;
+    position: relative;
+    align-items: stretch;
+}
+
+// They're the same atm, but use prepend for start, and append for end as I may change them to be different
+.input-group__prepend, .input-group__append{
+    @include flex();
+    flex: 1 0 auto; // To make the full content be shown
+
+    // To allow for dropdowns, etc. as pre/append content
+    .input-group__content{
+        border: none;
+        border-radius: 0;
     }
 }
+
+.input-group__content{
+    @include flex();
+    align-items: center;
+    padding: rems(8px);
+    text-align: center;
+    background: $color-primary;
+    color: $color-background;
+}
+.input-group__prepend .input-group__content{
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+}
+.input-group__append .input-group__content{
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+}
+
+// Remove the border left/right on inputs related to ap/prepends
+.input-group__prepend + .input-group__input{
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+// input directly before a pre/append
+.input-group__input:has(+.input-group__append){
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+// WIP
+// Checkbox/Radio
+// custom-radio, custom-checkbox
+$inputSize: remsNumeric(18);
+$checkboxIcon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
+.custom-checkbox:hover{
+	cursor: pointer;
+}
+.custom-checkbox label{
+    padding-left: $inputSize*1.5rem;
+}
+.custom-checkbox input{
+    // display: none;
+}
+.custom-checkbox label::after{
+    content: "";
+    position: absolute;
+    top: .25rem;
+    left: 0;
+    display: block;
+    width: #{$inputSize}rem;
+    height: #{$inputSize}rem;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 50% 50%;
+}
+.custom-checkbox input:checked~label::after{
+    background-image: $checkboxIcon;
+    background-color: blue;
+}
+.custom-checkbox label::before{
+    content: "";
+    position: absolute;
+    top: .25rem;
+    left: 0;
+    display: block;
+    width: #{$inputSize}rem;
+    height: #{$inputSize}rem;
+    pointer-events: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    background-color: #dee2e6;
+}
+
+// Then kinda same for custom-radio
+// input:checked~label::before{
+//     background-color: green;
+// }
diff --git a/scss/component/_hero.scss b/scss/component/_hero.scss
new file mode 100644
index 0000000..32aafc8
--- /dev/null
+++ b/scss/component/_hero.scss
@@ -0,0 +1,5 @@
+@use '../utilities/main_utilities' as *;
+
+.hero{
+    padding: rems(48px) 0;
+}
diff --git a/scss/component/_list.scss b/scss/component/_list.scss
index d21a81f..a5a8885 100644
--- a/scss/component/_list.scss
+++ b/scss/component/_list.scss
@@ -10,15 +10,14 @@ ul li {
     list-style: none;
 }
 
-
 /* Inline lists */
-.inline-list {
+.inline-list{
     list-style: none;
     padding: 0;
     margin-left: -0.5rem; /* To offset the start of li margin. Little jank */
 }
 
-.inline-list li {
+.inline-list li{
     display: inline-block;
     margin: 0 0.5rem;
     position: relative;
@@ -27,54 +26,3 @@ ul li {
 .inline-list>li{ /* Only affects first level li */
     padding: 0; /* So that dropdowns, and nav areas aren't messed up by 'random' padding that on standard list items */
 }
-
-/* DROPDOWN(S), CHANGE CLASS to dropdown, ALSO ADD MEGAMENU STYLING */
-/* Nav/inline-list Dropdown */
-.inline-list li:hover ul {
-    display: block;
-}
-
-/* ?? maybe change */
-.inline-list li ul {
-    background: $color-bg;
-    border: 1px solid $color-bg-secondary;
-    border-top: 10px solid transparent;
-    border-radius: $border-radius;
-    display: none;
-    height: auto;
-    padding: .5rem 1rem;
-    position: absolute;
-    top: 2rem; /* THIS IS UNIQUE FOR EACH USE-CASE, WILL NEED ALTERING PER */
-    white-space: nowrap;
-    width: auto;
-    z-index: 1;
-
-    /* Centre */
-    /* left: 50%;
-    transform: translate(-50%, 0); */
-    /* Left */
-    left: 0;
-    /* Right */
-    /* transform: translate(-50%, 0); */
-
-    @include color-scheme(dark) {
-        background-color: $color-bg--dark;
-        border-color: $color-bg-secondary--dark;
-    }
-}
-
-.inline-list li ul::before {
-    /* fill gap above to make mousing over them easier */
-    /* background-color: green; */
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: -0.5rem;
-    height: 0.5rem;
-}
-
-.inline-list li ul li,
-.inline-list li ul li a {
-    display: block;
-}
diff --git a/scss/component/_modal.scss b/scss/component/_modal.scss
index 71d9847..627c98c 100644
--- a/scss/component/_modal.scss
+++ b/scss/component/_modal.scss
@@ -2,9 +2,9 @@
 
 /* Popups */
 .modal{
-    border: 1px solid $color-bg-secondary;
+    border: 1px solid $color-text-secondary;
     border-radius: $border-radius;
-    box-shadow: $box-shadow $color-shadow;
+    box-shadow: $box-shadow $color-text;
     position: fixed;
     top: 50%;
     left: 50%;
@@ -13,7 +13,7 @@
     z-index: 999;
 
     @include color-scheme(dark) {
-        border-color: $color-bg-secondary--dark;
-        box-shadow: $color-shadow--dark;
+        border-color: $color-text-secondary--dark;
+        box-shadow: $color-text--dark;
     }
 }
diff --git a/scss/component/_quote.scss b/scss/component/_quote.scss
index 66c7703..2817714 100644
--- a/scss/component/_quote.scss
+++ b/scss/component/_quote.scss
@@ -6,19 +6,19 @@ blockquote {
     font-size: x-large;
     line-height: $line-height;
     margin: 1rem auto;
-    max-width: $width-card-medium;
+    width: 100%;
     padding: 1.5rem 1rem;
     text-align: $justify-important;
 }
 
 blockquote footer{
-    color: $color-text-secondary;
+    color: $color-tertiary;
     display: block;
     font-size: small;
     line-height: $line-height;
     padding: 1.5rem 0;
 
     @include color-scheme(dark) {
-        color: $color-text-secondary--dark;
+        color: $color-tertiary--dark;
     }
 }
diff --git a/scss/component/_table.scss b/scss/component/_table.scss
index feb889e..114ca0c 100644
--- a/scss/component/_table.scss
+++ b/scss/component/_table.scss
@@ -5,7 +5,7 @@
     overflow-x: auto;
 }
 table {
-    border: 1px solid $color-bg-secondary;
+    border: 1px solid $color-text-secondary;
     border-radius: $border-radius;
     border-spacing: 0;
     max-width: 100%;
@@ -16,7 +16,7 @@ table {
     overflow-wrap: normal;
 
     @include color-scheme(dark) {
-        border-color: $color-bg-secondary--dark;
+        border-color: $color-text-secondary--dark;
     }
 }
 
@@ -28,15 +28,15 @@ table tr {
 }
 
 table thead tr {
-    background-color: $color-table;
+    background-color: $color-secondary;
     /* border-radius: $border-radius; */
-    color: $color-bg;
+    color: $color-background;
     margin: 0;
     padding: 0;
 
     @include color-scheme(dark) {
-        background-color: $color-table--dark;
-        color: $color-bg--dark;
+        background-color: $color-secondary--dark;
+        color: $color-background--dark;
     }
 }
 
@@ -48,13 +48,13 @@ tbody tr:nth-child(even) {
     background-color: $color-accent;
 
     @include color-scheme(dark) {
-        background-color: $color-bg-secondary--dark;
+        background-color: $color-text-secondary--dark;
     }
 }
 tbody tr:nth-child(odd) {
-    background-color: $color-bg;
+    background-color: $color-background;
     
     @include color-scheme(dark) {
-        background-color: $color-bg--dark;
+        background-color: $color-background--dark;
     }
 }
diff --git a/scss/component/_tag.scss b/scss/component/_tag.scss
index 2b9f3b3..99fadab 100644
--- a/scss/component/_tag.scss
+++ b/scss/component/_tag.scss
@@ -4,7 +4,7 @@
 .tag{
     background-color: $color-secondary;
     border-radius: $border-radius;
-    color: $color-bg;
+    color: $color-background;
     font-size: xx-small;
     font-weight: bold;
     padding: 0.2rem 1rem;
@@ -15,6 +15,18 @@
 
     @include color-scheme(dark) {
         background-color: $color-secondary--dark;
-        color: $color-bg--dark;
+        color: $color-background--dark;
+    }
+}
+
+.tag--border{
+    color: $color-text;
+    background-color: $color-background;
+    border: rems(1px) solid $color-secondary--dark;
+
+    @include color-scheme(dark) {
+        color: $color-text--dark;
+        background-color: $color-background--dark;
+        border-color: $color-secondary--dark;
     }
 }
diff --git a/scss/helpers/_main_helpers.scss b/scss/helpers/_main_helpers.scss
index 49aba75..cefacb8 100644
--- a/scss/helpers/_main_helpers.scss
+++ b/scss/helpers/_main_helpers.scss
@@ -7,4 +7,16 @@
 
 .no-padd{ padding: 0; }
 
-.hide{ display: none; }
\ No newline at end of file
+.hide{ display: none; }
+
+.mobile{ display: block; }
+.desktop{ display: none; }
+@include media($media-md){
+    .mobile{ display: none; }
+    .desktop{ display: block; }
+}
+
+.nowrap{
+    -ms-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+}
\ No newline at end of file
diff --git a/scss/layout/_footer.scss b/scss/layout/_footer.scss
index b004436..69017a4 100644
--- a/scss/layout/_footer.scss
+++ b/scss/layout/_footer.scss
@@ -1,2 +1,41 @@
 @use '../utilities/main_utilities' as *;
 
+.footer{
+	background-color: $color-primary;
+	color: $color-text;
+	border-top: 1px solid $color-text;
+
+    @include color-scheme(dark) {
+        background-color: $color-primary--dark;
+        color: $color-text--dark;
+        border-color: $color-text--dark
+    }
+
+    a{
+        color: $color-background;
+        @include color-scheme(dark) {
+            color: $color-background--dark;
+        }
+    }
+}
+
+.sub-footer{
+	background-color: $color-tertiary;
+
+    @include color-scheme(dark) {
+        background-color: $color-tertiary--dark;
+    }
+}
+.sub-footer .container{
+	padding-top: rems(3px);
+	padding-bottom: rems(3px);
+}
+
+.website-by{
+	font-size: rems(12px);
+	font-family: monospace;
+	border-radius: var(--border-radius);
+    display: inline-block;
+    margin: 0 rems(2px);
+    padding: 0 rems(9px);
+}
diff --git a/scss/layout/_header.scss b/scss/layout/_header.scss
index b004436..140f352 100644
--- a/scss/layout/_header.scss
+++ b/scss/layout/_header.scss
@@ -1,2 +1,24 @@
 @use '../utilities/main_utilities' as *;
 
+.site-title{
+    color: $color-secondary;
+    background: -webkit-linear-gradient(45deg, $color-primary, $color-text);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+
+    @include color-scheme(dark) {
+        background: -webkit-linear-gradient(45deg, $color-primary--dark, $color-text--dark);
+    }
+}
+.site-title--header{
+    // height: 80px; /* To fake what it would look like with an image */
+    font-size: rems(30px);
+    line-height: 1;
+}
+
+.header{
+    background-color: $color-primary;
+    padding: rems(10px) 0;
+
+    @include color-scheme(dark) { color: $color-primary--dark; }
+}
diff --git a/scss/layout/_nav.scss b/scss/layout/_nav.scss
index 40e52e4..2898474 100644
--- a/scss/layout/_nav.scss
+++ b/scss/layout/_nav.scss
@@ -1,13 +1,87 @@
 @use '../utilities/main_utilities' as *;
 
+$nav-spacer: rems(20px);
+
 /* Nav */
+.nav{
+    // background-color: $color-background;
+    // @include color-scheme(dark) { color: $color-background--dark; }
+}
 .nav a{
     text-decoration: none;
 }
 .nav a{
-    color: $color-nav;
+    color: $color-background;
 
     @include color-scheme(dark) {
-        color: $color-nav--dark;
+        color: $color-background--dark;
     }
 }
+
+.nav-list{
+    list-style: none;
+    padding: 0;
+    margin-left: -#{rems(10px)}; /* To offset the start of li margin. Little jank */
+}
+
+// .nav-list li,
+.nav-list__item{
+    display: inline-block;
+    margin-left: rems(10px);
+    position: relative;
+    text-align: left;
+}
+// .nav-list>li,
+.nav-list>.nav-list__item{ /* Only affects first level li */
+    padding: 0; /* So that dropdowns, and nav areas aren't messed up by 'random' padding that on standard list items */
+    
+}
+.nav-list>.nav-list__item>a{ /* Only affects first level li */
+    padding: rems(10px) 0;
+}
+
+/* DROPDOWN(S), CHANGE CLASS to dropdown, ALSO ADD MEGAMENU STYLING */
+// .nav-list li:hover ul,
+.nav-list__item:hover .nav-list__item__dropdown{
+    display: block;
+}
+
+.nav-list__item__dropdown{
+    display: none;
+    position: absolute;
+    border-top: rems(10px) solid transparent; // To have it padded further down (if wanted)
+    z-index: $z-above;
+
+    /* Centre */
+    // left: 50%;
+    // transform: translate(-50%, 0);
+    /* Left */
+    left: 0;
+    /* Right */
+    // transform: translate(-50%, 0);
+}
+// .nav-list li ul,
+.nav-list__item__dropdown__content{
+    background: $color-background;
+    border-top: 2px solid $color-primary;
+    // border-radius: $border-radius;
+    // display: none;
+    height: auto;
+    padding: .5rem 1rem;
+
+    // position: absolute;
+    white-space: nowrap;
+    width: auto;
+    z-index: 1;
+
+    @include color-scheme(dark) {
+        background-color: $color-background--dark;
+        border-color: $color-secondary--dark;
+    }
+}
+
+// .nav-list li ul li, .nav-list li ul li a,
+.nav-list__item__dropdown__item, .nav-list__item__dropdown__item a{
+    display: block;
+    color: $color-text;
+}
\ No newline at end of file
diff --git a/scss/page/_main_page.scss b/scss/page/_main_page.scss
index 7901ff5..641cb88 100644
--- a/scss/page/_main_page.scss
+++ b/scss/page/_main_page.scss
@@ -2,3 +2,4 @@
 
 // Page specific stuff
 @use 'error/error';
+@use 'testing';
diff --git a/scss/page/_testing.scss b/scss/page/_testing.scss
new file mode 100644
index 0000000..e092670
--- /dev/null
+++ b/scss/page/_testing.scss
@@ -0,0 +1,115 @@
+@use '../utilities/main_utilities' as *;
+// CSS Styling for test page, before standardising and making mixins/modules/components for the bits
+
+.image-over-block{}
+.image-over-block__block{
+    // remsFromPercent as design uses 1300px container, I'm using 1080 atm
+    padding: #{remsFromPercent(8.4)}rem  #{remsFromPercent(10.7)}rem !important; // .important to prio over row [class^=col] for now
+    background-color: lightblue;
+}
+.image-over-block__image{
+    position: absolute;
+    bottom:50%;
+    transform: translate(0, 50%);
+    right:0;
+
+    @include media($media-lg){
+        bottom:-20%;
+        transform: translate(0, -20%);
+    }
+}
+
+.tag--social{
+    border-radius: 999px; padding: 3px 6px; font-size: 16px; height: 24px; width: 24px;
+    top: 0; overflow: hidden; text-decoration: none;
+}
+
+.sf-header{
+    border-bottom: 1px solid green; padding-top: 18px;padding-bottom: 18px;
+}
+
+
+
+.slide__dots{
+    margin-top: 20px;
+}
+.slide-dot, .swiper-pagination-bullet{
+    display: inline-block; width: 16px; height: 16px;
+    border:1px solid transparent; border-radius: 999px; position: relative;
+}
+.slide-dot__inner, .swiper-pagination-bullet{
+    width: 8px; height: 8px; background-color: grey; border-radius: 999px;
+    position: absolute;top: 50%;left: 50%; transform: translate(-50%, -50%);
+}
+.slide-dot--active, .swiper-pagination-bullet-active{
+   border-color: black;
+}
+.slide-dot--active .slide-dot__inner, .swiper-pagination-bullet-active .slide-dot__inner{
+    background-color: black;
+}
+
+
+// Gallery
+.gallery-fancy{
+    height: 300px;
+    overflow: hidden;
+}
+.gallery-fancy--show{
+    height: auto;
+    overflow: unset;
+}
+.gallery-fancy:before{
+    content:"";
+    position: absolute;
+    width: 100%;
+    height: 10%;
+    background: linear-gradient(360deg, #f8f9fa, transparent);
+    bottom: 0;
+}
+.gallery-fancy--show:before{
+    display: none;
+}
+.gallery-fancy .col img{
+    margin-top: 8px;
+    vertical-align: middle;
+    width: 100%;
+}
+
+// Team
+.team-block{
+    margin-bottom: 60px;
+}
+.team-block__image{
+    margin-bottom: 20px; border-radius: 15px; width: 100%;
+}
+.team-block__name{
+    margin-bottom: 8px; font-size: 26px; line-height: 28px; color: #242322;
+    font-weight: bold;
+}
+.team-block__role{
+    font-size: 18px; font-weight: bold; line-height: 20px;
+}
+
+@media(min-width: 768px){
+    .team-block{
+        margin-bottom: 60px;
+    }
+    .team-block__image{
+        margin-bottom: 24px; border-radius: 15px;
+    }
+    .team-block__name{
+        margin-bottom: 10px; font-size: 30px; line-height: 32px;
+        font-weight: bold;
+    }
+}
+
+
+// Use above another container where elements are supposed to be off the page on higher screen width
+.container-overflow{
+    max-width: 100%;
+    overflow: hidden;
+}
+
+.container-overflow .container{
+    padding: 0;
+}
diff --git a/scss/page/error/_error.scss b/scss/page/error/_error.scss
index 592b39a..ced0a58 100644
--- a/scss/page/error/_error.scss
+++ b/scss/page/error/_error.scss
@@ -6,11 +6,11 @@
     justify-content: center !important;
     flex-direction: column !important;
     height: 100% !important;
-    background: $color-bg;
+    background: $color-background;
     color: $color-text;
 
     @include color-scheme(dark) {
-        background: $color-bg--dark;
+        background: $color-background--dark;
         color: $color-text--dark;
     }
 }
diff --git a/scss/utilities/_functions.scss b/scss/utilities/_functions.scss
new file mode 100644
index 0000000..a58bd79
--- /dev/null
+++ b/scss/utilities/_functions.scss
@@ -0,0 +1 @@
+@use 'variables' as *;
diff --git a/scss/utilities/_main_utilities.scss b/scss/utilities/_main_utilities.scss
index dc7f1dd..9a84f23 100644
--- a/scss/utilities/_main_utilities.scss
+++ b/scss/utilities/_main_utilities.scss
@@ -1,2 +1,3 @@
 @forward 'variables';
 @forward 'mixins';
+@forward 'functions';
diff --git a/scss/utilities/_mixins.scss b/scss/utilities/_mixins.scss
index 853e7ec..465ac1c 100644
--- a/scss/utilities/_mixins.scss
+++ b/scss/utilities/_mixins.scss
@@ -20,3 +20,12 @@
         @content;
     }
 }
+
+// Add mixins for flex, etc. Anything that needs -webkit-, etc...
+@mixin flex(){
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+}
diff --git a/scss/utilities/_variables.scss b/scss/utilities/_variables.scss
index 1dd6c31..da968cc 100644
--- a/scss/utilities/_variables.scss
+++ b/scss/utilities/_variables.scss
@@ -1,63 +1,75 @@
+@use "sass:math";
+
 // Variables
 $color-schemes: false; // true/false, to enable/disable light/dark colour themes. All default styling is for 'light'
 
+// Basis of sizes
+$font-size--numeric: 18;
+$font-size: 18px; //#{$font-size--numeric}px;
+$container: 1080;
+
+// Try to use rems for everything, including %s (besides for cols, and widths within rows)
+// Rems function, circular @uses errors, so here for time being unless I make an intermediary file
+@function rems($targetSize){
+    $remSize: math.div($targetSize,$font-size);
+    @return #{$remSize}rem; // e.g. 16/20px = 0.8rems
+}
+// Additional calc in numerics as SASS maths is jank with px,rems, etc...
+@function remsNumeric($targetSize){
+    $remSize: math.div($targetSize, $font-size--numeric);
+    @return $remSize;
+}
+@function remsFromPercent($targetPercentage){
+    $pixels: math.div($targetPercentage, 100)*$container;
+    @return remsNumeric($pixels); // Then rem the pixel %
+}
+
+@function vws($targetSize){ // Maybe use, leaving for now
+    // 100vw = 100% size of view. Calculations BASED on 1920
+    $single: 1920/100; // 1vw = 19.2(px), use the largest of rems/vws
+    // 8/18 = 0.44. May not be needed, could just max(0.44rem, 0.44vw) and that may work?
+}
+
+// Specific sizes for media query, prolly not going to use rems here
 $media-xs: 360px;
 $media-sm: 540px;
 $media-md: 768px;
-$media-lg: 900px;
+$media-lg: 1000px;
 $media-xl: 1200px;
 
+// Other variables, any sizes should be rems (use rems function, basic targetSize/fontSize)
+$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+
 $active-brightness: .85;
 $hover-brightness: 1.2;
 
-$border-radius: 8px;
-$box-shadow: 0 2px 8px;
-$color-accent: #dae9f6;
-$color-accent--dark: #0097fc;
-$color-bg: #fff;
-$color-bg--dark: #333;
-$color-bg-secondary: #e9e9e9;
-$color-bg-secondary--dark: #555;
-$color-link: #118bee;
-$color-link--dark: #0097fc;
-$color-secondary: #508ce2;
-$color-secondary--dark: #2c68bd;
-$color-secondary-accent: #dee9fa;
-$color-secondary-accent--dark: #496282;
-$color-shadow: #f4f4f4;
-$color-shadow--dark: #bbbbbb20;
-$color-table: #118bee;
-$color-table--dark: #0097fc;
-$color-text: #000;
-$color-text--dark: #f7f7f7;
-$color-text-secondary: #999;
-$color-text-secondary--dark: #aaa;
-
-$color-scrollbar: #cacae8;
-$color-scrollbar--dark: #EEE;
-
-$color-card: #FFF;
-$color-card--dark: #232323;
-$color-banner: #EEE;
-$color-banner--dark: #444;
-
-$color-highlight: #ff8c00;
-$color-highlight--dark: #a3600d;
-
-$color-nav: #CCC;
-$color-nav--dark: #CCC;
-
-// $alert-color:
-$alert-color--error: #e90d30;
-$alert-color--warning: #ddde11;
-$alert-color--success: #18ab34;
-
-$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+$border-radius: rems(8px);
+$box-shadow: 0 rems(1px) rems(6px);
 
 $justify-important: center;
 $justify-normal: left;
 $line-height: 1.5;
-$width-card: 285px;
-$width-card-medium: 460px;
-$width-card-wide: 800px;
-$width-content: 1080px;
+$width-content: #{remsNumeric($container)}rem;
+$grid-gap--numeric: remsNumeric(15); // The gap between grid columns (15px = 7.5px either side)
+
+
+// Colours
+$color-primary: #118bee; $color-primary-dark: #0c5fa2;
+$color-secondary: #a7e09a; $color-secondary--dark: #429b32;
+$color-tertiary: #294fb7; $color-tertiary--dark: #114a70;
+$color-background: #f8f9fa; $color-background--dark: #333;
+$color-text: #1e1e1e; $color-text--dark: #f7f7f7;
+$color-text-secondary: #868686; $color-text-secondary--dark: #555;
+$color-link: #118bee; $color-link--dark: #007acb;
+$color-success: #18ab34;
+$color-fail: #e90d30;
+$color-warning: #ddde11; 
+$color-highlight: #ff8c00; $color-highlight--dark: #a3600d;
+
+$color-accent: $color-text--dark; $color-accent--dark: $color-text;
+
+// Z-indexes
+$z-behind:  0;
+$z-normal:  1;
+$z-above:   10;
+$z-top:     100;