Initial import of zola-inky

CHANGELOG.md

@@ -0,0 +1,18 @@
+
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [1.0]
+
+- Packaged the theme based on the work of mr-karan and hugo-ink
+- Created sample theme content, readme & changelog
+- Added search template & feature
+- Added gallery template & feature
+- Added macro/hooks.html for customisability
+- Added avatar image to header
+- Added social buttons in footer
+- Added tags to posts below main content
+- Added responsive image macros (original author: crepererum)
+- Refactored templates for consistency
+- Refactored styling (more to do) & fixes for styling inconsistencies

README.md

@@ -0,0 +1,56 @@
+
+# Zola-Inky
+
+> An elegant and understated theme for Zola
+
+Zola Inky ([View demo](https://jimmyff.github.io/zola-inky)) is a theme by [jimmyff](https://github.com/jimmyff) and [mr-karan](https://github.com/mr-karan) for the Zola static site generator. This theme was originally based on the [hugo-ink](https://github.com/knadh/hugo-ink) theme, ported by mr-karan. It was then packaged and developed further by jimmyff. The theme is available on [Github]((<https://github.com/jimmyff/zola-inky>)) under the MIT license, for more information on how to use it please see the [readme](https://github.com/jimmyff/zola-inky/README.md) and check the [changelog](https://github.com/jimmyff/zola-inky/CHANGELOG.md) for a list of the latest changes.
+
+[![PNG](screenshot.png)](https://jimmyff.github.io/zola-inky)
+
+## Changelog
+
+For latest changes please see the [changelog](CHANGELOG.md).
+
+## Features
+
+- Responsive design
+- Responsive images
+- Gallery template
+- Taxonomy support
+- Search
+- Customisable via template hooks
+
+## Getting started
+
+1. Add this theme to your `themes/` folder (recommended method: git submodule).
+2. Copy of the the theme's config.toml file and put in your projects root directory. Update it as required and don't forget to add `theme = 'zola-inky'` at the top of the file.
+3. Copy this contents of the `content/` directory the root of your project and change the files as your necessary.
+
+## Customising the theme
+
+- __To change the settings__ copy `config.toml` in to your project and update as required (make sure you add the theme variable at the top of the file, see the getting started heading above).
+- __To change the themes colours__ copy `sass/variables.scss` in to your project under the same folder and update as required.
+- __To inject content in to templates__ copy `templates/macros/hooks.html` and update as required.
+
+## Using the responsive image shortcode
+
+Using the responsive images will make sure your images are generated at various sizes and served up to viewers at the size that best suits their device via the image srcset attribute. You can use this feature in your markdown like so:
+
+```md
+{{ image(src="yourimage.jpg", alt="This is my image") }}
+```
+
+## Feature requests & support
+
+I'm afraid I'm unable to accept feature requests or provide user support for this theme. The [Zola documentation](https://www.getzola.org/documentation/getting-started/overview/) and [Tera documentation](https://tera.netlify.app/docs/) are great resources and there is a [Zola discussion forum](https://zola.discourse.group/). If you've found a bug in the themse please open a github issue.
+
+## Contributing
+
+Contributions are very welcome! If you are planning to add a feature to the theme then feel free to open an issue to discuss your approach and we will be able to say if it's it will likely be accepted. Please keep the following in mind:
+
+- Only widely generic features will be accepted, anything too specific should be kept to your own templates.
+- Be careful about destroying indentation as Tera syntax doesn't seem to be widely supported by IDEs.
+- Keep it lean. Adding bloat will likely result in your PR being rejected.
+- Consider backward compatibility, ideally people blindly-upgrading won't see any unexpected changes to their sites.
+
+New theme maintainers are welcome but should provide pull-request or two first!

config.toml

@@ -0,0 +1,73 @@
+title = "Zola Inky"
+description = "An elegant and understated theme for Zola"
+
+# The URL the site will be built for
+base_url = "http://127.0.0.1:1111"
+
+# Whether to automatically compile all Sass files in the sass directory
+compile_sass = true
+
+# Whether to build a search index to be used later on by a JavaScript library
+build_search_index = true
+default_language = "en"
+
+# The taxonomies to be rendered for the site and their configuration of the default languages
+# Example:
+#     taxonomies = [
+#       {name = "tags", feed = true}, # each tag will have its own feed
+#       {name = "tags"}, # you can have taxonomies with the same name in multiple languages
+#       {name = "categories", paginate_by = 5},  # 5 items per page for a term
+#       {name = "authors"}, # Basic definition: no feed or pagination
+#     ]
+#
+taxonomies = [{ name = "tags", lang = "en", rss = true }]
+
+[markdown]
+# Whether to do syntax highlighting
+# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
+highlight_code = true
+
+
+[slugify]
+paths = "on"
+taxonomies = "on"
+anchors = "on"
+
+[extra]
+
+# Place your avatar in your /static folder
+avatar = "/inky.png"
+
+keywords = "zola, theme, ink, hugo-ink"
+
+search_enabled = false
+
+
+image_resizing_disabled = false
+image_format = "auto"           # "auto", "jpg", "png", "webp"
+
+# responsive image shortcode 
+# example: {{ image(src="foo.jpeg", alt="some image") }}
+image_quality = 80
+images_default_size = 1024
+images_sizes = [512, 1024, 2048]
+
+thumbnail_quality = 70
+thumbnail_default_size = 256
+thumbnail_sizes = [128, 256]
+
+
+link_github_username = "jimmyff/zola-inky"
+# link_twitter_username = ""
+# link_mastodon_url = ""
+# link_medium_username = ""
+# link_instagram_username = ""
+
+menu_links = [
+    { url = "$BASE_URL/", name = "About" },
+    { url = "$BASE_URL/posts/", name = "Posts" },
+    { url = "$BASE_URL/gallery/", name = "Gallery" },
+    { url = "$BASE_URL/tags/", name = "Tags" },
+    # { url = "https://github.com/jimmyff/zola-inky", name = "Github" },
+    { url = "$BASE_URL/search/", name = "Search" },
+]

content/_index.md

@@ -0,0 +1,20 @@
++++
+title = "Zola-Inky"
+images = []
+template = "index.html"
+in_search_index = true
++++
+
+# About this theme
+
+Zola Inky is a theme by [jimmyff](https://github.com/jimmyff) and [mr-karan](https://github.com/mr-karan) for the Zola static site generator. This theme was originally based on the [hugo-ink](https://github.com/knadh/hugo-ink) theme, ported by mr-karan. It was then packaged and developed further by jimmyff. The theme is available on [Github]((<https://github.com/jimmyff/zola-inky>)) under the MIT license, for more information on how to use it please see the [readme](https://github.com/jimmyff/zola-inky/README.md) and check the [changelog](https://github.com/jimmyff/zola-inky/CHANGELOG.md) for a list of the latest changes.
+
+---
+
+## Getting started
+
+Below are some basic steps to getting started with this theme however the readme has the most up-to-date and detailed instructions.
+
+ 1. Add this theme to your `themes/` folder (recommended method: git submodule).
+ 2. Copy of the the theme's config.toml file and put in your projects root directory. Update it as required and don't forget to add `theme = 'zola-inky'` at the top of the file.
+ 3. Copy this contents of the `content/` directory the root of your project and change the files as your necessary.

content/about.md

@@ -0,0 +1,18 @@
++++
+title = "About"
+images = []
+template = "page.html"
+in_search_index = true
++++
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu feugiat sapien. Aenean ligula nunc, laoreet id sem in, interdum bibendum felis. Donec vel dui neque. Praesent ac sem ut justo volutpat rutrum a imperdiet tellus. Nam lobortis massa non hendrerit hendrerit. Vivamus porttitor dignissim turpis, eget aliquam urna tincidunt non. Aliquam et fringilla turpis. Nullam eros est, eleifend in ornare sed, hendrerit eget est. Aliquam tellus felis, suscipit vitae ex vel, fringilla tempus massa. Nulla facilisi. Pellentesque lobortis consequat lectus. Maecenas ac libero elit.
+
+<!-- more -->
+
+Ut luctus dolor ut tortor hendrerit, sed hendrerit augue scelerisque. Suspendisse quis sodales dui, at tempus ante. Nulla at tempor metus. Aliquam vitae rutrum diam. Curabitur iaculis massa dui, quis varius nulla finibus a. Praesent eu blandit justo. Suspendisse pharetra, arcu in rhoncus rutrum, magna magna viverra erat, eget vestibulum enim tellus id dui. Nunc vel dui et arcu posuere maximus. Mauris quam quam, bibendum sed libero nec, tempus hendrerit arcu. Suspendisse sed gravida orci. Fusce tempor arcu ac est pretium porttitor. Aenean consequat risus venenatis sem aliquam, at sollicitudin nulla semper. Aenean bibendum cursus hendrerit. Nulla congue urna nec finibus bibendum. Donec porta tincidunt ligula non ultricies.
+
+Sed vulputate tristique elit, eget pharetra elit sodales sed. Proin dignissim ipsum lorem, at porta eros malesuada sed. Proin tristique eros eu quam ornare, suscipit luctus mauris lobortis. Phasellus ut placerat enim. Donec egestas faucibus maximus. Nam quis efficitur eros. Cras tincidunt, lacus ac pretium porta, dui dolor varius elit, eget laoreet justo justo vitae metus. Morbi eget nisi ut ex scelerisque lobortis ut in lorem. Vestibulum et lorem quis ipsum feugiat varius. Mauris nec nulla viverra nisi porttitor efficitur. Morbi vel purus eleifend, finibus erat non, placerat ipsum. Mauris et augue vel nisi volutpat aliquam. Curabitur malesuada tortor est, at condimentum neque eleifend in.
+
+Morbi id ornare lacus. Suspendisse ultrices rutrum posuere. Nullam porttitor libero quis ligula finibus semper. Mauris iaculis magna et nisl tristique, eget maximus ex feugiat. Nam eu felis leo. Quisque ultrices varius purus in molestie. Duis non accumsan ligula. Vivamus dignissim malesuada metus, vel hendrerit tellus viverra id. Curabitur posuere, mauris vitae dignissim dictum, velit mi condimentum lorem, nec varius velit arcu a mi. In dolor sapien, condimentum sed aliquam at, dignissim id purus. Cras lorem leo, vulputate ac ante sed, molestie tempus lectus. Curabitur efficitur libero quam, rhoncus faucibus libero pharetra nec. Curabitur lobortis ullamcorper nisl eu imperdiet. Duis porttitor interdum magna, ac eleifend orci consequat vitae. Aliquam augue felis, faucibus vel blandit sed, maximus non turpis.
+
+Quisque viverra a eros id auctor. Proin id nibh ut nisl dignissim pellentesque et ac mi. Nullam mattis urna quis consequat bibendum. Donec pretium dui elit, a semper purus tristique et. Mauris euismod nisl eu vehicula facilisis. Maecenas facilisis non massa non scelerisque. Integer malesuada cursus erat eu viverra. Duis ligula mi, eleifend vel justo id, laoreet porttitor ex. Etiam ultricies lacus lorem, sed aliquam nulla blandit in. Maecenas vel facilisis neque, vitae fringilla eros. In justo nibh, pellentesque sed faucibus nec, varius sit amet risus.

content/gallery/_index.md

@@ -0,0 +1,8 @@
++++
+title = "Example gallery"
+sort_by = "date"
+template = "gallery.html"
+page_template = "section.html"
++++
+
+Here is the example gallery. The gallery uses a responsive grid and responsive image sizes. These example images are a mix of landscape and portrait images. You can include any number of images from each post and they are grouped by year.

content/gallery/luctus-dolor/index.md

@@ -0,0 +1,13 @@
++++
+title = "Luctus dolor"
+date = 2023-01-30
+[taxonomies]
+tags= ["Zola", "Theme", "gallery"]
+[extra]
+images= ["1.png"]
++++
+
+
+{{ image(src="1.png", alt="Example image") }}
+
+Ut luctus dolor ut tortor hendrerit, sed hendrerit augue scelerisque. Suspendisse quis sodales dui, at tempus ante. Nulla at tempor metus. Aliquam vitae rutrum diam. Curabitur iaculis massa dui, quis varius nulla finibus a. Praesent eu blandit justo. Suspendisse pharetra, arcu in rhoncus rutrum, magna magna viverra erat, eget vestibulum enim tellus id dui. Nunc vel dui et arcu posuere maximus. Mauris quam quam, bibendum sed libero nec, tempus hendrerit arcu. Suspendisse sed gravida orci. Fusce tempor arcu ac est pretium porttitor. Aenean consequat risus venenatis sem aliquam, at sollicitudin nulla semper. Aenean bibendum cursus hendrerit. Nulla congue urna nec finibus bibendum. Donec porta tincidunt ligula non ultricies.

content/gallery/quisque-viverra/index.md

@@ -0,0 +1,14 @@
++++
+title = "Quisque viverra"
+date = 2022-01-17
+[taxonomies]
+tags= ["Zola", "Theme", "gallery"]
+[extra]
+images= ["4.png"]
++++
+
+Quisque viverra a eros id auctor. Proin id nibh ut nisl dignissim pellentesque et ac mi. Nullam mattis urna quis consequat bibendum. Donec pretium dui elit, a semper purus tristique et. Mauris euismod nisl eu vehicula facilisis. Maecenas facilisis non massa non scelerisque. Integer malesuada cursus erat eu viverra.
+
+{{ image(src="4.png", alt="Example image") }}
+
+Duis ligula mi, eleifend vel justo id, laoreet porttitor ex. Etiam ultricies lacus lorem, sed aliquam nulla blandit in. Maecenas vel facilisis neque, vitae fringilla eros. In justo nibh, pellentesque sed faucibus nec, varius sit amet risus.

content/gallery/suspendisse-quis/index.md

@@ -0,0 +1,16 @@
++++
+title = "Suspendisse quis"
+date = 2023-01-29
+[taxonomies]
+tags= ["Zola", "Theme", "gallery"]
+[extra]
+images= ["2.png", "3.png"]
++++
+
+{{ image(src="2.png", alt="Example image") }}
+
+Suspendisse quis sodales dui, at tempus ante. Nulla at tempor metus. Aliquam vitae rutrum diam. Curabitur iaculis massa dui, quis varius nulla finibus a. Praesent eu blandit justo. Suspendisse pharetra, arcu in rhoncus rutrum, magna magna viverra erat, eget vestibulum enim tellus id dui. Nunc vel dui et arcu posuere maximus. Mauris quam quam, bibendum sed libero nec, tempus hendrerit arcu.
+
+{{ image(src="3.png", alt="Example image") }}
+
+Suspendisse sed gravida orci. Fusce tempor arcu ac est pretium porttitor. Aenean consequat risus venenatis sem aliquam, at sollicitudin nulla semper. Aenean bibendum cursus hendrerit. Nulla congue urna nec finibus bibendum. Donec porta tincidunt ligula non ultricies.

content/posts/_index.md

@@ -0,0 +1,8 @@
++++
+title = "Example posts"
+sort_by = "date"
+template = "post.html"
+page_template = "section.html"
++++
+
+Here are some example posts. The posts are grouped by year.

content/posts/lorem-ipsum.md

@@ -0,0 +1,18 @@
++++
+title = "Lorem ipsum dolor sit amet"
+date = 2022-02-05
+[taxonomies]
+tags= ["Zola", "Theme", "Lorem-ipsum", "dolor sit amet"]
++++
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu feugiat sapien. Aenean ligula nunc, laoreet id sem in, interdum bibendum felis. Donec vel dui neque. Praesent ac sem ut justo volutpat rutrum a imperdiet tellus. Nam lobortis massa non hendrerit hendrerit. Vivamus porttitor dignissim turpis, eget aliquam urna tincidunt non. Aliquam et fringilla turpis. Nullam eros est, eleifend in ornare sed, hendrerit eget est. Aliquam tellus felis, suscipit vitae ex vel, fringilla tempus massa. Nulla facilisi. Pellentesque lobortis consequat lectus. Maecenas ac libero elit.
+
+<!-- more -->
+
+Ut luctus dolor ut tortor hendrerit, sed hendrerit augue scelerisque. Suspendisse quis sodales dui, at tempus ante. Nulla at tempor metus. Aliquam vitae rutrum diam. Curabitur iaculis massa dui, quis varius nulla finibus a. Praesent eu blandit justo. Suspendisse pharetra, arcu in rhoncus rutrum, magna magna viverra erat, eget vestibulum enim tellus id dui. Nunc vel dui et arcu posuere maximus. Mauris quam quam, bibendum sed libero nec, tempus hendrerit arcu. Suspendisse sed gravida orci. Fusce tempor arcu ac est pretium porttitor. Aenean consequat risus venenatis sem aliquam, at sollicitudin nulla semper. Aenean bibendum cursus hendrerit. Nulla congue urna nec finibus bibendum. Donec porta tincidunt ligula non ultricies.
+
+Sed vulputate tristique elit, eget pharetra elit sodales sed. Proin dignissim ipsum lorem, at porta eros malesuada sed. Proin tristique eros eu quam ornare, suscipit luctus mauris lobortis. Phasellus ut placerat enim. Donec egestas faucibus maximus. Nam quis efficitur eros. Cras tincidunt, lacus ac pretium porta, dui dolor varius elit, eget laoreet justo justo vitae metus. Morbi eget nisi ut ex scelerisque lobortis ut in lorem. Vestibulum et lorem quis ipsum feugiat varius. Mauris nec nulla viverra nisi porttitor efficitur. Morbi vel purus eleifend, finibus erat non, placerat ipsum. Mauris et augue vel nisi volutpat aliquam. Curabitur malesuada tortor est, at condimentum neque eleifend in.
+
+Morbi id ornare lacus. Suspendisse ultrices rutrum posuere. Nullam porttitor libero quis ligula finibus semper. Mauris iaculis magna et nisl tristique, eget maximus ex feugiat. Nam eu felis leo. Quisque ultrices varius purus in molestie. Duis non accumsan ligula. Vivamus dignissim malesuada metus, vel hendrerit tellus viverra id. Curabitur posuere, mauris vitae dignissim dictum, velit mi condimentum lorem, nec varius velit arcu a mi. In dolor sapien, condimentum sed aliquam at, dignissim id purus. Cras lorem leo, vulputate ac ante sed, molestie tempus lectus. Curabitur efficitur libero quam, rhoncus faucibus libero pharetra nec. Curabitur lobortis ullamcorper nisl eu imperdiet. Duis porttitor interdum magna, ac eleifend orci consequat vitae. Aliquam augue felis, faucibus vel blandit sed, maximus non turpis.
+
+Quisque viverra a eros id auctor. Proin id nibh ut nisl dignissim pellentesque et ac mi. Nullam mattis urna quis consequat bibendum. Donec pretium dui elit, a semper purus tristique et. Mauris euismod nisl eu vehicula facilisis. Maecenas facilisis non massa non scelerisque. Integer malesuada cursus erat eu viverra. Duis ligula mi, eleifend vel justo id, laoreet porttitor ex. Etiam ultricies lacus lorem, sed aliquam nulla blandit in. Maecenas vel facilisis neque, vitae fringilla eros. In justo nibh, pellentesque sed faucibus nec, varius sit amet risus.

content/posts/reponsive-images/index.md

@@ -0,0 +1,17 @@
++++
+title = "Reponsive images"
+date = 2023-01-12
+[taxonomies]
+tags= ["Zola", "Theme", "gallery"]
+[extra]
+images= ["1.png"]
++++
+
+
+{{ image(src="1.png", alt="Example image") }}
+
+You can include responsive images using the image shortcode like so:
+
+```md
+\{\{ image(src="yourimage.jpg", alt="This is my image") }}
+```

content/posts/typography.md

@@ -0,0 +1,82 @@
++++
+title = "Typography"
+description = "You can include post descriptions"
+date = 2023-01-16
+[taxonomies]
+tags= ["Zola", "Theme", "Markdown", "Typography"]
++++
+
+
+Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums sits.
+
+# Heading 1
+
+Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums sits.
+
+## Heading 2
+
+Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums sits.
+
+### Heading 3
+
+Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums sits.
+
+#### Heading 4
+
+Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums sits.
+
+##### Heading 5
+
+Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums sits.
+
+###### Heading 6
+
+Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums sits.
+
+## Typography
+
+Lid est laborum et dolorum fuga, This is [an example](http://example.com/ "Title") inline link. Et harum quidem rerum facilis, **This is bold** and *emphasis* cumque nihilse impedit quo minus id quod amets untra dolor amet sad.
+
+Following is the syntax highlighted code block
+
+```rust
+fn main() {
+    let x = 5u32;
+
+    let y = {
+        let x_squared = x * x;
+        let x_cube = x_squared * x;
+
+        // This expression will be assigned to `y`
+        x_cube + x_squared + x
+    };
+
+    let z = {
+        // The semicolon suppresses this expression and `()` is assigned to `z`
+        2 * x;
+    };
+
+    println!("x is {:?}", x);
+    println!("y is {:?}", y);
+    println!("z is {:?}", z);
+}
+
+```
+
+This is blockquote, Will make it *better now*
+
+> 'I want to do with you what spring does with the cherry trees.' <cite>cited ~Pablo Neruda</cite>*
+
+> Et harum quidem *rerum facilis* est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit
+
+Unordered list
+
+* Red
+* Green
+* Blue
+
+Ordered list
+
+1. Red
+2. Green
+3. Blue

content/search.md

@@ -0,0 +1,6 @@
++++
+title = "Search"
+images = []
+template = "search.html"
+in_search_index = false
++++

sass/base.scss

@@ -0,0 +1,142 @@
+/*Resets*/
+@import "normalize.css";
+
+/*Site Wide Components*/
+@import "variables.css";
+@import "utilities.css";
+@import "typography.css";
+@import "header.css";
+@import "footer.css";
+@import "search.css";
+
+/* Page Specific Components*/
+@import "blog.css";
+@import "gallery.css";
+@import "tags.css";
+@import "custom.css";
+
+body {
+  font-family: var(--font-base);
+  word-wrap: break-word;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  max-width: 50em;
+  font-size: 1.25rem;
+  margin: 0 auto;
+  padding: 0 3rem;
+  line-height: 1.8rem;
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  overflow-y: scroll;
+}
+
+::selection {
+  text-shadow: none;
+  color: #fff;
+  background: var(--text-color);
+}
+
+article {
+  flex: 1;
+  margin-bottom: 2rem;
+}
+
+.highlight-handle {
+  background: var(--text-color);
+  border-radius: 4px;
+  color: var(--white);
+  padding: 4px 8px;
+}
+
+pre {
+  margin-bottom: 0;
+  margin-top: 0;
+  padding: 20px;
+}
+
+hr {
+  border: 0;
+  height: 1px;
+  margin: 2rem 0;
+  background: var(--light-grey);
+}
+
+pre,
+textarea {
+  overflow: auto;
+}
+
+img {
+  margin: 10px auto 10px auto;
+  max-width: 100%;
+  display: block;
+}
+
+a img {
+  border: none;
+}
+
+figure {
+  margin: 0;
+  text-align: center;
+}
+
+fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+textarea {
+  resize: vertical;
+}
+
+.site-name {
+  color: var(--text-color);
+}
+
+
+@media (max-width: 900px) {
+  body {
+    padding: 0 2rem;
+  }
+
+  h1 {
+    font-size: 2.2rem;
+  }
+
+  h2 {
+    font-size: 1.8rem;
+  }
+
+  h3 {
+    font-size: 1.5rem;
+  }
+
+  h4 {
+    font-size: 1.3rem;
+  }
+}
+
+@media (max-width: 600px) {
+  body {
+    padding: 0 1rem;
+  }
+
+  h1 {
+    font-size: 1.8rem;
+  }
+
+  h2 {
+    font-size: 1.6rem;
+  }
+
+  h3 {
+    font-size: 1.2rem;
+  }
+
+  h4 {
+    font-size: 1rem;
+  }
+}

sass/blog.scss

@@ -0,0 +1,117 @@
+.posts {
+  margin: 0;
+  padding: 0;
+}
+
+.post {
+  display: block;
+
+  article {
+    img {
+      // max-width: 800px;
+      max-height: 90vh;
+
+      border-radius: var(--border-radius);
+    }
+  }
+}
+
+.post-header {
+  display: flex;
+  align-items: center;
+}
+
+.post-header .meta .date {
+  margin-right: 2rem;
+  width: 64px;
+  text-align: center;
+  color: var(--heading-color);
+}
+
+.post-header .meta .date .day {
+  font-family: "Playfair Display", serif;
+  font-weight: 700;
+  line-height: 0.75em;
+  font-size: 2em;
+  display: block;
+  margin: 0 0 0.5rem 0;
+}
+
+.post-header .meta .date .rest {
+  display: block;
+  font-size: 0.75em;
+}
+
+.post .title.small {
+  margin: 0 0 10px 0;
+}
+
+.post .post-header {
+  margin: 30px 0;
+}
+
+.post-header h1.title {
+  margin: -10px 0 0 0;
+}
+
+.archive-year {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.archive-year:before,
+.archive-year:after {
+  content: "";
+  border-top: 1px solid var(--light-grey);
+  margin: 0 20px 0 0;
+  flex: 1 0 20px;
+}
+
+.archive-year:after {
+  margin: 0 0 0 20px;
+}
+
+.youtube {
+
+  position: relative;
+  padding-bottom: 56.25%;
+
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.draft {
+  color: var(--red);
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.tags {
+  list-style: none;
+  padding: 0;
+  margin: 1rem 0;
+
+  li {
+    display: inline-block;
+
+
+    a {
+      display: block;
+      margin: 0.25rem;
+      padding: 0.25rem 1rem;
+      font-size: 0.9em;
+      background-color: transparent;
+      border: 1px solid var(--primary);
+      border-radius: var(--border-radius);
+    }
+
+  }
+}

sass/custom.scss

@@ -0,0 +1 @@
+// Override this scss file in your own sass folder to add your own styling

sass/footer.scss

@@ -0,0 +1,9 @@
+footer {
+  text-align: right;
+  font-size: 0.75em;
+  border-top: 1px solid var(--light-grey);
+  padding: 1rem 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

sass/gallery.scss

@@ -0,0 +1,50 @@
+.gallery {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: flex-start;
+  align-content: space-around;
+
+}
+
+.thumbnail {
+  display: inline-block;
+  width: 10rem;
+  // Body has 1rem horizontal padding
+  width: calc(100% / 6);
+
+  a {
+    display: inline-block;
+    padding: 0.5rem;
+
+    img {
+      margin: 0;
+      border-radius: var(--border-radius);
+    }
+  }
+}
+
+@media (max-width: 850px) {
+  .thumbnail {
+    width: calc(100% / 5);
+  }
+}
+
+@media (max-width: 700px) {
+  .thumbnail {
+    width: calc(100% / 4);
+  }
+}
+
+@media (max-width: 550px) {
+  .thumbnail {
+    width: calc(100% / 3);
+
+    a {
+      padding: 0.25rem;
+    }
+  }
+}

sass/header.scss

@@ -0,0 +1,89 @@
+header {
+  margin: 2rem 0;
+}
+
+header .avatar {
+  float: left;
+  margin: 0 2rem 0 0;
+}
+
+header .links {
+  line-height: 2.2rem;
+}
+
+header .avatar img {
+  width: 4rem;
+  height: 4rem;
+  overflow: hidden;
+  border-radius: 100%;
+}
+
+header .site-description {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  p {
+    margin: 0 0 1rem 0;
+  }
+}
+
+header h1 {
+  margin: 0;
+  // line-height: 0.2rem;
+}
+
+.social li,
+.social ul {
+  margin: 0;
+  padding: 0;
+}
+
+.social li {
+  display: inline-block;
+  list-style: none;
+  margin: 0 30px 0 0;
+}
+
+.social a {
+  color: #333;
+}
+
+.social a:hover {
+  color: var(--primary);
+}
+
+.social nav {
+  margin: 0;
+  padding: 0;
+  border: none;
+  min-width: 50px;
+  margin-left: 15px;
+}
+
+.social ul svg {
+  max-height: 15px;
+}
+
+nav {
+  border-top: 1px solid var(--light-grey);
+  padding-top: 1rem;
+}
+
+nav a {
+  margin-right: 1.5rem;
+}
+
+@media (max-width: 900px) {
+  .social li {
+    margin: 0;
+  }
+
+  nav a {
+    margin-right: 0.5rem;
+  }
+
+  header {
+    margin: 1rem 0;
+  }
+}

sass/normalize.scss

@@ -0,0 +1,351 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

sass/search.scss

@@ -0,0 +1,58 @@
+.search-container input {
+
+  width: 100%;
+  padding: 0.5rem 1rem;
+  margin-bottom: 2rem;
+  font-weight: bold;
+  background-color: transparent;
+  border: 1px solid var(--light-grey);
+  border-radius: var(--border-radius);
+}
+
+.search-container input:focus {
+  border-color: var(--dark-grey);
+}
+
+
+.search-results {
+  display: none;
+  color: var(--text-color);
+  overflow: auto;
+
+}
+
+.search-results__items {
+  list-style: none;
+}
+
+.search-results li {
+  margin-top: 1rem;
+  border-bottom: 1px solid var(--light-grey);
+}
+
+.search-results li:last-child {
+  border-bottom: none;
+}
+
+.search-results li:first-of-type {
+  margin-top: 0;
+}
+
+.search-results__item {
+  margin-bottom: 1rem;
+
+  h3 {
+    margin: 1rem 0 0 0;
+  }
+
+  p {
+    margin: 0 0 0 0;
+    padding-bottom: 1rem;
+  }
+}
+
+.search-results__item a {
+  font-size: 1.2rem;
+  display: inline-block;
+  margin-bottom: 0.5rem;
+}

sass/tags.scss

@@ -0,0 +1,9 @@
+.tag-cloud {
+  margin-top: 20px;
+}
+
+.tag-cloud li {
+  display: inline;
+  list-style-type: none;
+  padding-right: 20px;
+}

sass/typography.scss

@@ -0,0 +1,89 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-headings);
+  line-height: 1.3em;
+  margin: 30px 0 20px 0;
+  font-weight: bold;
+  color: var(--heading-color);
+}
+
+h1 {
+  font-size: 2.7rem;
+}
+
+h2 {
+  font-size: 2.3rem;
+}
+
+h3 {
+  font-size: 1.95rem;
+}
+
+h4 {
+  font-size: 1.55rem;
+}
+
+h5 {
+  font-size: 1.25rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
+blockquote {
+  margin-left: 1rem;
+  font-style: italic;
+  font-size: 1.4rem;
+  font-family: Georgia, bitstream charter, serif;
+  border-left: 3px solid;
+  border-color: var(--text-color);
+  padding-left: 20px;
+}
+
+blockquote cite {
+  font-size: 70%;
+  opacity: 0.8;
+}
+
+blockquote em {
+  font-weight: 600;
+}
+
+a {
+  color: var(--primary);
+  text-decoration: none;
+
+}
+
+a:hover,
+a.active {
+  text-decoration: underline;
+}
+
+input:focus,
+textarea:focus {
+  outline: none;
+}
+
+pre,
+code {
+  font-family: var(--font-monospace);
+  text-rendering: optimizeLegibility;
+}
+
+@media (max-width: 700px) {
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    letter-spacing: 1px;
+  }
+}

sass/utilities.scss

@@ -0,0 +1,19 @@
+.center {
+  text-align: center;
+}
+
+.ad-info {
+  border-left: solid 0.3rem #64dd17;
+  line-height: 24px;
+  overflow: hidden;
+  padding: 0.8rem;
+  background-color: rgba(100, 221, 23, 0.1);
+}
+
+.ad-warning {
+  border-left: solid 0.3rem #fa9209;
+  line-height: 24px;
+  overflow: hidden;
+  padding: 0.8rem;
+  background-color: red;
+}

sass/variables.scss

@@ -0,0 +1,17 @@
+:root {
+  --primary: #661fff;
+  --red: red;
+  --heading-color: #1a043b;
+  --text-color: #3e3f4d;
+  --bg-color: #f8f5f3;
+  --black: #212529;
+  --white: #fdfdfd;
+  --dark-grey: #343334;
+  --gray: #616060;
+  --light-grey: #ccc;
+  --lighter-gray: #f6f6f6;
+  --font-base: 'Andada Pro', sans-serif;
+  --font-monospace: menlo, monaco, lucida console, liberation mono, dejavu sans mono, bitstream vera sans mono, courier new, monospace, serif;
+  --font-headings: 'Andada Pro', sans-serif;
+  --border-radius: 0.5rem;
+}

static/js/search.js

@@ -0,0 +1,180 @@
+function debounce(func, wait) {
+  var timeout;
+
+  return function () {
+    var context = this;
+    var args = arguments;
+    clearTimeout(timeout);
+
+    timeout = setTimeout(function () {
+      timeout = null;
+      func.apply(context, args);
+    }, wait);
+  };
+}
+
+// Taken from mdbook
+// The strategy is as follows:
+// First, assign a value to each word in the document:
+//  Words that correspond to search terms (stemmer aware): 40
+//  Normal words: 2
+//  First word in a sentence: 8
+// Then use a sliding window with a constant number of words and count the
+// sum of the values of the words within the window. Then use the window that got the
+// maximum sum. If there are multiple maximas, then get the last one.
+// Enclose the terms in <b>.
+function makeTeaser(body, terms) {
+  var TERM_WEIGHT = 40;
+  var NORMAL_WORD_WEIGHT = 2;
+  var FIRST_WORD_WEIGHT = 8;
+  var TEASER_MAX_WORDS = 30;
+
+  var stemmedTerms = terms.map(function (w) {
+    return elasticlunr.stemmer(w.toLowerCase());
+  });
+  var termFound = false;
+  var index = 0;
+  var weighted = []; // contains elements of ["word", weight, index_in_document]
+
+  // split in sentences, then words
+  var sentences = body.toLowerCase().split(". ");
+
+  for (var i in sentences) {
+    var words = sentences[i].split(" ");
+    var value = FIRST_WORD_WEIGHT;
+
+    for (var j in words) {
+      var word = words[j];
+
+      if (word.length > 0) {
+        for (var k in stemmedTerms) {
+          if (elasticlunr.stemmer(word).startsWith(stemmedTerms[k])) {
+            value = TERM_WEIGHT;
+            termFound = true;
+          }
+        }
+        weighted.push([word, value, index]);
+        value = NORMAL_WORD_WEIGHT;
+      }
+
+      index += word.length;
+      index += 1;  // ' ' or '.' if last word in sentence
+    }
+
+    index += 1;  // because we split at a two-char boundary '. '
+  }
+
+  if (weighted.length === 0) {
+    return body;
+  }
+
+  var windowWeights = [];
+  var windowSize = Math.min(weighted.length, TEASER_MAX_WORDS);
+  // We add a window with all the weights first
+  var curSum = 0;
+  for (var i = 0; i < windowSize; i++) {
+    curSum += weighted[i][1];
+  }
+  windowWeights.push(curSum);
+
+  for (var i = 0; i < weighted.length - windowSize; i++) {
+    curSum -= weighted[i][1];
+    curSum += weighted[i + windowSize][1];
+    windowWeights.push(curSum);
+  }
+
+  // If we didn't find the term, just pick the first window
+  var maxSumIndex = 0;
+  if (termFound) {
+    var maxFound = 0;
+    // backwards
+    for (var i = windowWeights.length - 1; i >= 0; i--) {
+      if (windowWeights[i] > maxFound) {
+        maxFound = windowWeights[i];
+        maxSumIndex = i;
+      }
+    }
+  }
+
+  var teaser = [];
+  var startIndex = weighted[maxSumIndex][2];
+  for (var i = maxSumIndex; i < maxSumIndex + windowSize; i++) {
+    var word = weighted[i];
+    if (startIndex < word[2]) {
+      // missing text from index to start of `word`
+      teaser.push(body.substring(startIndex, word[2]));
+      startIndex = word[2];
+    }
+
+    // add <em/> around search terms
+    if (word[1] === TERM_WEIGHT) {
+      teaser.push("<b>");
+    }
+    startIndex = word[2] + word[0].length;
+    teaser.push(body.substring(word[2], startIndex));
+
+    if (word[1] === TERM_WEIGHT) {
+      teaser.push("</b>");
+    }
+  }
+  teaser.push("…");
+  return teaser.join("");
+}
+
+function formatSearchResultItem(item, terms) {
+  return '<div class="search-results__item">'
+    + `<h3><a href="${item.ref}">${item.doc.title}</a></h3>`
+    + `<p>${makeTeaser(item.doc.body, terms)}</p>`
+    + '</div>';
+}
+
+function initSearch() {
+  var $searchInput = document.getElementById("search");
+  var $searchResults = document.querySelector(".search-results");
+  var $searchResultsItems = document.querySelector(".search-results__items");
+  var MAX_ITEMS = 20;
+
+  var options = {
+    bool: "AND",
+    fields: {
+      title: { boost: 2 },
+      body: { boost: 1 },
+    }
+  };
+  var currentTerm = "";
+  var index = elasticlunr.Index.load(window.searchIndex);
+
+  $searchInput.addEventListener("keyup", debounce(function () {
+    var term = $searchInput.value.trim();
+    if (term === currentTerm || !index) {
+      return;
+    }
+    $searchResults.style.display = term === "" ? "none" : "block";
+    $searchResultsItems.innerHTML = "";
+    if (term === "") {
+      return;
+    }
+
+    var results = index.search(term, options);
+    if (results.length === 0) {
+      $searchResults.style.display = "none";
+      return;
+    }
+
+    currentTerm = term;
+    for (var i = 0; i < Math.min(results.length, MAX_ITEMS); i++) {
+      var item = document.createElement("li");
+      item.innerHTML = formatSearchResultItem(results[i], term.split(" "));
+      $searchResultsItems.appendChild(item);
+    }
+  }, 150));
+}
+
+
+if (document.readyState === "complete" ||
+  (document.readyState !== "loading" && !document.documentElement.doScroll)
+) {
+  initSearch();
+} else {
+  document.addEventListener("DOMContentLoaded", initSearch);
+}

templates/base.html

@@ -0,0 +1,134 @@
+{% import "macros/head.html" as head -%}
+{% import "macros/opengraph.html" as social -%}
+{% import "macros/hooks.html" as hooks -%}
+{% import "macros/images.html" as images -%}
+
+<!DOCTYPE html>
+<html lang="en" prefix="og: https://ogp.me/ns#">
+<head> 
+    {%- block general_meta -%}
+    {{ head::general_meta() }}
+    {%- endblock general_meta -%}
+    {%- block og_preview -%} 
+    {{ social::og_preview() }}
+    {%-endblock og_preview -%} 
+    {% block rss %}
+    <link rel="alternate"
+          type="application/rss+xml"
+          title="{{config.title}}"
+          href="{{ get_url(path='atom.xml',trailing_slash=false)|safe}}"> {%
+    endblock %}
+    <link rel="preconnect"
+          href="https://fonts.googleapis.com">
+    <link rel="preconnect"
+          href="https://fonts.gstatic.com"
+          crossorigin>
+    <!-- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">  -->
+    <link href="https://fonts.googleapis.com/css2?family=Andada+Pro&display=swap&family=Playfair+Display"
+          rel="stylesheet">
+    <link rel="stylesheet"
+          href="{{ get_url(path='base.css',trailing_slash=false)|safe}}">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.28.0/feather.min.js"
+            integrity="sha512-7x3zila4t2qNycrtZ31HO0NnJr8kg2VI67YLoRSyi9hGhRN66FHYWr7Axa9Y1J9tGYHVBPqIjSE1ogHrJTz51g=="
+            crossorigin="anonymous"></script>
+</head>
+
+<body>
+    <header>
+        {% if config.extra.avatar %}
+		<div class="avatar">
+			<a href="/">
+                {{ images::responsive_image(path="", src=config.extra.avatar, default_size=128, sizes=[64,128,256,512], alt=config.title  ) }}
+			</a>
+		</div>
+	    {% endif %}
+        <a class="site-name"
+           href="/">
+            <h1>{{ config.title }}</h1>
+        </a>
+        <div class="site-description">
+            <p>{{ config.description }}</p>
+        </div>
+        <nav>
+            <div class="links"> 
+            {% for menu_link in config.extra.menu_links %}
+                {% set link_url = menu_link.url | replace(from="$BASE_URL", to=config.base_url) %} 
+                <a {% if current_url and current_url==link_url %}class="active"  {%  endif %}
+                href="{{ link_url | safe}} ">{{menu_link.name}}</a> 
+            {% endfor %} 
+            </div>
+        </nav>
+    </header>
+    <article>
+    {% block content %} 
+    {% endblock %}
+    </article>
+    <footer>
+        <div class="social">
+            <ul> 
+                {# Github #} 
+                {% if config.extra.link_github_username %}
+                <li>
+                    <a href="https://github.com/{{ config.extra.link_github_username }}"
+                       title="Github" rel="me"><i data-feather="github"></i></a>
+                </li>
+                {% endif %} 
+
+                {# Mastadon #} 
+                {% if config.extra.link_mastodon_url %}
+                <li>
+                    <a href="{{ config.extra.link_mastodon_url }}"
+                       title="Mastodon" rel="me"><i data-feather="message-square"></i></a>
+                </li> 
+                {% endif %} 
+
+                {# Twitter #} 
+                {% if config.extra.link_twitter_username %}
+                <li>
+                    <a href="https://twitter.com/{{ config.extra.link_twitter_username }}"
+                       title="Twitter"
+                       rel="me"><i data-feather="twitter"></i></a>
+                </li>
+                {% endif %} 
+
+                {# Instagram #}
+                {% if config.extra.link_instagram_username %}
+                <li>
+                    <a href="https://www.instagram.com/jimmyff_art/{{ config.extra.link_instagram_username }}"
+                       title="Medium"
+                       rel="me"><i data-feather="instagram"></i></a>
+                </li>
+                {% endif %} 
+
+                {# Medium #}
+                {% if config.extra.link_medium_username %}
+                <li>
+                    <a href="https://medium.com/@{{ config.extra.link_medium_username }}"
+                       title="Medium"
+                       rel="me"><i data-feather="file-text"></i></a>
+                </li>
+                {% endif %} 
+
+                {# RSS feed #}
+                <li>
+                    <a href="{{ get_url(path='atom.xml',trailing_slash=false)|safe }}"
+                       title="{{config.title}}"><i data-feather="rss"></i></a>
+                </li>
+            </ul>
+        </div>
+        <p> © {{ config.title }} {{ now() | date(format="%Y") }}
+
+        {#  If you remove the powered by information, it would be appreciated if 
+            you could add information & links somewhere else on your site to credit 
+            those that have created your tools. #}
+        {% if config.extra.disable_powered_by and config.extra.disable_powered_by == true %}{% else %}<br>Powered by <a target="_blank" href="https://getzola.org/">Zola</a>. Theme: <a target="_blank" href="https://github.com/jimmyff/zola-inky">Inky</a>.{% endif %}
+        </p>
+    </footer>
+    <script>
+        feather.replace();
+    </script> 
+    {% block body_end %} 
+    {% endblock %}
+</body>
+
+</html>

templates/gallery.html

@@ -0,0 +1,25 @@
+
+{% extends "base.html" %} {% block content %}
+<h1 class="title">{{ section.title }}</h1>
+
+<article>{{ section.content | safe }}</article>
+
+{% for year, posts in section.pages | group_by(attribute="year") %}
+<ul class="gallery flat">
+  <h2 class="archive-year">{{ year }}</h2>
+  {% for post in posts %}
+  {% if post.extra.images  %}
+  {% for image in post.extra.images %}
+  {# { set image = resize_image(path=post.path ~ image, width=256, height=256, format=config.extra.image_format, quality=config.extra.thumbnail_quality) %} #}
+  <li class="thumbnail">
+    <a href="{{ post.permalink | safe }}" title="{{ post.title }} - {{ post.date }}">
+      {{ images::responsive_thumbnail(path="", src=post.path ~ image, default_size=128, sizes=[128,256], alt=post.title  ~ " - "  ~ post.date ) }}
+    </a>
+
+  </li>
+  {% endfor %}
+  {% endif %}
+  {% endfor %}
+</ul>
+{% endfor %} {% endblock content %}
+

templates/index.html

@@ -0,0 +1,6 @@
+{% extends "base.html" %}
+
+{% block content %}
+<article>{{ section.content | safe }}</article>
+
+{% endblock content %}

templates/macros/head.html

@@ -0,0 +1,11 @@
+{% macro general_meta() %}
+<meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible"
+      content="IE=edge">
+<meta name="viewport"
+      content="width=device-width, initial-scale=1.0" />
+<meta name="description"
+      content="{{ config.description }}" />
+<meta name="keywords"
+      content="{{ config.extra.keywords }}" /> 
+{% endmacro general_meta %}

templates/macros/hooks.html

@@ -0,0 +1,6 @@
+{% extends "base.html" %}
+
+{# Page hooks #}
+{% macro above_page(page) %}{% endmacro above_page %}
+{% macro below_page(page) %}{% endmacro below_page %}
+{% macro below_tags(page) %}{% endmacro below_tags %}

templates/macros/images.html

@@ -0,0 +1,47 @@
+{% extends "base.html" %}
+
+{# 
+    Original author: crepererum https://github.com/getzola/even/pull/48/files 
+    Adapted to Inky template by jimmyff
+#}
+
+{% macro responsive_image(path, src, alt, default_size, sizes) %}
+{% if config.extra.image_resizing_disabled and config.extra.image_resizing_disabled == true %}
+<img alt="{{ alt }}" src="{{ src | safe }}" />
+{% else %}
+    {% set abspath = "./" ~ path ~ src  %}
+    {% set meta = get_image_metadata(path=abspath) %}
+    {% set width = meta.width %}
+    {% set srcset_list = [] %}
+    {% for s in sizes %}
+    {% if width >= s %}
+    {% set resized = resize_image(format=config.extra.image_format, path=abspath, width=s, op="fit_width", quality=config.extra.image_quality) %}
+    {% set element = resized.url ~ " " ~ s ~ "w" %}
+    {% set_global srcset_list = srcset_list | concat(with=[element]) %}
+    {% endif %}
+    {% endfor %}
+    {% set default_resized = resize_image(format=config.extra.image_format, path=abspath, width=default_size, op="fit_width", quality=config.extra.image_quality) %}
+    <img alt="{{ alt }}" src="{{ default_resized.url | safe }}" srcset="{{ srcset_list | join(sep=", ") | safe }}" />
+{% endif %}
+{% endmacro responsive_image %}
+
+
+{% macro responsive_thumbnail(path, src, alt, default_size, sizes) %}
+{% if config.extra.image_resizing_disabled and config.extra.image_resizing_disabled == true %}
+    <img alt="{{ alt }}" src="{{ src | safe }}" />
+{% else %}
+    {% set abspath = "./" ~ path ~ src  %}
+    {% set meta = get_image_metadata(path=abspath) %}
+    {% set width = meta.width %}
+    {% set srcset_list = [] %}
+    {% for s in sizes %}
+    {% if width >= s %}
+    {% set resized = resize_image(format=config.extra.image_format, path=abspath, width=s, height=s, op="fill", quality=config.extra.thumbnail_quality) %}
+    {% set element = resized.url ~ " " ~ s ~ "w" %}
+    {% set_global srcset_list = srcset_list | concat(with=[element]) %}
+    {% endif %}
+    {% endfor %}
+    {% set default_resized = resize_image(format=config.extra.image_format, path=abspath, width=default_size, height=default_size, op="fill", quality=config.extra.thumbnail_quality) %}
+    <img alt="{{ alt }}" src="{{ default_resized.url | safe }}" srcset="{{ srcset_list | join(sep=", ") | safe }}" />
+{% endif %}
+{% endmacro responsive_thumbnail %}

templates/macros/opengraph.html

@@ -0,0 +1,53 @@
+{% macro og_preview() %}
+<title>{{config.title}} | {{social::og_title() }}</title>
+<meta
+  property="og:title"
+  content="{{config.title}} | {{social::og_title() }}"
+/>
+<meta property="og:type" content="website" />
+<meta property="og:url" content="{{ current_url | safe }}" />
+<meta property="og:description" content="{{ social::og_description() }}" />
+<meta property="og:image" content="{{social::og_image() }}" />
+<meta property="og:image:url" content="{{social::og_image() }}" />
+<meta property="og:image:secure_url" content="{{social::og_image() }}" />
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:title" content="{{social::og_title() }}" />
+<meta name="twitter:description" content="{{ social::og_description() }}" />
+<meta property="twitter:image" content="{{social::og_image() }}" />
+
+{% endmacro og_preview %}
+
+{% macro og_description() %} {%- if section -%} {%- if
+section.description -%} {{ section.description }} {%- else -%} {{
+config.description }} {%- endif -%} {%- elif page -%} {%- if page.summary |
+string -%} {{ page.summary | striptags | truncate(length=200) }} {%- elif
+page.description -%} {{ page.description }} {%- else -%} {{ config.description
+}} {%- endif -%} {%- endif -%}
+{% endmacro og_description %}
+
+{% macro og_title() %}
+{%- if section -%}
+{%- if section.title -%}
+{{ section.title | striptags }}{%- else -%}
+{{ config.description }}{%- endif -%}
+{%- elif page -%}
+{%- if page.title -%}
+{{ page.title | striptags }}
+{%- else -%}
+{{ config.description }}
+{%- endif -%}
+{%- elif term -%}
+  {%- if term.name -%}
+    {{ term.name | striptags }}
+  {%- else -%}
+    {{ config.description }}
+  {%- endif -%}
+{%- elif taxonomy -%}
+{%- if taxonomy.name -%} {{ taxonomy.name | striptags }} {%- else -%} {{ config.description }} {%- endif -%} {%- endif -%}
+{% endmacro og_title %}
+
+{% macro og_image() %}
+{%- if page.extra.og_preview_img -%}
+{{ get_url(path=page.extra.og_preview_img) | safe }}
+{%- endif -%}
+{% endmacro og_image %}

templates/page.html

@@ -0,0 +1,16 @@
+{% extends "base.html" %}
+
+{% block title %}
+{{ config.title }} | {{page.title}}
+{% endblock title %}
+
+{% block content %}
+<h1 class="title">
+    {{ page.title }}
+</h1>
+
+<article>
+    {{ page.content | safe }}
+</article>
+
+{% endblock content %}

templates/post.html

@@ -0,0 +1,29 @@
+{% extends "base.html" %} {% block content %}
+<h1 class="title">{{ section.title }}</h1>
+
+<article>{{ section.content | safe }}</article>
+
+{% for year, posts in section.pages | group_by(attribute="year") %}
+<ul class="posts flat">
+  <h2 class="archive-year">{{ year }}</h2>
+  {% for post in posts %}
+  <li class="post">
+    <div class="post-header">
+      <div class="meta">
+        <div class="date">
+          <span class="day">{{ post.day }}</span>
+          <span class="rest">{{ post.date | date(format='%b') }}</span>
+        </div>
+      </div>
+      <div class="matter">
+        <h4 class="title small">
+          <a href="{{ post.permalink | safe }}">{{ post.title }}</a>
+          {% if post.draft %}<span class="draft">Draft</span>{% endif %}
+        </h4>
+        <span class="description"> {{post.description}} </span>
+      </div>
+    </div>
+  </li>
+  {% endfor %}
+</ul>
+{% endfor %} {% endblock content %}

templates/search.html

@@ -0,0 +1,22 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+<script type="text/javascript" src="{{ get_url(path='elasticlunr.min.js')|safe  }}"></script>
+<script type="text/javascript" src="{{ get_url(path='search_index.en.js')|safe }}"></script>
+<script type="text/javascript" src="{{ get_url(path='js/search.js')|safe }}"></script>
+
+<div class="search-container">
+    <input id="search"
+            autofocus="true"
+           type="search"
+           placeholder="Search ↵">
+    <div class="search-results">
+        <div class="search-results__items"></div>
+    </div>
+</div>
+
+
+{% endblock content %}
+
+

templates/section.html

@@ -0,0 +1,33 @@
+
+{% extends "base.html" %}
+{% block content %}
+
+<section class="post">
+  <div class="post-header">
+    <div class="meta">
+      <div class="date">
+        <span class="day">{{ page.date | date(format='%d')}}</span>
+        <span class="rest">{{ page.date | date(format='%b %y')}}</span>
+      </div>
+    </div>
+
+    <div class="matter">
+      <h1 class="title">{{ page.title }} {% if page.draft %}<span class="draft">Draft</span>{% endif %}</h1>
+    </div>
+  </div>
+  {{ hooks::above_page(page=page) }}  
+  <article>{{ page.content | safe }}</article>
+
+  
+  {{ hooks::below_page(page=page) }}  
+  {% if page.taxonomies is containing ("tags") %}
+  <ul class="tags">
+    {% for tag in page.taxonomies["tags"] %}
+      <li><a href='/tags/{{ tag | slugify }}'>{{ tag }}</a></li>
+    {% endfor %}
+  </ul>
+  {% endif %}
+  
+  {{ hooks::below_tags(page=page) }}  
+</section>
+{% endblock content %}

templates/shortcodes/image.html

@@ -0,0 +1,5 @@
+
+{% import "macros/images.html" as images -%}
+
+{{ images::responsive_image(path=page.path, src=src, default_size=config.extra.images_default_size, sizes=config.extra.images_sizes, alt=alt  ) }}
+

templates/shortcodes/spotify.html

@@ -0,0 +1,5 @@
+<div class="center">
+    <iframe src="https://open.spotify.com/embed/album/{{id}}" width="300" height="380" frameborder="0"
+        allowtransparency="true" allow="encrypted-media">
+    </iframe>
+</div>

templates/shortcodes/thumbnail.html

@@ -0,0 +1,22 @@
+{# 
+    Original author: crepererum https://github.com/getzola/even/pull/48/files 
+    Adapted to Inky template by jimmyff
+#}
+
+{% if config.extra.image_resizing_disabled and config.extra.image_resizing_disabled == true %}
+<img alt="{{ alt }}" src="{{ src | safe }}" />
+{% else %}
+{% set abspath = "./" ~ page.path ~ src  %}
+{% set meta = get_image_metadata(path=abspath) %}
+{% set width = meta.width %}
+{% set srcset_list = [] %}
+{% for s in config.extra.thumbnail_sizes %}
+{% if width >= s %}
+{% set resized = resize_image(format=config.extra.image_format, path=abspath, width=s, height=s, op="fill", quality=config.extra.thumbnail_quality) %}
+{% set element = resized.url ~ " " ~ s ~ "w" %}
+{% set_global srcset_list = srcset_list | concat(with=[element]) %}
+{% endif %}
+{% endfor %}
+{% set default_resized = resize_image(format=config.extra.image_format, path=abspath, width=config.extra.images_default_size, height=config.extra.images_default_size, op="fill", quality=config.extra.thumbnail_quality) %}
+<img alt="{{ alt }}" src="{{ default_resized.url | safe }}" srcset="{{ srcset_list | join(sep=", ") | safe }}" />
+{% endif %}1

templates/shortcodes/youtube.html

@@ -0,0 +1,7 @@
+<div class="youtube{% if class %} {{class}}{% endif %}">
+    <iframe  src="https://www.youtube.com/embed/{{id}}{% if autoplay %}?autoplay=1{% endif %}"
+    webkitallowfullscreen
+    mozallowfullscreen
+    allowfullscreen>
+    </iframe>
+</div>

templates/taxonomy_list.html

@@ -0,0 +1,14 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+<h1>{{ taxonomy.name | capitalize }}</h1>
+
+{% if terms %}
+<ul class="tag-cloud">
+    {% for term in terms %}
+    <li><a href="{{ term.permalink | safe }}">{{ term.name }}<sup>{{ term.pages | length }}</sup></a></li>
+    {% endfor %}
+</ul>
+{% endif %}
+{% endblock content %}

templates/taxonomy_single.html

@@ -0,0 +1,29 @@
+{% extends "base.html" %}
+
+{% block content %}
+<h1>{{taxonomy.name | capitalize }} &raquo; {{ term.name | capitalize }}</h1>
+
+{%  for year, posts in  term.pages | group_by(attribute="year")  %}
+<ul class="posts flat">
+    <h2 class="archive-year">{{ year }}</h2>
+    {% for post in posts %}
+    <li class="post">
+      <div class="post-header">
+        <div class="meta">
+          <div class="date">
+            <span class="day">{{ post.day }}</span>
+            <span class="rest">{{ post.date | date(format='%b') }}</span>
+          </div>
+        </div>
+        <div class="matter">
+          <h4 class="title small">
+            <a href="{{ post.permalink | safe }}">{{ post.title }}</a>
+            {% if post.draft %}<span class="draft">Draft</span>{% endif %}
+          </h4>
+          <span class="description"> {{post.description}} </span>
+        </div>
+      </div>
+    </li>
+    {% endfor %}
+  </ul>
+  {% endfor %}{% endblock content %}

theme.toml

@@ -0,0 +1,19 @@
+name = "zola-inky"
+description = "Simple theme"
+license = "MIT"
+homepage = "https://github.com/getzola/hyde"
+# The minimum version of Zola required
+min_version = "0.4.0"
+# An optional live demo URL
+demo = ""
+
+[extra]
+
+[author]
+name = "jimmyff"
+homepage = "https://www.jimmyff.co.uk"
+
+[original]
+author =  "mr-karan"
+homepage = "https://mrkaran.dev/"
+repo = "https://github.com/mr-karan/website"