jekyll-theme-systemhalted 0.1.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: ac7ded62652553410b0060512372e1684a01a9ab3f29a4ec11bd030dae6ec5b8
+  data.tar.gz: c10c055db1cf0141a51c03f71df949288a3c2318f5923d510719867bca3914ce
+SHA512:
+  metadata.gz: 7b2ed72ce0772f3a3d88f34d7538b405abd1f2560433a72f074cf6b5d61f0637e26bc287829ee5ad85fdeb1c7e5373180623a2928509aa9d3c5de0300c3564ed
+  data.tar.gz: 61e03be56d0ca29e36ad4ff1875c27e338eeab71abfc7bd63666bdfeeefac2ca94d152b380aed05f7cbc7d7adb09d07e8ed4a8f052a050cadb886900b3ccee2e

data/CHANGELOG.md

@@ -0,0 +1,4 @@
+# Changelog
+
+## 0.1.0
+- Initial release of the Systemhalted Jekyll theme gem.

data/LICENSE.md

@@ -0,0 +1,9 @@
+# Released under MIT License
+
+Copyright (c) 2020 Palak Mathur.
+
+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.

data/README.md

@@ -0,0 +1,155 @@
+# Systemhalted Theme
+[![Gem Version](https://badge.fury.io/rb/jekyll-theme-systemhalted.svg)](https://badge.fury.io/rb/jekyll-theme-systemhalted)
+A Jekyll theme for personal blogs with a bold homepage grid, archive views, tags/categories, a search overlay, theme toggle, and optional Disqus comments.
+
+## Features
+- Responsive post grid with featured images.
+- Search overlay powered by elasticlunr (no external services).
+- Archives, categories, tags, and featured posts pages.
+- Light/dark theme toggle.
+- Optional Disqus comments and share buttons.
+- Sidebar navigation driven by `_config.yml`.
+
+## Requirements
+- Ruby and Bundler installed locally.
+- Jekyll (installed via Bundler).
+
+## Using the theme gem
+1) Add the theme to your site's `Gemfile`:
+   `gem "jekyll-theme-systemhalted"`
+2) Update your site's `_config.yml`:
+   - `theme: jekyll-theme-systemhalted`
+   - Update `title`, `tagline`, `description`, `url`, `baseurl`, `sidebar.items`
+   - Plugins:
+     ```yaml
+     plugins:
+       - jekyll-paginate
+       - jekyll-gist
+       - jekyll-seo-tag
+       - jekyll-sitemap
+       - jekyll-feed
+     ```
+3) Install and run:
+   `bundle install`
+   `bundle exec jekyll serve --livereload`
+
+## Theme development / demo site
+The demo site lives in `example/`. To preview the theme locally:
+1) Install dependencies:
+   `bundle config set --local path vendor/bundle`
+   `bundle install`
+2) Run the demo site:
+   `bundle exec jekyll serve --source example --destination example/_site --livereload`
+
+Jekyll outputs to `_site/` in the source directory. Do not edit generated files directly.
+
+## Tests
+Run the test suite:
+`bundle exec ruby -Itest -Ilib test/*_test.rb`
+
+## Writing posts
+In the demo site, posts live in `example/collections/_posts/` and use the filename format `YYYY-MM-DD-title.md`.
+In your own site, follow your configured `collections_dir`.
+
+Front matter example:
+```
+---
+layout: post
+title: Sample Post
+date: 2025-12-31
+categories: [Tech]
+tags: [jekyll, notes]
+comments: true
+featured: true
+featured_image: assets/images/2025-12-hero.jpg
+featured_image_alt: Brief alt text for the image
+featured_image_caption: Photo credit or context
+description: One-line summary for previews.
+---
+```
+
+Drafts live in `example/collections/_drafts/` for the demo site. Preview drafts with:
+`bundle exec jekyll serve --source example --destination example/_site --livereload --drafts`
+
+## Pages
+The demo site's pages live under `example/`. In your own site, create pages at your site root.
+Use `layout: page` for standard content pages or `layout: default` if you want a fully custom layout.
+
+Key pages included in the demo site (copy these into your own site if you want them):
+- `index.html`: paginated home grid.
+- `archives.html`: year-grouped archive with client-side sorting.
+- `categories.html`: category taxonomy grouped by theme.
+- `tags.html`: tag archive.
+- `featured.html`: posts with `featured: true`.
+- `about.md`, `404.md`: static pages.
+
+## Collections
+Collections live under `example/collections/` in the demo site (see `collections_dir` in `example/_config.yml`).
+To add a collection:
+1) Define it in your site's `_config.yml` under `collections:` with `output: true`.
+2) Add docs in `collections/_<name>/` (relative to your `collections_dir`).
+3) Create a listing page using `layout: collections` and `collection_name: <name>`.
+
+Any collection with `output: true` is included in search (see Search below).
+
+## Search
+Search is fully client-side and uses elasticlunr.
+- `assets/js/search-data.js` is generated at build time via Liquid.
+- `assets/js/script.js` builds the elasticlunr index in the browser.
+- Data includes posts and any output collections (excluding `/404.html`).
+
+To exclude a document from search, add this to its front matter:
+```
+search_exclude: true
+```
+
+If you change which fields should be indexed or displayed, edit:
+- `assets/js/search-data.js` (document fields and snippets)
+- `assets/js/script.js` (elasticlunr fields and rendering)
+
+## Sidebar navigation
+Edit `sidebar.items` in your site's `_config.yml`:
+```
+sidebar:
+  items:
+    - title: "Home"
+      url: "/"
+```
+
+The sidebar also includes an "Annotate me" toggle that loads Hypothes.is on demand. Remove it from `_includes/sidebar.html` if you do not want annotation support.
+
+## Categories and tags
+Category themes are defined in `_data/taxonomy.yml` and used on `categories.html` and in related-post logic.
+Tags are generated from post front matter and listed on `tags.html`.
+
+## Comments and analytics
+Disqus comments are supported:
+- Set `disqus_shortname` in `_config.yml`.
+- Enable per post with `comments: true`.
+
+Google Analytics:
+- Set `google_analytics_id` in `_config.yml` to enable `gtag.js`.
+
+## Assets and styling
+- Main CSS: `assets/css/nord.css`
+- JS bundle: `assets/js/script.js`
+- Search data: `assets/js/search-data.js`
+- Fonts and icons are loaded in `_includes/head.html` (Google Fonts and Font Awesome CDN).
+- Favicons live in `assets/`
+
+## Deployment
+Build the site:
+`JEKYLL_ENV=production bundle exec jekyll build`
+
+For the demo site:
+`JEKYLL_ENV=production bundle exec jekyll build --source example --destination example/_site`
+
+Then deploy the `_site/` folder to any static host.
+
+If deploying to GitHub Pages:
+- For `username.github.io`, set `url: https://username.github.io` and `baseurl: ""`.
+- For `username.github.io/repo`, set `url: https://username.github.io` and `baseurl: "/repo"`.
+
+## Notes
+- Use relative URLs (`| relative_url`) for internal links and assets.
+- Keep filenames kebab-case and asset names short.

data/_data/taxonomy.yml

@@ -0,0 +1,11 @@
+themes:
+  
+  - id: theme1 
+    title: "Theme1 Title"
+    description: "Theme1 Description"
+    categories:
+      - "Theme1 Category1"
+      - "Theme2 Category2"
+
+
+

data/_includes/comments.html

@@ -0,0 +1,14 @@
+<div id="disqus_thread"></div>
+<script>
+  var disqus_config = function () {
+    this.page.url = "{{ page.url | absolute_url }}";
+    this.page.identifier = "{{ page.id | default: page.url }}";
+  };
+  (function() {
+    var d = document, s = d.createElement('script');
+    s.src = 'https://{{ site.disqus_shortname }}.disqus.com/embed.js';
+    s.setAttribute('data-timestamp', +new Date());
+    (d.head || d.body).appendChild(s);
+  })();
+</script>
+<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

data/_includes/footer.html

@@ -0,0 +1,46 @@
+<footer class="site-footer">
+  <div class="container">
+    <div class="footer-inner">
+    <div class="footer-brand">
+      <div class="footer-avatar">
+        <img src="{{ '/assets/favicon.ico' | relative_url }}" alt="{{ site.title }} Logo">
+      </div>
+      <div>
+        <div class="footer-title">{{ site.title }}</div>
+        <div class="footer-subtitle">{{ site.tagline }}</div>
+        {% if site.description %}
+          <p class="footer-description">{{ site.description }}</p>
+        {% endif %}
+      </div>
+    </div>
+
+    <div class="footer-links">
+      <div class="footer-column">
+        <div class="footer-heading">Browse</div>
+        <a href="{{ '/' | relative_url }}">Home</a>
+        <a href="{{ '/featured/' | relative_url }}">Featured</a>
+        <a href="{{ '/archives/' | relative_url }}">Archives</a>
+        <a href="{{ '/categories/' | relative_url }}">Categories</a>
+      </div>
+      <div class="footer-column">
+        <div class="footer-heading">Connect</div>
+        <a href="mailto:{{ site.author.email | default: 'contact@example.com' }}">Email</a>
+        <a href="{{ '/feed.xml' | relative_url }}">RSS</a>
+      </div>
+    </div>
+
+    <div class="footer-subscribe">
+      <div class="footer-heading">Subscribe</div>
+      <p class="footer-description">Get new posts via RSS or drop me a note.</p>
+      <div class="footer-cta">
+        <a class="footer-button" href="{{ '/feed.xml' | relative_url }}">View RSS Feed</a>
+        <a class="footer-button ghost" href="mailto:{{ site.author.email | default: 'contact@example.com' }}">Say hello</a>
+      </div>
+    </div>
+    </div>
+    <div class="footer-meta">
+      <span>© {{ 'now' | date: '%Y' }} {{ site.author.name }}</span>
+      <span class="footer-meta-secondary">Created with love using <a href="https://github.com/systemhalted/systemhalted-theme">systemhalted-theme</a>.</span>
+    </div>
+  </div>
+</footer>

data/_includes/head.html

@@ -0,0 +1,76 @@
+<head>
+  <link href="http://gmpg.org/xfn/11" rel="profile">
+  <meta http-equiv="content-type" content="text/html; charset=utf-8">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
+  
+   <!-- Basic meta elements -->
+  <meta charset="utf-8" />
+  
+  <!-- Enable responsiveness on mobile devices -->
+  <meta name="viewport" content="width=device-width,initial-scale=1.0,shrink-to-fit=no" />
+
+  {% if page.url and site.baseurl %}
+  <link rel="canonical" href="{{ page.url | absolute_url }}">
+  {% endif %}
+
+  <script>
+    (function() {
+      var storageKey = 'theme';
+      var lightClass = 'theme-nord-light';
+      var darkClass = 'theme-nord-dark';
+      var root = document.documentElement;
+      var saved = null;
+
+      function normalizeTheme(value) {
+        return value === 'dark' || value === 'light' ? value : null;
+      }
+
+      try {
+        saved = normalizeTheme(localStorage.getItem(storageKey));
+      } catch (e) {
+        saved = null;
+      }
+
+      if (!saved) {
+        try {
+          if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            saved = 'dark';
+          } else {
+            saved = 'light';
+          }
+        } catch (e) {
+          saved = 'light';
+        }
+      }
+
+      root.classList.remove(lightClass, darkClass);
+      root.classList.add(saved === 'dark' ? darkClass : lightClass);
+    })();
+  </script>
+
+  <link rel="stylesheet" href="{{ '/assets/css/nord.css' | relative_url }}">
+  
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800&family=Source+Code+Pro:wght@400;500;600&family=UnifrakturMaguntia&display=swap">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ '/assets/apple-touch-icon-precomposed.png' | relative_url }}">
+  <link rel="icon" type="image/svg+xml" href="{{ '/assets/favicon.ico' | relative_url }}">
+  <link rel="shortcut icon" href="{{ '/assets/favicon.ico' | relative_url }}">
+
+  <link rel="alternate" type="application/rss+xml" href="{{ '/feed.xml' | relative_url }}">
+
+  {% if site.google_analytics_id %}
+ <!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics_id }}"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', '{{ site.google_analytics_id }}');
+</script>
+  {% endif %}
+
+  {% seo %}
+</head>

data/_includes/share-buttons.html

@@ -0,0 +1,39 @@
+{% if include.pageurl != nil and include.pageurl != '' %}
+    {% assign pageurl = include.pageurl %}
+{% else %}
+    {% assign pageurl = page.url %}
+{% endif %}
+
+<style>
+#share-buttons {display: inline-block; vertical-align: middle; }
+#share-buttons:after {content: ""; display: block; clear: both;}
+#share-buttons > div {
+    position: relative;
+    text-align: left; 
+    height: 36px; 
+    width: 32px; 
+    float: left; 
+    text-align: center;
+}
+#share-buttons > div > svg {height: 16px; fill: #d5d5d5; margin-top: 10px;}
+#share-buttons > div:hover {cursor: pointer;}
+#share-buttons > div.facebook:hover > svg {fill: #3B5998;}
+#share-buttons > div.twitter:hover > svg {fill: #55ACEE;}
+#share-buttons > div.linkedin:hover > svg {fill: #0077b5;}
+#share-buttons > div.pinterest:hover > svg {fill: #CB2027;}
+#share-buttons > div.mail:hover > svg {fill: #7D7D7D;}
+#share-buttons > div.instagram:hover > svg {fill: #C73B92;}
+#share-buttons > div.facebook > svg {height: 18px; margin-top: 9px;}
+#share-buttons > div.twitter > svg {height: 20px; margin-top: 8px;}
+#share-buttons > div.linkedin > svg {height: 19px; margin-top: 7px;}
+#share-buttons > div.pinterest > svg {height: 20px; margin-top: 9px;}
+#share-buttons > div.mail > svg {height: 14px; margin-top: 11px;}
+</style>
+
+<span style="color: silver;">Share on: </span><div id="share-buttons">
+    <div class="facebook" title="Share this on Facebook" onclick="window.open('http://www.facebook.com/share.php?u={{ site.url }}{{ pageurl }}');"><svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759h-306v-759h-255v-296h255v-218q0-186 104-288.5t277-102.5q147 0 228 12z"/></svg></div>
+    <div class="twitter" title="Share this on Twitter" onclick="window.open('http://twitter.com/home?status={{ site.url }}{{ pageurl }}');"><svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5t-115.5 248.5-184.5 210.5-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5t-114-159.5q33 5 61 5 43 0 85-11-112-23-185.5-111.5t-73.5-205.5v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5t371.5 99.5q-8-38-8-74 0-134 94.5-228.5t228.5-94.5q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z"/></svg></div>
+    <div class="linkedin" title="Share this on Linkedin" onclick="window.open('https://www.linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ pageurl }}&title=&summary=&source=');"><svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M477 625v991h-330v-991h330zm21-306q1 73-50.5 122t-135.5 49h-2q-82 0-132-49t-50-122q0-74 51.5-122.5t134.5-48.5 133 48.5 51 122.5zm1166 729v568h-329v-530q0-105-40.5-164.5t-126.5-59.5q-63 0-105.5 34.5t-63.5 85.5q-11 30-11 81v553h-329q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52 87-43.5 114.5-15.5q171 0 275 113.5t104 332.5z"/></svg></div>
+    {% if page.image %}<div class="pinterest" title="Share this on Pinterest" onclick="window.open('https://pinterest.com/pin/create/button/?url=&media={{ site.url }}{{ page.image }}&description=');"><svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M256 597q0-108 37.5-203.5t103.5-166.5 152-123 185-78 202-26q158 0 294 66.5t221 193.5 85 287q0 96-19 188t-60 177-100 149.5-145 103-189 38.5q-68 0-135-32t-96-88q-10 39-28 112.5t-23.5 95-20.5 71-26 71-32 62.5-46 77.5-62 86.5l-14 5-9-10q-15-157-15-188 0-92 21.5-206.5t66.5-287.5 52-203q-32-65-32-169 0-83 52-156t132-73q61 0 95 40.5t34 102.5q0 66-44 191t-44 187q0 63 45 104.5t109 41.5q55 0 102-25t78.5-68 56-95 38-110.5 20-111 6.5-99.5q0-173-109.5-269.5t-285.5-96.5q-200 0-334 129.5t-134 328.5q0 44 12.5 85t27 65 27 45.5 12.5 30.5q0 28-15 73t-37 45q-2 0-17-3-51-15-90.5-56t-61-94.5-32.5-108-11-106.5z"/></svg></div>{% endif %}
+    <div class="mail" title="Share this through Email" onclick="window.open('mailto:?&body={{ site.url }}{{ pageurl }}');"><svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1792 710v794q0 66-47 113t-113 47h-1472q-66 0-113-47t-47-113v-794q44 49 101 87 362 246 497 345 57 42 92.5 65.5t94.5 48 110 24.5h2q51 0 110-24.5t94.5-48 92.5-65.5q170-123 498-345 57-39 100-87zm0-294q0 79-49 151t-122 123q-376 261-468 325-10 7-42.5 30.5t-54 38-52 32.5-57.5 27-50 9h-2q-23 0-50-9t-57.5-27-52-32.5-54-38-42.5-30.5q-91-64-262-182.5t-205-142.5q-62-42-117-115.5t-55-136.5q0-78 41.5-130t118.5-52h1472q65 0 112.5 47t47.5 113z"/></svg></div>
+</div>

data/_includes/sidebar.html

@@ -0,0 +1,32 @@
+<!-- Target for toggling the sidebar `.sidebar-checkbox` is for regular
+     styles, `#sidebar-checkbox` for behavior. -->
+<input type="checkbox" class="sidebar-checkbox" id="sidebar-checkbox">
+
+<!-- Toggleable sidebar -->
+<aside class="sidebar" id="sidebar">
+  <div class="sidebar-item">
+    <p>{{ site.description }}</p>
+  </div>
+
+  <nav class="sidebar-nav">
+    {% for item in site.sidebar.items %}
+  
+    <a
+      class="sidebar-nav-item{% if page.url == item.url %} active{% endif %}"
+      href="{{ item.url | relative_url }}">
+      {{ item.title }}
+    </a>
+    {% endfor %}
+
+    <!-- Manually entered links stay as-is -->
+    <button class="sidebar-nav-item sidebar-nav-action" id="annotate-toggle" type="button">
+      Annotate me
+    </button>
+  </nav>
+
+  <div class="sidebar-item">
+    <p>
+      &copy; {{ site.time | date: '%Y' }}. All rights reserved.
+    </p>
+  </div>
+</aside>

data/_layouts/category.html

@@ -0,0 +1,21 @@
+---
+layout: page
+---
+
+<h1>{{ page.title }}</h1>
+
+{% assign cat = page.category %}
+{% assign posts = site.categories[cat] | sort: 'date' | reverse %}
+
+{% if posts %}
+  <ul>
+    {% for post in posts %}
+      <li>
+        <span class="post-date">{{ post.date | date: "%Y-%m-%d" }}</span>
+        <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
+      </li>
+    {% endfor %}
+  </ul>
+{% else %}
+  <p>No posts yet in this category.</p>
+{% endif %}

data/_layouts/collections.html

@@ -0,0 +1,34 @@
+---
+layout: default
+---
+<div class="page">
+  <h1>{{ page.title }}</h1>
+
+  {% assign coll_name = page.collection_name %}
+  {% assign docs = site[coll_name] | sort: "date" | reverse %}
+  {% assign show_dates = page.show_dates | default: false %}
+
+  {% if docs and docs.size > 0 %}
+  <ul class="collection-list">
+    {% for doc in docs %}
+    <li class="collection-item">
+
+      {% if show_dates and doc.date %}
+      <div class="collection-item-date">
+        {{ doc.date | date: "%B %d, %Y" }}
+      </div>
+      {% endif %}
+
+      <div class="collection-item-title">
+        <a href="{{ doc.url | relative_url }}">
+          {{ doc.title }}
+        </a>
+      </div>
+
+    </li>
+    {% endfor %}
+  </ul>
+  {% else %}
+  <p>No documents in this collection yet.</p>
+  {% endif %}
+</div>

data/_layouts/default.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en-us" class="theme-nord-light">
+
+  {% include head.html %}
+
+  <body>
+    <a class="skip-link" href="#main-content">Skip to content</a>
+
+    {% include sidebar.html %}
+
+    <!-- Wrap is the content to shift when toggling the sidebar. We wrap the
+         content to avoid any CSS collisions with our real content. -->
+    <div class="wrap">
+      <div class="masthead">
+        <div class="container">
+          <div class="masthead-inner">
+            <label for="sidebar-checkbox" class="sidebar-toggle" aria-label="Toggle sidebar" aria-controls="sidebar" aria-expanded="false" role="button" tabindex="0"></label>
+            <h3 class="masthead-title">
+              <a class="masthead-wordmark" href="{{ site.baseurl }}/" title="Home">{{ site.title }}</a>
+              {% if site.tagline %}
+              <span class="masthead-byline">{{ site.tagline }}</span>
+              {% endif %}
+            </h3>
+            <div class="masthead-actions">
+              <button id="theme-toggle" class="icon-button theme-toggle" type="button" aria-pressed="false" aria-label="Switch to dark mode" title="Switch to dark mode">
+                <i class="fa fa-paint-brush" aria-hidden="true"></i>
+                <span class="theme-toggle-label">Dark mode</span>
+              </button>
+              <button id="search-toggle" class="icon-button search-toggle" type="button" aria-expanded="false" aria-controls="search-overlay" aria-label="Open search" title="Search">
+                <i class="fa fa-search" aria-hidden="true"></i>
+                <span class="sr-only">Search</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="search-overlay" class="search-overlay" aria-hidden="true">
+        <div class="search-dialog" role="dialog" aria-modal="true" aria-label="Search">
+          <div class="search-header">
+            <label class="sr-only" for="search-input">Search posts</label>
+            <input id="search-input" class="search-input" type="search" placeholder="Search posts and notes..." autocomplete="off">
+            <button id="search-close" class="icon-button search-close" type="button" aria-label="Close search">
+              <i class="fa fa-times" aria-hidden="true"></i>
+            </button>
+          </div>
+          <div id="search-status" class="search-status is-hidden" role="status" aria-live="polite"></div>
+          <div id="search-results" class="search-results">
+            <p class="search-empty">Type to search the archive.</p>
+          </div>
+        </div>
+      </div>
+
+      <main id="main-content" class="container content" tabindex="-1">
+        {{ content }}
+      </main>
+
+      {% include footer.html %}
+    </div>
+
+    <script src="{{ '/assets/js/elasticlunr.min.js' | relative_url }}"></script>
+    <script src="{{ '/assets/js/search-data.js' | relative_url }}"></script>
+    <script src='{{ site.baseurl }}/assets/js/script.js'></script>
+    {% if site.disqus_shortname and page.layout == "post" and page.comments == true %}
+    <script id="dsq-count-scr" src="//{{ site.disqus_shortname }}.disqus.com/count.js" async></script>
+    {% endif %}
+  </body>
+</html>

data/_layouts/page.html

@@ -0,0 +1,8 @@
+---
+layout: default
+---
+
+<div class="page">
+  <h2 class="page-title">{{ page.title }}</h2>
+  {{ content }}
+</div>

data/_layouts/post.html

@@ -0,0 +1,108 @@
+---
+layout: default
+---
+
+<div class="post">
+  <h1 class="post-title">{{ page.title }}</h1>
+  
+  <span class="post-date">{{ page.date | date_to_string }}</span>
+
+  {% if page.featured_image %}
+  <figure class="post-featured">
+    <img src="{{ page.featured_image | relative_url }}" alt="{{ page.featured_image_alt | default: page.title }}">
+    {% if page.featured_image_caption %}
+    <figcaption>{{ page.featured_image_caption }}</figcaption>
+    {% endif %}
+  </figure>
+  {% endif %}
+
+  {% include share-buttons.html %}
+  <p> 
+  {{ content }}
+</div>
+
+<div class="post-categories">
+  {% if post %}
+    {% assign categories = post.categories %}
+  {% else %}
+    {% assign categories = page.categories %}
+  {% endif %}
+  {% for category in categories %}
+    <a href="{{site.baseurl}}/categories/#{{category|slugize}}">{{category}}</a>
+    {% unless forloop.last %}&nbsp;{% endunless %}
+  {% endfor %}
+</div>
+
+{% if post %}
+  {% assign tags = post.tags %}
+{% else %}
+  {% assign tags = page.tags %}
+{% endif %}
+{% if tags and tags != empty %}
+<div class="post-tags">
+  {% for tag in tags %}
+    <a href="{{ site.baseurl }}/tags/#{{ tag | slugify }}">{{ tag }}</a>
+    {% unless forloop.last %}&nbsp;{% endunless %}
+  {% endfor %}
+</div>
+{% endif %}
+
+{%- comment -%}
+  Build related posts by finding other posts in categories that share the same theme(s) as this page.
+{%- endcomment -%}
+{% assign themes = site.data.taxonomy.themes %}
+{% assign page_categories = page.categories %}
+{% if page_categories == nil or page_categories == empty %}
+  {% assign page_categories = post.categories %}
+{% endif %}
+{% if page_categories == nil %}
+  {% assign page_categories = "" | split: "" %}
+{% endif %}
+{% assign matched_theme_ids = "" | split: "," %}
+
+{% for theme in themes %}
+  {% assign has_match = false %}
+  {% for cat in theme.categories %}
+    {% if page_categories contains cat %}
+      {% assign has_match = true %}
+    {% endif %}
+  {% endfor %}
+  {% if has_match %}
+    {% assign matched_theme_ids = matched_theme_ids | push: theme.id %}
+  {% endif %}
+{% endfor %}
+
+{% assign theme_posts = "" | split: "" %}
+{% for theme in themes %}
+  {% if matched_theme_ids contains theme.id %}
+    {% for cat in theme.categories %}
+      {% assign cat_posts = site.categories[cat] %}
+      {% if cat_posts %}
+        {% assign theme_posts = theme_posts | concat: cat_posts %}
+      {% endif %}
+    {% endfor %}
+  {% endif %}
+{% endfor %}
+
+{% assign related_posts = theme_posts | uniq | sort: "date" | reverse %}
+{% assign related_posts = related_posts | where_exp: "related_post", "related_post.url != page.url" %}
+
+{% if related_posts.size >= 1 %}
+<div class="related">
+  <h2>Related posts</h2>
+  <ul class="related-posts">
+    {% for post in related_posts limit:5 %}
+      <li>
+        <h3>
+          <a href="{{ site.baseurl }}{{ post.url }}">
+            {{ post.title }}
+            <small>{{ post.date | date_to_string }}</small>
+          </a>
+        </h3>
+      </li>
+    {% endfor %}
+  </ul>
+</div>
+ {% if page.comments == true %}{% include comments.html %}{% endif %}
+ 
+{% endif %}