made-slowly 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: d7bbbf59112ee83c31f47d846418b57bcb8500993abee0cccdaa6c9162283f37
+  data.tar.gz: a245de42155e5a8f58a82fc85ae8696c6a051ef877624f79ec3adaf4f2b462dd
+SHA512:
+  metadata.gz: e532136a6dc35c9c730c41e65c04479cd3e7b569229eb2101cb0ff669b0c67c2256a10caf02b7d5d373347f80657df5c223868f295bf373de7c6f47c4be2729c
+  data.tar.gz: bb2beff032c9a6e5886ebfde3490bb025bacb5783c9252b6bb254e391625533bc9c5c124e816114311e8c869cf8466c35351cd3ab6fe0607e900f6ab25977613

data/README.md

@@ -0,0 +1,24 @@
+A Jekyll build for Made Slowly
+
+### Structure
+
+```yaml
+_data:
+  - authors
+  - menu
+  - portfolio
+  - quick-contact-opt
+  - services
+  - technologies
+```
+
+# Style Guide
+
+# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6
+
+This is a paragraph

data/_config.yml

@@ -0,0 +1,58 @@
+################################################################################
+#
+# Configuration for Made Slowly theme
+#
+#################################################################################
+
+# Site developer
+developer:
+  name:                    Made Slowly
+  email:                   arran@madeslowly.co.uk
+  url:                     https://www.madeslowly.co.uk/
+  twitter:                 made_slowly
+  description:             >-
+
+      Made Slowly is the creation of Arran Curran, a freelance developer based in Oxford. I have been developing digital solutions in a variety of enviroments for over 20 years. With my wide range of experience I can deliver an all-in-one solution, so your new website will be smarter and faster all whilst looking awesome (the website, not me). Get in touch and find out how I can help you.
+
+version:
+#
+# ### Build Settings ###
+#
+
+markdown:                  kramdown
+highlighter:               rouge
+kramdown:
+  input:                   GFM
+  syntax_highlighter_opts:
+    default_lang:          html
+
+plugins:
+  - jekyll-feed
+  - jekyll-paginate
+  - jekyll-autoprefixer
+  - jekyll-sitemap
+  - jekyll-target-blank
+  - jekyll-image-size     # https://github.com/generalui/jekyll-image-size
+  - jekyll_picture_tag
+
+sass:
+  style:                   compressed
+  load_paths:
+    - _sass
+
+compress_html:
+  ignore:
+    envs: local
+  comments:                all
+
+autoprefixer:
+  only_production:         true
+  browsers:
+    - cover 99.5%
+
+picture:
+  source:                  'assets/images'
+  output:                  'assets/images'
+  strip_metadata:          true
+  suppress_warnings:       true
+  #disabled: true

data/_includes/blog-footer.html

@@ -0,0 +1,37 @@
+<div class="blog-wrapper">
+
+  <h2 style="width:100%;text-align:center">
+    You may also like</h2>
+
+  {% if page.next.url %}
+
+  <div class="post-preview-wrapper" >
+    <div class="post-preview-img" style="background-image: url('{{ site.baseurl }}/{{ page.next.background }}');"></div>
+    <div class="post-preview-text">
+    <a href="{{ site.baseurl }}{{ page.next.url }}" class="post-preview-title">
+      <h2>{{ page.next.title }}</h2>
+      <h3>{{ page.next.subtitle }}</h3>
+    </a>
+    <ul class="center-text">
+      {% for categories in page.next.categories | sort %}
+      <li class="post-tag"><a href="{{ site.baseurl }}/slow-blog/categories/#{{ categories | slugify }}">
+        {{ categories | upcase }}</a></li>{% endfor %}</ul>
+    </div>
+  </div>
+  {% endif %}
+  {% if page.previous.url %}
+  <div class="post-preview-wrapper" >
+    <div class="post-preview-img" style="background-image: url('{{ site.baseurl }}/{{ page.previous.background }}');"></div>
+    <div class="post-preview-text">
+    <a href="{{ site.baseurl }}{{ page.previous.url }}" class="post-preview-title">
+      <h2>{{ page.previous.title }}</h2>
+      <h3 >{{ page.previous.subtitle }}</h3>
+    </a>
+    <ul class="center-text">
+      {% for categories in page.previous.categories | sort %}
+      <li class="post-tag"><a href="{{ site.baseurl }}/slow-blog/categories/#{{ categories | slugify }}">
+        {{ categories | upcase }}</a></li>{% endfor %}</ul>
+    </div>
+    </div>
+  {% endif %}
+</div>

data/_includes/blog-nav.html

@@ -0,0 +1,21 @@
+<!-- navigation unique to blog pages with url /slow-blog/* -->
+
+<div class="blog-nav-container">
+  <button class="dropbtn" onclick="displayItem('dropdown{{ category_name | upcase | remove: ' ' }}')">Categories
+    <i class="fa fa-caret-down"></i>
+  </button>
+
+  <div class="dropdown-content display-none" id="dropdown{{ category_name | upcase | remove: ' ' }}">
+    <ul class="blog-nav center-text">
+    <li class="blog-nav-link {% if page.url == '/slow-blog/' %} blog-nav-link-active {% endif %}"><a href="{{ site.baseurl }}/slow-blog/" onclick="displayItem('dropdown{{ category_name | upcase | remove: ' ' }}')">
+    SLOW BLOG
+    </a></li>
+    {% assign p = site.categories | sort  %}
+    {% for category in p %}
+    <li class="blog-nav-link {% if category[0] == category_name or category[0] == page.categories[0] %} blog-nav-link-active {% endif %}"><a href="{{ site.baseurl }}/slow-blog/categories/#{{ category[0] | slugify }}" onclick="displayItem('dropdown{{ category_name | upcase | remove: ' ' }}')">
+    {{ category[0] | upcase }}
+    </a></li>
+    {% endfor %}
+    </ul>
+  </div>
+</div>

data/_includes/contact-details.html

@@ -0,0 +1,30 @@
+<div class="contact-details">
+
+  <h3>Not a form fan? I've got your back, you can contact me directly:</h3>
+
+  <p><i class="fas fa-envelope"></i>
+  <a href="mailto:{{ site.author.email }}">{{ site.author.email }}</a></p>
+
+  {% if site.phone %}
+  <p><i class="fas fa-phone-square"></i>
+  <a href="tel:{{ site.phone }}‬"‬>{{ site.phone }}‬</a></p>
+  {% endif %}
+
+  <p>Third option? Last one tho'...</p>
+  <h3>Message me via social media.</h3>
+
+  <ul class="social-media">
+
+  {% for social in site.data.socials %}
+  <li class="social-media-item">
+  <a href="{{ social[1].dm_url }}{{ social[1].id }}/">
+  <i class="fab fa-{{ social[1].icon }}-square fa-2x social-media-link"></i></a>
+  </li>
+  {% endfor %}
+
+  <li class="social-media-item">
+  <a href="https://join.slack.com/t/madeslowly/shared_invite/enQtODM5MzUzNDc1NzYxLWM1ZTBkMmMwY2RkYjg2MDkwMmE5YWFkZjQwYjZlODM1YzVmZmE1OTA3MzBmOWVlYjllNzYzNjA2NDgwMDk3ZGI"><i class="fab fa-slack fa-2x social-media-link"></i></a>
+  </li>
+
+  </ul>
+</div>

data/_includes/contact-footer.html

@@ -0,0 +1,3 @@
+<p class="contact-footer">
+However you choose to contact me, your information will not be recorded or shared.
+</p>

data/_includes/contact-form.html

@@ -0,0 +1,16 @@
+<form class="contact-form" action="/assets/php/contact-submission.php" method="post" >
+
+<p class="form-instruction">Fill out the form, hit send, and your message will wizz its way to my inbox ⚡<br>Bet you knew that already.</p>
+
+<label for="name">Enter your name</label>
+<input type="text" class="form-element" name="name" id="name" placeholder="Give a name, any name" required>
+
+<label for="email">Enter your email</label>
+<input type="text" class="form-element" name="email" id="email" placeholder="Your real email, if you want a reply" required>
+
+<label for="message">Enter your message</label>
+<textarea class="form-element" rows="5" name="message" id="message" placeholder="'I want an awesome website'" required></textarea>
+
+<button class="btn btn-pop btn-outline btn-contact" type="submit">SEND</button>
+
+</form>

data/_includes/cookie-consent.html

@@ -0,0 +1,29 @@
+<!--
+This is where we put scripts for managing cookie consent
+This is placed before /body along with _include/scripts.html
+-->
+
+<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>
+
+<script>
+window.cookieconsent.initialise({
+  "palette": {
+    "popup": {
+      "background": "rgba(40, 40, 40, .8)",
+      "text": "#ffffff"
+    },
+    "button": {
+      "background": "rgba(144, 0, 0, .9)"
+    }
+  },
+  "theme": "edgeless",
+  "position": "bottom-left",
+  "content": {
+    "message": "This website is cooking up cookies. Whoa there",
+    "dismiss": "I eat cookies for breakfast!",
+    "link": "tell me more!",
+    "href": "/privacy-policy/##cookies",
+    "target": "_self"
+  }
+});
+</script>

data/_includes/disquis.html

@@ -0,0 +1,25 @@
+<div id="disqus_thread"></div>
+<style>
+#disqus_thread{
+  padding: 15vh 0;
+}
+</style>
+<script>
+
+/**
+*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
+*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
+/*
+var disqus_config = function () {
+this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
+this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
+};
+*/
+(function() { /* DON'T EDIT BELOW THIS LINE */
+var d = document, s = d.createElement('script');
+s.src = 'https://madeslowly.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/email-confirmation.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
+<html xmlns='http://www.w3.org/1999/xhtml'>
+<head>
+<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
+<title>{{ page.title }} | {{ site.title }}</title>
+<meta name='viewport' content='width=device-width, initial-scale=1.0'/>
+</head>
+
+<body style='margin: 0; padding: 0;'>
+  <table border='0' cellpadding='0' cellspacing='0' width='100%'>
+    <tr>
+      <td style='padding: 0;'>
+
+        <table align='center' border='0' cellpadding='0' cellspacing='0' width='600' style='border: 1px solid #cccccc; border-collapse: collapse;'>
+          <tr>
+            <td align='center' bgcolor='#70bbd9' style='padding: 0; color: #153643; font-size: 28px; font-weight: bold; font-family: Arial, sans-serif;'>
+              <img src='{{ site.url }}{{ site.baseurl }}/assets/img/emails/email-confirmation-header.jpg' alt='Thank you for your email' width=100% style='display: block;' />
+            </td>
+          </tr>
+          <tr>
+            <td bgcolor='#ffffff' style='padding: 40px 30px 40px 30px;'>
+              <table border='0' cellpadding='0' cellspacing='0' width='100%'>
+                <tr>
+                  <td style='color: #153643; font-family: Arial, sans-serif; font-size: 24px;'>
+                    <b>Message Sent</b>
+                  </td>
+                </tr>
+                <tr>
+                  <td style='padding: 20px 0 30px 0; color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;'>
+                  This is an automated response to the message you sent whilst browsing madeslowly.co.uk. Thank you for your message, I'll get back to you as soon.
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <table border='0' cellpadding='0' cellspacing='0' width='100%'>
+                      <tr>
+                        <td width='260' valign='top'>
+                          <table border='0' cellpadding='0' cellspacing='0' width='100%'>
+                            <tr>
+                              <td>
+                                <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/left.gif' alt='' width='100%' height='140' style='display: block;' />
+                              </td>
+                            </tr>
+                            <tr>
+                              <td style='padding: 25px 0 0 0; color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;'>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
+                              </td>
+                            </tr>
+                          </table>
+                        </td>
+                        <td style='font-size: 0; line-height: 0;' width='20'>
+                          &nbsp;
+                        </td>
+                        <td width='260' valign='top'>
+                          <table border='0' cellpadding='0' cellspacing='0' width='100%'>
+                            <tr>
+                              <td>
+                                <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/right.gif' alt='' width='100%' height='140' style='display: block;' />
+                              </td>
+                            </tr>
+                            <tr>
+                              <td style='padding: 25px 0 0 0; color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;'>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
+                              </td>
+                            </tr>
+                          </table>
+                        </td>
+                      </tr>
+                    </table>
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+          <tr>
+            <td bgcolor='#ee4c50' style='padding: 30px 30px 30px 30px;'>
+              <table border='0' cellpadding='0' cellspacing='0' width='100%'>
+                <tr>
+                  <td style='color: #ffffff; font-family: Arial, sans-serif; font-size: 14px;' width='75%'>
+                    &copy; {{ "now" | date: "%Y" }} {{ site.title }}<br/>
+                    You are receiving this email because this email address was used to contact Made Slowly using the online contact form at www.madeslowly.co.uk. If you did not contact Made Slowly please report this here.
+                    <a href='#' style='color: #ffffff;'><font color='#ffffff'>Unsubscribe</font></a> to this newsletter instantly
+                  </td>
+                  <td align='right' width='25%'>
+                    <table border='0' cellpadding='0' cellspacing='0'>
+                      <tr>
+                        <td style='font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;'>
+                          <a href='http://www.twitter.com/' style='color: #ffffff;'>
+                            <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/tw.gif' alt='Twitter' width='38' height='38' style='display: block;' border='0' />
+                          </a>
+                        </td>
+                        <td style='font-size: 0; line-height: 0;' width='20'>&nbsp;</td>
+                        <td style='font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;'>
+                          <a href='http://www.twitter.com/' style='color: #ffffff;'>
+                            <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/fb.gif' alt='Facebook' width='38' height='38' style='display: block;' border='0' />
+                          </a>
+                        </td>
+                      </tr>
+                    </table>
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>

data/_includes/footer.html

@@ -0,0 +1,51 @@
+<!-- footer -->
+<footer class="footer-wraper">
+
+<div class="footer-header">
+  <a href="{{ site.baseurl }}/">
+  <h2>{% include site-logo.svg %} in {{ site.postal_add.city }}</h2></a>
+</div>
+
+<ul class="footer-nav-links sitemap">
+  <h3>Sitemap</h3>
+  {% for item in site.data.menu %}
+  {% if item.sitemap == 1 %}
+  <li><a href="{{ site.baseurl }}{{ item.link }}">
+  {{ item.name }}
+  </a></li>
+  {% endif %}
+  {% endfor %}
+</ul>
+
+<ul class="footer-nav-links category-links">
+  <h3>Categories</h3>
+  {% for category in site.categories %}
+  <li><a href="{{ site.baseurl }}/slow-blog/categories/#{{ category[0] | slugify }}">
+  {{ category[0] | upcase }}
+  </a></li>
+  {% endfor %}
+</ul>
+
+<ul class="footer-nav-links footer-services">
+  <h3>Services</h3>
+  {% for item in site.data.services %}
+  <li>
+  {{ item.name }}
+  </li>
+  {% endfor %}
+</ul>
+
+<!-- quick contact form -->
+
+<div class="footer-contact">
+{% include quick-contact.html %}
+</div>
+
+<!-- footer base and copyright -->
+
+<div class="footer-base">
+  <p class="slogan">made slowly ⚡served fast</p>
+  <p class="copyright">&copy; <script>document.write(new Date().getFullYear())</script> {{ site.title }}</p>
+</div>
+
+</footer>

data/_includes/google-map.html

@@ -0,0 +1,43 @@
+<div class="google-map">
+  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2469.820605643565!2d-1.214444884287573!3d51.75460387967654!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876c1aeafa04a05%3A0x760e8ed504dda081!2sMade%20Slowly!5e0!3m2!1sen!2suk!4v1575387470271!5m2!1sen!2suk"
+  width="100%"
+  height="100%"
+  frameborder="0"
+  style="border:0;"
+  allowfullscreen=""></iframe>
+</div>
+<!--
+  <div class="google-map">
+  <div id="map" style="width:300px;height:300px;position:inherit;"></div>
+</div>
+<script>
+  window.mapData = {"latitude":-45.8787605 ,"longitude":170.5027976, "zoom": 5 };
+
+  function initMap() {
+    var myOptions = {
+      scrollwheel: false,
+      draggable: false,
+      panControl: false,
+      disableDefaultUI: true,
+      zoom: window.mapData.zoom,
+      maxZoom: window.mapData.zoom,
+      minZoom: window.mapData.zoom,
+      center: new google.maps.LatLng(window.mapData.latitude, window.mapData.longitude),
+      mapTypeId: google.maps.MapTypeId.ROADMAP
+    };
+
+    var map = new google.maps.Map(document.getElementById('map'), myOptions);
+
+    var marker = new google.maps.Marker({
+      map: map,
+      position: new google.maps.LatLng(window.mapData.latitude, window.mapData.longitude)
+    });
+
+    google.maps.event.addDomListener(window, 'resize', function() {
+      map.setCenter(myOptions.center);
+    });
+  }
+</script>
+
+<script async defer src="https://maps.googleapis.com/maps/api/js?key={{ site.google.map_api_key }}&callback=initMap"></script>
+-->

data/_includes/header.html

@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+  <title>
+    {% if page.url == "/" %} {{ site.title }} | {{ site.subtitle }}
+    {% else %} {{ page.title }} | {{ site.title }} {% endif %}
+  </title>
+
+  {% include structured-data.html %}
+
+  <!-- use local page descriptions if it exist -->
+  <meta name="description" content="
+  {% if page.description == null %} {{ site.description }}
+  {% else %} {{ page.description }} {% endif %}" />
+
+  <meta name="keywords" content="{{ site.keywords }}" />
+
+  <meta name="author" content="{{ site.author.name }}" />
+
+  <meta name="copyright" content="Copyright {{ site.title }} {{ 'now' | date: "%Y" }}" />
+
+  <meta name="robots" content="follow" />
+
+<!-- *** TWITTER:CARD *** https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards -->
+  <meta name="twitter:card" content="summary_large_image" />
+
+  <meta name="twitter:site" content="@{{ site.data.socials.twitter.username }}" />
+  <meta name="twitter:creator" content="@{{ site.author.twitter }}">
+  <meta name="twitter:title" content="{% if page.url == "/" %} {{ site.title }} | {{ site.subtitle }} {% else %} {{ page.title }} | {{ site.title }}{% endif %}" />
+
+  <meta name="twitter:description" content="{% if page.description == null %} {{ site.description }}
+  {% else %} {{ page.description }} {% endif %}" />
+
+  <meta name="twitter:image" content="
+  {% if page.thumbnail == null %} {{ site.url }}{{ site.baseurl }}/assets/img/page-thumbs/{{ site.thumbnail }}
+  {% else %}
+  {{ site.url }}{{ site.baseurl }}/assets/img/page-thumbs/{{ page.thumbnail }} {% endif %}" />
+  <!-- to implement this we need some kind of db recording the descriptors of our thumbs -->
+  <meta name="twitter:image:alt" content="" />
+<!-- *** END TWITTER:CARD *** -->
+
+<!-- *** OG *** https://ogp.me/ -->
+  <meta property="og:title" content="{% if page.url == "/" %} {{ site.title }} {% else %} {{ page.title }} | {{ site.title }} {% endif %}" />
+
+  <!-- Adds article properties for blog posts -->
+  <meta property="og:type" content="
+    {% if page.url contains '/slow-blog/' %}
+    article" />
+    <meta
+    property=article:publisher
+    content="{{ site.data.socials.facebook.url }}{{ site.data.socials.facebook.username }}/">
+    <meta
+    property=article:author
+    content="{{ site.url }}">
+    <meta
+    property=article:section
+    content="News from {{ site.title }}" >
+    <meta
+    property=article:published_time
+    content="{{ page.date | date_to_xmlschema }}">
+    <meta
+    property=article:modified_time
+    content="{{ 'now' | date_to_xmlschema }}">
+    <!-- this just pulls the first cat -->
+    <meta
+    property=article:tag
+    content="{{ page.categories }}">
+    {% else %}
+    website" />
+  {% endif %}
+
+  <meta property=og:updated_time content="{{ 'now' | date_to_xmlschema }}">
+
+  <!-- use local page thumbnail if it exist -->
+  <meta property="og:image" content="
+  {% if page.thumbnail == null %}{{ site.url }}{{ site.baseurl }}/assets/img/page-thumbs/{{ site.thumbnail }}
+  {% else %}{{ site.url }}{{ site.baseurl }}/assets/img/page-thumbs/{{ page.thumbnail }} {% endif %}" />
+
+  <!-- look into https://github.com/envygeeks/jekyll-assets -->
+  <!--
+  <meta property="og:image:type" content="image/jpeg" />
+  <meta property="og:image:width" content="" />
+  <meta property="og:image:height" content="" />
+  -->
+  <!-- to implement this we need some kind of db recording the descriptors of our thumbs -->
+  <!--
+  <meta property="og:image:alt" content="" />
+  -->
+  <meta property="og:url" content="{{ site.url }}{{ site.baseurl }}{{ page.url }}" />
+
+  <meta property="og:description" content="{% if page.description == null %} {{ site.description }}
+  {% else %} {{ page.description }} {% endif %}" />
+
+  <meta property="og:locale" content="{{ site.lang }}" />
+
+  <meta property="og:site_name" content="{{ site.title }} | {{ site.subtitle }}" />
+
+  <!-- *** fb:app_id *** https://developers.facebook.com/docs/sharing/webmasters/#markup -->
+  <meta property="fb:app_id" content="{{ site.data.socials.facebook.app_id }}" />
+
+<!-- *** END OG *** -->
+
+  <link rel="canonical" href="{{ site.url }}{{ site.baseurl }}{{ page.url }}" />
+
+  <link rel="stylesheet" type="text/css" title="made slowly has all the style" href="{{ site.baseurl }}/assets/css/made-slowly-has-all-the-style.css" media="screen" />
+
+  <!-- Animate on scroll lib, js is in footer -->
+  <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/aos/aos.css" media="none" onload="if(media!='all')media='all'" />
+
+  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" media="none" onload="if(media!='all')media='all'" />
+
+  <!-- globalise fonts in _config -->
+  <link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400&display=swap" rel="stylesheet">
+
+  <link rel="stylesheet" href="{{ site.baseurl }}/assets/fonts/fontawesome-free-5.11.2-web/css/all.min.css" media="none" onload="if(media!='all')media='all'" / >
+
+  {% if page.syntax_style == "github" %}
+  <link href="{{ site.baseurl }}/assets/css/locals/github-syntax.css" rel="stylesheet" media="none" onload="if(media!='all')media='all'" />
+  {% endif %}
+
+  <link rel="shortcut icon" type="image/x-icon" href="{{ site.baseurl }}/{{ site.favicon }}">
+
+  {% if jekyll.environment == "production" %}
+  {% include tracking-header.html %}
+  {% endif %}
+
+</head>
+
+<body>

data/_includes/list-post-items.html

@@ -0,0 +1,24 @@
+<!-- display card for each post -->
+
+<div class="post-preview-wrapper">
+
+<div
+class="post-preview-img"
+style="background-image: url('{{ site.baseurl }}/{{ post.background }}');"></div>
+
+<div class="post-preview-text">
+
+<a href="{{ site.baseurl }}{{ post.url }}" class="post-preview-title">
+
+  <h2>{{ post.title }}</h2>
+
+  <h3>{{ post.subtitle }}</h3>
+
+</a>
+
+<ul class="center-text">
+  {% for categories in post.categories | sort %}
+  <li class="post-tag"><a href="{{ site.baseurl }}/slow-blog/categories/#{{ categories | slugify }}">
+    {{ categories | upcase }}</a></li>{% endfor %}</ul>
+</div>
+</div>