change to jekyll page engine

_sass/colours_drakula.scss

@@ -0,0 +1,7 @@
+:root {
+  --gray0: #282a36;		/*background, font-colour*/
+  --gray1: #282a36;		/*current menu*/
+  --gray2: #44475a;		/*header, footer, menu*/
+  --gray3: #6272a4;		/*hover, links*/
+  --background: #f8f8f2 /*container background, font-colour on dark*/
+}

_sass/colours_solarized.scss

@@ -0,0 +1,7 @@
+:root {
+  --gray0: #002b36;		/*background, font-colour*/
+  --gray1: #073642;		/*current menu*/
+  --gray2: #586e75;		/*header, footer, menu*/
+  --gray3: #93a1a1;		/*hover*/
+  --background: #eee8d5 /*container background, font-colour on dark*/
+}

_sass/main.scss

@@ -0,0 +1,126 @@
+* {
+  box-sizing: border-box;
+  color: var(--gray0);
+}
+
+a {
+  color: var(--gray3);
+}
+
+div {
+  background-color: var(--background);
+}
+
+.row::after {
+  content: "";
+  clear: both;
+  display: table;
+}
+
+[class*="col-"] {
+  float: left;
+  padding: 15px;
+}
+
+html {
+  font-family: "Lucida Sans", sans-serif;
+  background-color: var(--gray0);
+}
+
+.header {
+  background-color: var(--gray2);
+  padding: 15px;
+}
+
+.header * {
+  color: var(--background);
+}
+
+.menu ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.menu ul a {
+  text-decoration: none;
+}
+
+.menu a li {
+  padding: 8px;
+  margin-bottom: 7px;
+  background-color: var(--gray2);
+  color: var(--background);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+}
+
+.menu a li:hover {
+  background-color: var(--gray3);
+}
+
+.menu a li.current  {
+  background-color: var(--gray1);
+}
+
+.aside {
+  background-color: #33b5e5;
+  padding: 15px;
+  color: var(--background);
+  text-align: center;
+  font-size: 14px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+}
+
+.footer {
+  background-color: var(--gray2);
+  color: #ffffff;
+  text-align: center;
+  font-size: 12px;
+  padding: 15px;
+}
+
+.footer * {
+ color: var(--background);
+}
+
+/* For mobile phones: */
+[class*="col-"] {
+  width: 100%;
+}
+
+@media only screen and (min-width: 600px) {
+  /* For tablets: */
+  .col-s-1 {width: 8.33%;}
+  .col-s-2 {width: 16.66%;}
+  .col-s-3 {width: 25%;}
+  .col-s-4 {width: 33.33%;}
+  .col-s-5 {width: 41.66%;}
+  .col-s-6 {width: 50%;}
+  .col-s-7 {width: 58.33%;}
+  .col-s-8 {width: 66.66%;}
+  .col-s-9 {width: 75%;}
+  .col-s-10 {width: 83.33%;}
+  .col-s-11 {width: 91.66%;}
+  .col-s-12 {width: 100%;}
+}
+@media only screen and (min-width: 768px) {
+  /* For desktop: */
+  .col-1 {width: 8.33%;}
+  .col-2 {width: 16.66%;}
+  .col-3 {width: 25%;}
+  .col-4 {width: 33.33%;}
+  .col-5 {width: 41.66%;}
+  .col-6 {width: 50%;}
+  .col-7 {width: 58.33%;}
+  .col-8 {width: 66.66%;}
+  .col-9 {width: 75%;}
+  .col-10 {width: 83.33%;}
+  .col-11 {width: 91.66%;}
+  .col-12 {width: 100%;}
+  .main-container {
+    width: 768px;
+    margin-left: auto;
+    margin-right: auto;
+    clear: both;
+  }
+}