Change all colours to variables (gross colours atm)

Also update media vars to respectable numbers rather than 0s

.gitignore

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

css/grid/main.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"main.css"}

js/clipboard.js

@@ -0,0 +1,51 @@
+// clip-area  = Where the clip will occur (when clicked)
+// clip-tooltip = The tooltip, may pre post? clip-tooltip-pre clip-tooltip-post
+// clip-copy  = What (element) content will be copied to clipboard
+
+
+function copyToClipboard(elementId) {
+
+	/* Get the text field */
+	var copyText = document.getElementById(elementId);
+
+	/* Select the text field */
+	copyText = copyText.textContent;
+
+	/* Copy the text inside the text field */
+	navigator.clipboard.writeText(copyText);
+
+	var tooltip = document.getElementsByClassName('tooltiptext');
+	for (var i = 0; i < tooltip.length; i++) {
+		tooltip[i].innerHTML = "Copied";
+	}
+
+}
+
+function resetCopy() {
+
+	var tooltip = document.getElementsByClassName('tooltiptext');
+	for (var i = 0; i < tooltip.length; i++) {
+		tooltip[i].innerHTML = "Copy to clipboard";
+	}
+
+}
+
+// Event Listeners
+
+//const clipboard = querySelector('.tooltiptext');
+const minecraft = document.getElementById('minecraft-clip');
+minecraft.addEventListener('click', function (event) { copyToClipboard('minecraft-server'); });
+
+const terraria = document.getElementById('terraria-clip');
+terraria.addEventListener('click', function (event) { copyToClipboard('terraria-server'); });
+
+const factorio = document.getElementById('factorio-clip');
+factorio.addEventListener('click', function (event) { copyToClipboard('factorio-server'); });
+
+var tooltipped = document.getElementsByClassName('tooltipped');
+for (var i = 0; i < tooltipped.length; i++) {
+	//tooltipped[i].addEventListener('click', function (event) { copyToClipboard(); });
+	// this clipboard
+	tooltipped[i].addEventListener('mouseout', function (event) { resetCopy(); });
+}
+

js/tabs.js

@@ -0,0 +1,76 @@
+// data-tabs-group = The group
+// data-tabs-id  = The item number (id) of the tab within the group
+// data-tabs-tab     = If the element is a tab object (to be toggled)
+// data-tabs-button  = An element that will toggle the tabs of its group/id
+
+// Make each 'tab' have a click event.
+let tabButtons = document.querySelectorAll('[data-tabs-button]');
+// document.querySelectorAll('[data-foo="1"]');
+// let tabs = document.getElementsByClassName('tab');
+for (let i = 0; i < tabButtons.length; i++) {
+    tabButtons[i].addEventListener('click', function (event) { 
+
+        let tabGroup = this.dataset.tabsGroup;
+        let tabId = this.dataset.tabsId;
+        let tabToShow = document.querySelector('[data-tabs-tab][data-tabs-group="'+tabGroup+'"][data-tabs-id="'+tabId+'"]');
+
+        hideTabs(this.dataset.tabsId, this.dataset.tabsGroup); /* Hide all other tabs in the group */
+        tabToShow.classList.remove("hide"); /* Show the tab that's been selected */
+        otherTabTasks(tabToShow, tabGroup, tabId); /* Do anything else that's needed, as to keep the main loop clean(ish) */
+
+    });
+}
+
+// When id=0 it's the default, so tab=1, OR tabs-active
+// group=0 also default to ALL the tabgroups, not just one specified
+function hideTabs(id=0, group=0){
+    // Hide all tabs but those I don't wanna
+    let query = '[data-tabs-tab][data-tabs-id]';
+    if(group == 0){
+        // Tabs that aren't default
+        query +=':not([data-tabs-default])';
+    }else{
+        // Tabs in group (filtered in loop via their id)
+        query +='[data-tabs-group="'+group+'"]';
+    }
+    let tabs = document.querySelectorAll(query);
+    for (let i = 0; i < tabs.length; i++) {
+        if(id == 0){
+            tabs[i].classList.add("hide");
+        }
+        if(id != 0 && tabs[i].dataset.tabsId != id){
+            tabs[i].classList.add("hide");
+        }
+    }
+}
+
+// On page load, display:none all the tabs that shouldn't be shown
+// Done in JS, so if it's disabled, etc. users will see all the data (despite how ugly)
+hideTabs();
+
+function otherTabTasks(tabToShow, tabGroup, tabId){
+    // This should be streamlined I reckon
+    if(tabGroup == 'servers'){
+
+        document.getElementById('servers').classList.remove('servers-bg--mc', 'servers-bg--factorio');
+
+        if(tabId == 'minecraft'){
+            document.getElementById('servers').classList.add('servers-bg--mc');
+        }
+        else if(tabId == 'factorio'){
+            document.getElementById('servers').classList.add('servers-bg--factorio');
+        }
+
+        // Uh oh, loop each 'button' in the ul and have only the current one be 'selected'
+        // Will need to unjank this, but it works on the design in HTML. Will likely want to do some changes
+        let query = '.button[data-tabs-button][data-tabs-group="'+tabGroup+'"]';
+        let buttons = document.querySelectorAll(query);
+        for (let i = 0; i < buttons.length; i++) {
+            if(buttons[i].dataset.tabsId == tabId){
+                buttons[i].classList.add("button--blue");
+            }else{
+                buttons[i].classList.remove("button--blue");
+            }
+        }
+    }
+}

scss/base/_anchor.scss

@@ -0,0 +1,21 @@
+@use '../utilities/main_utilities' as *;
+
+/* Links */
+a{
+    color: $color-link;
+    display: inline-block;
+    font-weight: bold;
+    text-decoration: underline;
+
+    @include color-scheme(dark) {
+        color: $color-link--dark;
+    }
+}
+
+a:hover {
+    filter: brightness($hover-brightness);
+}
+
+a:active {
+    filter: brightness($active-brightness);
+}

scss/base/_base.scss

@@ -0,0 +1,25 @@
+@use '../utilities/main_utilities' as *;
+
+html{scroll-behavior: smooth}
+@media (prefers-reduced-motion: reduce){
+    html{scroll-behavior: auto}
+}
+
+/* Footer fixed to bottom */
+html,body{height: 100%}
+body{display: flex;flex-direction: column;}
+main, .main{ flex: 1 0 auto }
+
+body {
+    background: $color-bg;
+    color: $color-text;
+    font-family: $font-family;
+    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

@@ -0,0 +1,277 @@
+@use '../utilities/main_utilities' as *;
+
+/* https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/ */
+/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
+/* https://stackoverflow.com/a/45059944 */
+/* Flex grid, done similarly to a float: left. So content needs to be within the grid */
+/* -ms-grid-columns: 1fr (20px 1fr)[3]; */
+/* 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;
+    }
+  }
+  .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 }
+
+  }
+
+  @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 }
+
+  }
+
+  @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 }
+
+  }
+
+  @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 */
+  .col-grow, .col-grow-sm
+  ,.col-fill, .col-fill-sm{
+    flex-grow: 1;
+  }
+  

scss/base/_image.scss

@@ -0,0 +1,24 @@
+@use '../utilities/main_utilities' as *;
+
+/* Images */
+figure {
+    margin: 0;
+    padding: 0;
+}
+
+figure img {
+    max-width: 100%;
+}
+
+figure figcaption {
+    color: $color-text-secondary;
+
+    @include color-scheme(dark) {
+        color: $color-text-secondary--dark;
+    }
+}
+
+section img,
+article img {
+    max-width: 100%;
+}

scss/base/_main_base.scss

@@ -0,0 +1,9 @@
+@use 'thanks';
+
+@use 'reset';
+@use 'base';
+@use 'grid';
+
+@use 'typography';
+@use 'anchor';
+@use 'image';

scss/base/_reset.scss

@@ -0,0 +1,78 @@
+@use '../utilities/main_utilities' as *;
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Prevent font size inflation */
+html{
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+/* Remove default margin in favour of better control in authored CSS */
+body, h1, h2, h3, h4, p,
+figure, blockquote, dl, dd{
+  margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul,
+ol{
+  margin:0;
+}
+
+/* Set core body defaults */
+body{
+  min-height: 100vh;
+  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;
+}
+
+/* Make images easier to work with */
+img,
+picture{
+  max-width: 100%;
+  display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input, button,
+textarea, select{
+  font-family: inherit;
+  font-size: inherit;
+}
+
+/* Make sure textareas without a rows attribute are not tiny */
+textarea:not([rows]){
+  min-height: 10em;
+}
+
+/* Anything that has been anchored to should have extra scroll margin */
+:target{
+  scroll-margin-block: 5ex;
+}
+
+ul, ol{
+  padding: 0;
+  list-style-position: inside;
+}

scss/base/_thanks.scss

@@ -0,0 +1,3 @@
+// With CSS inspired or taken from:
+// https://github.com/andybrewer/mvp
+// https://piccalil.li/blog/a-more-modern-css-reset/

scss/base/_typography.scss

@@ -0,0 +1,37 @@
+@use '../utilities/main_utilities' as *;
+
+p {
+    padding: 0;
+    width: 100%;
+}
+p+p, h1+p{ /* Para after para should space out */
+    margin-top: .75rem;
+}
+
+mark, .highlight{ /* Useful for search result highlighting, and general hightlights that aren't strong */
+    padding: 0.1rem;
+    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{
+    background-color: $color-bg-secondary;
+    border: none;
+    height: 1px;
+    width: 100%;
+    max-width: $width-content;
+    margin: .5rem auto;
+    @include color-scheme(dark) {
+        color: $color-bg-secondary--dark;
+    }
+}

scss/component/_accordion.scss

@@ -0,0 +1,10 @@
+@use '../utilities/main_utilities' as *;
+
+details {
+    margin: .7rem 0;
+}
+details summary {
+    margin-bottom: .8rem;
+    font-weight: bold;
+    cursor: pointer;
+}

scss/component/_alert.scss

@@ -0,0 +1,40 @@
+@use '../utilities/main_utilities' as *;
+@use "sass:color";
+
+// Alerts
+.alert{
+    background: $color-secondary-accent;
+    border-left: 4px solid $color-secondary;
+    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);
+    border-color: $alert-color--error;
+
+    @include color-scheme(dark) {
+        color: $color-secondary-accent;
+    }
+}
+.alert--warning{
+    background: desaturate($alert-color--warning, 40);
+    border-color: $alert-color--warning;
+    
+    @include color-scheme(dark) {
+        color: $color-secondary-accent;
+    }
+}
+.alert--success{
+    background: desaturate($alert-color--success, 40);
+    border-color: $alert-color--success;
+    
+    @include color-scheme(dark) {
+        color: $color-secondary-accent;
+    }
+}

scss/component/_banner.scss

@@ -0,0 +1,10 @@
+@use '../utilities/main_utilities' as *;
+
+.banner{
+    width: 100%;
+    background: $color-banner;
+
+    @include color-scheme(dark) {
+        background: $color-banner--dark;
+    }
+}

scss/component/_button.scss

@@ -0,0 +1,89 @@
+@use '../utilities/main_utilities' as *;
+
+/* Buttons/Inputs */
+.button,
+button,
+input[type="submit"]
+{
+    color: $color-bg;
+    background: $color-link;
+    border: 2px solid $color-accent;
+    border-radius: $border-radius;
+    display: inline-block;
+    font-size: .9rem;
+    font-weight: bold;
+    line-height: $line-height;
+    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,
+button + button{
+    margin-left: 6px;
+}
+
+.button--small,
+button.button--small,
+input[type="submit"].button--small{
+    padding: .2rem 1.6rem;
+}
+
+.button,
+button,
+input[type="submit"]
+{
+    font-family: $font-family;
+}
+
+.button:hover,
+button:hover,
+input[type="submit"]:hover
+{
+    cursor: pointer;
+    filter: brightness($hover-brightness);
+}
+
+.button:active,
+button:active,
+input[type="submit"]:active
+{
+    filter: brightness($active-brightness);
+}
+
+.button--blue,
+button.button--blue,
+input[type="submit"].button--blue
+{
+    background-color: $color-link;
+    color: $color-bg;
+
+    @include color-scheme(dark) {
+        border-color: $color-link--dark;
+    }
+}
+
+.button--disabled,
+button:disabled,
+input:disabled {
+    background: $color-bg-secondary;
+    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,
+input[type="submit"][disabled]:hover {
+    filter: none;
+}

scss/component/_card.scss

@@ -0,0 +1,35 @@
+@use '../utilities/main_utilities' as *;
+
+/* Cards is a row */
+/* 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-radius: $border-radius;
+    box-shadow: $box-shadow $color-shadow;
+    padding: 1.25rem;
+    /* flex: 0 0 $width-card; */
+    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{
+    align-items: stretch; /* For cards to be "same height", requires the height 100% on card */
+}
+.row--cards .card{
+    height: 100%; /* To make multiple cards next to each other 'same' height */
+}

scss/component/_code.scss

@@ -0,0 +1,41 @@
+@use '../utilities/main_utilities' as *;
+
+code,samp {
+    font-family: monospace;
+    background-color: $color-accent;
+    border-radius: $border-radius;
+    color: $color-text;
+    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;
+    padding: 0.5rem 2rem;
+    display: block;
+    font-size: .9rem;
+    line-height: 1.3rem;
+
+    background-color: $color-accent;
+    border-radius: $border-radius;
+    color: $color-text;
+    overflow-x: auto;
+    
+    white-space: pre-wrap;
+    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 {
+    overflow: auto;
+}

scss/component/_form.scss

@@ -0,0 +1,81 @@
+@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;
+    }
+}
+
+form header {
+    margin: 1.5rem 0;
+    padding: 1.5rem 0;
+}
+
+input,
+label,
+select,
+textarea {
+    display: block;
+    font-size: inherit;
+    max-width: $width-card-wide;
+}
+label {
+    font-weight: bold;
+    margin-bottom: 0.2rem;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+    display: inline-block;
+}
+
+input[type="checkbox"]+label,
+input[type="radio"]+label {
+    display: inline-block;
+    font-weight: normal;
+    position: relative;
+    top: 1px;
+}
+
+input[type="range"] {
+    padding: 0.4rem 0;
+}
+
+input,
+select,
+textarea {
+    border: 1px solid $color-bg-secondary;
+    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"],
+input[type="password"]
+textarea {
+    width: calc(100% - 1.6rem);
+}
+
+input[readonly],
+textarea[readonly] {
+    background-color: $color-bg-secondary;
+
+    @include color-scheme(dark) {
+        background-color: $color-bg-secondary--dark;
+    }
+}

scss/component/_list.scss

@@ -0,0 +1,80 @@
+@use '../utilities/main_utilities' as *;
+
+/* Lists */
+ol li,
+ul li {
+    padding: 0.2rem 0;
+}
+
+.no-bullet-point{
+    list-style: none;
+}
+
+
+/* Inline lists */
+.inline-list {
+    list-style: none;
+    padding: 0;
+    margin-left: -0.5rem; /* To offset the start of li margin. Little jank */
+}
+
+.inline-list li {
+    display: inline-block;
+    margin: 0 0.5rem;
+    position: relative;
+    text-align: left;
+}
+.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;
+}

scss/component/_main_component.scss

@@ -0,0 +1,12 @@
+@use 'button';
+@use 'card';
+@use 'form';
+@use 'alert';
+@use 'list';
+@use 'modal';
+@use 'quote';
+@use 'table';
+@use 'tag';
+@use 'code';
+@use 'banner';
+@use 'accordion';

scss/component/_modal.scss

@@ -0,0 +1,19 @@
+@use '../utilities/main_utilities' as *;
+
+/* Popups */
+.modal{
+    border: 1px solid $color-bg-secondary;
+    border-radius: $border-radius;
+    box-shadow: $box-shadow $color-shadow;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    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

@@ -0,0 +1,24 @@
+@use '../utilities/main_utilities' as *;
+
+/* Quotes */
+blockquote {
+    display: block;
+    font-size: x-large;
+    line-height: $line-height;
+    margin: 1rem auto;
+    max-width: $width-card-medium;
+    padding: 1.5rem 1rem;
+    text-align: $justify-important;
+}
+
+blockquote footer{
+    color: $color-text-secondary;
+    display: block;
+    font-size: small;
+    line-height: $line-height;
+    padding: 1.5rem 0;
+
+    @include color-scheme(dark) {
+        color: $color-text-secondary--dark;
+    }
+}

scss/component/_table.scss

@@ -0,0 +1,60 @@
+@use '../utilities/main_utilities' as *;
+
+/* Tables */
+.table-container{
+    overflow-x: auto;
+}
+table {
+    border: 1px solid $color-bg-secondary;
+    border-radius: $border-radius;
+    border-spacing: 0;
+    max-width: 100%;
+    white-space: nowrap;
+
+    text-align: left;
+    border-collapse: collapse;
+    overflow-wrap: normal;
+
+    @include color-scheme(dark) {
+        border-color: $color-bg-secondary--dark;
+    }
+}
+
+table td,
+table th,
+table tr {
+    padding: 0.4rem 0.8rem;
+    text-align: $justify-important;
+}
+
+table thead tr {
+    background-color: $color-table;
+    /* border-radius: $border-radius; */
+    color: $color-bg;
+    margin: 0;
+    padding: 0;
+
+    @include color-scheme(dark) {
+        background-color: $color-table--dark;
+        color: $color-bg--dark;
+    }
+}
+
+table thead tr {
+    border-top-left-radius: $border-radius;
+}
+
+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;
+    
+    @include color-scheme(dark) {
+        background-color: $color-bg--dark;
+    }
+}

scss/component/_tag.scss

@@ -0,0 +1,20 @@
+@use '../utilities/main_utilities' as *;
+
+/* Tags */
+.tag{
+    background-color: $color-secondary;
+    border-radius: $border-radius;
+    color: $color-bg;
+    font-size: xx-small;
+    font-weight: bold;
+    padding: 0.2rem 1rem;
+    position: relative;
+    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

@@ -0,0 +1,10 @@
+@use '../utilities/main_utilities' as *;
+
+/* Misc helpers */
+.tar{ text-align: right; }
+.tac{ text-align: center; }
+.tal{ text-align: left; }
+
+.no-padd{ padding: 0; }
+
+.hide{ display: none; }

scss/layout/_footer.scss

@@ -0,0 +1,2 @@
+@use '../utilities/main_utilities' as *;
+

scss/layout/_header.scss

@@ -0,0 +1,2 @@
+@use '../utilities/main_utilities' as *;
+

scss/layout/_main_layout.scss

@@ -0,0 +1,3 @@
+@use 'header';
+@use 'footer';
+@use 'nav';

scss/layout/_nav.scss

@@ -0,0 +1,13 @@
+@use '../utilities/main_utilities' as *;
+
+/* Nav */
+.nav a{
+    text-decoration: none;
+}
+.nav a{
+    color: $color-nav;
+
+    @include color-scheme(dark) {
+        color: $color-nav--dark;
+    }
+}

scss/main.scss

@@ -0,0 +1,10 @@
+// Variables first 'cause you never know where you'll need 'em
+// @use 'utilities/main_utilities';
+
+// Get the reset it
+@use 'base/main_base';
+@use 'component/main_component';
+@use 'layout/main_layout';
+@use 'page/main_page';
+
+@use 'helpers/main_helpers';

scss/page/_main_page.scss

@@ -0,0 +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/_main_utilities.scss

@@ -0,0 +1,2 @@
+@forward 'variables';
+@forward 'mixins';

scss/utilities/_mixins.scss

@@ -0,0 +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

@@ -0,0 +1,63 @@
+// Variables
+$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;
+
+$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;
+
+$justify-important: center;
+$justify-normal: left;
+$line-height: 1.5;
+$width-card: 285px;
+$width-card-medium: 460px;
+$width-card-wide: 800px;
+$width-content: 1080px;