Merge pull request #11 from spaytac/v5.6.0

V5.6.0

.devcontainer/Dockerfile

@@ -1,14 +1,14 @@
-# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18, 16, 14, 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster
-ARG VARIANT=16-bullseye
-FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
-
-# [Optional] Uncomment this section to install additional OS packages.
-# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
-#     && apt-get -y install --no-install-recommends <your-package-list-here>
-
-# [Optional] Uncomment if you want to install an additional version of node using nvm
-# ARG EXTRA_NODE_VERSION=10
-# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
-
-# [Optional] Uncomment if you want to install more global node modules
-# RUN su node -c "npm install -g <your-package-list-here>"
+# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18, 16, 14, 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster
+ARG VARIANT=16-bullseye
+FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
+
+# [Optional] Uncomment this section to install additional OS packages.
+# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+#     && apt-get -y install --no-install-recommends <your-package-list-here>
+
+# [Optional] Uncomment if you want to install an additional version of node using nvm
+# ARG EXTRA_NODE_VERSION=10
+# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
+
+# [Optional] Uncomment if you want to install more global node modules
+# RUN su node -c "npm install -g <your-package-list-here>"

.devcontainer/base.Dockerfile

@@ -1,55 +1,55 @@
-# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster
-ARG VARIANT=16-bullseye
-FROM node:${VARIANT}
-
-# [Option] Install zsh
-ARG INSTALL_ZSH="true"
-# [Option] Upgrade OS packages to their latest versions
-ARG UPGRADE_PACKAGES="true"
-
-# Install needed packages, yarn, nvm and setup non-root user. Use a separate RUN statement to add your own dependencies.
-ARG USERNAME=node
-ARG USER_UID=1000
-ARG USER_GID=$USER_UID
-ARG NPM_GLOBAL=/usr/local/share/npm-global
-ENV NVM_DIR=/usr/local/share/nvm
-ENV NVM_SYMLINK_CURRENT=true \ 
-    PATH=${NPM_GLOBAL}/bin:${NVM_DIR}/current/bin:${PATH}
-COPY library-scripts/*.sh library-scripts/*.env /tmp/library-scripts/
-RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
-    # Remove imagemagick due to https://security-tracker.debian.org/tracker/CVE-2019-10131
-    && apt-get purge -y imagemagick imagemagick-6-common \
-    # Install common packages, non-root user, update yarn and install nvm
-    && bash /tmp/library-scripts/common-debian.sh "${INSTALL_ZSH}" "${USERNAME}" "${USER_UID}" "${USER_GID}" "${UPGRADE_PACKAGES}" "true" "true" \
-    # Install yarn, nvm
-    && rm -rf /opt/yarn-* /usr/local/bin/yarn /usr/local/bin/yarnpkg \
-    && bash /tmp/library-scripts/node-debian.sh "${NVM_DIR}" "none" "${USERNAME}" \
-    # Configure global npm install location, use group to adapt to UID/GID changes
-    && if ! cat /etc/group | grep -e "^npm:" > /dev/null 2>&1; then groupadd -r npm; fi \
-    && usermod -a -G npm ${USERNAME} \
-    && umask 0002 \
-    && mkdir -p ${NPM_GLOBAL} \
-    && touch /usr/local/etc/npmrc \
-    && chown ${USERNAME}:npm ${NPM_GLOBAL} /usr/local/etc/npmrc \
-    && chmod g+s ${NPM_GLOBAL} \
-    && npm config -g set prefix ${NPM_GLOBAL} \
-    && sudo -u ${USERNAME} npm config -g set prefix ${NPM_GLOBAL} \
-    # Install eslint
-    && su ${USERNAME} -c "umask 0002 && npm install -g eslint" \
-    && npm cache clean --force > /dev/null 2>&1 \
-    # Install python-is-python3 on bullseye to prevent node-gyp regressions
-    && . /etc/os-release \
-    && if [ "${VERSION_CODENAME}" = "bullseye" ]; then apt-get -y install --no-install-recommends python-is-python3; fi \
-    # Clean up
-    && apt-get autoremove -y && apt-get clean -y && rm -rf /var/lib/apt/lists/* /root/.gnupg /tmp/library-scripts
-
-# [Optional] Uncomment this section to install additional OS packages.
-# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
-#     && apt-get -y install --no-install-recommends <your-package-list-here>
-
-# [Optional] Uncomment if you want to install an additional version of node using nvm
-# ARG EXTRA_NODE_VERSION=10
-# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
-
-# [Optional] Uncomment if you want to install more global node modules
+# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster
+ARG VARIANT=16-bullseye
+FROM node:${VARIANT}
+
+# [Option] Install zsh
+ARG INSTALL_ZSH="true"
+# [Option] Upgrade OS packages to their latest versions
+ARG UPGRADE_PACKAGES="true"
+
+# Install needed packages, yarn, nvm and setup non-root user. Use a separate RUN statement to add your own dependencies.
+ARG USERNAME=node
+ARG USER_UID=1000
+ARG USER_GID=$USER_UID
+ARG NPM_GLOBAL=/usr/local/share/npm-global
+ENV NVM_DIR=/usr/local/share/nvm
+ENV NVM_SYMLINK_CURRENT=true \ 
+    PATH=${NPM_GLOBAL}/bin:${NVM_DIR}/current/bin:${PATH}
+COPY library-scripts/*.sh library-scripts/*.env /tmp/library-scripts/
+RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+    # Remove imagemagick due to https://security-tracker.debian.org/tracker/CVE-2019-10131
+    && apt-get purge -y imagemagick imagemagick-6-common \
+    # Install common packages, non-root user, update yarn and install nvm
+    && bash /tmp/library-scripts/common-debian.sh "${INSTALL_ZSH}" "${USERNAME}" "${USER_UID}" "${USER_GID}" "${UPGRADE_PACKAGES}" "true" "true" \
+    # Install yarn, nvm
+    && rm -rf /opt/yarn-* /usr/local/bin/yarn /usr/local/bin/yarnpkg \
+    && bash /tmp/library-scripts/node-debian.sh "${NVM_DIR}" "none" "${USERNAME}" \
+    # Configure global npm install location, use group to adapt to UID/GID changes
+    && if ! cat /etc/group | grep -e "^npm:" > /dev/null 2>&1; then groupadd -r npm; fi \
+    && usermod -a -G npm ${USERNAME} \
+    && umask 0002 \
+    && mkdir -p ${NPM_GLOBAL} \
+    && touch /usr/local/etc/npmrc \
+    && chown ${USERNAME}:npm ${NPM_GLOBAL} /usr/local/etc/npmrc \
+    && chmod g+s ${NPM_GLOBAL} \
+    && npm config -g set prefix ${NPM_GLOBAL} \
+    && sudo -u ${USERNAME} npm config -g set prefix ${NPM_GLOBAL} \
+    # Install eslint
+    && su ${USERNAME} -c "umask 0002 && npm install -g eslint" \
+    && npm cache clean --force > /dev/null 2>&1 \
+    # Install python-is-python3 on bullseye to prevent node-gyp regressions
+    && . /etc/os-release \
+    && if [ "${VERSION_CODENAME}" = "bullseye" ]; then apt-get -y install --no-install-recommends python-is-python3; fi \
+    # Clean up
+    && apt-get autoremove -y && apt-get clean -y && rm -rf /var/lib/apt/lists/* /root/.gnupg /tmp/library-scripts
+
+# [Optional] Uncomment this section to install additional OS packages.
+# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+#     && apt-get -y install --no-install-recommends <your-package-list-here>
+
+# [Optional] Uncomment if you want to install an additional version of node using nvm
+# ARG EXTRA_NODE_VERSION=10
+# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
+
+# [Optional] Uncomment if you want to install more global node modules
 # RUN su node -c "npm install -g <your-package-list-here>""

.devcontainer/devcontainer.json

@@ -1,32 +1,32 @@
-// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
-// https://github.com/microsoft/vscode-dev-containers/tree/v0.245.2/containers/javascript-node
-{
-	"name": "Node.js",
-	"build": {
-		"dockerfile": "Dockerfile",
-		// Update 'VARIANT' to pick a Node version: 18, 16, 14.
-		// Append -bullseye or -buster to pin to an OS version.
-		// Use -bullseye variants on local arm64/Apple Silicon.
-		"args": { "VARIANT": "16-bullseye" }
-	},
-
-	// Configure tool-specific properties.
-	"customizations": {
-		// Configure properties specific to VS Code.
-		"vscode": {
-			// Add the IDs of extensions you want installed when the container is created.
-			"extensions": [
-				"dbaeumer.vscode-eslint"
-			]
-		}
-	},
-
-	// Use 'forwardPorts' to make a list of ports inside the container available locally.
-	// "forwardPorts": [],
-
-	// Use 'postCreateCommand' to run commands after the container is created.
-	// "postCreateCommand": "yarn install",
-
-	// Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
-	"remoteUser": "node"
-}
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
+// https://github.com/microsoft/vscode-dev-containers/tree/v0.245.2/containers/javascript-node
+{
+	"name": "Node.js",
+	"build": {
+		"dockerfile": "Dockerfile",
+		// Update 'VARIANT' to pick a Node version: 18, 16, 14.
+		// Append -bullseye or -buster to pin to an OS version.
+		// Use -bullseye variants on local arm64/Apple Silicon.
+		"args": { "VARIANT": "16-bullseye" }
+	},
+
+	// Configure tool-specific properties.
+	"customizations": {
+		// Configure properties specific to VS Code.
+		"vscode": {
+			// Add the IDs of extensions you want installed when the container is created.
+			"extensions": [
+				"dbaeumer.vscode-eslint"
+			]
+		}
+	},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "yarn install",
+
+	// Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+	"remoteUser": "node"
+}

.github/workflows/yarn-gulp.yml

@@ -0,0 +1,44 @@
+name: NodeJS with Gulp
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+#        node-version: [14.x, 16.x, 18.x]
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'yarn'
+    - name: Install dependencies
+      run: yarn
+    - name: Theme Test
+      run: yarn test
+    - name: Build & zip package
+      run: yarn zip
+
+  release:
+    runs-on: ubuntu-latest
+    needs: [build]
+    steps:
+      - uses: actions/checkout@master
+      - name: Create release
+        uses: softprops/action-gh-release@v1
+        if: startsWith(github.ref, 'refs/tags/')
+        with:
+          files: dist/casper-aytac.zip
+          draft: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GST_TOKEN }}

LICENSE

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

README.md

@@ -1,69 +1,69 @@
-# Casper
-
-The default theme for [Ghost](http://github.com/tryghost/ghost/). This is the latest development version of Casper! If you're just looking to download the latest release, head over to the [releases](https://github.com/TryGhost/Casper/releases) page.
-
- 
-
-![screenshot-desktop](https://user-images.githubusercontent.com/1418797/183329195-8e8f2ee5-a473-4694-a813-a2575491209e.png)
-
- 
-
-# First time using a Ghost theme?
-
-Ghost uses a simple templating language called [Handlebars](http://handlebarsjs.com/) for its themes.
-
-This theme has lots of code comments to help explain what's going on just by reading the code. Once you feel comfortable with how everything works, we also have full [theme API documentation](https://ghost.org/docs/themes/) which explains every possible Handlebars helper and template.
-
-**The main files are:**
-
-- `default.hbs` - The parent template file, which includes your global header/footer
-- `index.hbs` - The main template to generate a list of posts, usually the home page
-- `post.hbs` - The template used to render individual posts
-- `page.hbs` - Used for individual pages
-- `tag.hbs` - Used for tag archives, eg. "all posts tagged with `news`"
-- `author.hbs` - Used for author archives, eg. "all posts written by Jamie"
-
-One neat trick is that you can also create custom one-off templates by adding the slug of a page to a template file. For example:
-
-- `page-about.hbs` - Custom template for an `/about/` page
-- `tag-news.hbs` - Custom template for `/tag/news/` archive
-- `author-ali.hbs` - Custom template for `/author/ali/` archive
-
-
-# Development
-
-Casper styles are compiled using Gulp/PostCSS to polyfill future CSS spec. You'll need [Node](https://nodejs.org/), [Yarn](https://yarnpkg.com/) and [Gulp](https://gulpjs.com) installed globally. After that, from the theme's root directory:
-
-```bash
-# install dependencies
-yarn install
-
-# run development server
-yarn dev
-```
-
-Now you can edit `/assets/css/` files, which will be compiled to `/assets/built/` automatically.
-
-The `zip` Gulp task packages the theme files into `dist/<theme-name>.zip`, which you can then upload to your site.
-
-```bash
-# create .zip file
-yarn zip
-```
-
-# PostCSS Features Used
-
-- Autoprefixer - Don't worry about writing browser prefixes of any kind, it's all done automatically with support for the latest 2 major versions of every browser.
-- [Color Mod](https://github.com/jonathantneal/postcss-color-mod-function)
-
-
-# SVG Icons
-
-Casper uses inline SVG icons, included via Handlebars partials. You can find all icons inside `/partials/icons`. To use an icon just include the name of the relevant file, eg. To include the SVG icon in `/partials/icons/rss.hbs` - use `{{> "icons/rss"}}`.
-
-You can add your own SVG icons in the same manner.
-
-
-# Copyright & License
-
-Copyright (c) 2013-2022 Ghost Foundation - Released under the [MIT license](LICENSE).
+# Casper
+
+The default theme for [Ghost](http://github.com/tryghost/ghost/). This is the latest development version of Casper! If you're just looking to download the latest release, head over to the [releases](https://github.com/TryGhost/Casper/releases) page.
+
+&nbsp;
+
+![screenshot-desktop](https://user-images.githubusercontent.com/1418797/183329195-8e8f2ee5-a473-4694-a813-a2575491209e.png)
+
+&nbsp;
+
+# First time using a Ghost theme?
+
+Ghost uses a simple templating language called [Handlebars](http://handlebarsjs.com/) for its themes.
+
+This theme has lots of code comments to help explain what's going on just by reading the code. Once you feel comfortable with how everything works, we also have full [theme API documentation](https://ghost.org/docs/themes/) which explains every possible Handlebars helper and template.
+
+**The main files are:**
+
+- `default.hbs` - The parent template file, which includes your global header/footer
+- `index.hbs` - The main template to generate a list of posts, usually the home page
+- `post.hbs` - The template used to render individual posts
+- `page.hbs` - Used for individual pages
+- `tag.hbs` - Used for tag archives, eg. "all posts tagged with `news`"
+- `author.hbs` - Used for author archives, eg. "all posts written by Jamie"
+
+One neat trick is that you can also create custom one-off templates by adding the slug of a page to a template file. For example:
+
+- `page-about.hbs` - Custom template for an `/about/` page
+- `tag-news.hbs` - Custom template for `/tag/news/` archive
+- `author-ali.hbs` - Custom template for `/author/ali/` archive
+
+
+# Development
+
+Casper styles are compiled using Gulp/PostCSS to polyfill future CSS spec. You'll need [Node](https://nodejs.org/), [Yarn](https://yarnpkg.com/) and [Gulp](https://gulpjs.com) installed globally. After that, from the theme's root directory:
+
+```bash
+# install dependencies
+yarn install
+
+# run development server
+yarn dev
+```
+
+Now you can edit `/assets/css/` files, which will be compiled to `/assets/built/` automatically.
+
+The `zip` Gulp task packages the theme files into `dist/<theme-name>.zip`, which you can then upload to your site.
+
+```bash
+# create .zip file
+yarn zip
+```
+
+# PostCSS Features Used
+
+- Autoprefixer - Don't worry about writing browser prefixes of any kind, it's all done automatically with support for the latest 2 major versions of every browser.
+- [Color Mod](https://github.com/jonathantneal/postcss-color-mod-function)
+
+
+# SVG Icons
+
+Casper uses inline SVG icons, included via Handlebars partials. You can find all icons inside `/partials/icons`. To use an icon just include the name of the relevant file, eg. To include the SVG icon in `/partials/icons/rss.hbs` - use `{{> "icons/rss"}}`.
+
+You can add your own SVG icons in the same manner.
+
+
+# Copyright & License
+
+Copyright (c) 2013-2022 Ghost Foundation - Released under the [MIT license](LICENSE).

assets/css/screen.css

@@ -6,20 +6,19 @@ production stylesheet in assets/built/screen.css
 
 1.  Global Styles
 2.  Layout
-3.  Special Templates
-4.  Site Header
-5.  Site Navigation
-6.  Post Feed
-7.  Single Post
-  7.1. Post Byline
-  7.2. Members Subscribe Form
-  7.4. Related Posts
-  7.5. Koenig Styles
-  7.6  Comments
-8.  Author Template
+3.  Site Header
+4.  Site Navigation
+5.  Post Feed
+6.  Single Post
+  6.1. Post Byline
+  6.2. Subscribe
+  6.3. Read More
+  6.4. Comments
+7.  Author Template
+8.  Tag Template
 9.  Error Template
-11. Site Footer
-12. Dark Mode
+10.  Site Footer
+11. Dark Mode
 
 */
 
@@ -64,6 +63,7 @@ production stylesheet in assets/built/screen.css
 /* ---------------------------------------------------------- */
 
 .viewport {
+    position: relative;
     display: flex;
     flex-direction: column;
     min-height: 100vh;
@@ -87,7 +87,7 @@ production stylesheet in assets/built/screen.css
 }
 
 
-/* 4. Site Header
+/* 3. Site Header
 /* ---------------------------------------------------------- */
 
 .site-header {
@@ -247,18 +247,18 @@ production stylesheet in assets/built/screen.css
         font-size: 3.4rem !important;
     }
     .site-description {
-        font-size: 2.8rem !important;
+        font-size: 2.2rem !important;
     }
     .site-logo + .site-description {
         margin-top: 12px !important;
     }
     .site-title + .site-description {
-        margin-top: 4px !important;
+        margin-top: 12px !important;
     }
 }
 
 
-/* 5. Site Navigation
+/* 4. Site Navigation
 /* ---------------------------------------------------------- */
 
 .gh-head {
@@ -266,6 +266,7 @@ production stylesheet in assets/built/screen.css
     font-size: 1.6rem;
     line-height: 1.3em;
     background-color: #fff;
+    z-index: 150;
 }
 
 .has-cover:not(.home-template) .gh-head {
@@ -303,11 +304,11 @@ production stylesheet in assets/built/screen.css
     grid-template-columns: auto 1fr auto;
 }
 
-.is-head-left-logo.home-template .gh-head-logo {
+.is-head-left-logo.home-template .gh-head:not(.is-header-hidden) .gh-head-logo {
     display: none;
 }
 
-.is-head-left-logo.home-template .gh-head-menu {
+.is-head-left-logo.home-template .gh-head:not(.is-header-hidden) .gh-head-menu {
     margin-left: -40px;
 }
 
@@ -412,7 +413,7 @@ production stylesheet in assets/built/screen.css
 }
 
 .gh-head-logo.no-image {
-    margin-top: -2px;
+    margin-top: -5px;
 }
 
 .has-cover .gh-head-logo {
@@ -596,6 +597,14 @@ production stylesheet in assets/built/screen.css
     background: #fff;
 }
 
+@media (max-width: 767px) {
+    .gh-head-members {
+        flex-direction: column-reverse;
+        gap: 16px;
+        width: 100%;
+    }
+}
+
 
 /* Search
 /* ---------------------------------------------------------- */
@@ -755,6 +764,11 @@ production stylesheet in assets/built/screen.css
         transform: translateY(-4px);
     }
 
+    #gh-head :is(.gh-head-button, .gh-head-link) {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+
     #gh-head .gh-head-button {
         width: 100%;
         font-size: 1.8rem;
@@ -765,10 +779,9 @@ production stylesheet in assets/built/screen.css
 
     .gh-head-open #gh-head {
         position: fixed;
-        right: 0;
-        left: 0;
+        inset: 0;
         z-index: 3999999;
-        height: 100vh;
+        height: 100%;
         overflow-y: scroll;
         -webkit-overflow-scrolling: touch;
     }
@@ -805,20 +818,24 @@ production stylesheet in assets/built/screen.css
         flex-direction: column;
         gap: 12px;
         align-items: center;
-        padding: max(4vmin, 20px) 0;
+        padding: max(4vmin, 20px) 0 max(4vmin, 28px);
         background-color: #fff;
     }
 
-    .gh-head-open #gh-head .gh-head-button {
+    .gh-head-open #gh-head :is(.gh-head-button, .gh-head-link) {
         opacity: 1;
         transition: transform 0.4s, opacity 0.4s;
         transition-delay: 0.2s;
         transform: translateY(0);
     }
+
+    .gh-head-open #gh-head .gh-head-link {
+        transition-delay: 0.4s;
+    }
 }
 
 
-/* 6. Post Feed
+/* 5. Post Feed
 /* ---------------------------------------------------------- */
 
 .post-feed {
@@ -1008,6 +1025,11 @@ production stylesheet in assets/built/screen.css
     margin-top: 6px;
 }
 
+:is(.tag-template, .author-template) .post-card-large .post-card-excerpt {
+    display: block;
+    overflow-y: auto;
+}
+
 .post-card-meta {
     display: flex;
     align-items: center;
@@ -1192,24 +1214,23 @@ html.no-infinite-scroll .pagination {
 }
 
 
-/* 7. Single Post
+/* 6. Single Post
 /* ---------------------------------------------------------- */
 
 .article {
-    padding: max(8vmin, 40px) 0 max(8vmin, 64px);
     word-break: break-word;
 }
 
-.page-template .article {
-    padding-top: max(12vmin, 64px);
+.post-template .article {
+    padding: max(8vmin, 40px) 0 max(8vmin, 64px);
 }
 
-.article-header {
-    padding: 0 0 max(6.4vmin, 40px) 0;
+.post-template .article-header {
+    padding: 0 0 max(6.4vmin, 40px);
 }
 
 .page-template .article-header {
-    padding-bottom: max(3.2vmin, 28px);
+    padding: max(12vmin, 64px) 0 max(3.2vmin, 28px);
 }
 
 .article-tag {
@@ -1278,28 +1299,28 @@ html.no-infinite-scroll .pagination {
 is laid out on top of. Canvas just defines the grid, we don't
 use it for applying any other styles. */
 
-.gh-canvas {
+.gh-canvas,
+.kg-width-full.kg-content-wide {
+    --gap: max(4vmin, 20px);
+    --main: min(var(--content-width, 720px), 100% - var(--gap) * 2);
+    --wide: minmax(0, calc((var(--container-width, 1200px) - var(--content-width, 720px)) / 2));
+    --full: minmax(var(--gap), 1fr);
+
     display: grid;
     grid-template-columns:
-        [full-start]
-        minmax(max(4vmin, 20px), auto)
-            [wide-start]
-            minmax(auto, 240px)
-                [main-start]
-                    min(720px, calc(100% - max(8vmin, 40px)))
-                [main-end]
-            minmax(auto, 240px)
-            [wide-end]
-        minmax(max(4vmin, 20px), auto)
-        [full-end]
-    ;
+        [full-start] var(--full)
+        [wide-start] var(--wide)
+        [main-start] var(--main) [main-end]
+        var(--wide) [wide-end]
+        var(--full) [full-end];
 }
 
 .gh-canvas > * {
     grid-column: main-start / main-end;
 }
 
-.kg-width-wide {
+.kg-width-wide,
+.kg-content-wide > div {
     grid-column: wide-start / wide-end;
 }
 
@@ -1325,6 +1346,11 @@ headings, text, images and lists. We deal with cards lower down. */
     margin-bottom: 0;
 }
 
+/* Remove space between full-width cards */
+.gh-content > .kg-width-full + .kg-width-full:not(.kg-width-full.kg-card-hascaption + .kg-width-full) {
+    margin-top: 0;
+}
+
 /* [id] represents all headings h1-h6, reset all margins */
 .gh-content > [id] {
     margin: 0;
@@ -1375,6 +1401,14 @@ is the very first element in the post content */
     line-height: 1.6em;
 }
 
+.page-template .gh-content:only-child > *:first-child:not(.kg-width-full) {
+    margin-top: max(12vmin, 64px);
+}
+
+.page-template .gh-content > *:last-child:not(.kg-width-full) {
+    margin-bottom: max(12vmin, 64px);
+}
+
 .gh-content .kg-callout-card .kg-callout-text,
 .gh-content .kg-toggle-card .kg-toggle-content > ol,
 .gh-content .kg-toggle-card .kg-toggle-content > ul,
@@ -1462,6 +1496,14 @@ is the very first element in the post content */
     box-shadow: 0 2px 6px -2px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.4);
 }
 
+.gh-content ol ol li {
+    list-style-type: lower-alpha;
+}
+
+.gh-content ol ol ol li {
+    list-style-type: lower-roman;
+}
+
 @media (max-width: 650px) {
     .gh-content > blockquote:not([class]),
     .gh-content > ol,
@@ -1499,11 +1541,9 @@ make sure they look good, and are given a bit of extra spacing. */
 except for when immediately preceeded by a heading */
 .gh-content :not(.kg-card):not([id]) + .kg-card {
     margin-top: 6vmin;
-    margin-bottom: 0;
 }
 .gh-content .kg-card + :not(.kg-card) {
     margin-top: 6vmin;
-    margin-bottom: 0;
 }
 
 /* This keeps small embeds centered */
@@ -1671,7 +1711,7 @@ iframe.instagram-media + script + :not([id]) {
 }
 
 
-/* 7.1. Post Byline
+/* 6.1. Post Byline
 /* ---------------------------------------------------------- */
 
 .article-byline {
@@ -1734,7 +1774,7 @@ iframe.instagram-media + script + :not([id]) {
 }
 
 
-/* 7.3. Subscribe
+/* 6.2. Subscribe
 /* ---------------------------------------------------------- */
 
 .footer-cta {
@@ -1784,7 +1824,7 @@ iframe.instagram-media + script + :not([id]) {
 }
 
 
-/* 7.4. Read more
+/* 6.3. Read more
 /* ---------------------------------------------------------- */
 
 .read-more-wrap {
@@ -1823,7 +1863,7 @@ iframe.instagram-media + script + :not([id]) {
     }
 }
 
-/* 7.6. Comments
+/* 6.4. Comments
 /* ---------------------------------------------------------- */
 .comments {
     display: flex;
@@ -1861,7 +1901,7 @@ iframe.instagram-media + script + :not([id]) {
 }
 
 
-/* 8. Author Template
+/* 7. Author Template
 /* ---------------------------------------------------------- */
 
 .author-profile-pic {
@@ -1995,7 +2035,7 @@ iframe.instagram-media + script + :not([id]) {
 }
 
 
-/* 11. Site Footer
+/* 10. Site Footer
 /* ---------------------------------------------------------- */
 
 .site-footer {
@@ -2007,6 +2047,10 @@ iframe.instagram-media + script + :not([id]) {
     background: color-mod(var(--color-darkgrey) l(-5%));
 }
 
+.page-template .site-footer {
+    margin-top: 0;
+}
+
 .site-footer .inner {
     display: grid;
     grid-gap: 40px;
@@ -2082,7 +2126,7 @@ iframe.instagram-media + script + :not([id]) {
 }
 
 
-/* 12. Dark Mode
+/* 11. Dark Mode
 /* ---------------------------------------------------------- */
 
 html.dark-mode body {
@@ -2102,13 +2146,14 @@ html.dark-mode figcaption a {
     color: #fff;
 }
 
-html.dark-mode .gh-head {
+html.dark-mode body:not(.has-cover) .gh-head {
     background: var(--color-darkmode);
     color: #fff;
 }
 
-html.dark-mode .gh-burger-box {
-    color: #fff;
+html.dark-mode .gh-burger::before,
+html.dark-mode .gh-burger::after {
+    background-color: #fff;
 }
 
 html.dark-mode .site-header-content {
@@ -2242,7 +2287,7 @@ html.dark-mode .gh-content table:not(.gist table) td {
     border: color-mod(var(--color-darkmode) l(+8%)) 1px solid;
 }
 
-html.dark-mode .gh-content input {
+html.dark-mode .gh-content :is(input, textarea) {
     color: color-mod(var(--color-midgrey) l(-30%));
 }
 
@@ -2268,6 +2313,13 @@ html.dark-mode .footer-cta-title {
     color: #fff;
 }
 
+@media (max-width: 767px) {
+    html.dark-mode .gh-head-open:not(.has-cover) #gh-head,
+    html.dark-mode .gh-head-open:not(.has-cover) #gh-head .gh-head-actions {
+        background: var(--color-darkmode);
+    }
+}
+
 @media (prefers-color-scheme: dark) {
     html.auto-color body {
         color: rgba(255, 255, 255, 0.75);
@@ -2286,13 +2338,14 @@ html.dark-mode .footer-cta-title {
         color: #fff;
     }
 
-    html.auto-color .gh-head {
+    html.auto-color body:not(.has-cover) .gh-head {
         background: var(--color-darkmode);
         color: #fff;
     }
 
-    html.auto-color .gh-burger-box {
-        color: #fff;
+    html.auto-color .gh-burger::before,
+    html.auto-color .gh-burger::after {
+        background-color: #fff;
     }
 
     html.auto-color .site-header-content {
@@ -2426,7 +2479,7 @@ html.dark-mode .footer-cta-title {
         border: color-mod(var(--color-darkmode) l(+8%)) 1px solid;
     }
 
-    html.auto-color .gh-content input {
+    html.auto-color .gh-content :is(input, textarea) {
         color: color-mod(var(--color-midgrey) l(-30%));
     }
 
@@ -2451,6 +2504,13 @@ html.dark-mode .footer-cta-title {
     html.auto-color .footer-cta-title {
         color: #fff;
     }
+
+    @media (max-width: 767px) {
+        html.auto-color .gh-head-open:not(.has-cover) #gh-head,
+        html.auto-color .gh-head-open:not(.has-cover) #gh-head .gh-head-actions {
+            background: var(--color-darkmode);
+        }
+    }
 }
 
 /*
@@ -2467,3 +2527,4 @@ file to add some of your own styles. Well, you've come to
 the right place. Onward!
 
  */
+

assets/js/dropdown.js

@@ -1,81 +1,85 @@
-(function () {
-    const mediaQuery = window.matchMedia('(max-width: 767px)');
-
-    const menu = document.querySelector('.gh-head-menu');
-    const nav = menu.querySelector('.nav');
-    if (!nav) return;
-
-    const logo = document.querySelector('.gh-head-logo');
-    const navHTML = nav.innerHTML;
-
-    if (mediaQuery.matches) {
-        const items = nav.querySelectorAll('li');
-        items.forEach(function (item, index) {
-            item.style.transitionDelay = 0.03 * (index + 1) + 's';
-        });
-    }
-
-    const makeDropdown = function () {
-        if (mediaQuery.matches) return;
-        const submenuItems = [];
-
-        while ((nav.offsetWidth + 64) > menu.offsetWidth) {
-            if (nav.lastElementChild) {
-                submenuItems.unshift(nav.lastElementChild);
-                nav.lastElementChild.remove();
-            } else {
-                return;
-            }
-        }
-
-        if (!submenuItems.length) {
-            document.body.classList.add('is-dropdown-loaded');
-            return;
-        }
-
-        const toggle = document.createElement('button');
-        toggle.setAttribute('class', 'nav-more-toggle');
-        toggle.setAttribute('aria-label', 'More');
-        toggle.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor"><path d="M21.333 16c0-1.473 1.194-2.667 2.667-2.667v0c1.473 0 2.667 1.194 2.667 2.667v0c0 1.473-1.194 2.667-2.667 2.667v0c-1.473 0-2.667-1.194-2.667-2.667v0zM13.333 16c0-1.473 1.194-2.667 2.667-2.667v0c1.473 0 2.667 1.194 2.667 2.667v0c0 1.473-1.194 2.667-2.667 2.667v0c-1.473 0-2.667-1.194-2.667-2.667v0zM5.333 16c0-1.473 1.194-2.667 2.667-2.667v0c1.473 0 2.667 1.194 2.667 2.667v0c0 1.473-1.194 2.667-2.667 2.667v0c-1.473 0-2.667-1.194-2.667-2.667v0z"></path></svg>';
-
-        const wrapper = document.createElement('div');
-        wrapper.setAttribute('class', 'gh-dropdown');
-
-        if (submenuItems.length >= 10) {
-            document.body.classList.add('is-dropdown-mega');
-            wrapper.style.gridTemplateRows = 'repeat(' + Math.ceil(submenuItems.length / 2) + ', 1fr)';
-        } else {
-            document.body.classList.remove('is-dropdown-mega');
-        }
-
-        submenuItems.forEach(function (child) {
-            wrapper.appendChild(child);
-        });
-
-        toggle.appendChild(wrapper);
-        nav.appendChild(toggle);
-
-        document.body.classList.add('is-dropdown-loaded');
-
-        toggle.addEventListener('click', function () {
-            document.body.classList.toggle('is-dropdown-open');
-        });
-
-        window.addEventListener('click', function (e) {
-            if (!toggle.contains(e.target) && document.body.classList.contains('is-dropdown-open')) {
-                document.body.classList.remove('is-dropdown-open');
-            }
-        });
-    }
-
-    imagesLoaded(logo, function () {
-        makeDropdown();
-    });
-
-    window.addEventListener('resize', function () {
-        setTimeout(function () {
-            nav.innerHTML = navHTML;
-            makeDropdown();
-        }, 1);
-    });
-})();
+(function () {
+    const mediaQuery = window.matchMedia('(max-width: 767px)');
+
+    const head = document.querySelector('.gh-head');
+    const menu = head.querySelector('.gh-head-menu');
+    const nav = menu.querySelector('.nav');
+    if (!nav) return;
+
+    const logo = document.querySelector('.gh-head-logo');
+    const navHTML = nav.innerHTML;
+
+    if (mediaQuery.matches) {
+        const items = nav.querySelectorAll('li');
+        items.forEach(function (item, index) {
+            item.style.transitionDelay = 0.03 * (index + 1) + 's';
+        });
+    }
+
+    var windowClickListener;
+    const makeDropdown = function () {
+        if (mediaQuery.matches) return;
+        const submenuItems = [];
+
+        while ((nav.offsetWidth + 64) > menu.offsetWidth) {
+            if (nav.lastElementChild) {
+                submenuItems.unshift(nav.lastElementChild);
+                nav.lastElementChild.remove();
+            } else {
+                return;
+            }
+        }
+
+        if (!submenuItems.length) {
+            document.body.classList.add('is-dropdown-loaded');
+            return;
+        }
+
+        const toggle = document.createElement('button');
+        toggle.setAttribute('class', 'nav-more-toggle');
+        toggle.setAttribute('aria-label', 'More');
+        toggle.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor"><path d="M21.333 16c0-1.473 1.194-2.667 2.667-2.667v0c1.473 0 2.667 1.194 2.667 2.667v0c0 1.473-1.194 2.667-2.667 2.667v0c-1.473 0-2.667-1.194-2.667-2.667v0zM13.333 16c0-1.473 1.194-2.667 2.667-2.667v0c1.473 0 2.667 1.194 2.667 2.667v0c0 1.473-1.194 2.667-2.667 2.667v0c-1.473 0-2.667-1.194-2.667-2.667v0zM5.333 16c0-1.473 1.194-2.667 2.667-2.667v0c1.473 0 2.667 1.194 2.667 2.667v0c0 1.473-1.194 2.667-2.667 2.667v0c-1.473 0-2.667-1.194-2.667-2.667v0z"></path></svg>';
+
+        const wrapper = document.createElement('div');
+        wrapper.setAttribute('class', 'gh-dropdown');
+
+        if (submenuItems.length >= 10) {
+            document.body.classList.add('is-dropdown-mega');
+            wrapper.style.gridTemplateRows = 'repeat(' + Math.ceil(submenuItems.length / 2) + ', 1fr)';
+        } else {
+            document.body.classList.remove('is-dropdown-mega');
+        }
+
+        submenuItems.forEach(function (child) {
+            wrapper.appendChild(child);
+        });
+
+        toggle.appendChild(wrapper);
+        nav.appendChild(toggle);
+
+        document.body.classList.add('is-dropdown-loaded');
+
+        toggle.addEventListener('click', function () {
+            document.body.classList.toggle('is-dropdown-open');
+        });
+
+        windowClickListener = function (e) {
+            if (!toggle.contains(e.target) && document.body.classList.contains('is-dropdown-open')) {
+                document.body.classList.remove('is-dropdown-open');
+            }
+        };
+        window.addEventListener('click', windowClickListener);
+    }
+
+    imagesLoaded(head, function () {
+        makeDropdown();
+    });
+
+    window.addEventListener('resize', function () {
+        setTimeout(function () {
+            window.removeEventListener('click', windowClickListener);
+            nav.innerHTML = navHTML;
+            makeDropdown();
+        }, 1);
+    });
+})();

author.hbs

@@ -9,17 +9,17 @@
         {{#author}}
         <section class="post-card post-card-large">
 
-            {{#if feature_image}}
+            {{#if cover_image}}
             <div class="post-card-image-link">
                 {{!-- This is a responsive image, it loads different sizes depending on device
                 https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
                 <img class="post-card-image"
-                    srcset="{{img_url feature_image size="s"}} 300w,
-                            {{img_url feature_image size="m"}} 600w,
-                            {{img_url feature_image size="l"}} 1000w,
-                            {{img_url feature_image size="xl"}} 2000w"
+                    srcset="{{img_url cover_image size="s"}} 300w,
+                            {{img_url cover_image size="m"}} 600w,
+                            {{img_url cover_image size="l"}} 1000w,
+                            {{img_url cover_image size="xl"}} 2000w"
                     sizes="(max-width: 1000px) 400px, 800px"
-                    src="{{img_url feature_image size="m"}}"
+                    src="{{img_url cover_image size="m"}}"
                     alt="{{title}}"
                 />
             </div>

default.hbs

@@ -8,6 +8,10 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="HandheldFriendly" content="True" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    
+    {{!-- Preload scripts --}}
+    <link rel="preload" as="style" href="{{asset "built/screen.css"}}" />
+    <link rel="preload" as="script" href="{{asset "built/casper.js"}}" />
 
     {{!-- Theme assets - use the {asset} helper to reference styles & scripts,
     this will take care of caching and cache-busting automatically --}}
@@ -21,17 +25,17 @@
 <body class="{{body_class}} is-head-{{#match @custom.navigation_layout "Logo on cover"}}left-logo{{else match @custom.navigation_layout "Logo in the middle"}}middle-logo{{else}}stacked{{/match}}{{#match @custom.title_font "=" "Elegant serif"}} has-serif-title{{/match}}{{#match @custom.body_font "=" "Modern sans-serif"}} has-sans-body{{/match}}{{#if @custom.show_publication_cover}} has-cover{{/if}}">
 <div class="viewport">
 
-    <header id="gh-head" class="gh-head outer">
+    <header id="gh-head" class="gh-head outer{{#match @custom.header_style "Hidden"}} is-header-hidden{{/match}}">
         <div class="gh-head-inner inner">
             <div class="gh-head-brand">
-                <a class="gh-head-logo" href="{{@site.url}}">
+                <a class="gh-head-logo{{#unless @site.logo}} no-image{{/unless}}" href="{{@site.url}}">
                     {{#if @site.logo}}
                         <img src="{{@site.logo}}" alt="{{@site.title}}">
                     {{else}}
                         {{@site.title}}
                     {{/if}}
                 </a>
-                <button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
+                <button class="gh-search gh-icon-btn" aria-label="Search this site" data-ghost-search>{{> "icons/search"}}</button>
                 <button class="gh-burger"></button>
             </div>
 
@@ -39,7 +43,7 @@
                 {{navigation}}
                 {{#unless @site.members_enabled}}
                     {{#match @custom.navigation_layout "Stacked"}}
-                        <button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
+                        <button class="gh-search gh-icon-btn" aria-label="Search this site" data-ghost-search>{{> "icons/search"}}</button>
                     {{/match}}
                 {{/unless}}
             </nav>
@@ -80,7 +84,7 @@
             <nav class="site-footer-nav">
                 {{navigation type="secondary"}}
             </nav>
-            <div><a href="https://ghost.org/" target="_blank" rel="noopener">Powered by Ghost</a></div>
+            <div class="gh-powered-by"><a href="https://ghost.org/" target="_blank" rel="noopener">Powered by Ghost</a></div>
         </div>
     </footer>
 

gulpfile.js

@@ -19,8 +19,8 @@ const colorFunction = require('postcss-color-mod-function');
 const cssnano = require('cssnano');
 const easyimport = require('postcss-easy-import');
 
-const REPO = 'TryGhost/Casper';
-const REPO_READONLY = 'TryGhost/Casper';
+const REPO = 'tryghost/Casper';
+const REPO_READONLY = 'tryghost/Casper';
 const CHANGELOG_PATH = path.join(process.cwd(), '.', 'changelog.md');
 
 function serve(done) {
@@ -113,6 +113,8 @@ exports.release = async () => {
     console.log(`\nCreating release for ${newVersion}...`);
 
     const githubToken = process.env.GST_TOKEN;
+    const repo_readonly = process.env.REPO_READONLY ?? REPO_READONLY;
+    const repo = process.env.REPO ?? REPO;
 
     if (!githubToken) {
         console.log('Please configure your environment with a GitHub token located in GST_TOKEN');

package.json

@@ -2,7 +2,7 @@
     "name": "casper-aytac",
     "description": "A clean, minimal default theme for the Ghost publishing platform with little modifications by Aytac",
     "demo": "https://aytac.kirmizi.online",
-    "version": "5.4.3",
+    "version": "5.6.0",
     "engines": {
         "ghost": ">=5.0.0"
     },
@@ -49,7 +49,7 @@
         "autoprefixer": "10.4.7",
         "beeper": "2.1.0",
         "cssnano": "5.1.12",
-        "gscan": "4.34.0",
+        "gscan": "4.36.1",
         "gulp": "4.0.2",
         "gulp-concat": "2.6.1",
         "gulp-livereload": "4.0.2",

page-tags.hbs

@@ -1,11 +1,11 @@
-{{!< default}}
-
-<section class="post-content post-tag-content">
-    <div class="post-tag-grid">
-        {{#get 'tags' limit='15' include='count.posts' order='count.posts desc'}}
-        {{#foreach tags}}
-        {{> "tag-card"}}
-        {{/foreach}}
-        {{/get}}
-    </div>
+{{!< default}}
+
+<section class="post-content post-tag-content">
+    <div class="post-tag-grid">
+        {{#get 'tags' limit='15' include='count.posts' order='count.posts desc'}}
+        {{#foreach tags}}
+        {{> "tag-card"}}
+        {{/foreach}}
+        {{/get}}
+    </div>
 </section>

page.hbs

@@ -1,45 +1,47 @@
-{{!< default}}
-
-{{!-- The tag above means: insert everything in this file
-into the {body} tag of the default.hbs template --}}
-
-
-{{#post}}
-{{!-- Everything inside the #post block pulls data from the page --}}
-
-<main id="site-main" class="site-main">
-<article class="article {{post_class}}">
-
-    <header class="article-header gh-canvas">
-
-        <h1 class="article-title">{{title}}</h1>
-
-        {{#if feature_image}}
-            <figure class="article-image">
-                {{!-- This is a responsive image, it loads different sizes depending on device
-                https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
-                <img
-                    srcset="{{img_url feature_image size="s"}} 300w,
-                            {{img_url feature_image size="m"}} 600w,
-                            {{img_url feature_image size="l"}} 1000w,
-                            {{img_url feature_image size="xl"}} 2000w"
-                    sizes="(min-width: 1400px) 1400px, 92vw"
-                    src="{{img_url feature_image size="xl"}}"
-                    alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
-                />
-                {{#if feature_image_caption}}
-                    <figcaption>{{feature_image_caption}}</figcaption>
-                {{/if}}
-            </figure>
-        {{/if}}
-
-    </header>
-
-    <section class="gh-content gh-canvas">
-        {{content}}
-    </section>
-
-</article>
-</main>
-
+{{!< default}}
+
+{{!-- The tag above means: insert everything in this file
+into the {body} tag of the default.hbs template --}}
+
+
+{{#post}}
+{{!-- Everything inside the #post block pulls data from the page --}}
+
+<main id="site-main" class="site-main">
+<article class="article {{post_class}}">
+
+    {{#match @page.show_title_and_feature_image}}
+        <header class="article-header gh-canvas">
+
+            <h1 class="article-title">{{title}}</h1>
+
+            {{#if feature_image}}
+                <figure class="article-image">
+                    {{!-- This is a responsive image, it loads different sizes depending on device
+                    https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
+                    <img
+                        srcset="{{img_url feature_image size="s"}} 300w,
+                                {{img_url feature_image size="m"}} 600w,
+                                {{img_url feature_image size="l"}} 1000w,
+                                {{img_url feature_image size="xl"}} 2000w"
+                        sizes="(min-width: 1400px) 1400px, 92vw"
+                        src="{{img_url feature_image size="xl"}}"
+                        alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
+                    />
+                    {{#if feature_image_caption}}
+                        <figcaption>{{feature_image_caption}}</figcaption>
+                    {{/if}}
+                </figure>
+            {{/if}}
+
+        </header>
+    {{/match}}
+
+    <section class="gh-content gh-canvas">
+        {{content}}
+    </section>
+
+</article>
+</main>
+
 {{/post}}

partials/icons/share-facebook.hbs

@@ -1,38 +1,38 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 485 485" style="enable-background:new 0 0 485 485;" xml:space="preserve">
-<g>
-	<path d="M200.767,400h65.266V242.413h43.798c0,0,4.104-25.428,6.103-53.235h-49.647v-36.264c0-5.416,7.109-12.696,14.153-12.696
-		h35.564V85h-48.366c-68.478,0-66.872,53.082-66.872,61.009v43.356h-31.771v53.029h31.771V400z"/>
-	<path d="M0,0v485h485V0H0z M455,455H30V30h425V455z"/>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 485 485" style="enable-background:new 0 0 485 485;" xml:space="preserve">
+<g>
+	<path d="M200.767,400h65.266V242.413h43.798c0,0,4.104-25.428,6.103-53.235h-49.647v-36.264c0-5.416,7.109-12.696,14.153-12.696
+		h35.564V85h-48.366c-68.478,0-66.872,53.082-66.872,61.009v43.356h-31.771v53.029h31.771V400z"/>
+	<path d="M0,0v485h485V0H0z M455,455H30V30h425V455z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
 </svg>

partials/icons/share-linkedin.hbs

@@ -1,25 +1,25 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1000" height="1000" viewBox="0 0 1000 1000" xml:space="preserve">
-<desc>Created with Fabric.js 3.5.0</desc>
-<defs>
-</defs>
-<rect x="0" y="0" width="100%" height="100%" fill="#ffffff"/>
-<g transform="matrix(39.5346 0 0 39.5346 516.0819 516.0819)" id="295699">
-<g style="" vector-effect="non-scaling-stroke">
-		<g transform="matrix(1 0 0 1 -0.5 -0.0005)" id="Layer_1">
-<rect style="stroke: rgb(0,0,0); stroke-width: 1.913; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 10; is-custom-font: none; font-file-url: none; fill: none; fill-rule: nonzero; opacity: 1;" x="-11" y="-10.5215" rx="0" ry="0" width="22" height="21.043"/>
-</g>
-		<g transform="matrix(1 0 0 1 1.413 1.9135)" id="Layer_1">
-<path style="stroke: rgb(0,0,0); stroke-width: 1.913; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 10; is-custom-font: none; font-file-url: none; fill: none; fill-rule: nonzero; opacity: 1;" transform=" translate(-13.413, -13.9135)" d="M 10.065 18.696 v -6.217 c 0 -1.849 1.499 -3.348 3.348 -3.348 h 0 c 1.849 0 3.348 1.499 3.348 3.348 v 6.217" stroke-linecap="round"/>
-</g>
-		<g transform="matrix(1 0 0 1 -5.761 1.435)" id="Layer_1">
-<line style="stroke: rgb(0,0,0); stroke-width: 1.913; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 10; is-custom-font: none; font-file-url: none; fill: none; fill-rule: nonzero; opacity: 1;" x1="0" y1="-5.261000000000001" x2="0" y2="5.261000000000001"/>
-</g>
-		<g transform="matrix(1 0 0 1 -5.761 -5.739)" id="Layer_1">
-<circle style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" cx="0" cy="0" r="0.957"/>
-</g>
-		<g transform="matrix(1 0 0 1 -1.935 -1.4345)" id="Layer_1">
-<line style="stroke: rgb(0,0,0); stroke-width: 1.913; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 10; is-custom-font: none; font-file-url: none; fill: none; fill-rule: nonzero; opacity: 1;" x1="0" y1="-2.3915000000000006" x2="0" y2="2.3915000000000006"/>
-</g>
-</g>
-</g>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1000" height="1000" viewBox="0 0 1000 1000" xml:space="preserve">
+<desc>Created with Fabric.js 3.5.0</desc>
+<defs>
+</defs>
+<rect x="0" y="0" width="100%" height="100%" fill="#ffffff"/>
+<g transform="matrix(39.5346 0 0 39.5346 516.0819 516.0819)" id="295699">
+<g style="" vector-effect="non-scaling-stroke">
+		<g transform="matrix(1 0 0 1 -0.5 -0.0005)" id="Layer_1">
+<rect style="stroke: rgb(0,0,0); stroke-width: 1.913; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 10; is-custom-font: none; font-file-url: none; fill: none; fill-rule: nonzero; opacity: 1;" x="-11" y="-10.5215" rx="0" ry="0" width="22" height="21.043"/>
+</g>
+		<g transform="matrix(1 0 0 1 1.413 1.9135)" id="Layer_1">
+<path style="stroke: rgb(0,0,0); stroke-width: 1.913; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 10; is-custom-font: none; font-file-url: none; fill: none; fill-rule: nonzero; opacity: 1;" transform=" translate(-13.413, -13.9135)" d="M 10.065 18.696 v -6.217 c 0 -1.849 1.499 -3.348 3.348 -3.348 h 0 c 1.849 0 3.348 1.499 3.348 3.348 v 6.217" stroke-linecap="round"/>
+</g>
+		<g transform="matrix(1 0 0 1 -5.761 1.435)" id="Layer_1">
+<line style="stroke: rgb(0,0,0); stroke-width: 1.913; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 10; is-custom-font: none; font-file-url: none; fill: none; fill-rule: nonzero; opacity: 1;" x1="0" y1="-5.261000000000001" x2="0" y2="5.261000000000001"/>
+</g>
+		<g transform="matrix(1 0 0 1 -5.761 -5.739)" id="Layer_1">
+<circle style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" cx="0" cy="0" r="0.957"/>
+</g>
+		<g transform="matrix(1 0 0 1 -1.935 -1.4345)" id="Layer_1">
+<line style="stroke: rgb(0,0,0); stroke-width: 1.913; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 10; is-custom-font: none; font-file-url: none; fill: none; fill-rule: nonzero; opacity: 1;" x1="0" y1="-2.3915000000000006" x2="0" y2="2.3915000000000006"/>
+</g>
+</g>
+</g>
 </svg>

partials/icons/share-pinterest.hbs

@@ -1,9 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1000" height="1000" viewBox="0 0 1000 1000" xml:space="preserve">
-<desc>Created with Fabric.js 3.5.0</desc>
-<defs>
-</defs>
-<rect x="0" y="0" width="100%" height="100%" fill="#ffffff"/>
-<g transform="matrix(41.3223 0 0 41.3223 499.9998 499.9998)" id="343141">
-<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-16, -16)" d="M 5 5 L 5 27 L 27 27 L 27 5 L 5 5 z M 7 7 L 25 7 L 25 25 L 13.513672 25 C 13.765525 24.49367 13.992121 23.971433 14.115234 23.496094 C 14.249234 22.982094 15 20.740234 15 20.740234 C 15.357 21.423234 16.402672 22 17.513672 22 C 20.821672 22 23 19.107078 23 15.330078 C 23 11.710078 20.044234 9 16.240234 9 C 11.508234 9 9 12.174766 9 15.634766 C 9 17.241766 9.8566563 19.241859 11.222656 19.880859 C 11.432656 19.978859 11.540844 19.933422 11.589844 19.732422 C 11.625844 19.580422 11.811578 18.836188 11.892578 18.492188 C 11.919578 18.380188 11.905406 18.287688 11.816406 18.179688 C 11.365406 17.629687 11 16.621688 11 15.679688 C 11 13.259688 12.830172 10.919922 15.951172 10.919922 C 18.643172 10.919922 20.53125 12.755859 20.53125 15.380859 C 20.53125 18.344859 19.236156 20.251953 17.285156 20.251953 C 16.209156 20.251953 15.204984 19.510016 15.458984 18.416016 C 15.766984 17.112016 16.365234 15.705672 16.365234 14.763672 C 16.365234 12.397672 12.998047 12.724859 12.998047 15.880859 C 12.998047 16.849859 13.320313 17.509766 13.320312 17.509766 C 12.257514 22.24839 11.955636 23.282208 12.048828 25 L 7 25 L 7 7 z" stroke-linecap="round"/>
-</g>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1000" height="1000" viewBox="0 0 1000 1000" xml:space="preserve">
+<desc>Created with Fabric.js 3.5.0</desc>
+<defs>
+</defs>
+<rect x="0" y="0" width="100%" height="100%" fill="#ffffff"/>
+<g transform="matrix(41.3223 0 0 41.3223 499.9998 499.9998)" id="343141">
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-16, -16)" d="M 5 5 L 5 27 L 27 27 L 27 5 L 5 5 z M 7 7 L 25 7 L 25 25 L 13.513672 25 C 13.765525 24.49367 13.992121 23.971433 14.115234 23.496094 C 14.249234 22.982094 15 20.740234 15 20.740234 C 15.357 21.423234 16.402672 22 17.513672 22 C 20.821672 22 23 19.107078 23 15.330078 C 23 11.710078 20.044234 9 16.240234 9 C 11.508234 9 9 12.174766 9 15.634766 C 9 17.241766 9.8566563 19.241859 11.222656 19.880859 C 11.432656 19.978859 11.540844 19.933422 11.589844 19.732422 C 11.625844 19.580422 11.811578 18.836188 11.892578 18.492188 C 11.919578 18.380188 11.905406 18.287688 11.816406 18.179688 C 11.365406 17.629687 11 16.621688 11 15.679688 C 11 13.259688 12.830172 10.919922 15.951172 10.919922 C 18.643172 10.919922 20.53125 12.755859 20.53125 15.380859 C 20.53125 18.344859 19.236156 20.251953 17.285156 20.251953 C 16.209156 20.251953 15.204984 19.510016 15.458984 18.416016 C 15.766984 17.112016 16.365234 15.705672 16.365234 14.763672 C 16.365234 12.397672 12.998047 12.724859 12.998047 15.880859 C 12.998047 16.849859 13.320313 17.509766 13.320312 17.509766 C 12.257514 22.24839 11.955636 23.282208 12.048828 25 L 7 25 L 7 7 z" stroke-linecap="round"/>
+</g>
 </svg>

partials/icons/share-reddit.hbs

@@ -1,9 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1000" height="1000" viewBox="0 0 1000 1000" xml:space="preserve">
-<desc>Created with Fabric.js 3.5.0</desc>
-<defs>
-</defs>
-<rect x="0" y="0" width="100%" height="100%" fill="#ffffff"/>
-<g transform="matrix(41.3223 0 0 41.3223 499.9998 499.9998)" id="916324">
-<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-16, -16)" d="M 5 5 L 5 27 L 27 27 L 27 5 L 5 5 z M 7 7 L 25 7 L 25 25 L 7 25 L 7 7 z M 17.058594 8.9941406 C 16.880594 8.9641406 16.704109 9.0817188 16.662109 9.2617188 L 15.798828 13.007812 C 14.128828 13.049812 12.634078 13.601844 11.580078 14.464844 C 11.307078 14.179844 10.926 14 10.5 14 C 9.672 14 9 14.672 9 15.5 C 9 16.172 9.4456875 16.734781 10.054688 16.925781 C 10.022687 17.114781 10 17.305 10 17.5 C 10 19.985 12.686 22 16 22 C 19.314 22 22 19.985 22 17.5 C 22 17.305 21.977312 17.114781 21.945312 16.925781 C 22.554312 16.734781 23 16.172 23 15.5 C 23 14.672 22.328 14 21.5 14 C 21.074 14 20.692922 14.179844 20.419922 14.464844 C 19.431922 13.655844 18.056672 13.117531 16.513672 13.019531 L 17.269531 9.7382812 L 20.039062 10.195312 C 20.132062 10.650313 20.517 11 21 11 C 21.552 11 22 10.552 22 10 C 22 9.448 21.552 9 21 9 C 20.632 9 20.324391 9.2088594 20.150391 9.5058594 L 17.058594 8.9941406 z M 13.091797 15.818359 C 13.694797 15.818359 14.181641 16.305203 14.181641 16.908203 C 14.181641 17.511203 13.693797 18 13.091797 18 C 12.489797 18 12 17.511203 12 16.908203 C 12 16.306203 12.488797 15.818359 13.091797 15.818359 z M 18.908203 15.818359 C 19.511203 15.818359 20 16.306203 20 16.908203 C 20 17.510203 19.511203 18 18.908203 18 C 18.306203 18 17.818359 17.511203 17.818359 16.908203 C 17.818359 16.305203 18.305203 15.818359 18.908203 15.818359 z M 13.472656 19.021484 C 13.562031 19.014609 13.654063 19.042469 13.726562 19.105469 C 14.880562 20.093469 17.117484 20.093469 18.271484 19.105469 C 18.417484 18.980469 18.639625 18.995578 18.765625 19.142578 C 18.891625 19.289578 18.875516 19.510719 18.728516 19.636719 C 18.027516 20.238719 17.033 20.583984 16 20.583984 C 14.967 20.583984 13.973484 20.238719 13.271484 19.636719 C 13.124484 19.510719 13.108375 19.289578 13.234375 19.142578 C 13.297375 19.069078 13.383281 19.028359 13.472656 19.021484 z" stroke-linecap="round"/>
-</g>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1000" height="1000" viewBox="0 0 1000 1000" xml:space="preserve">
+<desc>Created with Fabric.js 3.5.0</desc>
+<defs>
+</defs>
+<rect x="0" y="0" width="100%" height="100%" fill="#ffffff"/>
+<g transform="matrix(41.3223 0 0 41.3223 499.9998 499.9998)" id="916324">
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-16, -16)" d="M 5 5 L 5 27 L 27 27 L 27 5 L 5 5 z M 7 7 L 25 7 L 25 25 L 7 25 L 7 7 z M 17.058594 8.9941406 C 16.880594 8.9641406 16.704109 9.0817188 16.662109 9.2617188 L 15.798828 13.007812 C 14.128828 13.049812 12.634078 13.601844 11.580078 14.464844 C 11.307078 14.179844 10.926 14 10.5 14 C 9.672 14 9 14.672 9 15.5 C 9 16.172 9.4456875 16.734781 10.054688 16.925781 C 10.022687 17.114781 10 17.305 10 17.5 C 10 19.985 12.686 22 16 22 C 19.314 22 22 19.985 22 17.5 C 22 17.305 21.977312 17.114781 21.945312 16.925781 C 22.554312 16.734781 23 16.172 23 15.5 C 23 14.672 22.328 14 21.5 14 C 21.074 14 20.692922 14.179844 20.419922 14.464844 C 19.431922 13.655844 18.056672 13.117531 16.513672 13.019531 L 17.269531 9.7382812 L 20.039062 10.195312 C 20.132062 10.650313 20.517 11 21 11 C 21.552 11 22 10.552 22 10 C 22 9.448 21.552 9 21 9 C 20.632 9 20.324391 9.2088594 20.150391 9.5058594 L 17.058594 8.9941406 z M 13.091797 15.818359 C 13.694797 15.818359 14.181641 16.305203 14.181641 16.908203 C 14.181641 17.511203 13.693797 18 13.091797 18 C 12.489797 18 12 17.511203 12 16.908203 C 12 16.306203 12.488797 15.818359 13.091797 15.818359 z M 18.908203 15.818359 C 19.511203 15.818359 20 16.306203 20 16.908203 C 20 17.510203 19.511203 18 18.908203 18 C 18.306203 18 17.818359 17.511203 17.818359 16.908203 C 17.818359 16.305203 18.305203 15.818359 18.908203 15.818359 z M 13.472656 19.021484 C 13.562031 19.014609 13.654063 19.042469 13.726562 19.105469 C 14.880562 20.093469 17.117484 20.093469 18.271484 19.105469 C 18.417484 18.980469 18.639625 18.995578 18.765625 19.142578 C 18.891625 19.289578 18.875516 19.510719 18.728516 19.636719 C 18.027516 20.238719 17.033 20.583984 16 20.583984 C 14.967 20.583984 13.973484 20.238719 13.271484 19.636719 C 13.124484 19.510719 13.108375 19.289578 13.234375 19.142578 C 13.297375 19.069078 13.383281 19.028359 13.472656 19.021484 z" stroke-linecap="round"/>
+</g>
 </svg>

partials/icons/share-twitter.hbs

@@ -1,44 +1,44 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 485 485" style="enable-background:new 0 0 485 485;" xml:space="preserve">
-<g>
-	<path d="M85,341.458c28.599,18.34,62.568,29.037,99.065,29.037c118.871,0,183.873-98.473,183.873-183.876
-		c0-2.799-0.063-5.587-0.186-8.36c12.629-9.111,23.585-20.493,32.249-33.453c-11.59,5.14-24.045,8.616-37.118,10.178
-		c13.344-8,23.591-20.662,28.415-35.754c-12.488,7.404-26.319,12.785-41.038,15.681c-11.788-12.56-28.584-20.406-47.173-20.406
-		c-35.688,0-64.626,28.935-64.626,64.623c0,5.065,0.574,9.997,1.677,14.729c-53.71-2.698-101.33-28.424-133.203-67.526
-		c-5.564,9.547-8.751,20.647-8.751,32.492c0,22.419,11.406,42.201,28.748,53.79c-10.595-0.336-20.56-3.245-29.271-8.084
-		c-0.006,0.271-0.006,0.541-0.006,0.814c0,31.311,22.278,57.429,51.841,63.368c-5.423,1.474-11.133,2.268-17.027,2.268
-		c-4.164,0-8.213-0.406-12.161-1.163c8.225,25.676,32.093,44.361,60.373,44.88c-22.119,17.336-49.984,27.668-80.262,27.668
-		C95.199,342.365,90.056,342.059,85,341.458z"/>
-	<path d="M0,0v485h485V0H0z M455,455H30V30h425V455z"/>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 485 485" style="enable-background:new 0 0 485 485;" xml:space="preserve">
+<g>
+	<path d="M85,341.458c28.599,18.34,62.568,29.037,99.065,29.037c118.871,0,183.873-98.473,183.873-183.876
+		c0-2.799-0.063-5.587-0.186-8.36c12.629-9.111,23.585-20.493,32.249-33.453c-11.59,5.14-24.045,8.616-37.118,10.178
+		c13.344-8,23.591-20.662,28.415-35.754c-12.488,7.404-26.319,12.785-41.038,15.681c-11.788-12.56-28.584-20.406-47.173-20.406
+		c-35.688,0-64.626,28.935-64.626,64.623c0,5.065,0.574,9.997,1.677,14.729c-53.71-2.698-101.33-28.424-133.203-67.526
+		c-5.564,9.547-8.751,20.647-8.751,32.492c0,22.419,11.406,42.201,28.748,53.79c-10.595-0.336-20.56-3.245-29.271-8.084
+		c-0.006,0.271-0.006,0.541-0.006,0.814c0,31.311,22.278,57.429,51.841,63.368c-5.423,1.474-11.133,2.268-17.027,2.268
+		c-4.164,0-8.213-0.406-12.161-1.163c8.225,25.676,32.093,44.361,60.373,44.88c-22.119,17.336-49.984,27.668-80.262,27.668
+		C95.199,342.365,90.056,342.059,85,341.458z"/>
+	<path d="M0,0v485h485V0H0z M455,455H30V30h425V455z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
 </svg>

partials/tag-card.hbs

@@ -1,28 +1,28 @@
-<div class="post-tag-grid-item">
-    <a href='{{ url }}'>
-        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="post-tag-grid-item-svg">
-            {{#if accent_color}}
-            <rect x="0" y="0" style="fill: {{accent_color}}" class="post-tag-grid-item-svg-first"></rect>
-            {{else}}
-            <rect x="0" y="0" class="post-tag-grid-item-svg-first"></rect>
-            {{/if}}
-            <foreignObject class="post-tag-grid-item-svg-first-obj">
-                <div class="post-tag-grid-item-svg-first-obj-text">{{ count.posts }}</div>
-            </foreignObject>
-            <rect class="post-tag-grid-item-svg-second"></rect>
-            <foreignObject class="post-tag-grid-item-svg-second-obj">
-                <div class="post-tag-grid-item-svg-second-obj-inner">
-                    {{#if accent_color}}
-                    <h2 style="color:{{accent_color}};">{{ name }}</h2>
-                    {{else}}
-                    <h2>{{ name }}</h2>
-                    {{/if}}
-
-                    {{#if description}}
-                    <p class="post-tag-grid-item-svg-second-obj-description">{{description}}</p>
-                    {{/if}}
-                </div>
-            </foreignObject>
-        </svg>
-    </a>
+<div class="post-tag-grid-item">
+    <a href='{{ url }}'>
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="post-tag-grid-item-svg">
+            {{#if accent_color}}
+            <rect x="0" y="0" style="fill: {{accent_color}}" class="post-tag-grid-item-svg-first"></rect>
+            {{else}}
+            <rect x="0" y="0" class="post-tag-grid-item-svg-first"></rect>
+            {{/if}}
+            <foreignObject class="post-tag-grid-item-svg-first-obj">
+                <div class="post-tag-grid-item-svg-first-obj-text">{{ count.posts }}</div>
+            </foreignObject>
+            <rect class="post-tag-grid-item-svg-second"></rect>
+            <foreignObject class="post-tag-grid-item-svg-second-obj">
+                <div class="post-tag-grid-item-svg-second-obj-inner">
+                    {{#if accent_color}}
+                    <h2 style="color:{{accent_color}};">{{ name }}</h2>
+                    {{else}}
+                    <h2>{{ name }}</h2>
+                    {{/if}}
+
+                    {{#if description}}
+                    <p class="post-tag-grid-item-svg-second-obj-description">{{description}}</p>
+                    {{/if}}
+                </div>
+            </foreignObject>
+        </svg>
+    </a>
 </div>