Add isso comments to style (#3)

* Include isso script/section
* Wrap in div to ensure correct position on the page

Co-authored-by: Jennifer C J Radtke <jcj.radtke@gmail.com>
Reviewed-on: #3

LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Pavel Mamontov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,44 +1,21 @@
-# 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. 
+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
 
-1. Clone the theme into your Pico theme directory.
+**1)** Clone the theme into your Pico theme directory.
 
-<code>
+<pre>
     cd /path/to/Pico/themes
-    git clone https://github.com/bananana/skull
+    git clone $repo
-</code>
+</pre>
 
-2. Edit your *config.php* file and change <code>$config['theme']</code> to <code>$config['theme'] = 'skull'</code>.
+**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
 
-<cod>
+# To Do
-    cd /path/to/Pico/themes
-    mv index.php index-v-nav.php
-    mv index-h-nav.php index.php
-</code>
 
-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.  
+- Add social media icons to footer
-
+- Update favicon
-# 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") 

css/custom-h-nav.css

@@ -7,9 +7,9 @@
 /* Header
 /*---------------------------------------------*/
 header {
-	background: #33C3F0;
+	background: var(--header-background);
-	color: #afe1da;
+	color: var(--header-text);
-	text-align: center;
+	text-align: right;
 	padding: 25px 0;
 	margin-bottom: 30px;
 }
@@ -24,14 +24,15 @@ header a:hover {
 }
 header a:hover,
 footer a:hover { 
-	color: #fff;
+	color: var(--header-text);
 }
-header h1 { 
+header p { 
 	font-weight: bold;
+	font-variant: small-caps;
 	margin: 0; 
 }
 header h1 a {
-	color: #fff;
+	color: var(--header-text);
 }
 header ul {
 	list-style: none;
@@ -49,8 +50,8 @@ header ul a {
 /* Footer
 /*---------------------------------------------*/
 footer {
-	background: #1EAEDB;
+	background: var(--footer-background);
-	color: #afe1da;
+	color: var(--footer-text);
 	padding: 60px 0;
 	margin-top: 80px;
 }
@@ -58,10 +59,6 @@ footer {
 /* For larger screens
 /*---------------------------------------------*/
 @media (min-width: 550px) {
-	header {
-		padding: 60px 0;
-		margin-bottom: 80px;
-	}
 	header h1 {
 		float: left;
 	}

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/normalize.css

@@ -41,8 +41,7 @@ hgroup,
 main,
 menu,
 nav,
-section,
+section {
-summary {
   display: block;
 }
 

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 {
@@ -115,17 +126,16 @@
 
 /* Base Styles
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
-/* NOTE
-html is set to 62.5% so that all the REM measurements throughout Skeleton
-are based on 10px sizing. So basically 1.5rem = 15px :) */
 html {
-  font-size: 62.5%; }
+  font-size: 85%; }
 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
@@ -134,22 +144,12 @@ h1, h2, h3, h4, h5, h6 {
   margin-top: 0;
   margin-bottom: 2rem;
   font-weight: 300; }
-h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
+h1 { font-size: 3.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
-h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
+h2 { font-size: 2.6rem; line-height: 1.25; letter-spacing: -.1rem; }
-h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
+h3 { font-size: 2.4rem; line-height: 1.3;  letter-spacing: -.08rem; }
-h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
+h4 { font-size: 1.8rem; line-height: 1.35; letter-spacing: -.05rem; }
-h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
+h5 { font-size: 1.5rem; line-height: 1.5;  letter-spacing: 0; }
-h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
+h6 { font-size: 1.2rem; line-height: 1.6;  letter-spacing: 0; }
-
-/* Larger than phablet */
-@media (min-width: 550px) {
-  h1 { font-size: 5.0rem; }
-  h2 { font-size: 4.2rem; }
-  h3 { font-size: 3.6rem; }
-  h4 { font-size: 3.0rem; }
-  h5 { font-size: 2.4rem; }
-  h6 { font-size: 1.5rem; }
-}
 
 p {
   margin-top: 0; }
@@ -158,10 +158,21 @@ p {
 /* Links
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 a {
-  color: #1EAEDB; }
+  color: #000000; }
 a:hover {
   color: #0FA0CE; }
 
+/* Summary
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+summary {
+  margin-top: .5em
+  margin-bottom: .5rem;
+}
+summary:hover {
+  color: #0FA0CE; 
+}
+  
   
 /* Buttons
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
@@ -206,8 +217,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 +277,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 {
@@ -351,6 +362,7 @@ dl,
 figure,
 table,
 p,
+details,
 ul,
 ol,
 form {

feed.twig

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  {% set RFC822 = "D, d M Y H:i:s O" %}
+  <channel>
+    <title>{{ site_title | e }}</title>
+    <description>{{ pages.index.meta.description | e }}</description>
+    <link>{{ base_url }}/</link>
+    <atom:link href="{{ base_url ~ "/feed" }}" rel="self" type="application/rss+xml"/>
+    <pubDate>{{ "now" | date(RFC822) }}</pubDate>
+    <lastBuildDate>{{ "now" | date(RFC822) }}</lastBuildDate>
+    <generator>Pico</generator>
+    {% for page in pages(depth=2, depthOffset=1) if page.id not in ['index','feed'] and not end %}
+      <item>
+        <title>{{ page.title | e }}</title>
+        <description>{{ page.id | content | e }}</description>
+        <pubDate>{{ page.date | date(RFC822) }}</pubDate>
+        <link>{{ page.url }}</link>
+        <guid isPermaLink="true">{{ page.url }}</guid>
+        {% for cat in page.meta.categories %}
+          <category>{{ cat | e }}</category>
+        {% endfor %}
+      </item>
+      {% if loop.index == 10 %}{% set end = true %}{% endif %}
+    {% endfor %}
+  </channel>
+</rss>

index.twig

@@ -17,15 +17,11 @@
 	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
 	<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,43 @@
 	
 	<!-- Primary Page Layout
 	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
-	<div class="row">
-		<div class="one-third column sidebar">
 	<header>
-				<h1><a href="{{ base_url }}">{{ site_title }}</a></h1>
+		<div class="container">
+			<div class="row">
+				<p><a href="{{ base_url }}">{{ site_title }}</a></p>
 				<ul class="nav">
-					{% for page in pages %}
+					{% for page in pages(depthOffset=-1) %}
 					<li><a href="{{ page.url }}">{{ page.title }}</a></li>
 					{% endfor %}
 				</ul>
+			</div>
+		</div>
 	</header>
 
-			<footer>
+	<section class="content container">
-				<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 class="row">
-			</footer>
-		</div>
-	
-		<div class="two-thirds offset-by-one-third column content">
 			{{ content }}
 		</div>
-		
+	</section>
+	<div class="container">
+		<script data-isso="//comments.writing.straysong.co.uk/"
+	        src="//comments.writing.straysong.co.uk/js/embed.min.js"></script>
+		<section id="isso-thread">
+			<noscript>Javascript is needed to display comments.</noscript>
+		</section>
 	</div>
+	<footer>
+		<div class="container">
+			<div class="row">
+				 Unless otherwise stated, work on this website is by Jennifer C J Radtke. <p>This work is licensed under <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-NC-SA 4.0</a></p> 
+			</div>
+		</div>
+	</footer>
+	<script src="https://www.biblegateway.com/public/link-to-us/tooltips/bglinks.js" type="text/javascript"></script>
+<script type="text/javascript">
+BGLinks.version = "NRSVA";
+BGLinks.linkVerses();
+</script>
 <!-- End Document
 –––––––––––––––––––––––––––––––––––––––––––––––––– -->    
 </body>

pico-theme.yml

@@ -0,0 +1,12 @@
+api_version: 3                  # Use Pico's latest API version for themes
+
+meta:                           # Register meta headers used by this theme
+    Logo: logo                  # The URL to your website's logo (value is passed to Pico's "url" Twig filter)
+    Tagline: tagline            # Your website's tag line, shown right below your site title (supports Markdown)
+    Social: social              # A list of social icons that will be shown in your website's footer;
+                                #     You must specify a "title", "url" and "icon" per entry
+
+twig_config:                    # Twig template engine config
+    autoescape: html            # Let Twig escape variables by default
+    strict_variables: false     # If set to true, Twig will bail out when unset variables are being used
+    charset: utf-8              # The charset used by Twig templates

writing-index.twig

@@ -17,10 +17,6 @@
 	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
 	<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">
@@ -39,9 +35,9 @@
 	<header>
 		<div class="container">
 			<div class="row">
-				<h1><a href="{{ base_url }}">{{ site_title }}</a></h1>
+				<p><a href="{{ base_url }}">{{ site_title }}</a></p>
 				<ul class="nav">
-					{% for page in pages %}
+					{% for page in pages(depthOffset=-1) %}
 					<li><a href="{{ page.url }}">{{ page.title }}</a></li>
 					{% endfor %}
 				</ul>
@@ -52,17 +48,28 @@
 	<section class="content container">
 		<div class="row">
 			{{ content }}
+			{% for page in pages("writing")|sort_by("time")|reverse if not page.hidden %}
+    <div class="post">
+        <h3><a href="{{ page.url }}">{{ page.title }}</a></h3>
+        <p>{{ page.description }}</p>
+        <p class="date">{{ page.date_formatted }}</p>
+    </div>
+{% endfor %}
 		</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> 
+				 Unless otherwise stated, work on this website is by Jennifer C J Radtke. <p>This work is licensed under <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-NC-SA 4.0</a></p> 
 			</div>
 		</div>
 	</footer>
-	
+	<script src="https://www.biblegateway.com/public/link-to-us/tooltips/bglinks.js" type="text/javascript"></script>
+<script type="text/javascript">
+BGLinks.version = "NRSVA";
+BGLinks.linkVerses();
+</script>
 <!-- End Document
 –––––––––––––––––––––––––––––––––––––––––––––––––– -->    
 </body>