Change all colours to variables (gross colours atm)

Also update media vars to respectable numbers rather than 0s

.gitignore

@@ -0,0 +1,2 @@
+css/
+

scss/base/_anchor.scss

@@ -6,6 +6,10 @@ a{
     display: inline-block;
     font-weight: bold;
     text-decoration: underline;
+
+    @include color-scheme(dark) {
+        color: $color-link--dark;
+    }
 }
 
 a:hover {

scss/base/_base.scss

@@ -17,4 +17,9 @@ body {
     line-height: $line-height;
     overflow-x: hidden;
     @include reset; /* Margin 0, padding 0. Testing new @use/@forward as globals aren't allowed... */
+
+    @include color-scheme(dark) {
+        background: $color-bg--dark;
+        color: $color-text--dark;
+    }
 }

scss/base/_grid.scss

@@ -80,9 +80,13 @@ html{
     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: #444 transparent;
+    scrollbar-color: $color-scrollbar transparent;
     scrollbar-width: thin;
     padding-bottom: .5rem;
+
+    @include color-scheme(dark) {
+      scrollbar-color: $color-scrollbar--dark transparent;
+    }
   }
   .row--scroll [class^="col"]{
   
@@ -92,48 +96,58 @@ html{
     flex: 0 0 auto;
   }
   
-  .col-1,
-  .col-2,
-  .col-3,
-  .col-4,
-  .col-5,
-  .col-6,
-  .col-7,
-  .col-8,
-  .col-9,
-  .col-10,
-  .col-11,
-  .col-12 {
+  // 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%;
   }
 
-  /* (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-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page */
-  .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%; }
+  @include media($media-xs) {
 
-  .hidden-sm {
-    display: none;
-  }
+    // 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 }
 
-  @media only screen and (min-width: 33.75rem) {  /* ~540px */
   }
 
-  @media only screen and (min-width: 45rem) {  /* ~720px */
+  @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 */
+    .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%; }
@@ -144,18 +158,115 @@ html{
     .col-11 { flex: 0 0 91.66%; }
     .col-12 { flex: 0 0 100%; }
 
-    .hidden-sm { display: block; }
+    /* (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 }
+
+  }
+
+  @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 }
+
+  }
+
+  @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 }
+
   }
 
-  @media only screen and (min-width: 60em) { /* ~960px */
+  @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 }
+
   }
 
+  // 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 */

scss/base/_image.scss

@@ -12,6 +12,10 @@ figure img {
 
 figure figcaption {
     color: $color-text-secondary;
+
+    @include color-scheme(dark) {
+        color: $color-text-secondary--dark;
+    }
 }
 
 section img,

scss/base/_typography.scss

@@ -10,11 +10,18 @@ p+p, h1+p{ /* Para after para should space out */
 
 mark, .highlight{ /* Useful for search result highlighting, and general hightlights that aren't strong */
     padding: 0.1rem;
-    background: #ff8c00;
+    background: $color-highlight;
+
+    @include color-scheme(dark) {
+        background: $color-highlight--dark;
+    }
 }
 
 small {
     color: $color-text-secondary;
+    @include color-scheme(dark) {
+        color: $color-text-secondary--dark;
+    }
 }
 
 hr{
@@ -24,4 +31,7 @@ hr{
     width: 100%;
     max-width: $width-content;
     margin: .5rem auto;
+    @include color-scheme(dark) {
+        color: $color-bg-secondary--dark;
+    }
 }

scss/component/_alert.scss

@@ -1,4 +1,5 @@
 @use '../utilities/main_utilities' as *;
+@use "sass:color";
 
 // Alerts
 .alert{
@@ -7,16 +8,33 @@
     border-right: 4px solid $color-secondary;
     padding: .1rem .8rem;
     margin-bottom:.5rem;
+
+    @include color-scheme(dark) {
+        color: $color-secondary-accent--dark;
+        border-color: $color-secondary--dark;
+    }
 }
 .alert--error{
-    background: #f05870;
-    border-color: #e90d30;
+    background: desaturate($alert-color--error, 40);
+    border-color: $alert-color--error;
+
+    @include color-scheme(dark) {
+        color: $color-secondary-accent;
+    }
 }
 .alert--warning{
-    background: #e8e85b;
-    border-color: #ddde11;
+    background: desaturate($alert-color--warning, 40);
+    border-color: $alert-color--warning;
+    
+    @include color-scheme(dark) {
+        color: $color-secondary-accent;
+    }
 }
 .alert--success{
-    background: #60c572;
-    border-color: #18ab34;
+    background: desaturate($alert-color--success, 40);
+    border-color: $alert-color--success;
+    
+    @include color-scheme(dark) {
+        color: $color-secondary-accent;
+    }
 }

scss/component/_banner.scss

@@ -2,5 +2,9 @@
 
 .banner{
     width: 100%;
-    background: #eee;
+    background: $color-banner;
+
+    @include color-scheme(dark) {
+        background: $color-banner--dark;
+    }
 }

scss/component/_button.scss

@@ -5,8 +5,9 @@
 button,
 input[type="submit"]
 {
-    background: #FEFEFE;
-    border: 2px solid $color-link;
+    color: $color-bg;
+    background: $color-link;
+    border: 2px solid $color-accent;
     border-radius: $border-radius;
     display: inline-block;
     font-size: .9rem;
@@ -15,6 +16,11 @@ input[type="submit"]
     margin-top: 0.5rem;
     padding: .6rem 1.2rem;
     text-decoration: none;
+
+    @include color-scheme(dark) {
+        background-color: $color-link--dark;
+        border-color: $color-accent--dark;
+    }
 }
 
 .button + .button,
@@ -56,6 +62,10 @@ input[type="submit"].button--blue
 {
     background-color: $color-link;
     color: $color-bg;
+
+    @include color-scheme(dark) {
+        border-color: $color-link--dark;
+    }
 }
 
 .button--disabled,
@@ -65,6 +75,12 @@ input:disabled {
     border-color: $color-bg-secondary;
     color: $color-text-secondary;
     cursor: not-allowed;
+
+    @include color-scheme(dark) {
+        background-color: $color-bg-secondary--dark;
+        border-color: $color-bg-secondary--dark;
+        color: $color-text-secondary--dark;
+    }
 }
 .button--disabled:hover,
 button[disabled]:hover,

scss/component/_card.scss

@@ -9,12 +9,22 @@
     box-shadow: $box-shadow $color-shadow;
     padding: 1.25rem;
     /* flex: 0 0 $width-card; */
-    background: #FFF;
+    background: $color-card;
     
     display: block !important; /* Unset row/col default */
+
+    @include color-scheme(dark) {
+        border-color: $color-bg-secondary--dark;
+        box-shadow: $box-shadow $color-shadow--dark;
+        background: $color-card--dark;
+    }
 }
 .card:hover {
     box-shadow: $box-shadow $color-bg-secondary;
+
+    @include color-scheme(dark) {
+        box-shadow: $box-shadow $color-bg-secondary--dark;
+    }
 }
 
 .row--cards{

scss/component/_code.scss

@@ -8,6 +8,11 @@ code,samp {
     display: inline-block;
     margin: 0 0.1rem;
     padding: 0 0.5rem;
+
+    @include color-scheme(dark) {
+        background-color: $color-accent--dark;
+        color: $color-text--dark;
+    }
 }
 pre {
     margin: .5rem 0;
@@ -22,7 +27,13 @@ pre {
     overflow-x: auto;
     
     white-space: pre-wrap;
-    border: 1px solid #c1cfda;
+    border: 1px solid $color-text;
+
+    @include color-scheme(dark) {
+        background-color: $color-accent--dark;
+        color: $color-text--dark;
+        border-color: $color-text--dark;
+    }
 }
 
 section pre {

scss/component/_form.scss

@@ -10,6 +10,11 @@ form {
     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;
+    }
 }
 
 form header {
@@ -54,6 +59,10 @@ textarea {
     border-radius: $border-radius;
     margin-bottom: 1rem;
     padding: 0.4rem 0.8rem;
+
+    @include color-scheme(dark) {
+        border-color: $color-bg-secondary--dark;
+    }
 }
 
 input[type="text"],
@@ -65,4 +74,8 @@ textarea {
 input[readonly],
 textarea[readonly] {
     background-color: $color-bg-secondary;
+
+    @include color-scheme(dark) {
+        background-color: $color-bg-secondary--dark;
+    }
 }

scss/component/_list.scss

@@ -56,6 +56,11 @@ ul li {
     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 {

scss/component/_modal.scss

@@ -11,4 +11,9 @@
     transform: translate(-50%, -50%);
     width: 50%;
     z-index: 999;
+
+    @include color-scheme(dark) {
+        border-color: $color-bg-secondary--dark;
+        box-shadow: $color-shadow--dark;
+    }
 }

scss/component/_quote.scss

@@ -17,4 +17,8 @@ blockquote footer{
     font-size: small;
     line-height: $line-height;
     padding: 1.5rem 0;
+
+    @include color-scheme(dark) {
+        color: $color-text-secondary--dark;
+    }
 }

scss/component/_table.scss

@@ -14,6 +14,10 @@ table {
     text-align: left;
     border-collapse: collapse;
     overflow-wrap: normal;
+
+    @include color-scheme(dark) {
+        border-color: $color-bg-secondary--dark;
+    }
 }
 
 table td,
@@ -29,6 +33,11 @@ table thead tr {
     color: $color-bg;
     margin: 0;
     padding: 0;
+
+    @include color-scheme(dark) {
+        background-color: $color-table--dark;
+        color: $color-bg--dark;
+    }
 }
 
 table thead tr {
@@ -37,7 +46,15 @@ table thead tr {
 
 tbody tr:nth-child(even) {
     background-color: $color-accent;
+
+    @include color-scheme(dark) {
+        background-color: $color-bg-secondary--dark;
+    }
 }
 tbody tr:nth-child(odd) {
-    background-color: #FFF;
+    background-color: $color-bg;
+    
+    @include color-scheme(dark) {
+        background-color: $color-bg--dark;
+    }
 }

scss/component/_tag.scss

@@ -12,4 +12,9 @@
     top:-2px;
     display: inline-block;
     vertical-align: middle;
+
+    @include color-scheme(dark) {
+        background-color: $color-secondary--dark;
+        color: $color-bg--dark;
+    }
 }

scss/helpers/_main_helpers.scss

@@ -2,6 +2,8 @@
 
 /* Misc helpers */
 .tar{ text-align: right; }
+.tac{ text-align: center; }
+.tal{ text-align: left; }
 
 .no-padd{ padding: 0; }
 

scss/layout/_nav.scss

@@ -5,5 +5,9 @@
     text-decoration: none;
 }
 .nav a{
-    color: #CCC;
+    color: $color-nav;
+
+    @include color-scheme(dark) {
+        color: $color-nav--dark;
+    }
 }

scss/page/_main_page.scss

@@ -1,3 +1,4 @@
 @use '../utilities/main_utilities' as *;
 
 // Page specific stuff
+@use 'error/error';

scss/page/error/_error.scss

@@ -0,0 +1,25 @@
+@use '../../utilities/main_utilities' as *;
+
+.body--error{
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    flex-direction: column !important;
+    height: 100% !important;
+    background: $color-bg;
+    color: $color-text;
+
+    @include color-scheme(dark) {
+        background: $color-bg--dark;
+        color: $color-text--dark;
+    }
+}
+
+.error-title{
+    font-size: 40px;
+    @include media($media-sm) { font-size: 80px; }
+}
+.error-text{
+    margin-top: 20px;
+    @include media($media-sm) { margin-top: 40px; }
+}

scss/utilities/_mixins.scss

@@ -1,4 +1,22 @@
+@use 'variables' as *;
+
 @mixin reset {
     margin: 0;
     padding: 0;
 }
+
+// @include color-scheme() {}
+@mixin color-scheme($value: dark) {
+    @if $color-schemes {
+        @media (prefers-color-scheme: $value) {
+            @content;
+        }
+    }
+}
+
+// @include media($media-lg) {}
+@mixin media($value: $media-md) {
+    @media (min-width: $value) {
+        @content;
+    }
+}

scss/utilities/_variables.scss

@@ -1,9 +1,11 @@
 // Variables
-$media-xs: 0;
-$media-sm: 0;
-$media-md: 0;
-$media-lg: 0;
-$media-xl: 0;
+$color-schemes: false; // true/false, to enable/disable light/dark colour themes. All default styling is for 'light'
+
+$media-xs: 360px;
+$media-sm: 540px;
+$media-md: 768px;
+$media-lg: 900px;
+$media-xl: 1200px;
 
 $active-brightness: .85;
 $hover-brightness: 1.2;
@@ -19,9 +21,9 @@ $color-bg-secondary--dark: #555;
 $color-link: #118bee;
 $color-link--dark: #0097fc;
 $color-secondary: #508ce2;
-$color-secondary--dark: #e20de9;
+$color-secondary--dark: #2c68bd;
 $color-secondary-accent: #dee9fa;
-$color-secondary-accent--dark: #e20de9;
+$color-secondary-accent--dark: #496282;
 $color-shadow: #f4f4f4;
 $color-shadow--dark: #bbbbbb20;
 $color-table: #118bee;
@@ -32,6 +34,24 @@ $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;
 
 $justify-important: center;