Polishing
This commit is contained in:
Sodbileg Gansukh
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
|
|
@ -228,16 +228,20 @@ body:not(.has-cover-image) .site-header-content:not(.left-aligned) {
|
|||
gap: 16px;
|
||||
}
|
||||
.site-logo {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
max-width: 60%;
|
||||
}
|
||||
.site-title {
|
||||
font-size: 3.4rem !important;
|
||||
}
|
||||
.site-description {
|
||||
margin-top: 4px !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 {
|
||||
display: none;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.post-card-meta {
|
||||
|
|
@ -831,12 +835,12 @@ make sure this only happens on large viewports / desktop-ish devices.
|
|||
/* ---------------------------------------------------------- */
|
||||
|
||||
.article {
|
||||
padding: max(8vmin, 40px) 0;
|
||||
padding: max(8vmin, 40px) 0 max(8vmin, 64px);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.article-header {
|
||||
padding: 0 0 max(6.4vmin, 40px) 0;
|
||||
padding: 0 0 max(4.8vmin, 40px) 0;
|
||||
}
|
||||
|
||||
.article-tag {
|
||||
|
|
@ -861,7 +865,7 @@ make sure this only happens on large viewports / desktop-ish devices.
|
|||
}
|
||||
|
||||
.article-excerpt {
|
||||
margin-top: 16px;
|
||||
margin-top: 20px;
|
||||
max-width: 720px;
|
||||
font-size: 2rem;
|
||||
line-height: 1.45;
|
||||
|
|
@ -871,7 +875,7 @@ make sure this only happens on large viewports / desktop-ish devices.
|
|||
.gh-canvas .article-image {
|
||||
grid-column: wide-start / wide-end;
|
||||
width: 100%;
|
||||
margin: max(6vmin, 40px) 0 0;
|
||||
margin: max(4.8vmin, 40px) 0 0;
|
||||
}
|
||||
|
||||
.image-full .article-image {
|
||||
|
|
@ -891,6 +895,7 @@ make sure this only happens on large viewports / desktop-ish devices.
|
|||
|
||||
@media (max-width: 767px) {
|
||||
.article-excerpt {
|
||||
margin-top: 14px;
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -947,7 +952,7 @@ headings, text, images and lists. We deal with cards lower down. */
|
|||
|
||||
/* Default vertical spacing */
|
||||
.gh-content > * + * {
|
||||
margin-top: 3.2vmin;
|
||||
margin-top: max(3.2vmin, 24px);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
|
@ -976,11 +981,11 @@ is the very first element in the post content */
|
|||
.gh-content > hr,
|
||||
.gh-content > blockquote {
|
||||
position: relative;
|
||||
margin-top: 4.8vmin;
|
||||
margin-top: max(4.8vmin, 32px);
|
||||
}
|
||||
.gh-content > hr + *,
|
||||
.gh-content > blockquote + * {
|
||||
margin-top: 4.8vmin !important;
|
||||
margin-top: max(4.8vmin, 32px) !important;
|
||||
}
|
||||
|
||||
/* Now the content typography styles */
|
||||
|
|
@ -1307,7 +1312,7 @@ iframe.instagram-media + script + :not([id]) {
|
|||
.article-byline {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: min(32px, 5.6vmin) 0 0;
|
||||
margin: min(24px, 5.6vmin) 0 0;
|
||||
}
|
||||
|
||||
.article-byline-content {
|
||||
|
|
@ -1346,12 +1351,22 @@ iframe.instagram-media + script + :not([id]) {
|
|||
height: min(56px, 13.6vmin);
|
||||
border: #fff 2px solid;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-border);
|
||||
}
|
||||
|
||||
.page-template .article-title {
|
||||
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
|
||||
/* ---------------------------------------------------------- */
|
||||
|
|
@ -1362,7 +1377,7 @@ iframe.instagram-media + script + :not([id]) {
|
|||
}
|
||||
|
||||
.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-weight: 800;
|
||||
}
|
||||
|
|
@ -1407,7 +1422,7 @@ iframe.instagram-media + script + :not([id]) {
|
|||
/* ---------------------------------------------------------- */
|
||||
|
||||
.read-more-wrap {
|
||||
margin-top: max(12vmin, 64px);
|
||||
margin-top: max(12vmin, 72px);
|
||||
}
|
||||
|
||||
.read-more {
|
||||
|
|
@ -1493,7 +1508,7 @@ iframe.instagram-media + script + :not([id]) {
|
|||
/* ---------------------------------------------------------- */
|
||||
|
||||
.error-content {
|
||||
padding: 14vw 4vw 6vw;
|
||||
padding: 14vw 4vw 2vw;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
|
|
@ -1503,7 +1518,6 @@ iframe.instagram-media + script + :not([id]) {
|
|||
|
||||
.error-code {
|
||||
margin: 0;
|
||||
color: var(--ghost-accent-color);
|
||||
font-size: 12vw;
|
||||
line-height: 1em;
|
||||
letter-spacing: -5px;
|
||||
|
|
@ -1511,9 +1525,10 @@ iframe.instagram-media + script + :not([id]) {
|
|||
|
||||
.error-description {
|
||||
margin: 0;
|
||||
color: var(--color-midgrey);
|
||||
color: var(--color-secondary-text);
|
||||
font-size: 3.2rem;
|
||||
line-height: 1.3em;
|
||||
letter-spacing: -0.005em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
|
@ -1561,7 +1576,7 @@ iframe.instagram-media + script + :not([id]) {
|
|||
|
||||
.site-footer {
|
||||
position: relative;
|
||||
margin: 12vmin 0 0 0;
|
||||
margin: max(12vmin, 64px) 0 0 0;
|
||||
padding-top: 48px;
|
||||
padding-bottom: 140px;
|
||||
color: #fff;
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ Keep this template as lightweight as you can!
|
|||
|
||||
{{!-- Given that people landing on this page didn't find what they
|
||||
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">
|
||||
{{#get "posts" include="authors" limit="3" as |more_posts|}}
|
||||
{{#if more_posts}}
|
||||
|
|
|
|||
24
page.hbs
24
page.hbs
|
|
@ -8,10 +8,13 @@ into the {body} tag of the default.hbs template --}}
|
|||
{{!-- Everything inside the #post block pulls data from the page --}}
|
||||
|
||||
<main id="site-main" class="site-main">
|
||||
<article class="article {{post_class}}">
|
||||
<article class="article {{post_class}}">
|
||||
|
||||
<header class="article-header gh-canvas">
|
||||
{{#if feature_image}}
|
||||
<header class="article-header gh-canvas">
|
||||
|
||||
<h1 class="article-title">{{title}}</h1>
|
||||
|
||||
{{#if feature_image}}
|
||||
<figure class="article-image">
|
||||
{{!-- This is a responsive image, it loads different sizes depending on device
|
||||
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
|
||||
|
|
@ -28,18 +31,15 @@ into the {body} tag of the default.hbs template --}}
|
|||
<figcaption>{{feature_image_caption}}</figcaption>
|
||||
{{/if}}
|
||||
</figure>
|
||||
{{/if}}
|
||||
</header>
|
||||
{{/if}}
|
||||
|
||||
<section class="gh-content gh-canvas">
|
||||
</header>
|
||||
|
||||
<h1 class="article-title">{{title}}</h1>
|
||||
<section class="gh-content gh-canvas">
|
||||
{{content}}
|
||||
</section>
|
||||
|
||||
{{content}}
|
||||
|
||||
</section>
|
||||
|
||||
</article>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
{{/post}}
|
||||
Loading…
Reference in a new issue