changed project structure

moves files from scss to sass directory
moved all variables to different file to simplify theming accross the
whole library

dist/0cb720bfa75c6b183683186e6c132d66.css

@@ -0,0 +1 @@
+/* Colours */

dist/0cb720bfa75c6b183683186e6c132d66.js

@@ -68,7 +68,7 @@ require = (function (modules, cache, entry) {
 
   // Override the current require with this new one
   return newRequire;
-})({14:[function(require,module,exports) {
+})({16:[function(require,module,exports) {
 var bundleURL = null;
 function getBundleURLCached() {
   if (!bundleURL) {
@@ -99,7 +99,7 @@ function getBaseURL(url) {
 exports.getBundleURL = getBundleURLCached;
 exports.getBaseURL = getBaseURL;
 
-},{}],13:[function(require,module,exports) {
+},{}],15:[function(require,module,exports) {
 var bundle = require('./bundle-url');
 
 function updateLink(link) {
@@ -131,7 +131,7 @@ function reloadCSS() {
 
 module.exports = reloadCSS;
 
-},{"./bundle-url":14}],0:[function(require,module,exports) {
+},{"./bundle-url":16}],0:[function(require,module,exports) {
 var global = (1, eval)('this');
 var OldModule = module.bundle.Module;
 function Module() {
@@ -149,7 +149,7 @@ function Module() {
 module.bundle.Module = Module;
 
 if (!module.bundle.parent && typeof WebSocket !== 'undefined') {
-  var ws = new WebSocket('ws://localhost:61816/');
+  var ws = new WebSocket('ws://localhost:55587/');
   ws.onmessage = function(event) {
     var data = JSON.parse(event.data);
 

dist/1e2f52e9c1392de1657f3e960305c1ae.css

@@ -0,0 +1,158 @@
+/* Colours */
+* {
+  box-sizing: border-box;
+  font-family: Verdana, Geneva, Tahoma, sans-serif; }
+
+hr {
+  background-color: #c0c0c0;
+  border: 2px solid #c0c0c0;
+  border-radius: 5px; }
+
+body {
+  margin: 0;
+  padding: 0;
+  background: #f8f8f8; }
+
+main {
+  z-index: 980;
+  position: relative;
+  top: 5.5em;
+  width: 100%;
+  word-break: break-word; }
+
+pre {
+  /*background-color: #d8d8d8*/
+  border-radius: 5px; }
+
+h1 {
+  margin: 0; }
+
+h2 {
+  margin: 0; }
+
+h3 {
+  margin: 0; }
+
+h4 {
+  margin: 0; }
+
+h5 {
+  margin: 0; }
+
+h6 {
+  margin: 0; }
+
+h7 {
+  margin: 0; }
+
+h8 {
+  margin: 0; }
+
+h9 {
+  margin: 0; }
+
+h10 {
+  margin: 0; }
+
+h11 {
+  margin: 0; }
+
+h12 {
+  margin: 0; }
+
+.dev {
+  border: 1px solid black; }
+
+.display {
+  background-color: lightcoral;
+  border: 1px solid red;
+  text-align: center; }
+
+.container {
+  width: calc( 100% - 10em);
+  max-width: 90em;
+  margin: 0 auto; }
+
+.link {
+  color: #2980b9;
+  text-decoration: none;
+  font-size: 12pt; }
+
+div[class^="col-"] {
+  padding: 1rem 0; }
+
+.row {
+  display: flex;
+  flex-wrap: wrap; }
+
+.col-1 {
+  flex: 0 0 8.33333%; }
+
+.col-offset-1 {
+  margin-left: 8.33333%; }
+
+.col-2 {
+  flex: 0 0 16.66667%; }
+
+.col-offset-2 {
+  margin-left: 16.66667%; }
+
+.col-3 {
+  flex: 0 0 25%; }
+
+.col-offset-3 {
+  margin-left: 25%; }
+
+.col-4 {
+  flex: 0 0 33.33333%; }
+
+.col-offset-4 {
+  margin-left: 33.33333%; }
+
+.col-5 {
+  flex: 0 0 41.66667%; }
+
+.col-offset-5 {
+  margin-left: 41.66667%; }
+
+.col-6 {
+  flex: 0 0 50%; }
+
+.col-offset-6 {
+  margin-left: 50%; }
+
+.col-7 {
+  flex: 0 0 58.33333%; }
+
+.col-offset-7 {
+  margin-left: 58.33333%; }
+
+.col-8 {
+  flex: 0 0 66.66667%; }
+
+.col-offset-8 {
+  margin-left: 66.66667%; }
+
+.col-9 {
+  flex: 0 0 75%; }
+
+.col-offset-9 {
+  margin-left: 75%; }
+
+.col-10 {
+  flex: 0 0 83.33333%; }
+
+.col-offset-10 {
+  margin-left: 83.33333%; }
+
+.col-11 {
+  flex: 0 0 91.66667%; }
+
+.col-offset-11 {
+  margin-left: 91.66667%; }
+
+.col-12 {
+  flex: 0 0 100%; }
+
+.col-offset-12 {
+  margin-left: 100%; }

dist/33f23c9be750d12cdb4f825c7658d390.js

@@ -1,73 +0,0 @@
-// modules are defined as an array
-// [ module function, map of requires ]
-//
-// map of requires is short require name -> numeric require
-//
-// anything defined in a previous bundle is accessed via the
-// orig method which is the require for previous bundles
-
-require = (function (modules, cache, entry) {
-  // Save the require from previous bundle to this closure if any
-  var previousRequire = typeof require === "function" && require;
-
-  function newRequire(name, jumped) {
-    if (!cache[name]) {
-      if (!modules[name]) {
-        // if we cannot find the module within our internal map or
-        // cache jump to the current global require ie. the last bundle
-        // that was added to the page.
-        var currentRequire = typeof require === "function" && require;
-        if (!jumped && currentRequire) {
-          return currentRequire(name, true);
-        }
-
-        // If there are other bundles on this page the require from the
-        // previous one is saved to 'previousRequire'. Repeat this as
-        // many times as there are bundles until the module is found or
-        // we exhaust the require chain.
-        if (previousRequire) {
-          return previousRequire(name, true);
-        }
-
-        var err = new Error('Cannot find module \'' + name + '\'');
-        err.code = 'MODULE_NOT_FOUND';
-        throw err;
-      }
-      
-      localRequire.resolve = resolve;
-
-      var module = cache[name] = new newRequire.Module;
-
-      modules[name][0].call(module.exports, localRequire, module, module.exports);
-    }
-
-    return cache[name].exports;
-
-    function localRequire(x){
-      return newRequire(localRequire.resolve(x));
-    }
-
-    function resolve(x){
-      return modules[name][1][x] || x;
-    }
-  }
-
-  function Module() {
-    this.bundle = newRequire;
-    this.exports = {};
-  }
-
-  newRequire.Module = Module;
-  newRequire.modules = modules;
-  newRequire.cache = cache;
-  newRequire.parent = previousRequire;
-
-  for (var i = 0; i < entry.length; i++) {
-    newRequire(entry[i]);
-  }
-
-  // Override the current require with this new one
-  return newRequire;
-})({10:[function(require,module,exports) {
-var e=document.querySelectorAll("code");e.forEach(e=>{let a=e.innerHTML.toString();var r="";for(let e=0;e<a.length;e++)switch(a.charAt(e)){default:r+=a.charAt(e);break;case">":r+="&gt;";break;case"<":r+="&lt;";break;case"&":r+="&amp;";break;case'"':r+="&quot;"}e.innerHTML=r});
-},{}]},{},[10])

dist/4cfae4bafd636610db6a870fd9806a4a.css

@@ -0,0 +1,98 @@
+/* Colours */
+.embed {
+  background-color: #d8d8d8;
+  border-radius: 5px;
+  padding: 5px; }
+
+.alert-primary {
+  border-radius: 2px;
+  background-color: #3498db;
+  border: 1px solid #2980b9;
+  padding: 1rem;
+  color: white; }
+
+.alert-danger {
+  border-radius: 2px;
+  background-color: #e74c3c;
+  border: 1px solid #c0392b;
+  padding: 1rem;
+  color: white; }
+
+.alert-warning {
+  border-radius: 2px;
+  background-color: #f1c40f;
+  border: 1px solid #f39c12;
+  padding: 1rem;
+  color: white; }
+
+.alert-success {
+  border-radius: 2px;
+  background-color: #2ecc71;
+  border: 1px solid #27ae60;
+  padding: 1rem;
+  color: white; }
+
+.notification-primary {
+  width: 100%;
+  display: flex;
+  padding: 5px;
+  border: 2px solid #3498db;
+  border-radius: 2px; }
+
+.notification-primary h2 {
+  border-right: 0.3rem solid #3498db;
+  padding: 5px;
+  margin-right: 5px;
+  min-width: 70px;
+  height: auto;
+  display: flex; }
+
+.notification-danger {
+  width: 100%;
+  display: flex;
+  padding: 5px;
+  border: 2px solid #e74c3c;
+  border-radius: 2px; }
+
+.notification-danger h2 {
+  border-right: 0.3rem solid #e74c3c;
+  padding: 5px;
+  margin-right: 5px;
+  min-width: 70px;
+  height: auto;
+  display: flex; }
+
+.notification-warning {
+  width: 100%;
+  display: flex;
+  padding: 5px;
+  border: 2px solid #f1c40f;
+  border-radius: 2px; }
+
+.notification-warning h2 {
+  border-right: 0.3rem solid #f1c40f;
+  padding: 5px;
+  margin-right: 5px;
+  min-width: 70px;
+  height: auto;
+  display: flex; }
+
+.notification-success {
+  width: 100%;
+  display: flex;
+  padding: 5px;
+  border: 2px solid #2ecc71;
+  border-radius: 2px; }
+
+.notification-success h2 {
+  border-right: 0.3rem solid #2ecc71;
+  padding: 5px;
+  margin-right: 5px;
+  min-width: 70px;
+  height: auto;
+  display: flex; }
+
+.notification-body {
+  line-height: 30pt;
+  font-size: 15pt;
+  word-wrap: break-word; }

dist/569bb0a6178c618a412288662cf2d775.css

@@ -0,0 +1,43 @@
+/* Colours */
+/* Button Style Classes */
+.btn {
+  border-radius: 5px;
+  border-width: 2px;
+  padding: 5px;
+  transition: 50ms; }
+
+.btn-primary {
+  background-color: #3498db;
+  border: 2px solid #2980b9;
+  color: white; }
+
+.btn-danger {
+  background-color: #e74c3c;
+  border: 2px solid #c0392b;
+  color: white; }
+
+.btn-warning {
+  background-color: #f1c40f;
+  border: 2px solid #f39c12;
+  color: white; }
+
+.btn-success {
+  background-color: #2ecc71;
+  border: 2px solid #27ae60;
+  color: white; }
+
+/* Hover classes */
+.btn:hover {
+  background-color: rgba(216, 216, 216, 0.847); }
+
+.btn-primary:hover {
+  background-color: #2980b9; }
+
+.btn-danger:hover {
+  background-color: #c0392b; }
+
+.btn-warning:hover {
+  background-color: #f39c12; }
+
+.btn-success:hover {
+  background-color: #27ae60; }

dist/5ffe5b63075346d77633136e983e606d.css

@@ -1 +0,0 @@
-.switch{position:relative;display:inline-block;width:60px;height:34px}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc}.slider,.slider:before{position:absolute;transition:.4s}.slider:before{content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff}input:checked+.slider{background-color:#3498db}input:focus+.slider{box-shadow:0 0 1px #3498db}input:checked+.slider:before{transform:translateX(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.range-slider{-webkit-appearance:none;border-radius:5px;width:100%;height:25px;background:#d8d8d8;outline:none;opacity:.7;transition:opacity .2s}.range-slider:hover{opacity:1}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:25px;height:25px;background:#5b6568;cursor:pointer}.range-slider::-moz-range-thumb{width:25px;height:25px;background:#5b6568;cursor:pointer}.range-slider-rounded{-webkit-appearance:none;border-radius:5px;width:100%;height:15px;background:#d8d8d8;outline:none;opacity:.7;transition:opacity .2s}.range-slider-rounded:hover{opacity:1}.range-slider-rounded::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border-radius:50%;width:25px;height:25px;background:#5b6568;cursor:pointer}.range-slider-rounded::-moz-range-thumb{width:25px;height:25px;background:#ecf0f1;cursor:pointer}

dist/61e12dcf19fe3b7df325ac0ba36a65a7.js

@@ -0,0 +1,216 @@
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+
+require = (function (modules, cache, entry) {
+  // Save the require from previous bundle to this closure if any
+  var previousRequire = typeof require === "function" && require;
+
+  function newRequire(name, jumped) {
+    if (!cache[name]) {
+      if (!modules[name]) {
+        // if we cannot find the module within our internal map or
+        // cache jump to the current global require ie. the last bundle
+        // that was added to the page.
+        var currentRequire = typeof require === "function" && require;
+        if (!jumped && currentRequire) {
+          return currentRequire(name, true);
+        }
+
+        // If there are other bundles on this page the require from the
+        // previous one is saved to 'previousRequire'. Repeat this as
+        // many times as there are bundles until the module is found or
+        // we exhaust the require chain.
+        if (previousRequire) {
+          return previousRequire(name, true);
+        }
+
+        var err = new Error('Cannot find module \'' + name + '\'');
+        err.code = 'MODULE_NOT_FOUND';
+        throw err;
+      }
+      
+      localRequire.resolve = resolve;
+
+      var module = cache[name] = new newRequire.Module;
+
+      modules[name][0].call(module.exports, localRequire, module, module.exports);
+    }
+
+    return cache[name].exports;
+
+    function localRequire(x){
+      return newRequire(localRequire.resolve(x));
+    }
+
+    function resolve(x){
+      return modules[name][1][x] || x;
+    }
+  }
+
+  function Module() {
+    this.bundle = newRequire;
+    this.exports = {};
+  }
+
+  newRequire.Module = Module;
+  newRequire.modules = modules;
+  newRequire.cache = cache;
+  newRequire.parent = previousRequire;
+
+  for (var i = 0; i < entry.length; i++) {
+    newRequire(entry[i]);
+  }
+
+  // Override the current require with this new one
+  return newRequire;
+})({13:[function(require,module,exports) {
+var code = document.querySelectorAll("code");
+
+// code embed
+code.forEach(c => {
+    let code = c.innerHTML.toString();
+    var output = "";
+    for(let i = 0; i < code.length; i++){
+        switch(code.charAt(i)){
+            default: output += code.charAt(i); break;
+            case ">": output += "&gt;"; break;
+            case "<": output += "&lt;"; break;
+            case "&": output += "&amp;"; break;
+            case "\"": output += "&quot;"; break;
+        }
+    }
+    c.innerHTML = output;
+});
+
+// TODO JavaScript Input value return
+// Current way.. 
+// -------------------------------------
+// get input by getting the input object
+// catch oninput event inside a function
+// Handle it inside the function
+// -------------------------------------
+},{}],0:[function(require,module,exports) {
+var global = (1, eval)('this');
+var OldModule = module.bundle.Module;
+function Module() {
+  OldModule.call(this);
+  this.hot = {
+    accept: function (fn) {
+      this._acceptCallback = fn || function () {};
+    },
+    dispose: function (fn) {
+      this._disposeCallback = fn;
+    }
+  };
+}
+
+module.bundle.Module = Module;
+
+if (!module.bundle.parent && typeof WebSocket !== 'undefined') {
+  var ws = new WebSocket('ws://localhost:55587/');
+  ws.onmessage = function(event) {
+    var data = JSON.parse(event.data);
+
+    if (data.type === 'update') {
+      data.assets.forEach(function (asset) {
+        hmrApply(global.require, asset);
+      });
+
+      data.assets.forEach(function (asset) {
+        if (!asset.isNew) {
+          hmrAccept(global.require, asset.id);
+        }
+      });
+    }
+
+    if (data.type === 'reload') {
+      ws.close();
+      ws.onclose = function () {
+        window.location.reload();
+      }
+    }
+
+    if (data.type === 'error-resolved') {
+      console.log('[parcel] ✨ Error resolved');
+    }
+
+    if (data.type === 'error') {
+      console.error('[parcel] 🚨  ' + data.error.message + '\n' + 'data.error.stack');
+    }
+  };
+}
+
+function getParents(bundle, id) {
+  var modules = bundle.modules;
+  if (!modules) {
+    return [];
+  }
+
+  var parents = [];
+  var k, d, dep;
+
+  for (k in modules) {
+    for (d in modules[k][1]) {
+      dep = modules[k][1][d];
+      if (dep === id || (Array.isArray(dep) && dep[dep.length - 1] === id)) {
+        parents.push(+k);
+      }
+    }
+  }
+
+  if (bundle.parent) {
+    parents = parents.concat(getParents(bundle.parent, id));
+  }
+
+  return parents;
+}
+
+function hmrApply(bundle, asset) {
+  var modules = bundle.modules;
+  if (!modules) {
+    return;
+  }
+
+  if (modules[asset.id] || !bundle.parent) {
+    var fn = new Function('require', 'module', 'exports', asset.generated.js);
+    asset.isNew = !modules[asset.id];
+    modules[asset.id] = [fn, asset.deps];
+  } else if (bundle.parent) {
+    hmrApply(bundle.parent, asset);
+  }
+}
+
+function hmrAccept(bundle, id) {
+  var modules = bundle.modules;
+  if (!modules) {
+    return;
+  }
+
+  if (!modules[id] && bundle.parent) {
+    return hmrAccept(bundle.parent, id);
+  }
+
+  var cached = bundle.cache[id];
+  if (cached && cached.hot._disposeCallback) {
+    cached.hot._disposeCallback();
+  }
+
+  delete bundle.cache[id];
+  bundle(id);
+
+  cached = bundle.cache[id];
+  if (cached && cached.hot && cached.hot._acceptCallback) {
+    cached.hot._acceptCallback();
+    return true;
+  }
+
+  return getParents(global.require, id).some(function (id) {
+    return hmrAccept(global.require, id)
+  });
+}
+},{}]},{},[0,13])

dist/66d76bdda36bae1526edd730130bed9d.css

@@ -1 +0,0 @@
-.embed{background-color:#d8d8d8;border-radius:5px;padding:5px}.alert-primary{border-radius:2px;background-color:#3498db;border:1px solid #2980b9;padding:1rem;color:#fff}.alert-danger{border-radius:2px;background-color:#e74c3c;border:1px solid #c0392b;padding:1rem;color:#fff}.alert-warning{border-radius:2px;background-color:#f1c40f;border:1px solid #f39c12;padding:1rem;color:#fff}.alert-success{border-radius:2px;background-color:#2ecc71;border:1px solid #27ae60;padding:1rem;color:#fff}.notification-primary{width:100%;display:flex;padding:5px;border:2px solid #3498db;border-radius:2px}.notification-primary h2{border-right:.3rem solid #3498db;padding:5px;margin-right:5px;min-width:70px;height:auto;display:flex}.notification-danger{width:100%;display:flex;padding:5px;border:2px solid #e74c3c;border-radius:2px}.notification-danger h2{border-right:.3rem solid #e74c3c;padding:5px;margin-right:5px;min-width:70px;height:auto;display:flex}.notification-warning{width:100%;display:flex;padding:5px;border:2px solid #f1c40f;border-radius:2px}.notification-warning h2{border-right:.3rem solid #f1c40f;padding:5px;margin-right:5px;min-width:70px;height:auto;display:flex}.notification-success{width:100%;display:flex;padding:5px;border:2px solid #2ecc71;border-radius:2px}.notification-success h2{border-right:.3rem solid #2ecc71;padding:5px;margin-right:5px;min-width:70px;height:auto;display:flex}.notification-body{line-height:30pt;font-size:15pt;word-wrap:break-word}

dist/79522207f6bb4649efd25deca7a98f4e.css

@@ -0,0 +1,153 @@
+/* Colours */
+header {
+  background: #f8f8f8;
+  text-align: center;
+  height: 30px;
+  z-index: 999;
+  width: 100%;
+  height: auto;
+  padding: 10px; }
+
+.locked-top {
+  top: 0;
+  position: fixed; }
+
+.nav-toggle {
+  display: none; }
+
+.nav-toggle-label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin-left: 1em;
+  height: 100%;
+  display: flex;
+  align-items: center; }
+
+.nav-toggle-label span,
+.nav-toggle-label span::before,
+.nav-toggle-label span::after {
+  display: block;
+  background: white;
+  height: 2px;
+  width: 2em;
+  border-radius: 2px; }
+
+.nav-toggle-label span::before,
+.nav-toggle-label span::after {
+  content: '';
+  position: absolute; }
+
+.nav-toggle-label span::before {
+  bottom: 30px; }
+
+.nav-toggle-label span::after {
+  top: 30px; }
+
+.nav-locked {
+  top: 100%;
+  left: 0;
+  position: absolute; }
+
+nav {
+  text-align: left;
+  width: 100%;
+  background: #f8f8f8;
+  display: none;
+  transform: scale(1, 0);
+  transform-origin: top;
+  transition: 400ms;
+  transition: transform 400ms ease-in-out; }
+
+nav ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none; }
+
+nav li {
+  margin-bottom: 1em;
+  margin-left: 1em; }
+
+nav a {
+  text-decoration: none;
+  font-size: 1.2rem;
+  text-transform: uppercase;
+  color: #2e2e2e;
+  opacity: 0; }
+
+nav a:hover {
+  color: #a5a5a5; }
+
+.nav-toggle:checked ~ nav {
+  display: block;
+  transform: scale(1, 1);
+  transition: 400ms; }
+
+.nav-toggle:checked ~ nav a {
+  opacity: 1;
+  transition: opacity 150ms ease-in-out; }
+
+@media screen and (min-width: 800px) {
+  .nav-toggle-label {
+    display: none; } }
+
+header {
+  display: grid;
+  grid-template-columns: 1fr auto minmax(600px, 1fr) 1fr; }
+
+nav {
+  all: unset;
+  display: flex;
+  align-items: center; }
+
+nav a {
+  opacity: 1; }
+
+nav ul {
+  display: flex; }
+
+nav li {
+  margin-left: 1em;
+  margin-bottom: 0;
+  list-style: none; }
+
+.nav-logo-left {
+  grid-column: 2 / span 1; }
+
+.nav-left {
+  all: unset;
+  grid-column: 3 / 4;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center; }
+
+.nav-left ul {
+  display: flex;
+  justify-content: flex-end; }
+
+.sidebar-wrapper {
+  display: flex; }
+
+.sidebar-wrapper .sidebar-content {
+  width: 100%; }
+
+.sidebar-wrapper .sidebar-left {
+  padding: 0;
+  margin: 0;
+  margin-left: 0;
+  padding-right: 5px;
+  height: 100%; }
+
+.sidebar-wrapper .sidebar-left .sidebar-menu ul {
+  width: fit-content; }
+
+.sidebar-wrapper .sidebar-left .sidebar-menu .sidebar-title {
+  width: max-content;
+  font-size: 20pt;
+  padding-right: 5px; }
+
+.sidebar-wrapper .sidebar-left .sidebar-menu .sidebar-item li {
+  width: fit-content;
+  color: #2980b9;
+  text-decoration: none;
+  font-size: 12pt; }

dist/b8b1bea874564009706fb4e931edb7df.css

@@ -1 +0,0 @@
-header{background:#f1f1f1;text-align:center;height:30px;z-index:1;width:100%;height:auto;padding:10px}.locked-top{top:0;position:fixed}.nav-toggle{display:none}.nav-toggle-label{position:absolute;top:0;left:0;margin-left:1em;height:100%;display:flex;align-items:center}.nav-toggle-label span,.nav-toggle-label span:after,.nav-toggle-label span:before{display:block;background:#fff;height:2px;width:2em;border-radius:2px}.nav-toggle-label span:after,.nav-toggle-label span:before{content:"";position:absolute}.nav-toggle-label span:before{bottom:30px}.nav-toggle-label span:after{top:30px}.nav-locked{top:100%;left:0;position:absolute}nav{text-align:left;width:100%;background:#f1f1f1;display:none;transform:scaleY(0);transform-origin:top;transition:.4s;transition:transform .4s ease-in-out}nav ul{margin:0;padding:0;list-style-type:none}nav li{margin-bottom:1em}nav a{text-decoration:none;font-size:1.2rem;text-transform:uppercase;color:#2e2e2e;opacity:0}nav a:hover{color:#a5a5a5}.nav-toggle:checked~nav{display:block;transform:scale(1);transition:.4s}.nav-toggle:checked~nav a{opacity:1;transition:opacity .15s ease-in-out}@media screen and (min-width:800px){.nav-toggle-label{display:none}}header{display:grid;grid-template-columns:1fr auto minmax(600px,1fr) 1fr}nav{all:unset;display:flex;align-items:center}nav a{opacity:1}nav ul{display:flex}nav li{margin-left:1em;margin-bottom:0;list-style:none}.nav-logo-left{grid-column:2/span 1}.nav-left{all:unset;grid-column:3/4;align-items:center}.nav-left,.nav-left ul{display:flex;justify-content:flex-end}.sidebar-wrapper{display:flex}.sidebar-wrapper .sidebar-content{width:100%}.sidebar-wrapper .sidebar-left{padding:0;margin:0;margin-left:0;padding-right:5px;height:100%}.sidebar-wrapper .sidebar-left .sidebar-menu ul{width:fit-content}.sidebar-wrapper .sidebar-left .sidebar-menu .sidebar-title{width:max-content;font-size:20pt;padding-right:5px}.sidebar-wrapper .sidebar-left .sidebar-menu .sidebar-item li{width:fit-content;color:#2980b9;text-decoration:none;font-size:12pt}

dist/e963a28fcd9397a02445457ce0abcb2f.css

@@ -0,0 +1,112 @@
+/* Colours */
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px; }
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0; }
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s; }
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s; }
+
+input:checked + .slider {
+  background-color: #3498db; }
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #3498db; }
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px); }
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px; }
+
+.slider.round:before {
+  border-radius: 50%; }
+
+/* Range slider */
+.range-slider {
+  -webkit-appearance: none;
+  border-radius: 5px;
+  width: 100%;
+  height: 25px;
+  background: #d8d8d8;
+  outline: none;
+  opacity: 0.7;
+  -webkit-transition: .2s;
+  transition: opacity .2s; }
+
+.range-slider:hover {
+  opacity: 1; }
+
+.range-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 25px;
+  height: 25px;
+  background: #5b6568;
+  cursor: pointer; }
+
+.range-slider::-moz-range-thumb {
+  width: 25px;
+  height: 25px;
+  background: #5b6568;
+  cursor: pointer; }
+
+.range-slider-rounded {
+  -webkit-appearance: none;
+  border-radius: 5px;
+  width: 100%;
+  height: 15px;
+  background: #d8d8d8;
+  outline: none;
+  opacity: 0.7;
+  -webkit-transition: .2s;
+  transition: opacity .2s; }
+
+.range-slider-rounded:hover {
+  opacity: 1; }
+
+.range-slider-rounded::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  border-radius: 50%;
+  width: 25px;
+  height: 25px;
+  background: #5b6568;
+  cursor: pointer; }
+
+.range-slider-rounded::-moz-range-thumb {
+  width: 25px;
+  height: 25px;
+  background: #ecf0f1;
+  cursor: pointer; }

dist/ef19487056b129c8f3eda17f9543ab70.css

@@ -1 +0,0 @@
-*{box-sizing:border-box;font-family:Verdana,Geneva,Tahoma,sans-serif}hr{background-color:silver;border:2px solid silver;border-radius:5px}body{margin:0;padding:0;background:#f8f8f8}main{z-index:1;position:relative;top:5.5em;width:100%;word-break:break-word}pre{border-radius:5px}h1,h2,h3,h4,h5,h6,h7,h8,h9,h10,h11,h12{margin:0}.dev{border:1px solid #000}.display{background-color:#f08080;border:1px solid red;text-align:center}.container{width:calc(100% - 10em);max-width:90em;margin:0 auto}.link{color:#2980b9;text-decoration:none;font-size:12pt}div[class^=col-]{padding:1rem 0}.row{display:flex;flex-wrap:wrap}.col-1{flex:0 0 8.33333%}.col-offset-1{margin-left:8.33333%}.col-2{flex:0 0 16.66667%}.col-offset-2{margin-left:16.66667%}.col-3{flex:0 0 25%}.col-offset-3{margin-left:25%}.col-4{flex:0 0 33.33333%}.col-offset-4{margin-left:33.33333%}.col-5{flex:0 0 41.66667%}.col-offset-5{margin-left:41.66667%}.col-6{flex:0 0 50%}.col-offset-6{margin-left:50%}.col-7{flex:0 0 58.33333%}.col-offset-7{margin-left:58.33333%}.col-8{flex:0 0 66.66667%}.col-offset-8{margin-left:66.66667%}.col-9{flex:0 0 75%}.col-offset-9{margin-left:75%}.col-10{flex:0 0 83.33333%}.col-offset-10{margin-left:83.33333%}.col-11{flex:0 0 91.66667%}.col-offset-11{margin-left:91.66667%}.col-12{flex:0 0 100%}.col-offset-12{margin-left:100%}

dist/index.html

@@ -1,4 +1,78 @@
-<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sass test</title> <link rel="stylesheet" href="/dist/ef19487056b129c8f3eda17f9543ab70.css"> <link rel="stylesheet" href="/dist/b8b1bea874564009706fb4e931edb7df.css"> <link rel="stylesheet" href="/dist/66d76bdda36bae1526edd730130bed9d.css"> <link rel="stylesheet" href="/dist/5ffe5b63075346d77633136e983e606d.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css"> </head> <body> <header class="locked-top"> <h1 class="nav-logo">Logo</h1> <input id="nav-toggle" type="checkbox" class="nav-toggle"> <label for="nav-toggle" class="nav-toggle-label"> <span></span> </label> <nav> <ul> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> </ul> </nav> </header> <main> <div class="container"> <h1>Toggle Slide</h1> <br>  <label class="switch"> <input type="checkbox"> <span class="slider"></span> </label>  <label class="switch"> <input type="checkbox"> <span class="slider round"></span> </label> <br><br> <h1>Slider</h1> <br> <input type="range" min="1" max="100" value="0" class="range-slider-rounded" id="slider"> <span>Span Value: </span><span id="output">0</span>  <br><br> <div class="embed"> <h1>Embed</h1> <hr> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer</p> </div> <br> <h1>Code Embed</h1> <pre>
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Sass test</title>
+        <link rel="stylesheet" href="/dist/0cb720bfa75c6b183683186e6c132d66.css">
+        <link rel="stylesheet" href="/dist/1e2f52e9c1392de1657f3e960305c1ae.css">
+        <link rel="stylesheet" href="/dist/79522207f6bb4649efd25deca7a98f4e.css">
+        <link rel="stylesheet" href="/dist/4cfae4bafd636610db6a870fd9806a4a.css">
+        <link rel="stylesheet" href="/dist/e963a28fcd9397a02445457ce0abcb2f.css">
+        <link rel="stylesheet" href="/dist/569bb0a6178c618a412288662cf2d775.css">
+        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
+    </head>
+    <body>
+        <header class="locked-top">
+            <h1 class="nav-logo">Logo</h1>
+            <input id="nav-toggle" type="checkbox" class="nav-toggle">
+            <label for="nav-toggle" class="nav-toggle-label">
+                <span></span>
+            </label>
+            <nav>
+                <ul>
+                    <li><a href="#">Test</a></li>
+                    <li><a href="#">Test</a></li>
+                    <li><a href="#">Test</a></li>
+                    <li><a href="#">Test</a></li>
+                    <li><a href="#">Test</a></li>
+                </ul>
+            </nav>
+        </header>
+        <main>
+            <div class="container">
+                <h1>Button Test</h1>
+                <button class="btn">test</button>
+                <button class="btn btn-primary">test</button>
+                <button class="btn btn-warning">test</button>
+                <button class="btn btn-danger">test</button>
+                <button class="btn btn-success">test</button>
+                <h1>Toggle Slide</h1>
+                <br>
+                <!-- Rectangular switch -->
+                <label class="switch">
+                    <input type="checkbox">
+                    <span class="slider"></span>
+                </label>
+                <!-- Rounded switch -->
+                <label class="switch">
+                    <input type="checkbox">
+                    <span class="slider round"></span>
+                </label>  
+                <br><br>
+                <h1>Slider</h1>
+                <br>
+                <input type="range" min="1" max="100" value="0" class="range-slider-rounded" id="slider">
+                <span>Span Value: </span><span id="output">0</span>
+                <script>
+                    var slider = document.getElementById("slider");
+                    var output = document.getElementById("output");
+                    output.innerHTML = slider.value; // Display the default slider value
+
+                    // Update the current slider value (each time you drag the slider handle)
+                    slider.oninput = function() {
+                        output.innerHTML = this.value;
+                    }
+                </script>
+                <br><br>
+                <div class="embed">
+                    <h1>Embed</h1>
+                    <hr>
+                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer</p>
+                </div>
+                <br>
+                <h1>Code Embed</h1>
+                <pre>
                     <code class="language-html">
 <h1>test</h1>
 code here, escape it yourself.
@@ -6,7 +80,24 @@ code here, escape it yourself.
 <link rel="stylesheet" href="https://steevlp.github.io/steevcss/dist/steevcss.bundled.min.css">
 
                     </code>
-                </pre> <header> <h1 class="nav-logo">Logo</h1> <input id="nav-toggle" type="checkbox" class="nav-toggle"> <label for="nav-toggle" class="nav-toggle-label"> <span></span> </label> <nav> <ul> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> </ul> </nav> </header> <pre>
+                </pre>
+                <header>
+                    <h1 class="nav-logo">Logo</h1>
+                    <input id="nav-toggle" type="checkbox" class="nav-toggle">
+                    <label for="nav-toggle" class="nav-toggle-label">
+                        <span></span>
+                    </label>
+                    <nav>
+                        <ul>
+                            <li><a href="#">Test</a></li>
+                            <li><a href="#">Test</a></li>
+                            <li><a href="#">Test</a></li>
+                            <li><a href="#">Test</a></li>
+                            <li><a href="#">Test</a></li>
+                        </ul>
+                    </nav>
+                </header>
+                <pre>
                     <code class="language-html">
 <header>
     <h1 class="nav-logo">Logo</h1>
@@ -25,4 +116,56 @@ code here, escape it yourself.
     </nav>
 </header>
                     </code>
-                </pre> <h1 style="text-align:center">Alert Elements</h1> <div class="alert-primary"> test </div><br> <div class="alert-danger"> test </div><br> <div class="alert-warning"> test </div><br> <div class="alert-success"> test </div> <br> <h1 style="text-align:center">Notification Elements</h1> <div class="notification-primary"> <h2>ein kleiner test satz</h2> <span class="notification-body">Funktion test des objektes</span> </div> <br> <div class="notification-danger"> <h2>ein kleiner test satz</h2> <span class="notification-body">Funktion test des objektes</span> </div> <br> <div class="notification-warning"> <h2>ein kleiner test satz</h2> <span class="notification-body">Funktion test des objektes</span> </div> <br> <div class="notification-success"> <h2>ein kleiner test satz</h2> <span class="notification-body">Funktion test des objektes</span> </div> <br> <h1 style="text-align:center">CSS Grid</h1> <div class="row"> <div class="col-12 display"><h1>12</h1></div> <div class="col-11 display"><h1>11</h1></div> <div class="col-1 display"><h1>1</h1></div> <div class="col-10 display"><h1>10</h1></div> <div class="col-2 display"><h1>2</h1></div> <div class="col-9 display"><h1>9</h1></div> <div class="col-3 display"><h1>3</h1></div> <div class="col-8 display"><h1>8</h1></div> <div class="col-4 display"><h1>4</h1></div> <div class="col-7 display"><h1>7</h1></div> <div class="col-5 display"><h1>5</h1></div> <div class="col-6 display"><h1>6</h1></div> <div class="col-6 display"><h1>6</h1></div> </div> </div> </main> <br><br><br> <br><br><br> <script src="/dist/33f23c9be750d12cdb4f825c7658d390.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script> <script>var slider=document.getElementById("slider"),output=document.getElementById("output");output.innerHTML=slider.value,slider.oninput=function(){output.innerHTML=this.value},hljs.highlightAll();</script> </body> </html>
+                </pre>
+                <h1 style="text-align: center;">Alert Elements</h1>
+                <div class="alert-primary"> test </div><br>
+                <div class="alert-danger"> test </div><br>
+                <div class="alert-warning"> test </div><br>
+                <div class="alert-success"> test </div>
+                <br>
+                <h1 style="text-align: center;">Notification Elements</h1>
+                <div class="notification-primary"> 
+                    <h2>ein kleiner test satz</h2>
+                    <span class="notification-body">Funktion test des objektes</span>
+                </div>
+                <br>
+                <div class="notification-danger"> 
+                    <h2>ein kleiner test satz</h2>
+                    <span class="notification-body">Funktion test des objektes</span>
+                </div>
+                <br>
+                <div class="notification-warning"> 
+                    <h2>ein kleiner test satz</h2>
+                    <span class="notification-body">Funktion test des objektes</span>
+                </div>
+                <br>
+                <div class="notification-success"> 
+                    <h2>ein kleiner test satz</h2>
+                    <span class="notification-body">Funktion test des objektes</span>
+                </div>
+                <br>
+                <h1 style="text-align: center;">CSS Grid</h1>
+                <div class="row">
+                    <div class="col-12 display"><h1>12</h1></div>
+                    <div class="col-11 display"><h1>11</h1></div>
+                    <div class="col-1 display"><h1>1</h1></div>
+                    <div class="col-10 display"><h1>10</h1></div>
+                    <div class="col-2 display"><h1>2</h1></div>
+                    <div class="col-9 display"><h1>9</h1></div>
+                    <div class="col-3 display"><h1>3</h1></div>
+                    <div class="col-8 display"><h1>8</h1></div>
+                    <div class="col-4 display"><h1>4</h1></div>
+                    <div class="col-7 display"><h1>7</h1></div>
+                    <div class="col-5 display"><h1>5</h1></div>
+                    <div class="col-6 display"><h1>6</h1></div>
+                    <div class="col-6 display"><h1>6</h1></div>
+                </div>
+            </div>
+        </main>
+        <br><br><br>
+        <br><br><br>
+        <script src="/dist/61e12dcf19fe3b7df325ac0ba36a65a7.js"></script>
+        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
+        <script>hljs.highlightAll();</script>
+    </body>
+</html>

src/index.html

@@ -4,10 +4,12 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Sass test</title>
-        <link rel="stylesheet" href="scss/main.sass">
-        <link rel="stylesheet" href="scss/navbar.sass">
-        <link rel="stylesheet" href="scss/messaging.sass">
-        <link rel="stylesheet" href="scss/selector.sass">
+        <link rel="stylesheet" href="sass/variables.sass">
+        <link rel="stylesheet" href="sass/main.sass">
+        <link rel="stylesheet" href="sass/navbar.sass">
+        <link rel="stylesheet" href="sass/messaging.sass">
+        <link rel="stylesheet" href="sass/selector.sass">
+        <link rel="stylesheet" href="sass/button.sass">
         <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
     </head>
     <body>
@@ -29,6 +31,12 @@
         </header>
         <main>
             <div class="container">
+                <h1>Button Test</h1>
+                <button class="btn">test</button>
+                <button class="btn btn-primary">test</button>
+                <button class="btn btn-warning">test</button>
+                <button class="btn btn-danger">test</button>
+                <button class="btn btn-success">test</button>
                 <h1>Toggle Slide</h1>
                 <br>
                 <!-- Rectangular switch -->

src/sass/button.sass

@@ -1,15 +1,4 @@
-$primBG: rgb(248, 248, 248)
-$primary: #3498db
-$primary_dark: #2980b9
-$danger: #e74c3c
-$danger_dark: #c0392b
-$warning: #f1c40f
-$warning_dark: #f39c12
-$success: #2ecc71
-$success_dark: #27ae60
-$border_width: 2px
-$border_radius: 5px
-$padding: 5px
+@import variables
 
 /* Button Style Classes */
 .btn
@@ -36,7 +25,7 @@ $padding: 5px
 
 /* Hover classes */
 .btn:hover
-    background-color: #d8d8d8d8
+    background-color: rgba(216, 216, 216, 0.847)
 .btn-primary:hover
     background-color: $primary_dark
 .btn-danger:hover

src/sass/forms.sass

@@ -0,0 +1,5 @@
+@import variables
+    /* flat forms*/
+.forms 
+    background-color: $darkbg
+    border: 

src/sass/main.sass

@@ -1,13 +1,4 @@
-$primBG: rgb(248, 248, 248)
-$columns: 12
-$primary: #3498db
-$primary_dark: #2980b9
-$danger: #e74c3c
-$danger_dark: #c0392b
-$warning: #f1c40f
-$warning_dark: #f39c12
-$success: #2ecc71
-$success_dark: #27ae60
+@import variables
 
 *
   box-sizing: border-box

src/sass/messaging.sass

@@ -1,93 +1,86 @@
-$primary: #3498db
-$primary_dark: #2980b9
-$danger: #e74c3c
-$danger_dark: #c0392b
-$warning: #f1c40f
-$warning_dark: #f39c12
-$success: #2ecc71
-$success_dark: #27ae60
-    
-.embed 
-    background-color: #d8d8d8
-    border-radius: 5px
-    padding: 5px
-.alert-primary
-    border-radius: 2px
-    background-color: $primary
-    border: 1px solid $primary_dark
-    padding: 1rem
-    color: white
-.alert-danger
-    border-radius: 2px
-    background-color: $danger
-    border: 1px solid $danger_dark
-    padding: 1rem
-    color: white
-.alert-warning
-    border-radius: 2px
-    background-color: $warning
-    border: 1px solid $warning_dark
-    padding: 1rem
-    color: white
-.alert-success
-    border-radius: 2px
-    background-color: $success
-    border: 1px solid $success_dark
-    padding: 1rem
-    color: white
-.notification-primary
-    width: 100%;
-    display: flex
-    padding: 5px
-    border: 2px solid $primary
-    border-radius: 2px
-.notification-primary h2
-    border-right: 0.3rem solid $primary
-    padding: 5px
-    margin-right: 5px;
-    min-width: 70px
-    height: auto
-    display: flex
-.notification-danger
-    width: 100%;
-    display: flex
-    padding: 5px
-    border: 2px solid $danger
-    border-radius: 2px
-.notification-danger h2
-    border-right: 0.3rem solid $danger
-    padding: 5px
-    margin-right: 5px;
-    min-width: 70px
-    height: auto
-    display: flex
-.notification-warning
-    width: 100%;
-    display: flex
-    padding: 5px
-    border: 2px solid $warning
-    border-radius: 2px
-.notification-warning h2
-    border-right: 0.3rem solid $warning
-    padding: 5px
-    margin-right: 5px;
-    min-width: 70px
-    height: auto
-    display: flex
-.notification-success
-    width: 100%;
-    display: flex
-    padding: 5px
-    border: 2px solid $success
-    border-radius: 2px
-.notification-success h2
-    border-right: 0.3rem solid $success
-    padding: 5px
-    margin-right: 5px;
-    min-width: 70px
-    height: auto
-    display: flex
-.notification-body
-    line-height: 30pt
-    font-size: 15pt
+@import variables
+    
+.embed 
+    background-color: #d8d8d8
+    border-radius: 5px
+    padding: 5px
+.alert-primary
+    border-radius: 2px
+    background-color: $primary
+    border: 1px solid $primary_dark
+    padding: 1rem
+    color: white
+.alert-danger
+    border-radius: 2px
+    background-color: $danger
+    border: 1px solid $danger_dark
+    padding: 1rem
+    color: white
+.alert-warning
+    border-radius: 2px
+    background-color: $warning
+    border: 1px solid $warning_dark
+    padding: 1rem
+    color: white
+.alert-success
+    border-radius: 2px
+    background-color: $success
+    border: 1px solid $success_dark
+    padding: 1rem
+    color: white
+.notification-primary
+    width: 100%;
+    display: flex
+    padding: 5px
+    border: 2px solid $primary
+    border-radius: 2px
+.notification-primary h2
+    border-right: 0.3rem solid $primary
+    padding: 5px
+    margin-right: 5px;
+    min-width: 70px
+    height: auto
+    display: flex
+.notification-danger
+    width: 100%;
+    display: flex
+    padding: 5px
+    border: 2px solid $danger
+    border-radius: 2px
+.notification-danger h2
+    border-right: 0.3rem solid $danger
+    padding: 5px
+    margin-right: 5px;
+    min-width: 70px
+    height: auto
+    display: flex
+.notification-warning
+    width: 100%;
+    display: flex
+    padding: 5px
+    border: 2px solid $warning
+    border-radius: 2px
+.notification-warning h2
+    border-right: 0.3rem solid $warning
+    padding: 5px
+    margin-right: 5px;
+    min-width: 70px
+    height: auto
+    display: flex
+.notification-success
+    width: 100%;
+    display: flex
+    padding: 5px
+    border: 2px solid $success
+    border-radius: 2px
+.notification-success h2
+    border-right: 0.3rem solid $success
+    padding: 5px
+    margin-right: 5px;
+    min-width: 70px
+    height: auto
+    display: flex
+.notification-body
+    line-height: 30pt
+    font-size: 15pt
     word-wrap: break-word

src/sass/navbar.sass

@@ -1,10 +1,7 @@
+@import variables
 
-$navBG: #f1f1f1
-$navgap: 1em
-$navdefcolor: #2e2e2e
-$navhovcolor: #a5a5a5    
 header
-    background: $navBG
+    background: $primBG
     text-align: center
     height: 30px
     z-index: 999
@@ -47,7 +44,7 @@ header
 nav
     text-align: left
     width: 100%
-    background: $navBG
+    background: $primBG
     display: none
     transform: scale(1, 0)
     transform-origin: top

src/sass/selector.sass

@@ -1,100 +1,97 @@
-$primBG: rgb(248, 248, 248)
-$columns: 12
-$primary: #3498db
-$primary_dark: #2980b9
-
-/* The switch - the box around the slider */
-.switch 
-    position: relative
-    display: inline-block
-    width: 60px
-    height: 34px
-/* Hide default HTML checkbox */
-.switch input 
-    opacity: 0
-    width: 0
-    height: 0
-/* The slider */
-.slider 
-    position: absolute
-    cursor: pointer
-    top: 0
-    left: 0
-    right: 0
-    bottom: 0
-    background-color: #ccc
-    -webkit-transition: .4s
-    transition: .4s
-.slider:before 
-    position: absolute
-    content: ""
-    height: 26px
-    width: 26px
-    left: 4px
-    bottom: 4px
-    background-color: white
-    -webkit-transition: .4s
-    transition: .4s
-input:checked + .slider 
-    background-color: $primary
-input:focus + .slider 
-    box-shadow: 0 0 1px $primary
-input:checked + .slider:before 
-    -webkit-transform: translateX(26px)
-    -ms-transform: translateX(26px)
-    transform: translateX(26px)
-/* Rounded sliders */
-.slider.round 
-    border-radius: 34px
-.slider.round:before 
-    border-radius: 50%
-/* Range slider */
-.range-slider
-    -webkit-appearance: none
-    border-radius: 5px
-    width: 100%
-    height: 25px
-    background: #d8d8d8
-    outline: none
-    opacity: 0.7
-    -webkit-transition: .2s
-    transition: opacity .2s
-.range-slider:hover
-    opacity: 1
-.range-slider::-webkit-slider-thumb
-    -webkit-appearance: none
-    appearance: none
-    width: 25px
-    height: 25px
-    background: #5b6568
-    cursor: pointer
-.range-slider::-moz-range-thumb 
-    width: 25px
-    height: 25px
-    background: #5b6568
-    cursor: pointer
-.range-slider-rounded
-    -webkit-appearance: none
-    border-radius: 5px
-    width: 100%
-    height: 15px
-    background: #d8d8d8
-    outline: none
-    opacity: 0.7
-    -webkit-transition: .2s
-    transition: opacity .2s
-.range-slider-rounded:hover
-    opacity: 1
-.range-slider-rounded::-webkit-slider-thumb
-    -webkit-appearance: none
-    appearance: none
-    border-radius: 50%
-    width: 25px
-    height: 25px
-    background: #5b6568
-    cursor: pointer
-.range-slider-rounded::-moz-range-thumb 
-    width: 25px
-    height: 25px
-    background: #ecf0f1
+@import variables
+
+/* The switch - the box around the slider */
+.switch 
+    position: relative
+    display: inline-block
+    width: 60px
+    height: 34px
+/* Hide default HTML checkbox */
+.switch input 
+    opacity: 0
+    width: 0
+    height: 0
+/* The slider */
+.slider 
+    position: absolute
+    cursor: pointer
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+    background-color: #ccc
+    -webkit-transition: .4s
+    transition: .4s
+.slider:before 
+    position: absolute
+    content: ""
+    height: 26px
+    width: 26px
+    left: 4px
+    bottom: 4px
+    background-color: white
+    -webkit-transition: .4s
+    transition: .4s
+input:checked + .slider 
+    background-color: $primary
+input:focus + .slider 
+    box-shadow: 0 0 1px $primary
+input:checked + .slider:before 
+    -webkit-transform: translateX(26px)
+    -ms-transform: translateX(26px)
+    transform: translateX(26px)
+/* Rounded sliders */
+.slider.round 
+    border-radius: 34px
+.slider.round:before 
+    border-radius: 50%
+/* Range slider */
+.range-slider
+    -webkit-appearance: none
+    border-radius: 5px
+    width: 100%
+    height: 25px
+    background: #d8d8d8
+    outline: none
+    opacity: 0.7
+    -webkit-transition: .2s
+    transition: opacity .2s
+.range-slider:hover
+    opacity: 1
+.range-slider::-webkit-slider-thumb
+    -webkit-appearance: none
+    appearance: none
+    width: 25px
+    height: 25px
+    background: #5b6568
+    cursor: pointer
+.range-slider::-moz-range-thumb 
+    width: 25px
+    height: 25px
+    background: #5b6568
+    cursor: pointer
+.range-slider-rounded
+    -webkit-appearance: none
+    border-radius: 5px
+    width: 100%
+    height: 15px
+    background: #d8d8d8
+    outline: none
+    opacity: 0.7
+    -webkit-transition: .2s
+    transition: opacity .2s
+.range-slider-rounded:hover
+    opacity: 1
+.range-slider-rounded::-webkit-slider-thumb
+    -webkit-appearance: none
+    appearance: none
+    border-radius: 50%
+    width: 25px
+    height: 25px
+    background: #5b6568
+    cursor: pointer
+.range-slider-rounded::-moz-range-thumb 
+    width: 25px
+    height: 25px
+    background: #ecf0f1
     cursor: pointer

src/sass/variables.sass

@@ -0,0 +1,18 @@
+$border_width: 2px
+$border_radius: 5px
+$padding: 5px
+$columns: 12
+$navgap: 1em
+
+/* Colours */
+$navhovcolor: #a5a5a5   
+$navdefcolor: #2e2e2e
+$primBG: rgb(248, 248, 248)
+$primary: #3498db
+$primary_dark: #2980b9
+$danger: #e74c3c
+$danger_dark: #c0392b
+$warning: #f1c40f
+$warning_dark: #f39c12
+$success: #2ecc71
+$success_dark: #27ae60