commit ebee4174826c531139a780cd08ae455c0fafabe8 Author: Sodbileg Gansukh Date: Mon Sep 12 17:59:12 2022 +0800 Solo theme (#162) Added Solo theme diff --git a/assets/css/fonts.css b/assets/css/fonts.css new file mode 100644 index 00000000..f50b54a6 --- /dev/null +++ b/assets/css/fonts.css @@ -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"); +} diff --git a/assets/css/screen.css b/assets/css/screen.css new file mode 100644 index 00000000..88c781d9 --- /dev/null +++ b/assets/css/screen.css @@ -0,0 +1,905 @@ +@import "@tryghost/shared-theme-assets/assets/css/screen.css"; +@import "fonts.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); +} + +: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; +} + +.gh-canvas { + grid-template-columns: repeat(12, minmax(0, 1fr)); +} + +.gh-canvas > * { + 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 > * { + grid-column: 3 / span 8; + } + + .gh-canvas > .kg-width-wide { + grid-column: 3 / span 10; + } +} + +@media (max-width: 767px) { + .gh-canvas > * { + grid-column: 2 / span 10; + } + + .gh-canvas > .kg-width-wide { + grid-column: 1 / span 12; + } +} + +@media (max-width: 480px) { + .gh-canvas > * { + grid-column: 1 / span 12; + } +} + +/* Header +/* ---------------------------------------------------------- */ + +.gh-head { + font-size: 1.6rem; + background-color: transparent; +} + +.gh-head-inner { + padding: clamp(24px, 1.9355rem + 1.2903vw, 40px) 0; +} + +.gh-head-brand-wrapper { + gap: 32px; +} + +.gh-head-logo { + font-weight: 800; +} + +.gh-head-logo img { + max-height: 48px; +} + +.gh-head-menu { + font-weight: 700; +} + +.gh-head-menu a { + color: inherit; +} + +.gh-head-btn.gh-btn { + height: 36px; + padding: 0 16px; + font-size: 1.6rem; + font-weight: 700; +} + +@media (max-width: 991px) { + .is-head-open:not(.is-head-brand):not(.is-head-dark):not(.is-head-transparent) #gh-head { + background-color: var(--background-color); + } +} + +/* About section +/* ---------------------------------------------------------- */ + +.gh-about { + margin-bottom: 40px; +} + +.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 .gh-about-primary { + font-family: var(--font-serif); +} + +.has-mono-font .gh-about-primary { + font-family: 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; +} + +.has-serif-font .gh-about-secondary { + font-family: var(--font-serif); +} + +.has-mono-font .gh-about-secondary { + font-family: 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; +} + +.has-serif-font .gh-card-title { + font-family: var(--font-serif); +} + +.has-mono-font .gh-card-title { + font-family: 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)::before { + width: 2px; + height: 2px; + content: ""; + background-color: currentColor; + border-radius: 50%; +} + +.gh-card-access svg { + margin-right: -5px; +} + +/* Classic feed +/* ---------------------------------------------------------- */ + +.has-classic-feed .gh-card + .gh-card { + margin-top: clamp(4.8rem, 4rem + 2.5vw, 8rem); +} + +.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 { + background-color: var(--tag-color, var(--color-lighter-gray)); +} + +.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 .gh-card-excerpt { + font-family: var(--font-serif); +} + +.has-mono-font.has-typographic-feed .gh-card-excerpt { + font-family: 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 { + width: 72px; + height: 72px; + margin-bottom: 16px; +} + +.gh-article-meta .gh-author-name { + font-size: 1.9rem; + letter-spacing: -0.01em; +} + +.gh-article-meta .gh-author-name a { + color: var(--color-darker-gray); + text-decoration: none; +} + +.gh-article-date { + margin-top: 4px; + font-size: 1.4rem; + font-weight: 480; + color: var(--color-secondary-text); +} + +.gh-article-tag { + 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; +} + +.page-template .no-image .gh-article-title { + grid-column: 4 / span 6; +} + +.has-serif-font .gh-article-title { + font-family: var(--font-serif); +} + +.has-mono-font .gh-article-title { + font-family: 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 .gh-article-excerpt { + font-family: var(--font-serif); +} + +.has-mono-font .gh-article-excerpt { + font-family: 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; +} + +.post-template .no-image .gh-content { + margin-top: 0; +} + +.page-template .no-image .gh-content { + margin-top: clamp(4rem, 2.14vw + 2.97rem, 6.4rem); +} + +.gh-content > [id] { + font-weight: 800; +} + +.gh-content > :is(p, ul, ol) { + font-weight: 480; +} + +.has-serif-font .gh-content > :is([id], p, ul, ol) { + font-family: var(--font-serif); +} + +.has-mono-font .gh-content > :is([id], p, ul, ol) { + font-family: 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-inner { + flex-direction: row; + align-items: center; + } + + .gh-article-meta .gh-author-image { + width: 64px; + height: 64px; + margin-right: 12px; + margin-bottom: 0; + } + + .gh-article-meta-wrapper { + flex-grow: 1; + } + + .gh-article-tag { + margin-top: 0; + } +} + +@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(6.4rem, 5vw + 4rem, 12rem); + background-color: var(--color-lighter-gray); + transform: translate3d(0, 0, 0); +} + +.gh-cta-title { + margin-bottom: 24px; + font-size: clamp(3.6rem, 1.79vw + 2.74rem, 5.6rem); + font-weight: 800; + letter-spacing: -0.03em; +} + +.has-serif-font .gh-cta-title { + font-family: var(--font-serif); +} + +.has-mono-font .gh-cta-title { + font-family: 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 .gh-navigation { + font-family: var(--font-serif); +} + +.has-mono-font .gh-navigation { + font-family: 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 .gh-comments-title { + font-family: var(--font-serif); +} + +.has-mono-font .gh-comments-title { + font-family: 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; +} diff --git a/assets/fonts/Manrope[wght].woff2 b/assets/fonts/Manrope[wght].woff2 new file mode 100644 index 00000000..4d677aac Binary files /dev/null and b/assets/fonts/Manrope[wght].woff2 differ diff --git a/assets/fonts/jetbrains-mono-v13-latin-700.woff2 b/assets/fonts/jetbrains-mono-v13-latin-700.woff2 new file mode 100644 index 00000000..5737b146 Binary files /dev/null and b/assets/fonts/jetbrains-mono-v13-latin-700.woff2 differ diff --git a/assets/fonts/jetbrains-mono-v13-latin-700italic.woff2 b/assets/fonts/jetbrains-mono-v13-latin-700italic.woff2 new file mode 100644 index 00000000..bb34907b Binary files /dev/null and b/assets/fonts/jetbrains-mono-v13-latin-700italic.woff2 differ diff --git a/assets/fonts/jetbrains-mono-v13-latin-800.woff2 b/assets/fonts/jetbrains-mono-v13-latin-800.woff2 new file mode 100644 index 00000000..4a0a0d21 Binary files /dev/null and b/assets/fonts/jetbrains-mono-v13-latin-800.woff2 differ diff --git a/assets/fonts/jetbrains-mono-v13-latin-italic.woff2 b/assets/fonts/jetbrains-mono-v13-latin-italic.woff2 new file mode 100644 index 00000000..0424cf8f Binary files /dev/null and b/assets/fonts/jetbrains-mono-v13-latin-italic.woff2 differ diff --git a/assets/fonts/jetbrains-mono-v13-latin-regular.woff2 b/assets/fonts/jetbrains-mono-v13-latin-regular.woff2 new file mode 100644 index 00000000..de8b746b Binary files /dev/null and b/assets/fonts/jetbrains-mono-v13-latin-regular.woff2 differ diff --git a/assets/fonts/libre-baskerville-v14-latin-700.woff2 b/assets/fonts/libre-baskerville-v14-latin-700.woff2 new file mode 100644 index 00000000..395e07f5 Binary files /dev/null and b/assets/fonts/libre-baskerville-v14-latin-700.woff2 differ diff --git a/assets/fonts/libre-baskerville-v14-latin-italic.woff2 b/assets/fonts/libre-baskerville-v14-latin-italic.woff2 new file mode 100644 index 00000000..e2e5b3bd Binary files /dev/null and b/assets/fonts/libre-baskerville-v14-latin-italic.woff2 differ diff --git a/assets/fonts/libre-baskerville-v14-latin-regular.woff2 b/assets/fonts/libre-baskerville-v14-latin-regular.woff2 new file mode 100644 index 00000000..c00b5468 Binary files /dev/null and b/assets/fonts/libre-baskerville-v14-latin-regular.woff2 differ diff --git a/assets/images/default-skin.png b/assets/images/default-skin.png new file mode 100755 index 00000000..441c502c Binary files /dev/null and b/assets/images/default-skin.png differ diff --git a/assets/images/default-skin.svg b/assets/images/default-skin.svg new file mode 100755 index 00000000..9d5f0c6a --- /dev/null +++ b/assets/images/default-skin.svg @@ -0,0 +1 @@ +default-skin 2 \ No newline at end of file diff --git a/assets/images/preloader.gif b/assets/images/preloader.gif new file mode 100755 index 00000000..b8faa697 Binary files /dev/null and b/assets/images/preloader.gif differ diff --git a/assets/js/lib/jarallax.min.js b/assets/js/lib/jarallax.min.js new file mode 100644 index 00000000..c3e0d355 --- /dev/null +++ b/assets/js/lib/jarallax.min.js @@ -0,0 +1,7 @@ +/*! + * Jarallax v2.0.4 (https://github.com/nk-o/jarallax) + * Copyright 2022 nK + * Licensed under MIT (https://github.com/nk-o/jarallax/blob/master/LICENSE) + */ +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).jarallax=t()}(this,(function(){"use strict";function e(e){"complete"===document.readyState||"interactive"===document.readyState?e():document.addEventListener("DOMContentLoaded",e,{capture:!0,once:!0,passive:!0})}let t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};var i=t;const{navigator:o}=i,n=/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(o.userAgent);let a,s;function l(){n?(!a&&document.body&&(a=document.createElement("div"),a.style.cssText="position: fixed; top: -9999px; left: 0; height: 100vh; width: 0;",document.body.appendChild(a)),s=(a?a.clientHeight:0)||i.innerHeight||document.documentElement.clientHeight):s=i.innerHeight||document.documentElement.clientHeight}l(),i.addEventListener("resize",l),i.addEventListener("orientationchange",l),i.addEventListener("load",l),e((()=>{l()}));const r=[];function m(){r.length&&(r.forEach(((e,t)=>{const{instance:o,oldData:n}=e,a=o.$item.getBoundingClientRect(),l={width:a.width,height:a.height,top:a.top,bottom:a.bottom,wndW:i.innerWidth,wndH:s},m=!n||n.wndW!==l.wndW||n.wndH!==l.wndH||n.width!==l.width||n.height!==l.height,c=m||!n||n.top!==l.top||n.bottom!==l.bottom;r[t].oldData=l,m&&o.onResize(),c&&o.onScroll()})),i.requestAnimationFrame(m))}let c=0;class p{constructor(e,t){const i=this;i.instanceID=c,c+=1,i.$item=e,i.defaults={type:"scroll",speed:.5,imgSrc:null,imgElement:".jarallax-img",imgSize:"cover",imgPosition:"50% 50%",imgRepeat:"no-repeat",keepImg:!1,elementInViewport:null,zIndex:-100,disableParallax:!1,disableVideo:!1,videoSrc:null,videoStartTime:0,videoEndTime:0,videoVolume:0,videoLoop:!0,videoPlayOnlyVisible:!0,videoLazyLoading:!0,onScroll:null,onInit:null,onDestroy:null,onCoverImage:null};const n=i.$item.dataset||{},a={};if(Object.keys(n).forEach((e=>{const t=e.substr(0,1).toLowerCase()+e.substr(1);t&&void 0!==i.defaults[t]&&(a[t]=n[e])})),i.options=i.extend({},i.defaults,a,t),i.pureOptions=i.extend({},i.options),Object.keys(i.options).forEach((e=>{"true"===i.options[e]?i.options[e]=!0:"false"===i.options[e]&&(i.options[e]=!1)})),i.options.speed=Math.min(2,Math.max(-1,parseFloat(i.options.speed))),"string"==typeof i.options.disableParallax&&(i.options.disableParallax=new RegExp(i.options.disableParallax)),i.options.disableParallax instanceof RegExp){const e=i.options.disableParallax;i.options.disableParallax=()=>e.test(o.userAgent)}if("function"!=typeof i.options.disableParallax&&(i.options.disableParallax=()=>!1),"string"==typeof i.options.disableVideo&&(i.options.disableVideo=new RegExp(i.options.disableVideo)),i.options.disableVideo instanceof RegExp){const e=i.options.disableVideo;i.options.disableVideo=()=>e.test(o.userAgent)}"function"!=typeof i.options.disableVideo&&(i.options.disableVideo=()=>!1);let s=i.options.elementInViewport;s&&"object"==typeof s&&void 0!==s.length&&([s]=s),s instanceof Element||(s=null),i.options.elementInViewport=s,i.image={src:i.options.imgSrc||null,$container:null,useImgTag:!1,position:"fixed"},i.initImg()&&i.canInitParallax()&&i.init()}css(e,t){return"string"==typeof t?i.getComputedStyle(e).getPropertyValue(t):(Object.keys(t).forEach((i=>{e.style[i]=t[i]})),e)}extend(e,...t){return e=e||{},Object.keys(t).forEach((i=>{t[i]&&Object.keys(t[i]).forEach((o=>{e[o]=t[i][o]}))})),e}getWindowData(){return{width:i.innerWidth||document.documentElement.clientWidth,height:s,y:document.documentElement.scrollTop}}initImg(){const e=this;let t=e.options.imgElement;return t&&"string"==typeof t&&(t=e.$item.querySelector(t)),t instanceof Element||(e.options.imgSrc?(t=new Image,t.src=e.options.imgSrc):t=null),t&&(e.options.keepImg?e.image.$item=t.cloneNode(!0):(e.image.$item=t,e.image.$itemParent=t.parentNode),e.image.useImgTag=!0),!!e.image.$item||(null===e.image.src&&(e.image.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",e.image.bgImage=e.css(e.$item,"background-image")),!(!e.image.bgImage||"none"===e.image.bgImage))}canInitParallax(){return!this.options.disableParallax()}init(){const e=this,t={position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"hidden"};let o={pointerEvents:"none",transformStyle:"preserve-3d",backfaceVisibility:"hidden"};if(!e.options.keepImg){const t=e.$item.getAttribute("style");if(t&&e.$item.setAttribute("data-jarallax-original-styles",t),e.image.useImgTag){const t=e.image.$item.getAttribute("style");t&&e.image.$item.setAttribute("data-jarallax-original-styles",t)}}if("static"===e.css(e.$item,"position")&&e.css(e.$item,{position:"relative"}),"auto"===e.css(e.$item,"z-index")&&e.css(e.$item,{zIndex:0}),e.image.$container=document.createElement("div"),e.css(e.image.$container,t),e.css(e.image.$container,{"z-index":e.options.zIndex}),"fixed"===this.image.position&&e.css(e.image.$container,{"-webkit-clip-path":"polygon(0 0, 100% 0, 100% 100%, 0 100%)","clip-path":"polygon(0 0, 100% 0, 100% 100%, 0 100%)"}),e.image.$container.setAttribute("id",`jarallax-container-${e.instanceID}`),e.$item.appendChild(e.image.$container),e.image.useImgTag?o=e.extend({"object-fit":e.options.imgSize,"object-position":e.options.imgPosition,"max-width":"none"},t,o):(e.image.$item=document.createElement("div"),e.image.src&&(o=e.extend({"background-position":e.options.imgPosition,"background-size":e.options.imgSize,"background-repeat":e.options.imgRepeat,"background-image":e.image.bgImage||`url("${e.image.src}")`},t,o))),"opacity"!==e.options.type&&"scale"!==e.options.type&&"scale-opacity"!==e.options.type&&1!==e.options.speed||(e.image.position="absolute"),"fixed"===e.image.position){const t=function(e){const t=[];for(;null!==e.parentElement;)1===(e=e.parentElement).nodeType&&t.push(e);return t}(e.$item).filter((e=>{const t=i.getComputedStyle(e),o=t["-webkit-transform"]||t["-moz-transform"]||t.transform;return o&&"none"!==o||/(auto|scroll)/.test(t.overflow+t["overflow-y"]+t["overflow-x"])}));e.image.position=t.length?"absolute":"fixed"}o.position=e.image.position,e.css(e.image.$item,o),e.image.$container.appendChild(e.image.$item),e.onResize(),e.onScroll(!0),e.options.onInit&&e.options.onInit.call(e),"none"!==e.css(e.$item,"background-image")&&e.css(e.$item,{"background-image":"none"}),e.addToParallaxList()}addToParallaxList(){r.push({instance:this}),1===r.length&&i.requestAnimationFrame(m)}removeFromParallaxList(){const e=this;r.forEach(((t,i)=>{t.instance.instanceID===e.instanceID&&r.splice(i,1)}))}destroy(){const e=this;e.removeFromParallaxList();const t=e.$item.getAttribute("data-jarallax-original-styles");if(e.$item.removeAttribute("data-jarallax-original-styles"),t?e.$item.setAttribute("style",t):e.$item.removeAttribute("style"),e.image.useImgTag){const i=e.image.$item.getAttribute("data-jarallax-original-styles");e.image.$item.removeAttribute("data-jarallax-original-styles"),i?e.image.$item.setAttribute("style",t):e.image.$item.removeAttribute("style"),e.image.$itemParent&&e.image.$itemParent.appendChild(e.image.$item)}e.image.$container&&e.image.$container.parentNode.removeChild(e.image.$container),e.options.onDestroy&&e.options.onDestroy.call(e),delete e.$item.jarallax}clipContainer(){}coverImage(){const e=this,t=e.image.$container.getBoundingClientRect(),i=t.height,{speed:o}=e.options,n="scroll"===e.options.type||"scroll-opacity"===e.options.type;let a=0,l=i,r=0;return n&&(0>o?(a=o*Math.max(i,s),so?l=a/o+Math.abs(a):l+=(s-i)*(1-o),a/=2),e.parallaxScrollDistance=a,r=n?(s-l)/2:(i-l)/2,e.css(e.image.$item,{height:`${l}px`,marginTop:`${r}px`,left:"fixed"===e.image.position?`${t.left}px`:"0",width:`${t.width}px`}),e.options.onCoverImage&&e.options.onCoverImage.call(e),{image:{height:l,marginTop:r},container:t}}isVisible(){return this.isElementInViewport||!1}onScroll(e){const t=this,o=t.$item.getBoundingClientRect(),n=o.top,a=o.height,l={};let r=o;if(t.options.elementInViewport&&(r=t.options.elementInViewport.getBoundingClientRect()),t.isElementInViewport=0<=r.bottom&&0<=r.right&&r.top<=s&&r.left<=i.innerWidth,!e&&!t.isElementInViewport)return;const m=Math.max(0,n),c=Math.max(0,a+n),p=Math.max(0,-n),d=Math.max(0,n+a-s),g=Math.max(0,a-(n+a-s)),u=Math.max(0,-n+s-a),f=1-(s-n)/(s+a)*2;let h=1;if(at.options.speed?e-=t.options.speed*h:e+=t.options.speed*(1-h),l.transform=`scale(${e}) translate3d(0,0,0)`}if("scroll"===t.options.type||"scroll-opacity"===t.options.type){let e=t.parallaxScrollDistance*f;"absolute"===t.image.position&&(e-=n),l.transform=`translate3d(0,${e}px,0)`}t.css(t.image.$item,l),t.options.onScroll&&t.options.onScroll.call(t,{section:o,beforeTop:m,beforeTopEnd:c,afterTop:p,beforeBottom:d,beforeBottomEnd:g,afterBottom:u,visiblePercent:h,fromViewportCenter:f})}onResize(){this.coverImage()}}const d=function(e,t,...i){("object"==typeof HTMLElement?e instanceof HTMLElement:e&&"object"==typeof e&&null!==e&&1===e.nodeType&&"string"==typeof e.nodeName)&&(e=[e]);const o=e.length;let n,a=0;for(;a{d(document.querySelectorAll("[data-jarallax]"))})),d})); +//# sourceMappingURL=jarallax.min.js.map diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 00000000..172f2535 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,39 @@ +function initParallax() { + jarallax(document.querySelectorAll('.has-parallax-feed .gh-card'), { + speed: 0.8, + }); +} + +(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, `${emoji}`); + }); + + element.innerHTML = text; +})(); + +// (function () { +// pagination(true); +// })(); diff --git a/author.hbs b/author.hbs new file mode 100644 index 00000000..cd2d62a9 --- /dev/null +++ b/author.hbs @@ -0,0 +1,38 @@ +{{!< default}} + +
+ {{#author}} +
+
+ {{#if profile_image}} + {{name}} + {{/if}} +

{{name}}

+ {{#if bio}} +

{{bio}}

+ {{/if}} +
+ +
+ {{/author}} +
+ {{#foreach posts}} + {{> "loop"}} + {{/foreach}} +
+
\ No newline at end of file diff --git a/default.hbs b/default.hbs new file mode 100644 index 00000000..a275bee0 --- /dev/null +++ b/default.hbs @@ -0,0 +1,104 @@ + + + + + + + {{meta_title}} + + + {{#is "home"}} + {{#if @site.cover_image}} + + {{/if}} + {{/is}} + + + + + + {{ghost_head}} + + + +
+
+
+
+
+ +
+ + +
+ + + +
+ + {{#if @site.members_enabled}} + {{#unless @member}} + {{^is "home"}} + Subscribe + {{/is}} + {{else}} + Account + {{/unless}} + {{/if}} +
+
+
+ + {{{body}}} + +
+
+ + +
+ {{#unless @custom.footer_text}} + {{@site.title}} © {{date format="YYYY"}}. Powered by Ghost + {{else}} + {{@custom.footer_text}} + {{/unless}} +
+
+
+
+ + {{#is "post, page"}} + {{> "pswp"}} + {{/is}} + + + + {{ghost_foot}} + + + \ No newline at end of file diff --git a/index.hbs b/index.hbs new file mode 100644 index 00000000..429bd883 --- /dev/null +++ b/index.hbs @@ -0,0 +1,54 @@ +{{!< default}} + +
+
+ {{#match @custom.header_section_layout "!=" "Typographic profile"}} + {{#if @site.cover_image}} + {{@site.title}} + {{/if}} + {{else}} + {{#if @site.icon}} + {{@site.title}} + {{/if}} + {{/match}} + +
+
+ {{#if @custom.primary_header}} +

{{{@custom.primary_header}}}

+ {{/if}} + {{#if @custom.secondary_header}} +

{{{@custom.secondary_header}}}

+ {{/if}} + {{#unless @member}} +
+ jamie@example.com + Subscribe +
+ {{/unless}} +
+
+
+
+ +
+
+ {{#foreach posts}} + {{> "loop"}} + {{/foreach}} +
+
+ +{{#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}} \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 00000000..f8627256 --- /dev/null +++ b/package.json @@ -0,0 +1,101 @@ +{ + "name": "solo", + "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" + ], + "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" + }, + "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": "Side by side", + "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": "1.1.0", + "autoprefixer": "10.4.8", + "beeper": "2.1.0", + "cssnano": "5.1.12", + "gscan": "4.34.0", + "gulp": "4.0.2", + "gulp-concat": "2.6.1", + "gulp-livereload": "4.0.2", + "gulp-postcss": "9.0.1", + "gulp-uglify": "3.0.2", + "gulp-zip": "5.1.0", + "postcss": "8.4.16", + "postcss-easy-import": "4.0.0", + "pump": "3.0.0" + } +} diff --git a/page.hbs b/page.hbs new file mode 100644 index 00000000..87cc25f6 --- /dev/null +++ b/page.hbs @@ -0,0 +1,23 @@ +{{!< default}} + +{{#post}} + +
+
+
+
+

{{title}}

+ {{#if custom_excerpt}} +

{{custom_excerpt}}

+ {{/if}} + {{> "feature-image"}} +
+ +
+ {{content}} +
+
+
+
+ +{{/post}} \ No newline at end of file diff --git a/partials/content-cta.hbs b/partials/content-cta.hbs new file mode 100644 index 00000000..8088b68d --- /dev/null +++ b/partials/content-cta.hbs @@ -0,0 +1,22 @@ +{{{html}}} + +
+ {{#has visibility="paid"}} +

This post is for paying subscribers only

+ {{/has}} + {{#has visibility="members"}} +

This post is for subscribers only

+ {{/has}} + {{#has visibility="filter"}} +

This post is for subscribers on the {{tiers}} only

+ {{/has}} + +
+ {{#if @member}} + + {{else}} + + Already have an account? Sign in. + {{/if}} +
+
\ No newline at end of file diff --git a/partials/feature-image.hbs b/partials/feature-image.hbs new file mode 100644 index 00000000..6dfecfe8 --- /dev/null +++ b/partials/feature-image.hbs @@ -0,0 +1,18 @@ +{{#if feature_image}} +
+ {{title}} + {{#if feature_image_caption}} +
{{feature_image_caption}}
+ {{/if}} +
+{{/if}} \ No newline at end of file diff --git a/partials/icons/facebook.hbs b/partials/icons/facebook.hbs new file mode 100644 index 00000000..45b363bb --- /dev/null +++ b/partials/icons/facebook.hbs @@ -0,0 +1,3 @@ + + + diff --git a/partials/icons/lock.hbs b/partials/icons/lock.hbs new file mode 100644 index 00000000..110790de --- /dev/null +++ b/partials/icons/lock.hbs @@ -0,0 +1,3 @@ + + + diff --git a/partials/icons/search.hbs b/partials/icons/search.hbs new file mode 100644 index 00000000..af93db5e --- /dev/null +++ b/partials/icons/search.hbs @@ -0,0 +1,3 @@ + + + diff --git a/partials/icons/twitter.hbs b/partials/icons/twitter.hbs new file mode 100644 index 00000000..bb02b6a5 --- /dev/null +++ b/partials/icons/twitter.hbs @@ -0,0 +1,3 @@ + + + diff --git a/partials/loop.hbs b/partials/loop.hbs new file mode 100644 index 00000000..1485933b --- /dev/null +++ b/partials/loop.hbs @@ -0,0 +1,53 @@ +
+ + + {{#match @custom.post_feed_layout "!=" "Typographic"}} +
+ {{#if feature_image}} + {{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}} + {{/if}} +
+ {{/match}} + +
+

{{title}}

+ {{#match @custom.post_feed_layout "Typographic"}} + {{#if custom_excerpt}} +

{{excerpt}}

+ {{/if}} + {{/match}} +
+ + {{#if reading_time}} + {{reading_time}} + {{/if}} + {{#unless access}} + {{^has visibility="public"}} + + {{> "icons/lock"}} + {{#has visibility="members"}} + Members + {{else}} + Paid + {{/has}} + + {{/has}} + {{/unless}} + {{#if @site.comments_enabled}} + {{comment_count class="gh-card-comments"}} + {{/if}} +
+
+ + +
\ No newline at end of file diff --git a/partials/pswp.hbs b/partials/pswp.hbs new file mode 100644 index 00000000..642d86d1 --- /dev/null +++ b/partials/pswp.hbs @@ -0,0 +1,41 @@ + \ No newline at end of file diff --git a/post.hbs b/post.hbs new file mode 100644 index 00000000..d18f780a --- /dev/null +++ b/post.hbs @@ -0,0 +1,75 @@ +{{!< default}} + +
+
+ {{#post}} +
+ {{#if feature_image}} +
+

{{title}}

+ {{#if custom_excerpt}} +

{{custom_excerpt}}

+ {{/if}} + {{> "feature-image"}} +
+ {{/if}} + +
+ {{content}} + {{#unless feature_image}} +
+

{{title}}

+ {{#if custom_excerpt}} +

{{custom_excerpt}}

+ {{/if}} +
+ {{/unless}} + +
+ + {{#if comments}} +
+

{{comment_count empty="" single="comment" plural="comments"}}

+ {{comments title="" count=false}} +
+ {{/if}} + +
+ +
+
+ {{/post}} +
+
\ No newline at end of file diff --git a/tag.hbs b/tag.hbs new file mode 100644 index 00000000..60636dd9 --- /dev/null +++ b/tag.hbs @@ -0,0 +1,20 @@ +{{!< default}} + +
+ {{#tag}} +
+
+

{{name}}

+ {{#if description}} +

{{description}}

+ {{/if}} + {{> "feature-image"}} +
+
+ {{/tag}} +
+ {{#foreach posts}} + {{> "loop"}} + {{/foreach}} +
+
\ No newline at end of file