feat: fancy hero, highlighted titles, slanted dividers
This commit is contained in:
parent
5182190696
commit
b78dc056aa
SSH Key Fingerprint:
SHA256:vCxDSu/DvGebbNiQjCVzOuxKmT8ODOzaLx+dTRtawyk
2
assets/built/main.min.js
vendored
2
assets/built/main.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -2,15 +2,21 @@
|
||||
@import "fonts.css";
|
||||
|
||||
:root {
|
||||
--font-sans: Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
|
||||
--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;
|
||||
--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-highlight: #f1f5f9;
|
||||
--color-border: rgba(0, 0, 0, 0.08);
|
||||
--gap: clamp(24px, 1.7032rem + 1.9355vw, 48px);
|
||||
--grid-gap: clamp(4rem, 0.0842rem + 3.9474vw, 6.4rem);
|
||||
--head-nav-gap: 32px;
|
||||
--container-width: 1440px;
|
||||
--content-font-size: clamp(1.7rem, 0.38vw + 1.4rem, 2rem);
|
||||
@ -21,15 +27,18 @@
|
||||
--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);
|
||||
.gh-main,
|
||||
.page-template .gh-main {
|
||||
padding-block: clamp(4.8rem, 4rem + 2.5vw, 8rem);
|
||||
}
|
||||
.page-template .gh-article-header {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
@ -45,6 +54,44 @@ hr {
|
||||
background-color: var(--color-border);
|
||||
}
|
||||
|
||||
.gh-content > [id]:not(:first-child),
|
||||
.gh-content > blockquote,
|
||||
.gh-content > blockquote + *,
|
||||
.gh-content > hr,
|
||||
.gh-content > hr + * {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.gh-divider {
|
||||
width: calc(100% - 2 * var(--gap));
|
||||
margin: 0 var(--gap);
|
||||
}
|
||||
|
||||
.gh-divider path {
|
||||
stroke: var(--color-border);
|
||||
stroke-width: 4px;
|
||||
}
|
||||
|
||||
.gh-content .gh-divider {
|
||||
width: 100%;
|
||||
margin: 4rem 0 0 0;
|
||||
}
|
||||
|
||||
.gh-content > hr:first-child,
|
||||
.gh-content > .gh-divider:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.gh-content .gh-divider path {
|
||||
stroke-width: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.gh-divider path {
|
||||
stroke-width: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.gh-content h2 {
|
||||
font-size: 2.25em;
|
||||
letter-spacing: -0.03em;
|
||||
@ -54,6 +101,14 @@ hr {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
.gh-content ul {
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
|
||||
.gh-content :not(.kg-card):not(table):not([id]) + :is(.kg-card, table) {
|
||||
margin-top: calc(1.6em * var(--content-spacing-multiplier, 1));
|
||||
}
|
||||
|
||||
.gh-canvas {
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
}
|
||||
@ -77,7 +132,7 @@ hr {
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.gh-canvas > *,
|
||||
.page-template .no-image :is(.gh-article-title, .gh-article-excerpt) {
|
||||
.page-template .no-image :is(.gh-article-title, .gh-article-excerpt) {
|
||||
grid-column: 3 / span 8;
|
||||
}
|
||||
|
||||
@ -88,7 +143,7 @@ hr {
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.gh-canvas > *,
|
||||
.page-template .no-image :is(.gh-article-title, .gh-article-excerpt) {
|
||||
.page-template .no-image :is(.gh-article-title, .gh-article-excerpt) {
|
||||
grid-column: 2 / span 10;
|
||||
}
|
||||
|
||||
@ -99,7 +154,7 @@ hr {
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.gh-canvas > *,
|
||||
.page-template .no-image :is(.gh-article-title, .gh-article-excerpt) {
|
||||
.page-template .no-image :is(.gh-article-title, .gh-article-excerpt) {
|
||||
grid-column: 1 / span 12;
|
||||
}
|
||||
}
|
||||
@ -114,12 +169,18 @@ hr {
|
||||
|
||||
.gh-head-logo {
|
||||
font-weight: 800;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gh-head-logo img {
|
||||
max-height: 48px;
|
||||
}
|
||||
|
||||
.gh-head-logo .gh-head-title {
|
||||
margin: 0 1em;
|
||||
}
|
||||
|
||||
.gh-head-menu,
|
||||
.gh-head-link {
|
||||
font-weight: 700;
|
||||
@ -135,7 +196,10 @@ hr {
|
||||
}
|
||||
|
||||
@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) {
|
||||
.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);
|
||||
}
|
||||
}
|
||||
@ -144,7 +208,9 @@ hr {
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-about {
|
||||
margin-bottom: 40px;
|
||||
display: flex;
|
||||
padding-bottom: 40px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gh-about-content {
|
||||
@ -158,11 +224,17 @@ hr {
|
||||
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 {
|
||||
.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 {
|
||||
.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));
|
||||
}
|
||||
|
||||
@ -177,17 +249,23 @@ hr {
|
||||
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 {
|
||||
.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 {
|
||||
.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;
|
||||
margin-top: 24px;
|
||||
font-size: clamp(2rem, 0.36vw + 1.83rem, 2.4rem);
|
||||
font-weight: 450;
|
||||
}
|
||||
@ -200,34 +278,81 @@ hr {
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.has-side-about .gh-about {
|
||||
margin-top: 48px;
|
||||
padding-top: 64px;
|
||||
padding-bottom: 64px;
|
||||
}
|
||||
|
||||
.has-side-about .gh-about.no-image {
|
||||
margin-top: 80px;
|
||||
margin-bottom: 48px;
|
||||
.gh-head-title,
|
||||
.gh-card-title,
|
||||
.gh-article-title,
|
||||
.has-side-about .gh-about-primary,
|
||||
.has-side-about .gh-about-secondary {
|
||||
padding: 0 6px;
|
||||
background: var(--color-highlight);
|
||||
}
|
||||
|
||||
.gh-about-image,
|
||||
.gh-card-image img {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.gh-main .gh-feed .gh-card-link,
|
||||
.has-side-about .gh-about-inner {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: clamp(4rem, 0.0842rem + 3.9474vw, 6.4rem);
|
||||
column-gap: var(--grid-gap);
|
||||
row-gap: var(--gap);
|
||||
}
|
||||
|
||||
.has-side-about .gh-about.no-image .gh-about-inner {
|
||||
grid-template-columns: 1fr;
|
||||
.has-side-about .gh-about-image {
|
||||
grid-row: 1 / 3;
|
||||
grid-column: 1 / 5;
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
.has-side-about .gh-about-content-inner {
|
||||
position: sticky;
|
||||
top: 40px;
|
||||
.has-side-about .gh-about-content {
|
||||
grid-row: 1;
|
||||
grid-column: 5 / 9;
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
.has-side-about .gh-subscribe-form {
|
||||
grid-row: 2;
|
||||
grid-column: 4 / 9;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.has-side-about .gh-about-image {
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.has-side-about .gh-subscribe-form {
|
||||
grid-column: 1 / 9;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 840px) {
|
||||
.gh-main .gh-feed .gh-card-link,
|
||||
.has-side-about .gh-about-inner {
|
||||
margin: 0 var(--grid-gap);
|
||||
}
|
||||
|
||||
.gh-main .gh-feed .gh-card-wrapper {
|
||||
z-index: 1;
|
||||
grid-row: 1;
|
||||
grid-column: 1 / span 5;
|
||||
}
|
||||
|
||||
.gh-main .gh-feed .gh-card-image {
|
||||
grid-row: 1;
|
||||
grid-column: 5 / span 7;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
.has-side-about .gh-about-inner {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 64px;
|
||||
flex-direction: column;
|
||||
gap: var(--gap);
|
||||
}
|
||||
}
|
||||
|
||||
@ -266,7 +391,6 @@ hr {
|
||||
}
|
||||
|
||||
.has-background-about .gh-about-content {
|
||||
position: sticky;
|
||||
bottom: calc(var(--gap) + 24px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -347,15 +471,21 @@ hr {
|
||||
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 {
|
||||
.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 {
|
||||
.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 {
|
||||
.gh-card-link:hover .gh-card-title span {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@ -492,11 +622,17 @@ hr {
|
||||
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 {
|
||||
.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 {
|
||||
.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));
|
||||
}
|
||||
|
||||
@ -687,11 +823,17 @@ hr {
|
||||
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 {
|
||||
.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 {
|
||||
.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));
|
||||
}
|
||||
|
||||
@ -703,11 +845,17 @@ hr {
|
||||
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 {
|
||||
.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 {
|
||||
.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));
|
||||
}
|
||||
|
||||
@ -736,11 +884,19 @@ hr {
|
||||
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) {
|
||||
.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) {
|
||||
.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));
|
||||
}
|
||||
|
||||
@ -792,6 +948,13 @@ hr {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.gh-head {
|
||||
padding-top: var(--gap);
|
||||
margin-bottom: var(--gap);
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom CTA
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
@ -799,7 +962,8 @@ hr {
|
||||
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);
|
||||
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);
|
||||
@ -812,11 +976,17 @@ hr {
|
||||
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 {
|
||||
.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 {
|
||||
.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));
|
||||
}
|
||||
|
||||
@ -838,11 +1008,17 @@ hr {
|
||||
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 {
|
||||
.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 {
|
||||
.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));
|
||||
}
|
||||
|
||||
@ -858,35 +1034,69 @@ hr {
|
||||
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 {
|
||||
.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 {
|
||||
.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 {
|
||||
.gh-subscribe-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
height: 52px;
|
||||
padding: 0 8px 0 24px;
|
||||
margin-top: 40px;
|
||||
background-color: var(--color-highlight);
|
||||
box-shadow: 0 0 0 1px currentColor;
|
||||
letter-spacing: -0.008em;
|
||||
border-radius: 40px;
|
||||
font-size: 1.7rem;
|
||||
color: var(--color-secondary-text);
|
||||
cursor: pointer;
|
||||
background-color: var(--color-border);
|
||||
border-radius: 72px;
|
||||
font-weight: 450;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.gh-subscribe-input .gh-btn {
|
||||
.gh-subscribe-form .gh-subscribe-input {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: 40px;
|
||||
font-size: inherit;
|
||||
height: 100%;
|
||||
inset: 0;
|
||||
letter-spacing: inherit;
|
||||
line-height: 1.1;
|
||||
outline: none;
|
||||
padding-inline: 26px;
|
||||
position: absolute;
|
||||
transition: 0.3s ease-in-out;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gh-subscribe-form .gh-btn {
|
||||
font-weight: 700;
|
||||
font-size: calc(1.6 / 1.7 * 1em);
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.gh-subscribe-form {
|
||||
font-size: 1.5rem;
|
||||
height: 50px;
|
||||
}
|
||||
.gh-subscribe-form .gh-subscribe-input {
|
||||
padding-inline: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Archive
|
||||
@ -934,8 +1144,14 @@ hr {
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-foot {
|
||||
padding-top: clamp(8rem, 4.55vw + 6.18rem, 12rem);
|
||||
padding-bottom: clamp(8rem, 4.55vw + 6.18rem, 12rem);
|
||||
padding-top: 6rem;
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.gh-foot {
|
||||
padding-top: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.gh-foot-inner {
|
||||
|
||||
@ -49,6 +49,13 @@ function initParallax() {
|
||||
element.innerHTML = text;
|
||||
})();
|
||||
|
||||
(function () {
|
||||
const dividers = document.querySelectorAll('hr');
|
||||
for (const divider of dividers) {
|
||||
divider.outerHTML = `<svg class="gh-divider" width="1440" height="34" viewBox="0 0 1440 34" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 32L1440 2"/></svg>`;
|
||||
}
|
||||
})();
|
||||
|
||||
(function () {
|
||||
pagination(true, initParallax);
|
||||
})();
|
||||
|
||||
@ -46,9 +46,10 @@
|
||||
<a class="gh-head-logo" href="{{@site.url}}">
|
||||
{{#if @site.logo}}
|
||||
<img src="{{@site.logo}}" alt="{{@site.title}}">
|
||||
{{else}}
|
||||
{{@site.title}}
|
||||
{{/if}}
|
||||
{{#is "post, page"}}
|
||||
<span class="gh-head-title">{{@site.title}}</span>
|
||||
{{/is}}
|
||||
</a>
|
||||
</div>
|
||||
<button class="gh-search gh-icon-btn" aria-label="Search this site" data-ghost-search>{{> "icons/search"}}</button>
|
||||
@ -87,9 +88,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<hr />
|
||||
|
||||
{{{body}}}
|
||||
|
||||
<hr />
|
||||
<footer class="gh-foot gh-outer">
|
||||
<div class="gh-foot-inner gh-inner">
|
||||
<nav class="gh-foot-menu">
|
||||
|
||||
47
index.hbs
47
index.hbs
@ -2,6 +2,16 @@
|
||||
|
||||
<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">
|
||||
<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}}
|
||||
</div>
|
||||
</div>
|
||||
{{#match @custom.header_section_layout "!=" "Typographic profile"}}
|
||||
{{#if @site.cover_image}}
|
||||
<img class="gh-about-image" src="{{@site.cover_image}}" alt="{{@site.title}}">
|
||||
@ -11,39 +21,14 @@
|
||||
<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 @site.members_enabled}}
|
||||
{{#unless @member}}
|
||||
{{#if @custom.secondary_header}}
|
||||
<p class="gh-about-secondary">{{{@custom.secondary_header}}}</p>
|
||||
{{/if}}
|
||||
<div class="gh-subscribe-input" data-portal>
|
||||
jamie@example.com
|
||||
<span class="gh-btn gh-primary-btn">Subscribe</span>
|
||||
</div>
|
||||
{{/unless}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
<form class="gh-subscribe-form" action="https://lists.pcv.org.au/subscription/form" method="post">
|
||||
<input id="3694e" type="checkbox" name="l" value="3694eeb7-fcd2-4ca2-963e-68263ff5d7a1" checked hidden />
|
||||
<input class="gh-subscribe-input" name="email" type="email" placeholder="you@example.com" required>
|
||||
<button class="gh-btn gh-primary-btn" type="submit" aria-label="Subscribe">Subscribe</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<hr />
|
||||
|
||||
<main class="gh-main gh-outer">
|
||||
<div class="gh-feed gh-inner">
|
||||
|
||||
11114
package-lock.json
generated
Normal file
11114
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "solo",
|
||||
"description": "A Ghost theme",
|
||||
"version": "1.0.0",
|
||||
"version": "1.0.0+2506",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"ghost": ">=5.0.0"
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
{{/match}}
|
||||
|
||||
<div class="gh-card-wrapper">
|
||||
<h2 class="gh-card-title">{{title}}</h2>
|
||||
<h2 class="gh-card-title"><span>{{title}}</span></h2>
|
||||
{{#match @custom.post_feed_layout "Typographic"}}
|
||||
{{#if custom_excerpt}}
|
||||
<p class="gh-card-excerpt">{{excerpt}}</p>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user