.gitignore

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

scss/base/_anchor.scss

@@ -6,10 +6,6 @@ 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,9 +17,4 @@ 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,13 +80,9 @@ 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: $color-scrollbar transparent;
+    scrollbar-color: #444 transparent;
     scrollbar-width: thin;
     padding-bottom: .5rem;
-
-    @include color-scheme(dark) {
-      scrollbar-color: $color-scrollbar--dark transparent;
-    }
   }
   .row--scroll [class^="col"]{
   
@@ -96,58 +92,48 @@ html{
     flex: 0 0 auto;
   }
   
-  // Default cols to 100% width when below $media-xs (base 360px)
+  .col-1,
-  .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,
+  .col-2,
-  .col-7,.col-8,.col-9,.col-10,.col-11,.col-12{
+  .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) {
+  /* (100/12) * x = the flex % */
-
+  .col-sm-1 { flex: 0 0 8.33%; }
-    // Once a breakpoint has been hit, cols will behave regularly,
+  .col-sm-2 { flex: 0 0 16.66%; }
-    // but will be overwritten/cascaded by their xs,md,lg, etc. counterparts
+  .col-sm-3 { flex: 0 0 25%; }
-    // This is duplicated at md, as the 'default' col will be medium, needed here in-case people just
+  .col-sm-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page */
-    // use .col-4, etc. as an end-all be-all
+  .col-sm-4 { flex: 0 0 33.33%; }
-    .col-1 { flex: 0 0 8.33%; }
+  .col-sm-5 { flex: 0 0 41.66%; }
-    .col-2 { flex: 0 0 16.66%; }
+  .col-sm-6 { flex: 0 0 50%; }
-    .col-3 { flex: 0 0 25%; }
+  .col-sm-7 { flex: 0 0 58.33%; }
-    .col-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page, example. Should be set independantly */
+  .col-sm-8 { flex: 0 0 66.66%; }
-    .col-4 { flex: 0 0 33.33%; }
+  .col-sm-9 { flex: 0 0 75%; }
-    .col-5 { flex: 0 0 41.66%; }
+  .col-sm-10 { flex: 0 0 83.33%; }
-    .col-6 { flex: 0 0 50%; }
+  .col-sm-11 { flex: 0 0 91.66%; }
-    .col-7 { flex: 0 0 58.33%; }
+  .col-sm-12 { flex: 0 0 100%; }
-    .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 }
   
+  .hidden-sm {
+    display: none;
   }
   
-  @include media($media-sm) {
+  @media only screen and (min-width: 33.75rem) {  /* ~540px */
+  }
   
-    // THINK .col-3 will need to be re-cascaded each time, otherwise the sm/md will overwrite for ever
+  @media only screen and (min-width: 45rem) {  /* ~720px */
-    // 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-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page */
     .col-4 { flex: 0 0 33.33%; }
     .col-5 { flex: 0 0 41.66%; }
     .col-6 { flex: 0 0 50%; }
@@ -158,115 +144,18 @@ html{
     .col-11 { flex: 0 0 91.66%; }
     .col-12 { flex: 0 0 100%; }
   
-    /* (100/12) * x = the flex % */
+    .hidden-sm { display: block; }
-    .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){
+  @media only screen and (min-width: 60em) { /* ~960px */
-
-    /* (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 }
-
-  }
-
-  @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,10 +12,6 @@ figure img {
 
 figure figcaption {
     color: $color-text-secondary;
-
-    @include color-scheme(dark) {
-        color: $color-text-secondary--dark;
-    }
 }
 
 section img,

scss/base/_typography.scss

@@ -10,18 +10,11 @@ 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: $color-highlight;
+    background: #ff8c00;
-
-    @include color-scheme(dark) {
-        background: $color-highlight--dark;
-    }
 }
 
 small {
     color: $color-text-secondary;
-    @include color-scheme(dark) {
-        color: $color-text-secondary--dark;
-    }
 }
 
 hr{
@@ -31,7 +24,4 @@ hr{
     width: 100%;
     max-width: $width-content;
     margin: .5rem auto;
-    @include color-scheme(dark) {
-        color: $color-bg-secondary--dark;
-    }
 }

scss/component/_alert.scss

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

scss/component/_banner.scss

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

scss/component/_button.scss

@@ -5,9 +5,8 @@
 button,
 input[type="submit"]
 {
-    color: $color-bg;
+    background: #FEFEFE;
-    background: $color-link;
+    border: 2px solid $color-link;
-    border: 2px solid $color-accent;
     border-radius: $border-radius;
     display: inline-block;
     font-size: .9rem;
@@ -16,11 +15,6 @@ 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,
@@ -62,10 +56,6 @@ input[type="submit"].button--blue
 {
     background-color: $color-link;
     color: $color-bg;
-
-    @include color-scheme(dark) {
-        border-color: $color-link--dark;
-    }
 }
 
 .button--disabled,
@@ -75,12 +65,6 @@ 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,22 +9,12 @@
     box-shadow: $box-shadow $color-shadow;
     padding: 1.25rem;
     /* flex: 0 0 $width-card; */
-    background: $color-card;
+    background: #FFF;
     
     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,11 +8,6 @@ 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;
@@ -27,13 +22,7 @@ pre {
     overflow-x: auto;
     
     white-space: pre-wrap;
-    border: 1px solid $color-text;
+    border: 1px solid #c1cfda;
-
-    @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,11 +10,6 @@ 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 {
@@ -59,10 +54,6 @@ 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"],
@@ -74,8 +65,4 @@ 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,11 +56,6 @@ 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,9 +11,4 @@
     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,8 +17,4 @@ 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,10 +14,6 @@ table {
     text-align: left;
     border-collapse: collapse;
     overflow-wrap: normal;
-
-    @include color-scheme(dark) {
-        border-color: $color-bg-secondary--dark;
-    }
 }
 
 table td,
@@ -33,11 +29,6 @@ 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 {
@@ -46,15 +37,7 @@ 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: $color-bg;
+    background-color: #FFF;
-    
-    @include color-scheme(dark) {
-        background-color: $color-bg--dark;
-    }
 }

scss/component/_tag.scss

@@ -12,9 +12,4 @@
     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,8 +2,6 @@
 
 /* Misc helpers */
 .tar{ text-align: right; }
-.tac{ text-align: center; }
-.tal{ text-align: left; }
 
 .no-padd{ padding: 0; }
 

scss/layout/_nav.scss

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

scss/page/_main_page.scss

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

scss/page/error/_error.scss

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