tony/solo-dolo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add prism

Browse Source
This commit is contained in:
Tony Du 2025-02-20 22:54:19 -08:00
commit 9dd6bdbd35
40 changed files with 13645 additions and 0 deletions

3
.gitignore vendored Normal file

@ -0,0 +1,3 @@
dist/
node_modules/
assets/built

22
LICENSE Normal file

@ -0,0 +1,22 @@
Copyright (c) 2013-2025 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.

42
README.md Normal file

@ -0,0 +1,42 @@
# Solo
Solo is a minimal theme for [Ghost](https://github.com/TryGhost/Ghost) focused on showcasing the work of an individual writer or creator. This theme is highly customizable, with a few simple settings that allow you to quickly apply your own personal style to your site.
**Demo: https://solo.ghost.io**
# Instructions
1. [Download this theme](https://github.com/TryGhost/Solo/archive/main.zip)
2. Log into Ghost, and go to the `Design` settings area to upload the zip file
# Development
Edition 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
yarn
# Run build & watch for changes
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/solo.zip`, which you can then upload to your site.
```bash
yarn zip
```
# Changelog
- 2025-02-20: Add [Prism](https://prismjs.com/download.html?ref=ghost.org#themes=prism-tomorrow&languages=markup+css+clike+javascript+bash+c+csharp+cpp+diff+docker+git+go+graphql+haskell+hcl+http+java+javadoc+javadoclike+jq+jsdoc+json+latex+lua+nginx+nix+plsql+purescript+python+jsx+tsx+regex+rust+sql+systemd+typescript+yaml&plugins=line-highlight+line-numbers+autolinker+show-language+command-line+toolbar+copy-to-clipboard+match-braces+diff-highlight+treeview) for syntax highlighting
# Contribution
This repo is synced automatically with [TryGhost/Themes](https://github.com/TryGhost/Themes) monorepo. If you're looking to contribute or raise an issue, head over to the main repository [TryGhost/Themes](https://github.com/TryGhost/Themes) where our official themes are developed.
## Copyright & License
Copyright (c) 2013-2025 Ghost Foundation - Released under the [MIT license](LICENSE).

61
assets/css/fonts.css Normal file

@ -0,0 +1,61 @@
@font-face {
font-family: Manrope;
font-weight: 100 1000;
src: url("../fonts/Manrope[wght].woff2") format("woff2-variations");
}
@font-face {
font-family: "Libre Baskerville";
font-style: normal;
font-weight: 400;
src: local(""), url("../fonts/libre-baskerville-v14-latin-regular.woff2") format("woff2");
}
@font-face {
font-family: "Libre Baskerville";
font-style: normal;
font-weight: 700;
src: local(""), url("../fonts/libre-baskerville-v14-latin-700.woff2") format("woff2");
}
@font-face {
font-family: "Libre Baskerville";
font-style: italic;
font-weight: 400;
src: local(""), url("../fonts/libre-baskerville-v14-latin-italic.woff2") format("woff2");
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 400;
src: local(""), url("../fonts/jetbrains-mono-v13-latin-regular.woff2") format("woff2");
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 700;
src: local(""), url("../fonts/jetbrains-mono-v13-latin-700.woff2") format("woff2");
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 800;
src: local(""), url("../fonts/jetbrains-mono-v13-latin-800.woff2") format("woff2");
}
@font-face {
font-family: "JetBrains Mono";
font-style: italic;
font-weight: 400;
src: local(""), url("../fonts/jetbrains-mono-v13-latin-italic.woff2") format("woff2");
}
@font-face {
font-family: "JetBrains Mono";
font-style: italic;
font-weight: 700;
src: local(""), url("../fonts/jetbrains-mono-v13-latin-700italic.woff2") format("woff2");
}

440
assets/css/prism-one-dark.css Normal file

@ -0,0 +1,440 @@
/**
* One Dark theme for prism.js
* Based on Atom's One Dark theme: https://github.com/atom/atom/tree/master/packages/one-dark-syntax
*/
/**
* One Dark colours (accurate as of commit 8ae45ca on 6 Sep 2018)
* From colors.less
* --mono-1: hsl(220, 14%, 71%);
* --mono-2: hsl(220, 9%, 55%);
* --mono-3: hsl(220, 10%, 40%);
* --hue-1: hsl(187, 47%, 55%);
* --hue-2: hsl(207, 82%, 66%);
* --hue-3: hsl(286, 60%, 67%);
* --hue-4: hsl(95, 38%, 62%);
* --hue-5: hsl(355, 65%, 65%);
* --hue-5-2: hsl(5, 48%, 51%);
* --hue-6: hsl(29, 54%, 61%);
* --hue-6-2: hsl(39, 67%, 69%);
* --syntax-fg: hsl(220, 14%, 71%);
* --syntax-bg: hsl(220, 13%, 18%);
* --syntax-gutter: hsl(220, 14%, 45%);
* --syntax-guide: hsla(220, 14%, 71%, 0.15);
* --syntax-accent: hsl(220, 100%, 66%);
* From syntax-variables.less
* --syntax-selection-color: hsl(220, 13%, 28%);
* --syntax-gutter-background-color-selected: hsl(220, 13%, 26%);
* --syntax-cursor-line: hsla(220, 100%, 80%, 0.04);
*/
code[class*="language-"],
pre[class*="language-"] {
background: hsl(220, 13%, 18%);
color: hsl(220, 14%, 71%);
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
line-height: 1.5;
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/* Selection */
code[class*="language-"]::-moz-selection,
code[class*="language-"] *::-moz-selection,
pre[class*="language-"] *::-moz-selection {
background: hsl(220, 13%, 28%);
color: inherit;
text-shadow: none;
}
code[class*="language-"]::selection,
code[class*="language-"] *::selection,
pre[class*="language-"] *::selection {
background: hsl(220, 13%, 28%);
color: inherit;
text-shadow: none;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: 0.5em 0;
overflow: auto;
border-radius: 0.3em;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: 0.2em 0.3em;
border-radius: 0.3em;
white-space: normal;
}
/* Print */
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
.token.comment,
.token.prolog,
.token.cdata {
color: hsl(220, 10%, 40%);
}
.token.doctype,
.token.punctuation,
.token.entity {
color: hsl(220, 14%, 71%);
}
.token.attr-name,
.token.class-name,
.token.boolean,
.token.constant,
.token.number,
.token.atrule {
color: hsl(29, 54%, 61%);
}
.token.keyword {
color: hsl(286, 60%, 67%);
}
.token.property,
.token.tag,
.token.symbol,
.token.deleted,
.token.important {
color: hsl(355, 65%, 65%);
}
.token.selector,
.token.string,
.token.char,
.token.builtin,
.token.inserted,
.token.regex,
.token.attr-value,
.token.attr-value > .token.punctuation {
color: hsl(95, 38%, 62%);
}
.token.variable,
.token.operator,
.token.function {
color: hsl(207, 82%, 66%);
}
.token.url {
color: hsl(187, 47%, 55%);
}
/* HTML overrides */
.token.attr-value > .token.punctuation.attr-equals,
.token.special-attr > .token.attr-value > .token.value.css {
color: hsl(220, 14%, 71%);
}
/* CSS overrides */
.language-css .token.selector {
color: hsl(355, 65%, 65%);
}
.language-css .token.property {
color: hsl(220, 14%, 71%);
}
.language-css .token.function,
.language-css .token.url > .token.function {
color: hsl(187, 47%, 55%);
}
.language-css .token.url > .token.string.url {
color: hsl(95, 38%, 62%);
}
.language-css .token.important,
.language-css .token.atrule .token.rule {
color: hsl(286, 60%, 67%);
}
/* JS overrides */
.language-javascript .token.operator {
color: hsl(286, 60%, 67%);
}
.language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation {
color: hsl(5, 48%, 51%);
}
/* JSON overrides */
.language-json .token.operator {
color: hsl(220, 14%, 71%);
}
.language-json .token.null.keyword {
color: hsl(29, 54%, 61%);
}
/* MD overrides */
.language-markdown .token.url,
.language-markdown .token.url > .token.operator,
.language-markdown .token.url-reference.url > .token.string {
color: hsl(220, 14%, 71%);
}
.language-markdown .token.url > .token.content {
color: hsl(207, 82%, 66%);
}
.language-markdown .token.url > .token.url,
.language-markdown .token.url-reference.url {
color: hsl(187, 47%, 55%);
}
.language-markdown .token.blockquote.punctuation,
.language-markdown .token.hr.punctuation {
color: hsl(220, 10%, 40%);
font-style: italic;
}
.language-markdown .token.code-snippet {
color: hsl(95, 38%, 62%);
}
.language-markdown .token.bold .token.content {
color: hsl(29, 54%, 61%);
}
.language-markdown .token.italic .token.content {
color: hsl(286, 60%, 67%);
}
.language-markdown .token.strike .token.content,
.language-markdown .token.strike .token.punctuation,
.language-markdown .token.list.punctuation,
.language-markdown .token.title.important > .token.punctuation {
color: hsl(355, 65%, 65%);
}
/* General */
.token.bold {
font-weight: bold;
}
.token.comment,
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
.token.namespace {
opacity: 0.8;
}
/* Plugin overrides */
/* Selectors should have higher specificity than those in the plugins' default stylesheets */
/* Show Invisibles plugin overrides */
.token.token.tab:not(:empty):before,
.token.token.cr:before,
.token.token.lf:before,
.token.token.space:before {
color: hsla(220, 14%, 71%, 0.15);
text-shadow: none;
}
/* Toolbar plugin overrides */
/* Space out all buttons and move them away from the right edge of the code block */
div.code-toolbar > .toolbar.toolbar > .toolbar-item {
margin-right: 0.4em;
}
/* Styling the buttons */
div.code-toolbar > .toolbar.toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar.toolbar > .toolbar-item > a,
div.code-toolbar > .toolbar.toolbar > .toolbar-item > span {
background: hsl(220, 13%, 26%);
color: hsl(220, 9%, 55%);
padding: 0.1em 0.4em;
border-radius: 0.3em;
}
div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover,
div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus,
div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover,
div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus,
div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover,
div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus {
background: hsl(220, 13%, 28%);
color: hsl(220, 14%, 71%);
}
/* Line Highlight plugin overrides */
/* The highlighted line itself */
.line-highlight.line-highlight {
background: hsla(220, 100%, 80%, 0.04);
}
/* Default line numbers in Line Highlight plugin */
.line-highlight.line-highlight:before,
.line-highlight.line-highlight[data-end]:after {
background: hsl(220, 13%, 26%);
color: hsl(220, 14%, 71%);
padding: 0.1em 0.6em;
border-radius: 0.3em;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */
}
/* Hovering over a linkable line number (in the gutter area) */
/* Requires Line Numbers plugin as well */
pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before {
background-color: hsla(220, 100%, 80%, 0.04);
}
/* Line Numbers and Command Line plugins overrides */
/* Line separating gutter from coding area */
.line-numbers.line-numbers .line-numbers-rows,
.command-line .command-line-prompt {
border-right-color: hsla(220, 14%, 71%, 0.15);
}
/* Stuff in the gutter */
.line-numbers .line-numbers-rows > span:before,
.command-line .command-line-prompt > span:before {
color: hsl(220, 14%, 45%);
}
/* Match Braces plugin overrides */
/* Note: Outline colour is inherited from the braces */
.rainbow-braces .token.token.punctuation.brace-level-1,
.rainbow-braces .token.token.punctuation.brace-level-5,
.rainbow-braces .token.token.punctuation.brace-level-9 {
color: hsl(355, 65%, 65%);
}
.rainbow-braces .token.token.punctuation.brace-level-2,
.rainbow-braces .token.token.punctuation.brace-level-6,
.rainbow-braces .token.token.punctuation.brace-level-10 {
color: hsl(95, 38%, 62%);
}
.rainbow-braces .token.token.punctuation.brace-level-3,
.rainbow-braces .token.token.punctuation.brace-level-7,
.rainbow-braces .token.token.punctuation.brace-level-11 {
color: hsl(207, 82%, 66%);
}
.rainbow-braces .token.token.punctuation.brace-level-4,
.rainbow-braces .token.token.punctuation.brace-level-8,
.rainbow-braces .token.token.punctuation.brace-level-12 {
color: hsl(286, 60%, 67%);
}
/* Diff Highlight plugin overrides */
/* Taken from https://github.com/atom/github/blob/master/styles/variables.less */
pre.diff-highlight > code .token.token.deleted:not(.prefix),
pre > code.diff-highlight .token.token.deleted:not(.prefix) {
background-color: hsla(353, 100%, 66%, 0.15);
}
pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection,
pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection,
pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection,
pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection {
background-color: hsla(353, 95%, 66%, 0.25);
}
pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection,
pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection,
pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection,
pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection {
background-color: hsla(353, 95%, 66%, 0.25);
}
pre.diff-highlight > code .token.token.inserted:not(.prefix),
pre > code.diff-highlight .token.token.inserted:not(.prefix) {
background-color: hsla(137, 100%, 55%, 0.15);
}
pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection,
pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection,
pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection,
pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection {
background-color: hsla(135, 73%, 55%, 0.25);
}
pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection,
pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection,
pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection,
pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection {
background-color: hsla(135, 73%, 55%, 0.25);
}
/* Previewers plugin overrides */
/* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-dark-ui */
/* Border around popup */
.prism-previewer.prism-previewer:before,
.prism-previewer-gradient.prism-previewer-gradient div {
border-color: hsl(224, 13%, 17%);
}
/* Angle and time should remain as circles and are hence not included */
.prism-previewer-color.prism-previewer-color:before,
.prism-previewer-gradient.prism-previewer-gradient div,
.prism-previewer-easing.prism-previewer-easing:before {
border-radius: 0.3em;
}
/* Triangles pointing to the code */
.prism-previewer.prism-previewer:after {
border-top-color: hsl(224, 13%, 17%);
}
.prism-previewer-flipped.prism-previewer-flipped.after {
border-bottom-color: hsl(224, 13%, 17%);
}
/* Background colour within the popup */
.prism-previewer-angle.prism-previewer-angle:before,
.prism-previewer-time.prism-previewer-time:before,
.prism-previewer-easing.prism-previewer-easing {
background: hsl(219, 13%, 22%);
}
/* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */
/* For time, this is the alternate colour */
.prism-previewer-angle.prism-previewer-angle circle,
.prism-previewer-time.prism-previewer-time circle {
stroke: hsl(220, 14%, 71%);
stroke-opacity: 1;
}
/* Stroke colours of the handle, direction point, and vector itself */
.prism-previewer-easing.prism-previewer-easing circle,
.prism-previewer-easing.prism-previewer-easing path,
.prism-previewer-easing.prism-previewer-easing line {
stroke: hsl(220, 14%, 71%);
}
/* Fill colour of the handle */
.prism-previewer-easing.prism-previewer-easing circle {
fill: transparent;
}

11
assets/css/prism.css Normal file

File diff suppressed because one or more lines are too long

957
assets/css/screen.css Normal file

@ -0,0 +1,957 @@
@import "@tryghost/shared-theme-assets/assets/css/v1/screen.css";
@import "fonts.css";
@import "prism.css";
@import "prism-one-dark.css";
:root {
--font-sans: Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
--font-serif: Libre Baskerville, Georgia, Times, serif;
--font-mono: JetBrains Mono, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
--color-primary-text: var(--color-darker-gray);
--color-secondary-text-dark: rgba(0, 0, 0, 0.4);
--color-secondary-text-light: rgba(255, 255, 255, 0.64);
--color-secondary-text: var(--color-secondary-text-dark);
--color-border: rgba(0, 0, 0, 0.08);
--gap: clamp(24px, 1.7032rem + 1.9355vw, 48px);
--head-nav-gap: 32px;
--container-width: 1440px;
--content-font-size: clamp(1.7rem, 0.38vw + 1.4rem, 2rem);
--header-spacing: clamp(4.8rem, 4rem + 2.5vw, 8rem);
}
:root.has-light-text {
--color-lighter-gray: rgba(0, 0, 0, 0.1);
--color-darker-gray: #fff;
--color-secondary-text: var(--color-secondary-text-light);
--color-border: rgba(255, 255, 255, 0.2);
}
body {
background-color: var(--background-color);
}
.gh-main {
padding-top: clamp(4.8rem, 4rem + 2.5vw, 8rem);
}
figcaption {
font-size: 1.3rem;
text-align: right;
}
.kg-width-full figcaption {
padding: 0;
}
hr {
background-color: var(--color-border);
}
.gh-content h2 {
font-size: 2.25em;
letter-spacing: -0.03em;
}
.gh-content h3 {
font-size: 1.6em;
}
.gh-canvas {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.gh-canvas > *,
.page-template .no-image :is(.gh-article-title, .gh-article-excerpt) {
grid-column: 4 / span 6;
}
.gh-canvas > .kg-width-wide {
grid-column: 4 / span 9;
}
.gh-canvas > .kg-width-full,
.gh-canvas > .kg-gallery-card.kg-width-wide {
position: relative;
z-index: 20;
grid-column: 1 / span 12;
transform: translate3d(0, 0, 0);
}
@media (max-width: 991px) {
.gh-canvas > *,
.page-template .no-image :is(.gh-article-title, .gh-article-excerpt) {
grid-column: 3 / span 8;
}
.gh-canvas > .kg-width-wide {
grid-column: 3 / span 10;
}
}
@media (max-width: 767px) {
.gh-canvas > *,
.page-template .no-image :is(.gh-article-title, .gh-article-excerpt) {
grid-column: 2 / span 10;
}
.gh-canvas > .kg-width-wide {
grid-column: 1 / span 12;
}
}
@media (max-width: 480px) {
.gh-canvas > *,
.page-template .no-image :is(.gh-article-title, .gh-article-excerpt) {
grid-column: 1 / span 12;
}
}
/* Header
/* ---------------------------------------------------------- */
.gh-head {
font-size: 1.6rem;
background-color: transparent;
}
.gh-head-logo {
font-weight: 800;
}
.gh-head-logo img {
max-height: 48px;
}
.gh-head-menu,
.gh-head-link {
font-weight: 700;
}
.is-head-stacked .gh-head-menu::before,
.is-head-stacked .gh-head-menu::after {
background-color: var(--color-border);
}
.gh-head-menu a {
color: inherit;
}
@media (max-width: 991px) {
.is-head-open:not(.is-head-brand):not(.is-head-dark):not(.is-head-transparent) :is(#gh-head, #gh-head .gh-head-actions) {
background-color: var(--background-color);
}
}
/* About section
/* ---------------------------------------------------------- */
.gh-about {
margin-bottom: 40px;
}
.gh-about-content {
word-break: break-word;
}
.gh-about-primary {
max-width: 1200px;
font-size: clamp(3.2rem, 2.4452rem + 2.0968vw, 5.8rem);
font-weight: 800;
line-height: 1.2;
}
.has-serif-font:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]):not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-about-primary {
font-family: var(--gh-font-heading, var(--font-serif));
}
.has-mono-font:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]):not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-about-primary {
font-family: var(--gh-font-heading, var(--font-mono));
}
.gh-about-primary a {
text-decoration: underline;
}
.gh-about-secondary {
max-width: 840px;
font-size: clamp(2.4rem, 0.54vw + 2.14rem, 3rem);
font-weight: 500;
letter-spacing: -0.008em;
}
.has-serif-font:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]):not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-about-secondary {
font-family: var(--gh-font-body, var(--font-serif));
}
.has-mono-font:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]):not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-about-secondary {
font-family: var(--gh-font-body, var(--font-mono));
}
.gh-about-primary + .gh-about-secondary {
max-width: 640px;
margin-top: 20px;
font-size: clamp(2rem, 0.36vw + 1.83rem, 2.4rem);
font-weight: 450;
}
.gh-about-secondary a {
text-decoration: underline;
}
/* Side by side about section
/* ---------------------------------------------------------- */
.has-side-about .gh-about {
margin-top: 48px;
}
.has-side-about .gh-about.no-image {
margin-top: 80px;
margin-bottom: 48px;
}
.has-side-about .gh-about-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(4rem, 0.0842rem + 3.9474vw, 6.4rem);
}
.has-side-about .gh-about.no-image .gh-about-inner {
grid-template-columns: 1fr;
}
.has-side-about .gh-about-content-inner {
position: sticky;
top: 40px;
}
@media (max-width: 840px) {
.has-side-about .gh-about-inner {
display: flex;
flex-direction: column-reverse;
gap: 64px;
}
}
/* Large background about section
/* ---------------------------------------------------------- */
.has-background-about .gh-about {
position: relative;
}
.has-background-about .gh-about::before {
position: absolute;
inset: 0;
content: "";
background-color: var(--color-black);
transition: opacity 1.5s ease;
}
.has-background-about .gh-about.initialized::before {
opacity: 0.4;
}
.has-background-about .gh-about-inner {
display: flex;
align-items: flex-end;
min-height: var(--about-height, 100vh);
}
.has-background-about .gh-about-image {
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
}
.has-background-about .gh-about-content {
position: sticky;
bottom: calc(var(--gap) + 24px);
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 50%;
margin-top: 200px;
margin-bottom: calc(var(--gap) + 24px);
text-align: left;
}
.has-background-about .gh-about-primary {
color: #fff;
}
.has-background-about .gh-about-secondary {
color: #fff;
opacity: 0.7;
}
.has-background-about .gh-subscribe-input {
color: var(--color-secondary-text-dark);
background-color: #fff;
border: 0;
}
@media (max-width: 991px) {
.has-background-about .gh-about-content {
max-width: none;
}
}
/* Typographic profile about section
/* ---------------------------------------------------------- */
.has-typographic-about .gh-about {
display: flex;
min-height: calc(100vh - 110px);
padding-top: 64px;
padding-bottom: 64px;
}
.has-typographic-about .gh-about-inner {
display: flex;
flex-direction: column;
gap: 48px;
justify-content: flex-end;
width: 100%;
padding-bottom: clamp(2.4rem, 2rem + 1.25vw, 4rem);
}
.has-typographic-about .gh-about-image {
width: 128px;
height: 128px;
border-radius: 50%;
object-fit: cover;
}
.has-typographic-about .gh-subscribe-input {
margin-top: 48px;
}
/* Post card
/* ---------------------------------------------------------- */
.gh-card-link:hover {
opacity: 1;
}
.gh-card-wrapper {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: center;
}
.gh-card-title {
font-weight: 800;
word-break: break-word;
}
.has-serif-font:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]):not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-card-title {
font-family: var(--gh-font-heading, var(--font-serif));
}
.has-mono-font:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]):not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-card-title {
font-family: var(--gh-font-heading, var(--font-mono));
}
.gh-card-link:hover .gh-card-title {
opacity: 0.8;
}
.gh-card-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-top: 16px;
font-size: 1.4rem;
font-weight: 500;
color: var(--color-secondary-text);
}
.gh-card-meta > * {
display: flex;
gap: 8px;
align-items: center;
}
.gh-card-meta > * + *:not(script):not(.gh-card-access)::before {
width: 2px;
height: 2px;
content: "";
background-color: currentColor;
border-radius: 50%;
}
.gh-card-access {
padding: 0 10px 0 8px;
margin-left: 4px;
background-color: var(--color-border);
border-radius: 40px;
}
.has-parallax-feed .gh-card-access {
color: var(--color-darker-gray);
background-color: var(--color-white);
}
.gh-card-access svg {
margin-right: -5px;
}
/* Classic feed
/* ---------------------------------------------------------- */
.has-classic-feed .gh-card.no-image {
max-width: 1200px;
}
.has-classic-feed .gh-card + .gh-card {
margin-top: clamp(4.8rem, 4rem + 2.5vw, 8rem);
}
.has-classic-feed .gh-card + .gh-card.no-image,
.has-classic-feed .gh-card.no-image + .gh-card {
margin-top: clamp(8rem, 7.14vw + 4.57rem, 16rem);
}
.has-classic-feed .gh-card-link {
display: flex;
flex-direction: row-reverse;
gap: clamp(4rem, 3rem + 3.125vw, 8rem);
}
.has-classic-feed .gh-card-image {
position: relative;
flex: 1;
}
.has-classic-feed .gh-card-image::before {
display: block;
padding-bottom: 56.25%;
content: "";
}
.has-classic-feed .no-image .gh-card-image {
display: none;
}
.has-classic-feed .gh-card-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.has-classic-feed .gh-card-wrapper {
flex: 1;
flex-shrink: 0;
width: 100%;
}
.has-classic-feed .gh-card-title {
font-size: clamp(3.2rem, 2.7rem + 1.5625vw, 5.2rem);
}
.has-classic-feed .kg-width-full .gh-card-title {
font-size: clamp(3.2rem, 2.4rem + 2.5vw, 6.4rem);
}
@media (max-width: 991px) {
.has-classic-feed .gh-card-link {
flex-direction: column;
gap: 32px;
}
}
/* Typographic feed
/* ---------------------------------------------------------- */
.has-typographic-feed.home-template .gh-main {
padding-top: 0;
}
.has-typographic-feed .gh-card {
margin-top: clamp(8rem, 6rem + 6.25vw, 16rem);
}
.has-typographic-feed .gh-card-title {
max-width: 1200px;
font-size: clamp(3.2rem, 2.4rem + 2.5vw, 6.4rem);
line-height: 1.1;
}
.has-typographic-feed .gh-card-excerpt {
max-width: 920px;
margin-top: 16px;
font-size: clamp(1.8rem, 0.27vw + 1.67rem, 2.1rem);
font-weight: 450;
line-height: 1.5;
letter-spacing: -0.005em;
}
.has-serif-font.has-typographic-feed:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]):not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-card-excerpt {
font-family: var(--gh-font-body, var(--font-serif));
}
.has-mono-font.has-typographic-feed:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]):not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-card-excerpt {
font-family: var(--gh-font-body, var(--font-mono));
}
.has-typographic-feed .gh-card-meta {
margin-top: 16px;
}
/* Parallax feed
/* ---------------------------------------------------------- */
.has-parallax-feed .gh-card {
display: flex;
min-height: 640px;
}
.has-parallax-feed .gh-card.no-image {
background-color: var(--tag-color, var(--color-darker-gray));
}
.has-parallax-feed .kg-width-full .gh-card {
min-height: 800px;
}
.has-parallax-feed .gh-card + .gh-card {
margin-top: 80px;
}
.has-parallax-feed .gh-card-link {
position: relative;
display: flex;
flex-grow: 1;
}
.has-parallax-feed .gh-card:not(.no-image) .gh-card-link::before {
position: absolute;
width: 100%;
height: 100%;
content: "";
background-color: #000;
opacity: 0.6;
transition: opacity 0.4s;
}
.has-parallax-feed .gh-card:not(.no-image):hover .gh-card-link::before {
opacity: 0.4;
}
.has-parallax-feed .gh-card-image {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
}
.has-parallax-feed .gh-card-wrapper {
position: relative;
justify-content: flex-end;
padding: 64px 48px;
}
.has-parallax-feed .kg-width-full .gh-card-wrapper {
padding: 64px 48px;
}
.has-parallax-feed :is(.gh-card-title, .gh-card-meta) {
color: #fff;
}
.has-parallax-feed .gh-card-title {
font-size: clamp(3.2rem, 2.4rem + 2.5vw, 6.4rem);
line-height: 1.1;
}
.has-parallax-feed .gh-card:not(.no-image) .gh-card-link:hover .gh-card-title {
opacity: 1;
}
.has-parallax-feed .kg-width-full .gh-card-title {
font-size: 6.4rem;
}
.has-parallax-feed .gh-card-meta {
margin-top: 12px;
}
/* Article
/* ---------------------------------------------------------- */
.gh-article-meta {
top: 0;
bottom: 0;
z-index: 10;
grid-row-start: 1;
width: 100%;
margin: 0 !important;
}
.gh-article-meta-inner {
position: sticky;
top: 48px;
display: flex;
flex-direction: column;
}
.gh-article-meta .gh-author-image-list {
display: flex;
margin-bottom: 12px;
margin-left: -2px;
}
.gh-article-meta .gh-author-image {
display: block;
width: 72px;
height: 72px;
margin-bottom: 0;
border: 2px solid var(--color-white);
}
.gh-article-meta .gh-author-icon {
background-color: var(--color-light-gray);
}
.gh-article-meta .gh-author-image:hover {
opacity: 1;
}
.gh-article-meta .gh-author-image-list .gh-author-image + .gh-author-image {
margin-left: -20px;
}
.gh-article-meta .gh-author-image-list .gh-author-image:nth-child(1) {
z-index: 30;
}
.gh-article-meta .gh-author-image-list .gh-author-image:nth-child(2) {
z-index: 20;
}
.gh-article-meta .gh-author-image-list .gh-author-image:nth-child(3) {
z-index: 10;
}
.gh-article-meta .gh-author-name-list {
margin-bottom: -2px;
line-height: 1.35;
}
.gh-article-meta .gh-author-name-list a {
font-size: 1.9rem;
font-weight: 700;
letter-spacing: -0.01em;
text-decoration: none;
color: var(--color-darker-gray);
}
.gh-article-date {
margin-top: 4px;
font-size: 1.4rem;
color: var(--color-secondary-text);
}
.gh-article-tag {
display: inline-block;
width: fit-content;
padding: 2px 12px;
margin-top: 20px;
font-size: 1.5rem;
font-weight: 700;
color: var(--tag-color, var(--color-darker-gray)) !important;
text-decoration: none !important;
letter-spacing: -0.01em;
border: 2px solid var(--color-border);
border-radius: 24px;
}
.gh-content .gh-article-header {
grid-row-start: 1;
grid-column: 4 / span 9;
margin-top: 0;
margin-bottom: clamp(4.8rem, 1.43vw + 4.11rem, 6.4rem);
}
.gh-article-title {
grid-column: 1 / span 9;
font-size: clamp(4rem, 2.86vw + 2.63rem, 7.2rem);
font-weight: 800;
line-height: 1;
letter-spacing: -0.03em;
}
.has-serif-font:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]):not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-article-title {
font-family: var(--gh-font-heading, var(--font-serif));
}
.has-mono-font:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]):not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-article-title {
font-family: var(--gh-font-heading, var(--font-mono));
}
.gh-article-excerpt {
grid-column: 1 / span 9;
max-width: 840px;
font-size: clamp(1.8rem, 0.54vw + 1.54rem, 2.4rem);
font-weight: 500;
line-height: 1.45;
}
.has-serif-font:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]):not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-article-excerpt {
font-family: var(--gh-font-body, var(--font-serif));
}
.has-mono-font:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]):not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-article-excerpt {
font-family: var(--gh-font-body, var(--font-mono));
}
.gh-article-excerpt .emoji {
color: initial;
}
.gh-article-image {
grid-column: 1 / span 12;
margin-top: clamp(4rem, 3rem + 3.125vw, 8rem);
}
.gh-content {
--content-spacing-multiplier: 1.5;
position: relative;
margin-top: clamp(4rem, 3rem + 3.125vw, 8rem);
line-height: 1.7;
}
:is(.post-template, .page-template) .no-image .gh-content {
margin-top: clamp(4rem, 2.14vw + 2.97rem, 6.4rem);
}
.gh-content > [id] {
font-weight: 800;
}
.has-serif-font:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]):not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > :is([id], p, ul, ol) {
font-family: var(--gh-font-body, var(--font-serif));
}
.has-mono-font:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]):not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > :is([id], p, ul, ol) {
font-family: var(--gh-font-body, var(--font-mono));
}
.gh-article-footer {
margin-top: clamp(6.4rem, 3rem + 10.625vw, 20rem);
}
@media (min-width: 992px) {
.gh-article-meta {
position: absolute;
grid-column: 1 / span 3;
}
}
@media (max-width: 991px) {
:is(.gh-article-title, .gh-article-excerpt),
.gh-content > .gh-article-header {
grid-column: 1 / span 10;
}
.gh-article-meta {
margin-bottom: 32px !important;
}
.no-image .gh-article-meta {
grid-row-start: 2;
}
.gh-article-meta .gh-author-image {
width: 64px;
height: 64px;
margin-right: 12px;
margin-bottom: 0;
}
.gh-article-meta-wrapper {
flex-grow: 1;
}
}
@media (max-width: 767px) {
:is(.gh-article-title, .gh-article-excerpt),
.gh-content > .gh-article-header {
grid-column: 1 / span 12;
}
.gh-content {
font-size: var(--content-font-size);
}
}
/* Custom CTA
/* ---------------------------------------------------------- */
.gh-cta {
position: relative;
z-index: 20;
grid-column: 1 / span 12 !important;
padding: clamp(8rem, 10.71vw + 2.86rem, 20rem) clamp(4.8rem, 4.64vw + 2.57rem, 10rem);
margin-top: clamp(8rem, 7.14vw + 4.57rem, 16rem);
background-color: var(--color-lighter-gray);
transform: translate3d(0, 0, 0);
}
.gh-cta-title {
margin-bottom: 24px;
font-size: clamp(3rem, 0.71vw + 2.66rem, 3.8rem);
font-weight: 800;
letter-spacing: -0.03em;
}
.has-serif-font:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]):not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-cta-title {
font-family: var(--gh-font-heading, var(--font-serif));
}
.has-mono-font:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]):not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-cta-title {
font-family: var(--gh-font-heading, var(--font-mono));
}
.gh-cta .gh-btn {
height: 48px;
padding-right: 24px;
padding-left: 24px;
font-size: 1.8rem;
letter-spacing: -0.005em;
}
/* Navigation
/* ---------------------------------------------------------- */
.gh-navigation {
grid-column: 1 / span 12;
font-size: clamp(2rem, 1.7rem + 0.9375vw, 3.2rem);
font-weight: 800;
letter-spacing: -0.02em;
}
.has-serif-font:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]):not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-navigation {
font-family: var(--gh-font-heading, var(--font-serif));
}
.has-mono-font:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]):not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-navigation {
font-family: var(--gh-font-heading, var(--font-mono));
}
/* Comments
/* ---------------------------------------------------------- */
.gh-comments {
margin-top: clamp(4.8rem, 4.64vw + 2.57rem, 10rem);
}
.gh-comments .gh-comments-title {
margin-bottom: 48px;
font-weight: 800;
}
.has-serif-font:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]):not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-comments-title {
font-family: var(--gh-font-heading, var(--font-serif));
}
.has-mono-font:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]):not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-comments-title {
font-family: var(--gh-font-heading, var(--font-mono));
}
/* Subscribe
/* ---------------------------------------------------------- */
.gh-subscribe-input {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 480px;
height: 52px;
padding: 0 8px 0 24px;
margin-top: 40px;
font-size: 1.7rem;
color: var(--color-secondary-text);
cursor: pointer;
background-color: var(--color-border);
border-radius: 72px;
}
.gh-subscribe-input .gh-btn {
font-weight: 700;
}
/* Archive
/* ---------------------------------------------------------- */
:is(.tag-template, .author-template) .gh-article {
margin-bottom: 80px;
}
.gh-author-image {
width: 96px;
height: 96px;
margin-bottom: 24px;
overflow: hidden;
border-radius: 50%;
}
.gh-author-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gh-author-meta {
margin-top: 16px;
font-size: 1.8rem;
color: var(--color-secondary-text);
}
.gh-author-location {
margin-bottom: 6px;
}
.gh-author-social {
display: flex;
gap: 12px;
align-items: center;
}
.gh-author-social-link {
line-height: 0;
}
/* Footer
/* ---------------------------------------------------------- */
.gh-foot {
padding-top: clamp(8rem, 4.55vw + 6.18rem, 12rem);
padding-bottom: clamp(8rem, 4.55vw + 6.18rem, 12rem);
}
.gh-foot-inner {
display: flex;
flex-direction: column;
gap: 24px;
align-items: center;
}
.gh-foot-menu {
font-size: 1.6rem;
font-weight: 700;
}
.gh-copyright {
font-size: 1.4rem;
}

BIN
assets/fonts/Manrope[wght].woff2 Normal file

Binary file not shown.

BIN
assets/fonts/jetbrains-mono-v13-latin-700.woff2 Normal file

Binary file not shown.

BIN
assets/fonts/jetbrains-mono-v13-latin-700italic.woff2 Normal file

Binary file not shown.

BIN
assets/fonts/jetbrains-mono-v13-latin-800.woff2 Normal file

Binary file not shown.

BIN
assets/fonts/jetbrains-mono-v13-latin-italic.woff2 Normal file

Binary file not shown.

BIN
assets/fonts/jetbrains-mono-v13-latin-regular.woff2 Normal file

Binary file not shown.

BIN
assets/fonts/libre-baskerville-v14-latin-700.woff2 Normal file

Binary file not shown.

BIN
assets/fonts/libre-baskerville-v14-latin-italic.woff2 Normal file

Binary file not shown.

BIN
assets/fonts/libre-baskerville-v14-latin-regular.woff2 Normal file

Binary file not shown.

BIN
assets/images/default-skin.png Executable file

Binary file not shown.
Side by Side

After

(image error) Size: 547 B

1
assets/images/default-skin.svg Executable file

@ -0,0 +1 @@
<svg width="264" height="88" viewBox="0 0 264 88" xmlns="http://www.w3.org/2000/svg"><title>default-skin 2</title><g fill="none" fill-rule="evenodd"><g><path d="M67.002 59.5v3.768c-6.307.84-9.184 5.75-10.002 9.732 2.22-2.83 5.564-5.098 10.002-5.098V71.5L73 65.585 67.002 59.5z" id="Shape" fill="#fff"/><g fill="#fff"><path d="M13 29v-5h2v3h3v2h-5zM13 15h5v2h-3v3h-2v-5zM31 15v5h-2v-3h-3v-2h5zM31 29h-5v-2h3v-3h2v5z" id="Shape"/></g><g fill="#fff"><path d="M62 24v5h-2v-3h-3v-2h5zM62 20h-5v-2h3v-3h2v5zM70 20v-5h2v3h3v2h-5zM70 24h5v2h-3v3h-2v-5z"/></g><path d="M20.586 66l-5.656-5.656 1.414-1.414L22 64.586l5.656-5.656 1.414 1.414L23.414 66l5.656 5.656-1.414 1.414L22 67.414l-5.656 5.656-1.414-1.414L20.586 66z" fill="#fff"/><path d="M111.785 65.03L110 63.5l3-3.5h-10v-2h10l-3-3.5 1.785-1.468L117 59l-5.215 6.03z" fill="#fff"/><path d="M152.215 65.03L154 63.5l-3-3.5h10v-2h-10l3-3.5-1.785-1.468L147 59l5.215 6.03z" fill="#fff"/><g><path id="Rectangle-11" fill="#fff" d="M160.957 28.543l-3.25-3.25-1.413 1.414 3.25 3.25z"/><path d="M152.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" id="Oval-1" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M150 21h5v1h-5z"/></g><g><path d="M116.957 28.543l-1.414 1.414-3.25-3.25 1.414-1.414 3.25 3.25z" fill="#fff"/><path d="M108.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M106 21h5v1h-5z"/><path fill="#fff" d="M109.043 19.008l-.085 5-1-.017.085-5z"/></g></g></g></svg>
Side by Side

After

(image error) Size: 1.5 KiB

BIN
assets/images/preloader.gif Executable file

Binary file not shown.
Side by Side

After

(image error) Size: 866 B

7
assets/js/lib/jarallax.min.js vendored Normal file

File diff suppressed because one or more lines are too long

51
assets/js/lib/prism.js Normal file

File diff suppressed because one or more lines are too long

54
assets/js/main.js Normal file

@ -0,0 +1,54 @@
function initParallax() {
jarallax(document.querySelectorAll('.has-parallax-feed .gh-card'), {
speed: 0.8,
});
}
(function () {
if (!document.body.classList.contains('has-background-about')) return;
const about = document.querySelector('.gh-about');
if (!about) return;
const image = about.querySelector('.gh-about-image');
if (!image.naturalWidth) {
imagesLoaded(image, function () {
about.style.setProperty('--about-height', image.clientWidth * image.naturalHeight / image.naturalWidth + 'px');
});
}
})();
(function () {
initParallax();
})();
(function () {
const toggle = document.querySelector('[data-toggle-comments]');
if (!toggle) return;
toggle.addEventListener('click', function () {
document.body.classList.toggle('comments-opened');
});
})();
(function () {
const element = document.querySelector('.gh-article-excerpt');
if (!element) return;
let text = element.textContent;
const emojiRE = /\p{EPres}|\p{ExtPict}/gu;
const emojis = text.match(emojiRE);
if (!emojis) return;
emojis.forEach(function (emoji) {
text = text.replace(emoji, `<span class="emoji">${emoji}</span>`);
});
element.innerHTML = text;
})();
(function () {
pagination(true, initParallax);
})();

38
author.hbs Normal file

@ -0,0 +1,38 @@
{{!< default}}
<main class="gh-main gh-outer">
{{#author}}
<section class="gh-article gh-inner">
<header class="gh-article-header">
{{#if profile_image}}
<img class="gh-author-image" src="{{img_url profile_image size="s"}}" alt="{{name}}">
{{/if}}
<h1 class="gh-article-title">{{name}}</h1>
{{#if bio}}
<p class="gh-article-excerpt">{{bio}}</p>
{{/if}}
</header>
<footer class="gh-author-meta">
{{#if location}}
<div class="gh-author-location">{{location}}</div>
{{/if}}
<div class="gh-author-social">
{{#if website}}
<a class="gh-author-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a>
{{/if}}
{{#if twitter}}
<a class="gh-author-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
{{/if}}
{{#if facebook}}
<a class="gh-author-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
{{/if}}
</div>
</footer>
</section>
{{/author}}
<div class="gh-feed{{#match @custom.header_section_layout "!=" "Large background"}} gh-inner{{/match}}">
{{#foreach posts}}
{{> "loop"}}
{{/foreach}}
</div>
</main>

121
default.hbs Normal file

@ -0,0 +1,121 @@
<!DOCTYPE html>
<html lang="{{@site.locale}}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{meta_title}}</title>
<link rel="stylesheet" href="{{asset "built/screen.css"}}">
{{#is "home"}}
{{#if @site.cover_image}}
<link rel="preload" as="image" href="{{@site.cover_image}}">
{{/if}}
{{/is}}
<style>
:root {
--background-color: {{@custom.background_color}}
}
</style>
<script>
/* The script for calculating the color contrast was taken from
https://gomakethings.com/dynamically-changing-the-text-color-based-on-background-color-contrast-with-vanilla-js/ */
var accentColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color');
accentColor = accentColor.trim().slice(1);
var r = parseInt(accentColor.substr(0, 2), 16);
var g = parseInt(accentColor.substr(2, 2), 16);
var b = parseInt(accentColor.substr(4, 2), 16);
var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
var textColor = (yiq >= 128) ? 'dark' : 'light';
document.documentElement.className = `has-${textColor}-text`;
</script>
{{ghost_head}}
</head>
<body class="{{body_class}}{{{block "body_class"}}} is-head-{{#match @custom.navigation_layout "Logo on the left"}}left-logo{{else match @custom.navigation_layout "Logo in the middle"}}middle-logo{{else}}stacked{{/match}}{{#match @custom.typography "Elegant serif"}} has-serif-font{{/match}}{{#match @custom.typography "Consistent mono"}} has-mono-font{{/match}}{{#match @custom.post_feed_layout "Classic"}} has-classic-feed{{/match}}{{#match @custom.post_feed_layout "Typographic"}} has-typographic-feed{{/match}}{{#match @custom.post_feed_layout "Parallax"}} has-parallax-feed{{/match}}">
<div class="gh-site">
<header id="gh-head" class="gh-head gh-outer">
<div class="gh-head-inner gh-inner">
<div class="gh-head-brand">
<div class="gh-head-brand-wrapper">
<a class="gh-head-logo" href="{{@site.url}}">
{{#if @site.logo}}
<img src="{{@site.logo}}" alt="{{@site.title}}">
{{else}}
{{@site.title}}
{{/if}}
</a>
</div>
<button class="gh-search gh-icon-btn" aria-label="Search this site" data-ghost-search>{{> "icons/search"}}</button>
<button class="gh-burger"></button>
</div>
<nav class="gh-head-menu">
{{navigation}}
{{#unless @site.members_enabled}}
{{#match @custom.navigation_layout "Stacked"}}
<button class="gh-search gh-icon-btn" aria-label="Search this site" data-ghost-search>{{> "icons/search"}}</button>
{{/match}}
{{/unless}}
</nav>
<div class="gh-head-actions">
{{#unless @site.members_enabled}}
{{^match @custom.navigation_layout "Stacked"}}
<button class="gh-search gh-icon-btn" aria-label="Search this site" data-ghost-search>{{> "icons/search"}}</button>
{{/match}}
{{else}}
<button class="gh-search gh-icon-btn" aria-label="Search this site" data-ghost-search>{{> "icons/search"}}</button>
<div class="gh-head-members">
{{#unless @member}}
{{#unless @site.members_invite_only}}
<a class="gh-head-link" href="#/portal/signin" data-portal="signin">Sign in</a>
<a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/signup" data-portal="signup">Subscribe</a>
{{else}}
<a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/signin" data-portal="signin">Sign in</a>
{{/unless}}
{{else}}
<a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/account" data-portal="account">Account</a>
{{/unless}}
</div>
{{/unless}}
</div>
</div>
</header>
{{{body}}}
<footer class="gh-foot gh-outer">
<div class="gh-foot-inner gh-inner">
<nav class="gh-foot-menu">
{{navigation type="secondary"}}
</nav>
<div class="gh-copyright">
{{#unless @custom.footer_text}}
{{@site.title}} © {{date format="YYYY"}}. Powered by <a href="https://ghost.org/" target="_blank" rel="noopener">Ghost</a>
{{else}}
{{@custom.footer_text}}
{{/unless}}
</div>
</div>
</footer>
</div>
{{#is "post, page"}}
{{> "pswp"}}
{{/is}}
<script src="{{asset "built/main.min.js"}}"></script>
{{ghost_foot}}
</body>
</html>

101
gulpfile.js Normal file

@ -0,0 +1,101 @@
const {series, parallel, watch, src, dest} = require('gulp');
const pump = require('pump');
const fs = require('fs');
const order = require('ordered-read-streams');
// gulp plugins and utils
const livereload = require('gulp-livereload');
const postcss = require('gulp-postcss');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const beeper = require('beeper');
const zip = require('gulp-zip');
// postcss plugins
const easyimport = require('postcss-easy-import');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
function serve(done) {
livereload.listen();
done();
}
function handleError(done) {
return function (err) {
if (err) {
beeper();
}
return done(err);
};
};
function hbs(done) {
pump([
src(['*.hbs', 'partials/**/*.hbs']),
livereload()
], handleError(done));
}
function css(done) {
pump([
src('assets/css/screen.css', {sourcemaps: true}),
postcss([
easyimport,
autoprefixer(),
cssnano()
]),
dest('assets/built/', {sourcemaps: '.'}),
livereload()
], handleError(done));
}
function getJsFiles(version) {
const jsFiles = [
src(`node_modules/@tryghost/shared-theme-assets/assets/js/${version}/lib/**/*.js`),
src(`node_modules/@tryghost/shared-theme-assets/assets/js/${version}/main.js`),
];
if (fs.existsSync(`assets/js/lib`)) {
jsFiles.push(src(`assets/js/lib/*.js`));
}
jsFiles.push(src(`assets/js/main.js`));
return jsFiles;
}
function js(done) {
pump([
order(getJsFiles('v1'), {sourcemaps: true}),
concat('main.min.js'),
uglify(),
dest('assets/built/', {sourcemaps: '.'}),
livereload()
], handleError(done));
}
function zipper(done) {
const filename = require('./package.json').name + '.zip';
pump([
src([
'**',
'!node_modules', '!node_modules/**',
'!dist', '!dist/**',
'!yarn-error.log'
]),
zip(filename),
dest('dist/')
], handleError(done));
}
const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs'], hbs);
const cssWatcher = () => watch('assets/css/**/*.css', css);
const jsWatcher = () => watch('assets/js/**/*.js', js);
const watcher = parallel(hbsWatcher, cssWatcher, jsWatcher);
const build = series(css, js);
exports.build = build;
exports.zip = series(build, zipper);
exports.default = series(build, serve, watcher);

56
index.hbs Normal file

@ -0,0 +1,56 @@
{{!< default}}
<section class="gh-about gh-outer{{#match @custom.header_section_layout "!=" "Typographic profile"}}{{#unless @site.cover_image}} no-image{{/unless}}{{else}}{{#unless @site.icon}} no-image{{/unless}}{{/match}}">
<div class="gh-about-inner gh-inner">
{{#match @custom.header_section_layout "!=" "Typographic profile"}}
{{#if @site.cover_image}}
<img class="gh-about-image" src="{{@site.cover_image}}" alt="{{@site.title}}">
{{/if}}
{{else}}
{{#if @site.icon}}
<img class="gh-about-image" src="{{@site.icon}}" alt="{{@site.title}}">
{{/if}}
{{/match}}
<script>
(function () {
if (!document.body.classList.contains('has-background-about')) return;
const about = document.querySelector('.gh-about');
if (!about) return;
const image = about.querySelector('.gh-about-image');
about.style.setProperty('--about-height', image.clientWidth * image.naturalHeight / image.naturalWidth + 'px');
about.classList.add('initialized');
})();
</script>
<div class="gh-about-content">
<div class="gh-about-content-inner">
{{#if @custom.primary_header}}
<h1 class="gh-about-primary">{{{@custom.primary_header}}}</h1>
{{/if}}
{{#if @custom.secondary_header}}
<p class="gh-about-secondary">{{{@custom.secondary_header}}}</p>
{{/if}}
{{#if @site.members_enabled}}
{{#unless @member}}
<div class="gh-subscribe-input" data-portal>
jamie@example.com
<span class="gh-btn gh-primary-btn">Subscribe</span>
</div>
{{/unless}}
{{/if}}
</div>
</div>
</div>
</section>
<main class="gh-main gh-outer">
<div class="gh-feed gh-inner">
{{#foreach posts}}
{{> "loop"}}
{{/foreach}}
</div>
</main>
{{#contentFor "body_class"}}{{#match @custom.header_section_layout "Side by side"}} has-side-about{{/match}}{{#match @custom.header_section_layout "Large background"}}{{#if @site.cover_image}} is-head-transparent has-background-about{{else}} has-side-about{{/if}}{{/match}}{{#match @custom.header_section_layout "Typographic profile"}}{{#if @site.icon}} has-typographic-about{{else}} has-side-about{{/if}}{{/match}}{{/contentFor}}

11300
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

108
package.json Normal file

@ -0,0 +1,108 @@
{
"name": "solo-dolo",
"description": "A Ghost theme",
"version": "1.0.0",
"private": true,
"engines": {
"ghost": ">=5.0.0"
},
"license": "MIT",
"author": {
"name": "Ghost Foundation",
"email": "hello@ghost.org",
"url": "https://ghost.org"
},
"keywords": [
"ghost",
"theme",
"ghost-theme"
],
"docs": "https://solo.ghost.io/about/",
"config": {
"posts_per_page": 6,
"image_sizes": {
"xs": {
"width": 150
},
"s": {
"width": 300
},
"m": {
"width": 720
},
"l": {
"width": 960
},
"xl": {
"width": 1200
},
"xxl": {
"width": 2000
}
},
"card_assets": true,
"custom": {
"background_color": {
"type": "color",
"default": "#ffffff"
},
"navigation_layout": {
"type": "select",
"options": ["Logo on the left", "Logo in the middle", "Stacked"],
"default": "Logo on the left"
},
"typography": {
"type": "select",
"options": ["Modern sans-serif", "Elegant serif", "Consistent mono"],
"default": "Modern sans-serif"
},
"footer_text": {
"type": "text"
},
"header_section_layout": {
"type": "select",
"options": ["Side by side", "Large background", "Typographic profile"],
"default": "Large background",
"group": "homepage"
},
"primary_header": {
"type": "text",
"default": "Welcome to my site",
"group": "homepage"
},
"secondary_header": {
"type": "text",
"default": "Subscribe below to receive my latest posts directly in your inbox",
"group": "homepage"
},
"post_feed_layout": {
"type": "select",
"options": ["Classic", "Typographic", "Parallax"],
"default": "Classic",
"group": "homepage"
}
}
},
"scripts": {
"dev": "gulp",
"test": "gscan .",
"zip": "gulp zip"
},
"devDependencies": {
"@tryghost/shared-theme-assets": "2.5.0",
"autoprefixer": "10.4.20",
"beeper": "2.1.0",
"cssnano": "7.0.6",
"gscan": "4.47.0",
"gulp": "5.0.0",
"gulp-concat": "2.6.1",
"gulp-livereload": "4.0.2",
"gulp-postcss": "10.0.0",
"gulp-uglify": "3.0.2",
"gulp-zip": "5.1.0",
"ordered-read-streams": "2.0.0",
"postcss": "8.5.3",
"postcss-easy-import": "4.0.0",
"pump": "3.0.2"
}
}

25
page.hbs Normal file

@ -0,0 +1,25 @@
{{!< default}}
{{#post}}
<main class="gh-main gh-outer">
<div class="gh-inner">
<article class="gh-article {{post_class}}">
{{#match @page.show_title_and_feature_image}}
<header class="gh-article-header gh-canvas">
<h1 class="gh-article-title">{{title}}</h1>
{{#if custom_excerpt}}
<p class="gh-article-excerpt">{{custom_excerpt}}</p>
{{/if}}
{{> "feature-image"}}
</header>
{{/match}}
<section class="gh-content gh-canvas">
{{content}}
</section>
</article>
</div>
</main>
{{/post}}

22
partials/content-cta.hbs Normal file

@ -0,0 +1,22 @@
{{{html}}}
<section class="gh-cta">
{{#has visibility="paid"}}
<h4 class="gh-cta-title">This post is for paying subscribers only</h4>
{{/has}}
{{#has visibility="members"}}
<h4 class="gh-cta-title">This post is for subscribers only</h4>
{{/has}}
{{#has visibility="filter"}}
<h4 class="gh-cta-title">This post is for subscribers on the {{tiers}} only</h4>
{{/has}}
<div class="gh-cta-actions">
{{#if @member}}
<button class="gh-btn gh-primary-btn" href="#/portal/account/plans" data-portal="account/plans">Upgrade now</button>
{{else}}
<button class="gh-btn gh-primary-btn" href="#/portal/signup" data-portal="signup">Subscribe now</button>
<span class="gh-cta-link" href="#/portal/signin" data-portal="signin">Already have an account? Sign in.</span>
{{/if}}
</div>
</section>

18
partials/feature-image.hbs Normal file

@ -0,0 +1,18 @@
{{#if feature_image}}
<figure class="gh-article-image{{#if feature_image_caption}} has-caption{{/if}}">
<img
srcset="{{img_url feature_image size="s"}} 300w,
{{img_url feature_image size="m"}} 720w,
{{img_url feature_image size="l"}} 960w,
{{img_url feature_image size="xl"}} 1200w,
{{img_url feature_image size="xxl"}} 2000w,
{{img_url feature_image}}"
sizes="(max-width: 1200px) 100vw, 1200px"
src="{{img_url feature_image size="xl"}}"
alt="{{title}}"
>
{{#if feature_image_caption}}
<figcaption>{{feature_image_caption}}</figcaption>
{{/if}}
</figure>
{{/if}}

1
partials/icons/avatar.hbs Normal file

@ -0,0 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="68" height="68"><g fill="none" fill-rule="evenodd"><path d="M3.513 18.998C4.749 15.504 8.082 13 12 13s7.251 2.504 8.487 5.998C18.47 21.442 15.417 23 12 23s-6.47-1.558-8.487-4.002zM12 12c2.21 0 4-2.79 4-5s-1.79-4-4-4-4 1.79-4 4 1.79 5 4 5z" fill="#FFF"/></g></svg>
Side by Side

After

(image error) Size: 331 B

3
partials/icons/facebook.hbs Normal file

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 8.04865C16 3.63065 12.418 0.048645 8 0.048645C3.582 0.048645 0 3.63065 0 8.04865C0 12.042 2.92533 15.3513 6.75 15.9513V10.3613H4.71867V8.04798H6.75V6.28665C6.75 4.28198 7.94467 3.17398 9.772 3.17398C10.6467 3.17398 11.5627 3.33065 11.5627 3.33065V5.29931H10.5533C9.55933 5.29931 9.24933 5.91598 9.24933 6.54865V8.04865H11.468L11.1133 10.362H9.24933V15.952C13.0747 15.3513 16 12.0413 16 8.04865Z" fill="currentColor"/>
</svg>
Side by Side

After

(image error) Size: 534 B

3
partials/icons/lock.hbs Normal file

@ -0,0 +1,3 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.65654 2.15649C5.01286 1.80017 5.49613 1.59999 6.00004 1.59999C6.50395 1.59999 6.98723 1.80017 7.34355 2.15649C7.69986 2.51281 7.90004 2.99608 7.90004 3.49999V4.89999H4.10004V3.49999C4.10004 2.99608 4.30022 2.51281 4.65654 2.15649ZM2.90004 4.89999V3.49999C2.90004 2.67782 3.22665 1.88933 3.80801 1.30796C4.38937 0.7266 5.17787 0.399994 6.00004 0.399994C6.82221 0.399994 7.61071 0.7266 8.19207 1.30796C8.77344 1.88933 9.10004 2.67782 9.10004 3.49999V4.89999H9.4999C10.3836 4.89999 11.0999 5.61634 11.0999 6.49999V9.99999C11.0999 10.8836 10.3836 11.6 9.4999 11.6H2.4999C1.61625 11.6 0.899902 10.8836 0.899902 9.99999V6.49999C0.899902 5.61634 1.61625 4.89999 2.4999 4.89999H2.90004ZM2.90004 6.09999H2.4999C2.27899 6.09999 2.0999 6.27908 2.0999 6.49999V9.99999C2.0999 10.2209 2.27899 10.4 2.4999 10.4H9.4999C9.72082 10.4 9.8999 10.2209 9.8999 9.99999V6.49999C9.8999 6.27908 9.72082 6.09999 9.4999 6.09999H9.10004H7.90004H4.10004H2.90004Z" fill="currentColor" />
</svg>
Side by Side

After

(image error) Size: 1.1 KiB

3
partials/icons/search.hbs Normal file

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.5 17.5L12.5 12.5L17.5 17.5ZM14.1667 8.33333C14.1667 9.09938 14.0158 9.85792 13.7226 10.5657C13.4295 11.2734 12.9998 11.9164 12.4581 12.4581C11.9164 12.9998 11.2734 13.4295 10.5657 13.7226C9.85792 14.0158 9.09938 14.1667 8.33333 14.1667C7.56729 14.1667 6.80875 14.0158 6.10101 13.7226C5.39328 13.4295 4.75022 12.9998 4.20854 12.4581C3.66687 11.9164 3.23719 11.2734 2.94404 10.5657C2.65088 9.85792 2.5 9.09938 2.5 8.33333C2.5 6.78624 3.11458 5.30251 4.20854 4.20854C5.30251 3.11458 6.78624 2.5 8.33333 2.5C9.88043 2.5 11.3642 3.11458 12.4581 4.20854C13.5521 5.30251 14.1667 6.78624 14.1667 8.33333Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

(image error) Size: 802 B

3
partials/icons/twitter.hbs Normal file

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.9687 3.04665C15.3697 3.31039 14.7351 3.48448 14.0853 3.56332C14.7694 3.15215 15.2816 2.50735 15.5273 1.74799C14.8933 2.11799 14.1907 2.38732 13.4427 2.53732C12.9492 2.00961 12.2952 1.6596 11.5824 1.54165C10.8696 1.42371 10.1378 1.54442 9.50062 1.88505C8.86345 2.22567 8.35657 2.76715 8.0587 3.4254C7.76083 4.08365 7.68864 4.82183 7.85333 5.52532C5.12667 5.39665 2.71133 4.08665 1.09333 2.10799C0.799196 2.60786 0.645776 3.178 0.649333 3.75799C0.649333 4.89799 1.22933 5.89999 2.108 6.48865C1.58724 6.47208 1.07798 6.33128 0.622667 6.07799V6.11799C0.622371 6.87558 0.884179 7.60995 1.36367 8.19649C1.84316 8.78304 2.51081 9.18564 3.25333 9.33599C2.7722 9.46491 2.26828 9.48427 1.77867 9.39265C1.98941 10.0447 2.39844 10.6146 2.94868 11.023C3.49891 11.4314 4.1629 11.6578 4.848 11.6707C3.68769 12.5813 2.25498 13.0755 0.78 13.074C0.52 13.074 0.260667 13.0587 0 13.0293C1.50381 13.9922 3.25234 14.5033 5.038 14.502C11.0733 14.502 14.37 9.50465 14.37 5.17865C14.37 5.03865 14.37 4.89865 14.36 4.75865C15.004 4.29523 15.5595 3.71987 16 3.05999L15.9687 3.04665Z" fill="currentColor"/>
</svg>
Side by Side

After

(image error) Size: 1.2 KiB

53
partials/loop.hbs Normal file

@ -0,0 +1,53 @@
<article class="gh-card {{post_class}}"{{#if primary_tag.accent_color}} style="--tag-color: {{primary_tag.accent_color}};"{{/if}}>
<a class="gh-card-link" href="{{url}}">
{{#match @custom.post_feed_layout "!=" "Typographic"}}
<figure class="gh-card-image">
{{#if feature_image}}
<img
{{#match @custom.post_feed_layout "Parallax"}}class="jarallax-img"{{/match}}
srcset="{{img_url feature_image size="s"}} 300w,
{{img_url feature_image size="m"}} 720w,
{{img_url feature_image size="l"}} 960w,
{{img_url feature_image size="xl"}} 1200w,
{{img_url feature_image size="xxl"}} 2000w"
sizes="(max-width: 1200px) 100vw, 1200px"
src="{{img_url feature_image size="m"}}"
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
>
{{/if}}
</figure>
{{/match}}
<div class="gh-card-wrapper">
<h2 class="gh-card-title">{{title}}</h2>
{{#match @custom.post_feed_layout "Typographic"}}
{{#if custom_excerpt}}
<p class="gh-card-excerpt">{{excerpt}}</p>
{{/if}}
{{/match}}
<footer class="gh-card-meta">
<time class="gh-card-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMM YYYY"}}</time>
{{#if reading_time}}
<span class="gh-card-length">{{reading_time}}</span>
{{/if}}
{{#unless access}}
{{^has visibility="public"}}
<span class="gh-card-access">
{{> "icons/lock"}}
{{#has visibility="members"}}
Members
{{else}}
Paid
{{/has}}
</span>
{{/has}}
{{/unless}}
{{#if @site.comments_enabled}}
{{comment_count class="gh-card-comments"}}
{{/if}}
</footer>
</div>
</a>
</article>

41
partials/pswp.hbs Normal file

@ -0,0 +1,41 @@
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>

80
post.hbs Normal file

@ -0,0 +1,80 @@
{{!< default}}
<main class="gh-main gh-outer">
<div class="gh-inner">
{{#post}}
<article class="gh-article {{post_class}}">
{{#if feature_image}}
<header class="gh-article-header gh-canvas">
<h1 class="gh-article-title">{{title}}</h1>
{{#if custom_excerpt}}
<p class="gh-article-excerpt">{{custom_excerpt}}</p>
{{/if}}
{{> "feature-image"}}
</header>
{{/if}}
<section class="gh-content gh-canvas">
{{content}}
{{#unless feature_image}}
<header class="gh-article-header">
<h1 class="gh-article-title">{{title}}</h1>
{{#if custom_excerpt}}
<p class="gh-article-excerpt">{{custom_excerpt}}</p>
{{/if}}
</header>
{{/unless}}
<aside class="gh-article-meta">
<div class="gh-article-meta-inner">
<div class="gh-author-image-list instapaper_ignore">
{{#foreach authors}}
<a class="gh-author-image" href="{{url}}">
{{#if profile_image}}
<img src="{{profile_image}}" alt="{{name}}">
{{else}}
<div class="gh-author-icon">{{> icons/avatar}}</div>
{{/if}}
</a>
{{/foreach}}
</div>
<div class="gh-article-meta-wrapper">
<div class="gh-author-name-list">
{{authors}}
</div>
<time class="gh-article-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMM YYYY"}}</time>
</div>
{{#if primary_tag}}
<a class="gh-article-tag" href="{{primary_tag.url}}" style="--tag-color: {{primary_tag.accent_color}}">{{primary_tag.name}}</a>
{{/if}}
</div>
</aside>
</section>
{{#if comments}}
<div class="gh-comments gh-canvas">
<h2 class="gh-comments-title">{{comment_count empty="" single="comment" plural="comments"}}</h2>
{{comments title="" count=false}}
</div>
{{/if}}
<footer class="gh-article-footer gh-canvas">
<nav class="gh-navigation">
<div class="gh-navigation-previous">
{{#prev_post}}
<a class="gh-navigation-link" href="{{url}}">← Previous</a>
{{/prev_post}}
</div>
<div class="gh-navigation-middle"></div>
<div class="gh-navigation-next">
{{#next_post}}
<a class="gh-navigation-link" href="{{url}}">Next →</a>
{{/next_post}}
</div>
</nav>
</footer>
</article>
{{/post}}
</div>
</main>

20
tag.hbs Normal file

@ -0,0 +1,20 @@
{{!< default}}
<main class="gh-main gh-outer">
{{#tag}}
<section class="gh-article gh-inner">
<header class="gh-article-header">
<h1 class="gh-article-title">{{name}}</h1>
{{#if description}}
<p class="gh-article-excerpt">{{description}}</p>
{{/if}}
{{> "feature-image"}}
</header>
</section>
{{/tag}}
<div class="gh-feed{{#match @custom.header_section_layout "!=" "Large background"}} gh-inner{{/match}}">
{{#foreach posts}}
{{> "loop"}}
{{/foreach}}
</div>
</main>