Polishing

This commit is contained in:
Sodbileg Gansukh 2022-05-20 21:15:27 +08:00
parent 508bbf1fb0
commit b0dfa11ff0
5 changed files with 48 additions and 33 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -228,16 +228,20 @@ body:not(.has-cover-image) .site-header-content:not(.left-aligned) {
gap: 16px; gap: 16px;
} }
.site-logo { .site-logo {
width: 80px; max-width: 60%;
height: 80px;
} }
.site-title { .site-title {
font-size: 3.4rem !important; font-size: 3.4rem !important;
} }
.site-description { .site-description {
margin-top: 4px !important;
font-size: 1.9rem !important; font-size: 1.9rem !important;
} }
.site-logo + .site-description {
margin-top: 12px !important;
}
.site-title + .site-description {
margin-top: 4px !important;
}
} }
@ -690,7 +694,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
} }
.post-card:not(.post-card-large):not(.post-card-full):not(.dynamic):not(.no-image) .post-card-excerpt { .post-card:not(.post-card-large):not(.post-card-full):not(.dynamic):not(.no-image) .post-card-excerpt {
display: none; -webkit-line-clamp: 2;
} }
.post-card-meta { .post-card-meta {
@ -831,12 +835,12 @@ make sure this only happens on large viewports / desktop-ish devices.
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.article { .article {
padding: max(8vmin, 40px) 0; padding: max(8vmin, 40px) 0 max(8vmin, 64px);
word-break: break-word; word-break: break-word;
} }
.article-header { .article-header {
padding: 0 0 max(6.4vmin, 40px) 0; padding: 0 0 max(4.8vmin, 40px) 0;
} }
.article-tag { .article-tag {
@ -861,7 +865,7 @@ make sure this only happens on large viewports / desktop-ish devices.
} }
.article-excerpt { .article-excerpt {
margin-top: 16px; margin-top: 20px;
max-width: 720px; max-width: 720px;
font-size: 2rem; font-size: 2rem;
line-height: 1.45; line-height: 1.45;
@ -871,7 +875,7 @@ make sure this only happens on large viewports / desktop-ish devices.
.gh-canvas .article-image { .gh-canvas .article-image {
grid-column: wide-start / wide-end; grid-column: wide-start / wide-end;
width: 100%; width: 100%;
margin: max(6vmin, 40px) 0 0; margin: max(4.8vmin, 40px) 0 0;
} }
.image-full .article-image { .image-full .article-image {
@ -891,6 +895,7 @@ make sure this only happens on large viewports / desktop-ish devices.
@media (max-width: 767px) { @media (max-width: 767px) {
.article-excerpt { .article-excerpt {
margin-top: 14px;
font-size: 1.7rem; font-size: 1.7rem;
} }
} }
@ -947,7 +952,7 @@ headings, text, images and lists. We deal with cards lower down. */
/* Default vertical spacing */ /* Default vertical spacing */
.gh-content > * + * { .gh-content > * + * {
margin-top: 3.2vmin; margin-top: max(3.2vmin, 24px);
margin-bottom: 0; margin-bottom: 0;
} }
@ -976,11 +981,11 @@ is the very first element in the post content */
.gh-content > hr, .gh-content > hr,
.gh-content > blockquote { .gh-content > blockquote {
position: relative; position: relative;
margin-top: 4.8vmin; margin-top: max(4.8vmin, 32px);
} }
.gh-content > hr + *, .gh-content > hr + *,
.gh-content > blockquote + * { .gh-content > blockquote + * {
margin-top: 4.8vmin !important; margin-top: max(4.8vmin, 32px) !important;
} }
/* Now the content typography styles */ /* Now the content typography styles */
@ -1307,7 +1312,7 @@ iframe.instagram-media + script + :not([id]) {
.article-byline { .article-byline {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: min(32px, 5.6vmin) 0 0; margin: min(24px, 5.6vmin) 0 0;
} }
.article-byline-content { .article-byline-content {
@ -1346,12 +1351,22 @@ iframe.instagram-media + script + :not([id]) {
height: min(56px, 13.6vmin); height: min(56px, 13.6vmin);
border: #fff 2px solid; border: #fff 2px solid;
border-radius: 50%; border-radius: 50%;
background-color: var(--color-border);
} }
.page-template .article-title { .page-template .article-title {
margin-bottom: 0; margin-bottom: 0;
} }
@media (max-width: 767px) {
.article-byline-content .author-list {
padding-right: 12px;
}
.article-byline-meta .author-name {
margin-bottom: 4px;
}
}
/* 7.3. Subscribe /* 7.3. Subscribe
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
@ -1362,7 +1377,7 @@ iframe.instagram-media + script + :not([id]) {
} }
.footer-cta-title { .footer-cta-title {
margin: 0 0 min(32px, 6.4vmin); margin: 0 0 min(24px, 6.4vmin);
font-size: clamp(2.6rem, 5vw, 3.8rem); font-size: clamp(2.6rem, 5vw, 3.8rem);
font-weight: 800; font-weight: 800;
} }
@ -1407,7 +1422,7 @@ iframe.instagram-media + script + :not([id]) {
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.read-more-wrap { .read-more-wrap {
margin-top: max(12vmin, 64px); margin-top: max(12vmin, 72px);
} }
.read-more { .read-more {
@ -1493,7 +1508,7 @@ iframe.instagram-media + script + :not([id]) {
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.error-content { .error-content {
padding: 14vw 4vw 6vw; padding: 14vw 4vw 2vw;
} }
.error-message { .error-message {
@ -1503,7 +1518,6 @@ iframe.instagram-media + script + :not([id]) {
.error-code { .error-code {
margin: 0; margin: 0;
color: var(--ghost-accent-color);
font-size: 12vw; font-size: 12vw;
line-height: 1em; line-height: 1em;
letter-spacing: -5px; letter-spacing: -5px;
@ -1511,9 +1525,10 @@ iframe.instagram-media + script + :not([id]) {
.error-description { .error-description {
margin: 0; margin: 0;
color: var(--color-midgrey); color: var(--color-secondary-text);
font-size: 3.2rem; font-size: 3.2rem;
line-height: 1.3em; line-height: 1.3em;
letter-spacing: -0.005em;
font-weight: 400; font-weight: 400;
} }
@ -1561,7 +1576,7 @@ iframe.instagram-media + script + :not([id]) {
.site-footer { .site-footer {
position: relative; position: relative;
margin: 12vmin 0 0 0; margin: max(12vmin, 64px) 0 0 0;
padding-top: 48px; padding-top: 48px;
padding-bottom: 140px; padding-bottom: 140px;
color: #fff; color: #fff;

View File

@ -24,7 +24,7 @@ Keep this template as lightweight as you can!
{{!-- Given that people landing on this page didn't find what they {{!-- Given that people landing on this page didn't find what they
were looking for, let's give them some alternative stuff to read. --}} were looking for, let's give them some alternative stuff to read. --}}
<aside class="read-more-wrap"> <aside class="read-more-wrap outer">
<div class="read-more inner"> <div class="read-more inner">
{{#get "posts" include="authors" limit="3" as |more_posts|}} {{#get "posts" include="authors" limit="3" as |more_posts|}}
{{#if more_posts}} {{#if more_posts}}

View File

@ -8,9 +8,12 @@ into the {body} tag of the default.hbs template --}}
{{!-- Everything inside the #post block pulls data from the page --}} {{!-- Everything inside the #post block pulls data from the page --}}
<main id="site-main" class="site-main"> <main id="site-main" class="site-main">
<article class="article {{post_class}}"> <article class="article {{post_class}}">
<header class="article-header gh-canvas"> <header class="article-header gh-canvas">
<h1 class="article-title">{{title}}</h1>
{{#if feature_image}} {{#if feature_image}}
<figure class="article-image"> <figure class="article-image">
{{!-- This is a responsive image, it loads different sizes depending on device {{!-- This is a responsive image, it loads different sizes depending on device
@ -29,17 +32,14 @@ into the {body} tag of the default.hbs template --}}
{{/if}} {{/if}}
</figure> </figure>
{{/if}} {{/if}}
</header> </header>
<section class="gh-content gh-canvas"> <section class="gh-content gh-canvas">
<h1 class="article-title">{{title}}</h1>
{{content}} {{content}}
</section> </section>
</article> </article>
</main> </main>
{{/post}} {{/post}}