Customize theme

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

README.md

@@ -1,8 +1,6 @@
-# Skull theme for Pico CMS
+# Theme for Pico CMS
 
-Skull is a basic [Pico](http://picocms.org) theme made utilizing the [Skeleton 2.0](http://getskeleton.com) responsive boilerplate. The theme is using stock Skeleton for the most part, with a few Pico-specific additions. 
+A basic pico theme forked from https://github.com/bananana/skull, mostly with updates to fonts/colours. 
-
-Comes with two layouts; one with a vertical navigation, one with horizontal navigation.
 
 # Installation
 
@@ -10,40 +8,14 @@ Comes with two layouts; one with a vertical navigation, one with horizontal navi
 
 <pre>
     cd /path/to/Pico/themes
-    git clone https://github.com/bananana/skull
+    git clone $repo
 </pre>
 
 **2)** Edit your *config.php* file and change <code>$config['theme']</code> to <code>$config['theme'] = 'skull'</code>.
 
-**3)** By default the theme is set to have a vertical sidebar with navigation. To change to something that looks more like the default Pico theme (with horizontal header), rename *index.php* file to *index-v-nav.php* and rename *index-h-nav.php* to *index.php*.
+**3)** Change colours in skeleton.css to your preference
-
-<pre>
-    cd /path/to/Pico/themes
-    mv index.php index-v-nav.php
-    mv index-h-nav.php index.php
-</pre>
-
-**4)** At this point you can remove the alt theme layout if you don't find in necessary. There's also a layout specific css file in *skull/css* direcotry.  
-
-# Screenshots
-
-**Vertical sidebar navigation**
-
-![Screenshot 1](images/screenshot-1.png "Screenshot 1")
-
-- - -
-
-**Horisontal header navigation**
- 
-![Screenshot 2](images/screenshot-2.png "Screenshot 2")
-
-- - -
-
-**Mobile**
-
-![Screenshot 0](images/screenshot-0.png "Screenshot 0") 
 
 # To Do
 
-- Make sure this works with Pico 1.0
+- Add social media icons to footer
-- Make layout switching easier
+- Update favicon

css/custom-h-nav.css

@@ -7,8 +7,8 @@
 /* Header
 /*---------------------------------------------*/
 header {
-	background: #33C3F0;
+	background: var(--header-background);
-	color: #afe1da;
+	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;
+	background: var(--footer-background);
-	color: #afe1da;
+	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;
+  font-family: sans-serif;
-  color: #222; }
+  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;
+  background-color: var(--header-background);
-  border-color: #33C3F0; }
+  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 {

index-h-nav.html

@@ -1,69 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" class="no-js">
-<head>
-	
-	<!-- Basic Page Needs
-	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
-	<meta charset="utf-8" />
-	<title>{% if meta.title %}{{ meta.title }} | {% endif %}{{ site_title }}</title>
-	{% if meta.description %}
-	<meta name="description" content="{{ meta.description }}"> 
-	{% endif %}
-	{% if meta.robots %}
-	<meta name="robots" content="{{ meta.robots }}">
-	{% endif %}
-	
-	<!-- Mobile Specific Metas
-	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
-	<meta name="viewport" content="width=device-width, initial-scale=1">
-	
-	<!-- Font
-	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
-	<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
-
-	<!-- CSS
-	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
-	<link rel="stylesheet" href="{{ theme_url }}/css/normalize.css">
-	<link rel="stylesheet" href="{{ theme_url }}/css/skeleton.css">
-	<link rel="stylesheet" href="{{ theme_url }}/css/custom-h-nav.css">
-	
-	<!-- Favicon
-	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
-	<link rel="icon" type="image/png" href="{{ theme_url }}/images/favicon.png">
-	
-</head>
-<body>
-	
-	<!-- Primary Page Layout
-	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
-	<header>
-		<div class="container">
-			<div class="row">
-				<h1><a href="{{ base_url }}">{{ site_title }}</a></h1>
-				<ul class="nav">
-					{% for page in pages %}
-					<li><a href="{{ page.url }}">{{ page.title }}</a></li>
-					{% endfor %}
-				</ul>
-			</div>
-		</div>
-	</header>
-
-	<section class="content container">
-		<div class="row">
-			{{ content }}
-		</div>
-	</section>
-	
-	<footer>
-		<div class="container">
-			<div class="row">
-				<a href="https://github.com/bananana/skull">Skull theme</a> for <a href="http://picocms.org/">Pico CMS</a> was made by <a href="http://pavelmamontov.com">Pavel Mamontov</a> 
-			</div>
-		</div>
-	</footer>
-	
-<!-- End Document
-–––––––––––––––––––––––––––––––––––––––––––––––––– -->    
-</body>
-</html>

index.html

@@ -16,16 +16,12 @@
 	<!-- Mobile Specific Metas
 	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
 	<meta name="viewport" content="width=device-width, initial-scale=1">
-	
-	<!-- Font
-	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
-	<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
 
 	<!-- CSS
 	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
 	<link rel="stylesheet" href="{{ theme_url }}/css/normalize.css">
 	<link rel="stylesheet" href="{{ theme_url }}/css/skeleton.css">
-	<link rel="stylesheet" href="{{ theme_url }}/css/custom-v-nav.css">
+	<link rel="stylesheet" href="{{ theme_url }}/css/custom-h-nav.css">
 	
 	<!-- Favicon
 	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
@@ -36,27 +32,33 @@
 	
 	<!-- Primary Page Layout
 	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
-	<div class="row">
+	<header>
-		<div class="one-third column sidebar">
+		<div class="container">
-			<header>
+			<div class="row">
 				<h1><a href="{{ base_url }}">{{ site_title }}</a></h1>
 				<ul class="nav">
 					{% for page in pages %}
 					<li><a href="{{ page.url }}">{{ page.title }}</a></li>
 					{% endfor %}
 				</ul>
-			</header>
+			</div>
-			
-			<footer>
-				<a href="https://github.com/bananana/skull">Skull theme</a> for <a href="http://picocms.org/">Pico CMS</a> was made by <a href="http://pavelmamontov.com">Pavel Mamontov</a>
-			</footer>
 		</div>
-	
+	</header>
-		<div class="two-thirds offset-by-one-third column content">
+
+	<section class="content container">
+		<div class="row">
 			{{ content }}
 		</div>
-		
+	</section>
-	</div>
+	
+	<footer>
+		<div class="container">
+			<div class="row">
+				The website of Jennifer Radtke 
+			</div>
+		</div>
+	</footer>
+	
 <!-- End Document
 –––––––––––––––––––––––––––––––––––––––––––––––––– -->    
 </body>