Sodbileg Gansukh
GitHub
commit
ebee417482
|
|
@ -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");
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 547 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 866 B |
File diff suppressed because one or more lines are too long
|
|
@ -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, `<span class="emoji">${emoji}</span>`);
|
||||
});
|
||||
|
||||
element.innerHTML = text;
|
||||
})();
|
||||
|
||||
// (function () {
|
||||
// pagination(true);
|
||||
// })();
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<!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"}}}{{#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" data-ghost-search>{{> "icons/search"}}</button>
|
||||
<button class="gh-burger"></button>
|
||||
</div>
|
||||
|
||||
<nav class="gh-head-menu">
|
||||
{{navigation}}
|
||||
</nav>
|
||||
|
||||
<div class="gh-head-actions">
|
||||
<button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
|
||||
{{#if @site.members_enabled}}
|
||||
{{#unless @member}}
|
||||
{{^is "home"}}
|
||||
<a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/signup" data-portal="signup">Subscribe</a>
|
||||
{{/is}}
|
||||
{{else}}
|
||||
<a class="gh-head-btn gh-btn" href="#/portal/account" data-portal="account">Account</a>
|
||||
{{/unless}}
|
||||
{{/if}}
|
||||
</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>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
{{!< 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}}
|
||||
{{#unless @member}}
|
||||
<div class="gh-subscribe-input" data-portal>
|
||||
jamie@example.com
|
||||
<span class="gh-btn gh-primary-btn">Subscribe</span>
|
||||
</div>
|
||||
{{/unless}}
|
||||
</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}}
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
{{!< default}}
|
||||
|
||||
{{#post}}
|
||||
|
||||
<main class="gh-main gh-outer">
|
||||
<div class="gh-inner">
|
||||
<article class="gh-article {{post_class}}">
|
||||
<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>
|
||||
|
||||
<section class="gh-content gh-canvas">
|
||||
{{content}}
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{{/post}}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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}}
|
||||
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 534 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 802 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -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}}</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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
{{!< 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">
|
||||
{{#primary_author}}
|
||||
{{#if profile_image}}
|
||||
<figure class="gh-author-image">
|
||||
<img src="{{profile_image}}" alt="{{name}}">
|
||||
</figure>
|
||||
{{/if}}
|
||||
<div class="gh-article-meta-wrapper">
|
||||
<h4 class="gh-author-name">
|
||||
<a href="{{url}}">{{name}}</a>
|
||||
</h4>
|
||||
{{/primary_author}}
|
||||
<time class="gh-article-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue