**update** merged with origin

# Conflicts:
#	assets/built/casper.js.map
#	assets/built/screen.css
#	assets/built/screen.css.map
#	assets/css/screen.css
#	assets/js/dropdown.js
#	package.json

.devcontainer/Dockerfile

@@ -0,0 +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>"

.devcontainer/base.Dockerfile

@@ -0,0 +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
+# RUN su node -c "npm install -g <your-package-list-here>""

.devcontainer/devcontainer.json

@@ -0,0 +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"
+}

.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 }}

assets/css/global.css

@@ -85,17 +85,21 @@ video {
     font-size: 100%;
     vertical-align: baseline;
 }
+
 body {
     line-height: 1;
 }
+
 ol,
 ul {
     list-style: none;
 }
+
 blockquote,
 q {
     quotes: none;
 }
+
 blockquote:before,
 blockquote:after,
 q:before,
@@ -103,15 +107,18 @@ q:after {
     content: "";
     content: none;
 }
+
 table {
     border-spacing: 0;
     border-collapse: collapse;
 }
+
 img {
     display: block;
     max-width: 100%;
     height: auto;
 }
+
 html {
     box-sizing: border-box;
     font-family: sans-serif;
@@ -119,34 +126,42 @@ html {
     -ms-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
 }
+
 *,
 *:before,
 *:after {
     box-sizing: inherit;
 }
+
 a {
     background-color: transparent;
 }
+
 a:active,
 a:hover {
     outline: 0;
 }
+
 b,
 strong {
     font-weight: bold;
 }
+
 i,
 em,
 dfn {
     font-style: italic;
 }
+
 h1 {
     margin: 0.67em 0;
     font-size: 2em;
 }
+
 small {
     font-size: 80%;
 }
+
 sub,
 sup {
     position: relative;
@@ -154,21 +169,27 @@ sup {
     line-height: 0;
     vertical-align: baseline;
 }
+
 sup {
     top: -0.5em;
 }
+
 sub {
     bottom: -0.25em;
 }
+
 img {
     border: 0;
 }
+
 svg:not(:root) {
     overflow: hidden;
 }
+
 mark {
     background-color: #fdffb6;
 }
+
 code,
 kbd,
 pre,
@@ -176,6 +197,7 @@ samp {
     font-family: monospace, monospace;
     font-size: 1em;
 }
+
 kbd {
     padding: 3px 5px;
     font-family: var(--font-mono);
@@ -185,81 +207,109 @@ kbd {
     border-radius: 6px;
     box-shadow: inset 0 -1px 0 rgba(124, 139, 154, 0.25);
 }
+
 @media (max-width: 600px) {
     kbd {
         font-size: 1.3rem;
     }
 }
+
 button,
 input,
 optgroup,
 select,
 textarea {
-    margin: 0; /* 3 */
-    color: inherit; /* 1 */
-    font: inherit; /* 2 */
+    margin: 0;
+    /* 3 */
+    color: inherit;
+    /* 1 */
+    font: inherit;
+    /* 2 */
 }
+
 button {
     overflow: visible;
     border: none;
 }
+
 button,
 select {
     text-transform: none;
 }
+
 button,
 html input[type="button"],
 /* 1 */
 input[type="reset"],
 input[type="submit"] {
-    cursor: pointer; /* 3 */
+    cursor: pointer;
+    /* 3 */
 
-    -webkit-appearance: button; /* 2 */
+    -webkit-appearance: button;
+    /* 2 */
 }
+
 button[disabled],
 html input[disabled] {
     cursor: default;
 }
+
 button::-moz-focus-inner,
 input::-moz-focus-inner {
     padding: 0;
     border: 0;
 }
+
 input {
     line-height: normal;
 }
+
 input:focus {
     outline: none;
 }
+
 input[type="checkbox"],
 input[type="radio"] {
-    box-sizing: border-box; /* 1 */
-    padding: 0; /* 2 */
+    box-sizing: border-box;
+    /* 1 */
+    padding: 0;
+    /* 2 */
 }
+
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
     height: auto;
 }
-input[type="search"] {
-    box-sizing: content-box; /* 2 */
 
-    -webkit-appearance: textfield; /* 1 */
+input[type="search"] {
+    box-sizing: content-box;
+    /* 2 */
+
+    -webkit-appearance: textfield;
+    /* 1 */
 }
+
 input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-decoration {
     -webkit-appearance: none;
 }
+
 legend {
-    padding: 0; /* 2 */
-    border: 0; /* 1 */
+    padding: 0;
+    /* 2 */
+    border: 0;
+    /* 1 */
 }
+
 textarea {
     overflow: auto;
 }
+
 table {
     border-spacing: 0;
     border-collapse: collapse;
 }
+
 td,
 th {
     padding: 0;
@@ -274,6 +324,7 @@ html {
 
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
+
 body {
     color: var(--color-darkgrey);
     font-family: var(--font-sans);
@@ -364,7 +415,7 @@ li {
     line-height: 1.6em;
 }
 
-li + li {
+li+li {
     margin-top: 0.5em;
 }
 
@@ -394,6 +445,7 @@ blockquote small {
     font-size: 0.9em;
     opacity: 0.8;
 }
+
 /* Quotation marks */
 blockquote small:before {
     content: "\2014 \00A0";
@@ -402,6 +454,7 @@ blockquote small:before {
 blockquote cite {
     font-weight: bold;
 }
+
 blockquote cite a {
     font-weight: normal;
 }
@@ -430,6 +483,7 @@ h1 {
     font-weight: 700;
     letter-spacing: -0.015em;
 }
+
 @media (max-width: 600px) {
     h1 {
         font-size: 2.8rem;
@@ -441,6 +495,7 @@ h2 {
     font-size: 2.8rem;
     font-weight: 700;
 }
+
 @media (max-width: 600px) {
     h2 {
         font-size: 2.3rem;
@@ -452,6 +507,7 @@ h3 {
     font-size: 2.4rem;
     font-weight: 600;
 }
+
 @media (max-width: 600px) {
     h3 {
         font-size: 1.7rem;
@@ -462,6 +518,7 @@ h4 {
     margin: 1.5em 0 0.5em 0;
     font-size: 2rem;
 }
+
 @media (max-width: 600px) {
     h4 {
         font-size: 1.7rem;
@@ -477,3 +534,188 @@ h6 {
     margin: 1.5em 0 0.5em 0;
     font-size: 1.8rem;
 }
+
+.post-tag-content {
+    padding: max(8vmin,40px) max(4vmin,20px) max(8vmin,64px);
+    position: relative;
+    margin: 0 auto;
+    max-width: 1200px;
+    width: 100%;
+}
+
+.post-tag-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
+    column-gap: 30px;
+    row-gap: 30px;
+}
+
+@media screen and (max-width: 1080px) {
+    .post-tag-grid {
+        column-gap: 30px;
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+        row-gap: 30px;
+    }
+}
+
+@media (max-width: 767px) {
+    .site-footer .post-tag-content {
+        max-width: 500px;
+        grid-template-columns: 1fr;
+        grid-gap: 0;
+        text-align: center;
+    }
+    .site-footer .copyright,
+    .site-footer .copyright a {
+        color: #fff;
+        font-size: 1.5rem;
+    }
+    .site-footer .copyright {
+        margin-bottom: 16px;
+    }
+}
+
+@media screen and (max-width: 700px) {
+    .post-tag-grid {
+        column-gap: 30px;
+        display: grid;
+        grid-template-columns: minmax(0,1fr);
+        row-gap: 30px;
+    }
+}
+
+.post-tag-grid-item {
+    overflow: hidden;
+    text-align:center;
+}
+
+.post-tag-grid-item-svg{
+    width: 320px;
+    height: 180px;
+}
+
+.post-tag-grid-item-svg-first{
+    height: 180px;
+    width: 80px;
+    fill: var(--ghost-accent-color);
+}
+
+.post-tag-grid-item-svg-first-obj{
+    height: 28px;
+    width: 80px;
+    x:0;
+    y:80;
+}
+
+.post-tag-grid-item-svg-first-obj-text{
+    color: white;
+    font-size: 32px;
+}
+
+.post-tag-grid-item-svg-second, .post-tag-grid-item-svg-second-obj{
+    height: 180px;
+    width: 240px;
+    x: 80;
+    y: 0;
+}
+
+.post-tag-grid-item-svg-second-obj-inner{
+    padding: max(0.5vmin,2px);
+}
+
+.post-tag-grid-item-svg-second{
+    fill: black;
+}
+
+.post-tag-grid-item-svg-second-obj, .post-tag-grid-item-svg-second-obj-description{
+    color: white;
+}
+
+.post-tag-grid-item h2 {
+    font-size: 28px;
+    margin: 0.3em 0;
+    position: relative;
+    text-align: center;
+    text-transform: uppercase;
+}
+
+.post-tag-grid-item-subtext:after,
+.post-tag-grid-item-subtext:before {
+  content: " ";
+  height: 1px;
+  background: #000;
+  flex: 1;
+}
+
+.post-tag-grid-item-subtext:after {
+  margin-left: 5px;
+}
+
+.post-tag-grid-item-subtext:before {
+  margin-right: 5px;
+}
+
+.post-tags {
+    margin: 1.2em 0em -1em;
+}
+
+.post-tags a {
+    border-bottom: none !important;
+    font-size: small;
+    margin: 0 1% 0 0
+}
+
+.post-tags a .post-tag-title::before {
+    content: '#'
+}
+
+.post-tags a .post-tag-title {
+    margin-top: 2%
+}
+
+.post-tags a .post-tag-title:hover {
+    background-color: var(--color-background-hover);
+    color: var(--ghost-main-color) !important;
+}
+
+@media screen and (max-width: 980px) {
+    article .post-tags a .post-tag-title {
+        margin-top: 2%
+    }
+}
+
+.post-tags .post-tags-box-label {
+    font-size: 1rem;
+    line-height: 1em;
+    font-weight: 600;
+    text-transform: uppercase;
+    color: --color-content-light
+}
+
+.article-share{
+    margin: 6vmin 0 0;
+}
+
+.article-share ul {
+    list-style: none;
+    padding-left: 0em;
+}
+
+.article-share li {
+    display: inline;
+    padding-left: 0em;
+}
+
+.article-share li+li {
+    padding-left: 0.3em;
+}
+
+a.social-share-link svg {
+    height: 32px;
+    width: 32px;
+}
+
+.post-card-title-custom{
+    text-transform: uppercase;
+}

error.hbs

@@ -1,9 +1,9 @@
 {{!--
 
 There are two error files in this theme, one for 404s and one for all other errors.
-This file is the latter, and handles all 400/500 errors that might occur.
+This file is the latter, and handle all 400/500 errors that might occur.
 
-Because 500 errors in particular usually happen when a server is struggling, this
+Because 500 errors in particular usuall happen when a server is struggling, this
 template is as simple as possible. No template dependencies, no JS, no API calls.
 This is to prevent rendering the error-page itself compounding the issue causing
 the error in the first place.

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

@@ -1,7 +1,7 @@
 {
-    "name": "casper",
-    "description": "A clean, minimal default theme for the Ghost publishing platform",
-    "demo": "https://demo.ghost.io",
+    "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.9",
     "engines": {
         "ghost": ">=5.0.0"

page-tags.hbs

@@ -0,0 +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>
+</section>

partials/icons/share-facebook.hbs

@@ -0,0 +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>

partials/icons/share-linkedin.hbs

@@ -0,0 +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>

partials/icons/share-pinterest.hbs

@@ -0,0 +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>

partials/icons/share-reddit.hbs

@@ -0,0 +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>

partials/icons/share-twitter.hbs

@@ -0,0 +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>

partials/tag-card.hbs

@@ -0,0 +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>

post.hbs

@@ -58,6 +58,20 @@ into the {body} tag of the default.hbs template --}}
 
         </section>
         </div>
+        {{#if tags}}
+        <div class="post-tags">
+            <div class="post-tags-box-label">Tags</div>
+            {{#foreach tags}}
+                <a href="{{url}}">
+                    {{#if accent_color}}
+                    <span class="post-tag-title" style="color:{{accent_color}};">{{name}}</span>
+                    {{else}}
+                    <span class="post-tag-title" style="color:var(--ghost-accent-color);">{{name}}</span>
+                    {{/if}}
+                </a>
+            {{/foreach}}
+        </div>
+        {{/if}}
 
         {{#match @custom.post_image_style "!=" "Hidden"}}
         {{#if feature_image}}
@@ -86,6 +100,17 @@ into the {body} tag of the default.hbs template --}}
         {{content}}
     </section>
 
+    <section class="article-share gh-canvas">
+        <h2 class="text-[2.8rem] font-bold tracking-tight dark:text-[rgba(255,255,255,0.85)]"><span class="hidden sm:inline">Share </span><span class="capitalize sm:normal-case">this</span></h2>
+        <ul>
+            <li><a href="http://twitter.com/share?text={{encode title}}&amp;url={{url absolute="true"}}" onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;" title="Twitter" class="social-share-link">{{> "icons/share-twitter"}}</a></li>
+            <li><a href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}" onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;" title="Facebook" class="social-share-link">{{> "icons/share-facebook"}}</a></li>
+            <li><a href="http://www.reddit.com/submit?url={{url absolute="true"}}&amp;title={{encode title}}" onclick="window.open(this.href, 'reddit-share', 'width=490,height=530');return false;" title="Reddit" class="social-share-link">{{> "icons/share-reddit"}}</a></li>
+            <li><a href="http://www.linkedin.com/shareArticle?mini=true&amp;url={{url absolute="true"}}&amp;title={{encode title}}" onclick="window.open(this.href, 'linkedin-share', 'width=490,height=530');return false;" title="LinkedIn" class="social-share-link">{{> "icons/share-linkedin"}}</a></li>
+            <li><a href="http://pinterest.com/pin/create/button/?url={{url absolute="true"}}&amp;description={{encode title}}" onclick="window.open(this.href, 'pinterest-share', 'width=490,height=530');return false;" title="Pinterest" class="social-share-link">{{> "icons/share-pinterest"}}</a></li>
+        </ul>
+    </section>
+
     {{#if comments}}
         <section class="article-comments gh-canvas">
             {{comments}}

tag.hbs

@@ -8,37 +8,19 @@
         {{#tag}}
         <section class="post-card post-card-large">
 
-            {{#if feature_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"
-                    sizes="(max-width: 1000px) 400px, 800px"
-                    src="{{img_url feature_image size="m"}}"
-                    alt="{{title}}"
-                />
-            </div>
-            {{/if}}
-
             <div class="post-card-content">
-            <div class="post-card-content-link">
-                <header class="post-card-header">
-                    <h2 class="post-card-title">{{name}}</h2>
-                </header>
-                <div class="post-card-excerpt">
-                    {{#if description}}
-                        {{description}}
-                    {{else}}
-                        A collection of {{plural ../pagination.total empty='zero posts' singular='% post' plural='% posts'}}
-                    {{/if}}
+                <div class="post-card-content-link">
+                    <header class="post-card-header">
+                        <h2 class="post-card-title post-card-title-custom">{{name}}</h2>
+                    </header>
+                    <div class="post-card-excerpt">
+                        {{#if description}}
+                            {{description}}
+                        {{/if}}
+                         ... A collection of {{plural ../pagination.total empty='zero posts' singular='% post' plural='% posts'}}
+                    </div>
                 </div>
             </div>
-            </div>
-
         </section>
         {{/tag}}