simon/ghost-theme-sd.ai
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Typography and sizing updates (#8)

Browse Source
This commit is contained in:
Peter Zimon 2023-08-16 14:33:51 +02:00 committed by GitHub
parent 4c072a4222
commit ec34530601
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 111 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
assets/built/casper.js Normal file → Executable file
View File

2
assets/built/screen.css
View File

File diff suppressed because one or more lines are too long

2
assets/built/screen.css.map
View File

File diff suppressed because one or more lines are too long

161
assets/css/screen.css
View File

@ -59,8 +59,9 @@ production stylesheet in assets/built/screen.css
--color-darker-gray: #15171a; --color-darker-gray: #15171a;
--color-black: #000; --color-black: #000;
--color-primary-text: var(--color-darker-gray); --color-primary-text: var(--color-darker-gray);
--color-secondary-text: rgb(0 0 0 / 0.4); --color-secondary-text: rgb(0 0 0 / 0.5);
--color-border: rgb(0 0 0 / 0.08); --color-border: rgb(0 0 0 / 0.08);
--color-dark-border: rgb(0 0 0 / 0.5);
--font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
--font-serif: "EB Garamond", Georgia, Times, serif; --font-serif: "EB Garamond", Georgia, Times, serif;
--font-serif-alt: Georgia, Times, serif; --font-serif-alt: Georgia, Times, serif;
@ -68,7 +69,7 @@ production stylesheet in assets/built/screen.css
--font-mono: Menlo, Courier, monospace; --font-mono: Menlo, Courier, monospace;
--container-width: 1320px; --container-width: 1320px;
--container-gap: clamp(24px, 1.7032rem + 1.9355vw, 48px); --container-gap: clamp(24px, 1.7032rem + 1.9355vw, 48px);
--grid-gap: 48px; --grid-gap: 42px;
} }
:root.has-light-text, :root.has-light-text,
@ -77,6 +78,7 @@ production stylesheet in assets/built/screen.css
--color-darker-gray: #fff; --color-darker-gray: #fff;
--color-secondary-text: rgb(255 255 255 / 0.64); --color-secondary-text: rgb(255 255 255 / 0.64);
--color-border: rgb(255 255 255 / 0.15); --color-border: rgb(255 255 255 / 0.15);
--color-dark-border: rgb(255 255 255 / 0.5);
} }
/* 2. Fonts /* 2. Fonts
@ -186,7 +188,7 @@ a:hover {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0.8em 1.4em; padding: 0.8em 1.4em;
font-size: 1.6rem; font-size: 1.5rem;
font-weight: 600; font-weight: 600;
letter-spacing: -0.004em; letter-spacing: -0.004em;
line-height: 1; line-height: 1;
@ -231,8 +233,8 @@ a:hover {
overflow: hidden; overflow: hidden;
max-width: 640px; max-width: 640px;
width: 100%; width: 100%;
height: 64px; height: 56px;
font-size: 1.8rem; font-size: 1.7rem;
font-weight: 450; font-weight: 450;
letter-spacing: -0.008em; letter-spacing: -0.008em;
border-radius: 40px; border-radius: 40px;
@ -275,7 +277,7 @@ button.gh-form-input {
position: absolute; position: absolute;
right: 6px; right: 6px;
padding-inline: 32px; padding-inline: 32px;
height: 52px; height: 44px;
font-size: inherit; font-size: inherit;
font-weight: 600; font-weight: 600;
} }
@ -349,7 +351,7 @@ button.gh-form-input {
.gh-navigation { .gh-navigation {
height: 100px; height: 100px;
font-size: 1.6rem; font-size: 1.5rem;
font-weight: 550; font-weight: 550;
background-color: var(--background-color); background-color: var(--background-color);
color: var(--color-darker-gray); color: var(--color-darker-gray);
@ -719,7 +721,7 @@ Search LOGO Login Subscribe
} }
#gh-navigation .nav a { #gh-navigation .nav a {
font-size: 2.6rem; font-size: 1.75rem;
font-weight: 600; font-weight: 600;
text-transform: none; text-transform: none;
} }
@ -740,12 +742,12 @@ Search LOGO Login Subscribe
#gh-navigation .gh-button { #gh-navigation .gh-button {
width: 100%; width: 100%;
font-size: 1.8rem; font-size: 1.75rem;
text-transform: none; text-transform: none;
} }
#gh-navigation a[data-portal="signin"] { #gh-navigation a[data-portal="signin"] {
font-size: 2rem; font-size: 1.75rem;
} }
#gh-main { #gh-main {
@ -788,7 +790,7 @@ Search LOGO Login Subscribe
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
align-items: center; align-items: center;
padding: var(--container-gap) 0 calc(var(--container-gap) + 8px); padding: var(--container-gap) 0;
} }
.is-open#gh-navigation :is(.gh-button, a[data-portal="signin"]) { .is-open#gh-navigation :is(.gh-button, a[data-portal="signin"]) {
@ -855,6 +857,7 @@ Search LOGO Login Subscribe
font-size: calc(1.9rem * var(--factor, 1)); font-size: calc(1.9rem * var(--factor, 1));
font-weight: 725; font-weight: 725;
letter-spacing: -0.014em; letter-spacing: -0.014em;
line-height: 1.3;
} }
.gh-card-link:hover .gh-card-title { .gh-card-link:hover .gh-card-title {
@ -866,7 +869,7 @@ Search LOGO Login Subscribe
overflow-y: hidden; overflow-y: hidden;
margin-top: 8px; margin-top: 8px;
max-width: 720px; max-width: 720px;
font-size: 1.5rem; font-size: 1.45rem;
line-height: 1.4; line-height: 1.4;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@ -876,8 +879,8 @@ Search LOGO Login Subscribe
display: flex; display: flex;
gap: 4px; gap: 4px;
flex-wrap: wrap; flex-wrap: wrap;
font-size: 1.3rem; font-size: 1.25rem;
font-weight: 550; font-weight: 500;
line-height: 1.05; line-height: 1.05;
letter-spacing: -0.004em; letter-spacing: -0.004em;
color: var(--color-secondary-text); color: var(--color-secondary-text);
@ -947,15 +950,17 @@ Search LOGO Login Subscribe
} }
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-title { .gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-title {
font-size: clamp(3.2rem, 1.82vw + 2.47rem, 4.8rem); font-size: clamp(3.2rem, 1.36vw + 2.65rem, 4.4rem);
font-weight: 750; font-weight: 700;
line-height: 1; line-height: 1.1;
letter-spacing: -0.022em; letter-spacing: -0.022em;
} }
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-excerpt { .gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-excerpt {
margin-top: clamp(12px, 0.45vw + 10.18px, 16px); margin-top: clamp(12px, 0.45vw + 10.18px, 16px);
font-size: 1.8rem; font-size: 1.8rem;
letter-spacing: -0.02em;
max-width: 90%;
} }
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-meta:not(:empty) { .gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-meta:not(:empty) {
@ -1079,8 +1084,8 @@ Search LOGO Login Subscribe
.gh-header.is-highlight .gh-header-left .gh-card .gh-card-title { .gh-header.is-highlight .gh-header-left .gh-card .gh-card-title {
font-size: clamp(3.2rem, 1.82vw + 2.47rem, 4.8rem); font-size: clamp(3.2rem, 1.82vw + 2.47rem, 4.8rem);
font-weight: 750; font-weight: 700;
line-height: 1; line-height: 1.1;
letter-spacing: -0.022em; letter-spacing: -0.022em;
} }
@ -1123,6 +1128,10 @@ Search LOGO Login Subscribe
flex-direction: column; flex-direction: column;
} }
.gh-header.is-highlight .gh-featured-feed .gh-card-title {
font-size: clamp(1.4rem, 0.23vw + 1.31rem, 1.6rem);
}
.gh-header.is-highlight .gh-header-left::after, .gh-header.is-highlight .gh-header-left::after,
.gh-header.is-highlight .gh-header-middle::after { .gh-header.is-highlight .gh-header-middle::after {
position: absolute; position: absolute;
@ -1225,12 +1234,12 @@ Search LOGO Login Subscribe
align-items: center; align-items: center;
gap: 48px; gap: 48px;
margin: auto; margin: auto;
max-width: 960px; max-width: 1080px;
text-align: center; text-align: center;
} }
.gh-header.is-classic .gh-header-title { .gh-header.is-classic .gh-header-title {
font-size: calc(clamp(3.2rem, 3.18vw + 1.93rem, 6rem) * var(--factor, 1)); font-size: calc(clamp(3.2rem, 2.27vw + 2.29rem, 5.2rem) * var(--factor, 1));
line-height: 1.1; line-height: 1.1;
letter-spacing: -0.028em; letter-spacing: -0.028em;
} }
@ -1269,7 +1278,7 @@ Search LOGO Login Subscribe
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.gh-cta { .gh-cta {
margin-top: 120px; margin-top: 4vw;
} }
.gh-cta-inner { .gh-cta-inner {
@ -1299,16 +1308,17 @@ Search LOGO Login Subscribe
} }
.gh-cta-title { .gh-cta-title {
font-size: 3.6rem; font-size: 4.6rem;
font-weight: 750; font-weight: 700;
line-height: 1.1; line-height: 1.1;
letter-spacing: -0.021em; letter-spacing: -0.021em;
} }
.gh-cta-description { .gh-cta-description {
margin-top: 10px; margin-top: 16px;
font-size: 1.8rem; font-size: 1.8rem;
line-height: 1.4; line-height: 1.4;
letter-spacing: -0.015em;
} }
.gh-cta .gh-form { .gh-cta .gh-form {
@ -1338,10 +1348,10 @@ Search LOGO Login Subscribe
margin-bottom: 20px; margin-bottom: 20px;
padding-bottom: 12px; padding-bottom: 12px;
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 500; font-weight: 600;
letter-spacing: 0.01em; letter-spacing: 0.025em;
text-transform: uppercase; text-transform: uppercase;
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-dark-border);
} }
.gh-featured-feed { .gh-featured-feed {
@ -1446,7 +1456,7 @@ Search LOGO Login Subscribe
} }
:is(.gh-featured, .gh-cta) + .gh-container { :is(.gh-featured, .gh-cta) + .gh-container {
margin-top: 100px; margin-top: 4vw;
} }
.gh-header.is-classic:not(.has-image) + .gh-container { .gh-header.is-classic:not(.has-image) + .gh-container {
@ -1682,20 +1692,20 @@ Search LOGO Login Subscribe
.gh-about-icon { .gh-about-icon {
margin-bottom: 24px; margin-bottom: 24px;
width: 80px; width: 60px;
height: 80px; height: 60px;
border-radius: 50%; border-radius: 50%;
} }
.gh-about-title { .gh-about-title {
font-size: calc(2.4rem * var(--factor, 1)); font-size: calc(2.4rem * var(--factor, 1));
font-weight: 750; font-weight: 700;
letter-spacing: -0.019em; letter-spacing: -0.019em;
} }
.gh-about-description { .gh-about-description {
margin-top: 12px; margin-top: 12px;
font-size: 1.5rem; font-size: 1.45rem;
line-height: 1.4; line-height: 1.4;
} }
@ -1729,15 +1739,15 @@ Search LOGO Login Subscribe
.gh-article-title { .gh-article-title {
font-size: calc(clamp(3.4rem, 1.36vw + 2.85rem, 4.6rem) * var(--factor, 1)); font-size: calc(clamp(3.4rem, 1.36vw + 2.85rem, 4.6rem) * var(--factor, 1));
line-height: 1.05; line-height: 1.1;
letter-spacing: -0.022em; letter-spacing: -0.022em;
} }
.gh-article-excerpt { .gh-article-excerpt {
margin-top: clamp(12px, 0.45vw + 10.18px, 16px); margin-top: clamp(12px, 0.45vw + 10.18px, 16px);
max-width: 720px; max-width: 720px;
font-size: clamp(2rem, 0.23vw + 1.91rem, 2.2rem); font-size: clamp(1.5rem, 0.45vw + 1.32rem, 1.9rem);
line-height: 1.35; line-height: 1.4;
letter-spacing: -0.018em; letter-spacing: -0.018em;
} }
@ -1790,13 +1800,13 @@ Search LOGO Login Subscribe
} }
.gh-article-author-name { .gh-article-author-name {
font-size: 1.7rem; font-size: 1.6rem;
font-weight: 650; font-weight: 650;
letter-spacing: -0.013em; letter-spacing: -0.013em;
} }
.gh-article-meta-content { .gh-article-meta-content {
font-size: 1.4rem; font-size: 1.35rem;
font-weight: 500; font-weight: 500;
line-height: 1.2; line-height: 1.2;
letter-spacing: -0.006em; letter-spacing: -0.006em;
@ -1840,8 +1850,8 @@ created within the Ghost editor. The main content handles
headings, text, images and lists. We deal with cards lower down. */ headings, text, images and lists. We deal with cards lower down. */
.gh-content { .gh-content {
font-size: calc(var(--content-font-size, 1.8rem) * var(--font-multiplier, 1)); font-size: calc(var(--content-font-size, 1.7rem) * var(--font-multiplier, 1));
letter-spacing: -0.014em; letter-spacing: -0.01em;
} }
/* Default vertical spacing */ /* Default vertical spacing */
@ -1853,12 +1863,12 @@ headings, text, images and lists. We deal with cards lower down. */
/* Add back a top margin to all headings, /* Add back a top margin to all headings,
unless a heading is the very first element in the post content */ unless a heading is the very first element in the post content */
.gh-content > [id]:not(:first-child) { .gh-content > [id]:not(:first-child) {
margin-top: calc(48px * var(--content-spacing-factor, 1)); margin-top: calc(56px * var(--content-spacing-factor, 1));
} }
/* Add a small margin between a heading and anything after it */ /* Add a small margin between a heading and anything after it */
.gh-content > [id] + * { .gh-content > [id] + * {
margin-top: calc(16px * var(--content-spacing-factor, 1)); margin-top: calc(12px * var(--content-spacing-factor, 1));
} }
/* A larger margin before/after dividers, blockquotes and embeds */ /* A larger margin before/after dividers, blockquotes and embeds */
@ -1878,7 +1888,7 @@ unless a heading is the very first element in the post content */
} }
.gh-content h3 { .gh-content h3 {
font-size: calc(1.2em * var(--font-multiplier, 1)); font-size: calc(1.3em * var(--font-multiplier, 1));
letter-spacing: -0.017em; letter-spacing: -0.017em;
} }
@ -2298,7 +2308,7 @@ figcaption a {
.has-serif-title .is-title { .has-serif-title .is-title {
font-family: var(--font-serif); font-family: var(--font-serif);
font-weight: 600; font-weight: 550;
} }
.has-slab-title .is-title { .has-slab-title .is-title {
@ -2319,13 +2329,41 @@ figcaption a {
letter-spacing: -0.015em; letter-spacing: -0.015em;
} }
.has-slab-title .gh-header.is-classic .gh-header-title {
font-size: calc(clamp(3.2rem, 2.27vw + 2.29rem, 5.2rem) * var(--factor, 1));
letter-spacing: -0.01em;
}
.has-serif-title .gh-form { .has-serif-title .gh-form {
border-radius: 0; border-radius: 0;
} }
.has-serif-title .gh-card-title { .has-serif-title .gh-card-title {
line-height: 1.1; line-height: 1.15;
letter-spacing: -0.006em; letter-spacing: -0.006em;
font-size: calc(2.0rem*var(--factor, 1))
}
.has-serif-title .gh-featured-feed .gh-card-title {
font-size: calc(1.6rem*var(--factor, 1))
}
.has-slab-title .gh-featured-feed .gh-card-title {
font-size: calc(1.5rem*var(--factor, 1));
letter-spacing: 0;
}
.has-serif-title .gh-header.is-highlight .gh-featured-feed .gh-card-title {
font-size: clamp(1.6rem, 0.23vw + 1.51rem, 1.8rem);
}
.has-slab-title .gh-card-title {
font-size: calc(1.8rem*var(--factor, 1));
}
.has-slab-title .gh-header.gh-header.is-highlight .gh-card-title,
.has-slab-title .gh-header.gh-header.gh-header.is-magazine .gh-card-title {
line-height: 1.15;
} }
.has-serif-title .gh-about-title { .has-serif-title .gh-about-title {
@ -2345,14 +2383,20 @@ figcaption a {
} }
.has-serif-body .gh-card-excerpt { .has-serif-body .gh-card-excerpt {
font-size: 1.7rem; font-size: 1.65rem;
line-height: 1.4; line-height: 1.4;
letter-spacing: 0; letter-spacing: 0.0005em;
} }
.has-serif-body .gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-excerpt, .has-serif-body .gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-excerpt,
.has-serif-body .gh-header.is-highlight .gh-card:first-child .gh-card-excerpt { .has-serif-body .gh-header.is-highlight .gh-card:first-child .gh-card-excerpt {
font-size: 1.8rem; font-size: 1.8rem;
letter-spacing: -0.001em;
}
.has-serif-title .gh-header.is-magazine .gh-header-inner>.gh-card .gh-card-title {
font-weight: 550;
font-size: clamp(3.2rem,1.82vw + 2.47rem,4.9rem)
} }
.has-serif-body .gh-about-description { .has-serif-body .gh-about-description {
@ -2371,10 +2415,19 @@ figcaption a {
border-radius: 0; border-radius: 0;
} }
.has-slab-title :is(.gh-button, .gh-form) { .has-slab-title :is(.gh-button) {
border-radius: 6px;
}
.has-slab-title :is(.gh-form) {
border-radius: 8px; border-radius: 8px;
} }
.has-serif-title .gh-cta-title {
font-size: 4.8rem;
}
/* 20.2. Colors */ /* 20.2. Colors */
.has-light-text .gh-form:hover { .has-light-text .gh-form:hover {
@ -2385,8 +2438,8 @@ figcaption a {
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.gh-footer { .gh-footer {
margin-top: 120px; margin-top: 6vw;
font-size: 1.6rem; font-size: 1.5rem;
color: var(--color-darker-gray); color: var(--color-darker-gray);
} }
@ -2465,18 +2518,18 @@ figcaption a {
.gh-footer-signup-header { .gh-footer-signup-header {
font-size: calc(clamp(3.2rem, 1.82vw + 2.47rem, 4.8rem) * var(--factor, 1)); font-size: calc(clamp(3.2rem, 1.82vw + 2.47rem, 4.8rem) * var(--factor, 1));
font-weight: 750; font-weight: 700;
letter-spacing: -0.03em; letter-spacing: -0.03em;
} }
.gh-footer-signup-subhead { .gh-footer-signup-subhead {
margin-top: 12px; margin-top: 12px;
max-width: 640px; max-width: 640px;
font-size: clamp(1.6rem, 0.68vw + 1.33rem, 2.2rem); font-size: clamp(1.6rem, 0.45vw + 1.42rem, 2rem);
font-weight: 450; font-weight: 450;
line-height: 1.4; line-height: 1.4;
letter-spacing: -0.018em; letter-spacing: -0.014em;
opacity: 0.6; opacity: 0.75;
} }
.gh-footer-signup .gh-form { .gh-footer-signup .gh-form {