Customize theme

* Consolidate colours and update to my pref
* Remove remote fonts
* Remove screenshots/refs to skull/vertical layout

css/custom-h-nav.css

@@ -7,8 +7,8 @@
 /* Header
 /*---------------------------------------------*/
 header {
-	background: #33C3F0;
-	color: #afe1da;
+	background: var(--header-background);
+	color: var(--header-text);
 	text-align: center;
 	padding: 25px 0;
 	margin-bottom: 30px;
@@ -24,14 +24,14 @@ header a:hover {
 }
 header a:hover,
 footer a:hover { 
-	color: #fff;
+	color: var(--header-text);
 }
 header h1 { 
 	font-weight: bold;
 	margin: 0; 
 }
 header h1 a {
-	color: #fff;
+	color: var(--header-text);
 }
 header ul {
 	list-style: none;
@@ -49,8 +49,8 @@ header ul a {
 /* Footer
 /*---------------------------------------------*/
 footer {
-	background: #1EAEDB;
-	color: #afe1da;
+	background: var(--footer-background);
+	color: var(--footer-text);
 	padding: 60px 0;
 	margin-top: 80px;
 }
@@ -68,4 +68,4 @@ footer {
 	header ul {
 		float: right;
 	}
-}
+}

css/custom-v-nav.css

@@ -1,82 +0,0 @@
-/* Sidebar
-/*---------------------------------------------*/
-.sidebar {
-	position: relative;
-	background: #33C3F0;
-	color: #afe1da;
-	text-align: center;
-	padding: 25px 0;
-}	
-.sidebar a { 
-	color: #eee; 
-}
-.sidebar a,
-.sidebar a:hover { 
-	text-decoration: none;
-}
-.sidebar a:hover { 
-	color: #fff;
-}
-.sidebar h1 { 
-	font-weight: bold;
-	margin: 0; 
-}
-.sidebar h1 a {
-	color: #fff;
-}
-.sidebar ul {
-	list-style: none;
-	margin: 20px 0 0 0;
-	padding: 0;
-}
-.sidebar ul li {
-	display: inline;
-	margin: 0 5px; 
-}
-.sidebar ul a {
-	font-weight: bold;
-}
-.content {
-	padding: 25px 10px 0 10px;
-}
-
-/* Footer
-/*---------------------------------------------*/
-footer {
-	display: none;
-}
-
-/* For larger screens
-/*---------------------------------------------*/
-@media (min-width: 550px) {
-	html,
-	body,
-	.row,
-	.sidebar {
-		height: 100%;
-	}
-	.sidebar {
-		position: fixed;
-		top: 0;
-		left: 0;
-		padding: 60px 0;
-	}
-	.sidebar ul li {
-		display: list-item;
-		margin: inherit;
-	}
-	.content {
-		padding: 67px 50px 0 0;
-	}
-	footer {
-		display: block;
-		position: fixed;
-		bottom: 0;
-		left: 0;
-		width: inherit;
-		background: #1EAEDB;
-		padding: 60px 0;
-		margin-top: 80px;
-		font-size: 0.8em;
-	}		
-}

css/skeleton.css

@@ -26,6 +26,17 @@
 */
 
 
+/* Theme colours
+-------------------------------------------------- */
+:root {
+  --header-background: #600080;
+  --header-text: #fff;
+  --body-text: #222;
+  --body-background: #cceaea;
+  --footer-background: #4d0066;
+  --footer-text: var(--header-text);
+}
+
 /* Grid
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 .container {
@@ -124,8 +135,10 @@ body {
   font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
   line-height: 1.6;
   font-weight: 400;
-  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color: #222; }
+  font-family: sans-serif;
+  color: var(--body-text);
+  background: var(--body-background);
+}
 
 
 /* Typography
@@ -206,8 +219,8 @@ input[type="submit"].button-primary,
 input[type="reset"].button-primary,
 input[type="button"].button-primary {
   color: #FFF;
-  background-color: #33C3F0;
-  border-color: #33C3F0; }
+  background-color: var(--header-background);
+  border-color: var(--header-background); }
 .button.button-primary:hover,
 button.button-primary:hover,
 input[type="submit"].button-primary:hover,
@@ -266,7 +279,7 @@ input[type="url"]:focus,
 input[type="password"]:focus,
 textarea:focus,
 select:focus {
-  border: 1px solid #33C3F0;
+  border: 1px solid var(--header-background);
   outline: 0; }
 label,
 legend {