try moving comments inside styled div

isso.css has explicit 0 margin which is causing the comments to be offset

css/custom-h-nav.css

@@ -9,7 +9,7 @@
 header {
 	background: var(--header-background);
 	color: var(--header-text);
-	text-align: center;
+	text-align: right;
 	padding: 25px 0;
 	margin-bottom: 30px;
 }
@@ -26,8 +26,9 @@ header a:hover,
 footer a:hover { 
 	color: var(--header-text);
 }
-header h1 { 
+header p { 
 	font-weight: bold;
+	font-variant: small-caps;
 	margin: 0; 
 }
 header h1 a {
@@ -58,10 +59,6 @@ footer {
 /* For larger screens
 /*---------------------------------------------*/
 @media (min-width: 550px) {
-	header {
-		padding: 60px 0;
-		margin-bottom: 80px;
-	}
 	header h1 {
 		float: left;
 	}

css/normalize.css

@@ -41,8 +41,7 @@ hgroup,
 main,
 menu,
 nav,
-section,
+section {
-summary {
   display: block;
 }
 
@@ -424,4 +423,4 @@ table {
 td,
 th {
   padding: 0;
-}
+}

css/skeleton.css

@@ -126,11 +126,8 @@
 
 /* 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;
@@ -147,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; }
@@ -171,11 +158,22 @@ p {
 /* Links
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 a {
-  color: #1EAEDB; }
+  color: #000000; }
 a:hover {
   color: #0FA0CE; }
 
+/* Summary
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
 
+summary {
+  margin-top: .5em
+  margin-bottom: .5rem;
+}
+summary:hover {
+  color: #0FA0CE; 
+}
+  
+  
 /* Buttons
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 .button,
@@ -364,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

@@ -0,0 +1,75 @@
+<!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">
+
+	<!-- 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">
+				<p><a href="{{ base_url }}">{{ site_title }}</a></p>
+				<ul class="nav">
+					{% for page in pages(depthOffset=-1) %}
+					<li><a href="{{ page.url }}">{{ page.title }}</a></li>
+					{% endfor %}
+				</ul>
+			</div>
+		</div>
+	</header>
+
+	<section class="content container">
+		<div class="row">
+			{{ 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>
+</html>

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

@@ -1,65 +1,76 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
-<html lang="en" class="no-js">
+<html lang="en" class="no-js">
-<head>
+<head>
-	
+	
-	<!-- Basic Page Needs
+	<!-- Basic Page Needs
-	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
+	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
-	<meta charset="utf-8" />
+	<meta charset="utf-8" />
-	<title>{% if meta.title %}{{ meta.title }} | {% endif %}{{ site_title }}</title>
+	<title>{% if meta.title %}{{ meta.title }} | {% endif %}{{ site_title }}</title>
-	{% if meta.description %}
+	{% if meta.description %}
-	<meta name="description" content="{{ meta.description }}"> 
+	<meta name="description" content="{{ meta.description }}"> 
-	{% endif %}
+	{% endif %}
-	{% if meta.robots %}
+	{% if meta.robots %}
-	<meta name="robots" content="{{ meta.robots }}">
+	<meta name="robots" content="{{ meta.robots }}">
-	{% endif %}
+	{% endif %}
-	
+	
-	<!-- Mobile Specific Metas
+	<!-- Mobile Specific Metas
-	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
+	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
-	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
-
+
-	<!-- CSS
+	<!-- CSS
-	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
+	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
-	<link rel="stylesheet" href="{{ theme_url }}/css/normalize.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/skeleton.css">
-	<link rel="stylesheet" href="{{ theme_url }}/css/custom-h-nav.css">
+	<link rel="stylesheet" href="{{ theme_url }}/css/custom-h-nav.css">
-	
+	
-	<!-- Favicon
+	<!-- Favicon
-	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
+	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
-	<link rel="icon" type="image/png" href="{{ theme_url }}/images/favicon.png">
+	<link rel="icon" type="image/png" href="{{ theme_url }}/images/favicon.png">
-	
+	
-</head>
+</head>
-<body>
+<body>
-	
+	
-	<!-- Primary Page Layout
+	<!-- Primary Page Layout
-	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
+	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
-	<header>
+	<header>
-		<div class="container">
+		<div class="container">
-			<div class="row">
+			<div class="row">
-				<h1><a href="{{ base_url }}">{{ site_title }}</a></h1>
+				<p><a href="{{ base_url }}">{{ site_title }}</a></p>
-				<ul class="nav">
+				<ul class="nav">
-					{% for page in pages %}
+					{% for page in pages(depthOffset=-1) %}
-					<li><a href="{{ page.url }}">{{ page.title }}</a></li>
+					<li><a href="{{ page.url }}">{{ page.title }}</a></li>
-					{% endfor %}
+					{% endfor %}
-				</ul>
+				</ul>
-			</div>
+			</div>
-		</div>
+		</div>
-	</header>
+	</header>
-
+
-	<section class="content container">
+	<section class="content container">
-		<div class="row">
+		<div class="row">
-			{{ content }}
+			{{ content }}
-		</div>
+			{% for page in pages("writing")|sort_by("time")|reverse if not page.hidden %}
-	</section>
+    <div class="post">
-	
+        <h3><a href="{{ page.url }}">{{ page.title }}</a></h3>
-	<footer>
+        <p>{{ page.description }}</p>
-		<div class="container">
+        <p class="date">{{ page.date_formatted }}</p>
-			<div class="row">
+    </div>
-				The website of Jennifer Radtke 
+{% endfor %}
-			</div>
+		</div>
-		</div>
+	</section>
-	</footer>
+	
-	
+	<footer>
-<!-- End Document
+		<div class="container">
-–––––––––––––––––––––––––––––––––––––––––––––––––– -->    
+			<div class="row">
-</body>
+				 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> 
-</html>
+			</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>
+</html>