Post template

This commit is contained in:
Sodbileg Gansukh 2022-05-16 13:41:54 +08:00
parent d9f92dfe89
commit 98f7f53119
7 changed files with 112 additions and 157 deletions

View File

@ -1,2 +1,2 @@
a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}img{display:block;max-width:100%;height:auto}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn,em,i{font-style:italic}h1{margin:.67em 0;font-size:2em}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}mark{background-color:#fdffb6}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}kbd{padding:3px 5px;font-family:var(--font-mono);font-size:1.5rem;background:#f6f8fa;border:1px solid rgba(124,139,154,.25);border-radius:6px;box-shadow:inset 0 -1px 0 rgba(124,139,154,.25)}@media (max-width:600px){kbd{font-size:1.3rem}}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit}button{overflow:visible;border:none}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input:focus{outline:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{padding:0;border:0}textarea{overflow:auto}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}html{font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{color:#35373a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga" on}::-moz-selection{text-shadow:none;background:#daf2fd}::selection{text-shadow:none;background:#daf2fd}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #f0f0f0}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{margin:0;padding:0;border:0}textarea{resize:vertical}::not(.gh-content) blockquote,::not(.gh-content) dl,::not(.gh-content) ol,::not(.gh-content) p,::not(.gh-content) ul{margin:0 0 1.5em}ol,ul{padding-left:1.3em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}ol,ul{max-width:100%}li{padding-left:.3em;line-height:1.6em}li+li{margin-top:.5em}dt{float:left;margin:0 20px 0 0;width:120px;color:#daf2fd;font-weight:500;text-align:right}dd{margin:0 0 5px;text-align:left}blockquote{margin:1.5em 0;padding:0 1.6em;border-left:#daf2fd}blockquote small{display:inline-block;margin:.8em 0 .8em 1.5em;font-size:.9em;opacity:.8}blockquote small:before{content:"\2014 \00A0"}blockquote cite{font-weight:700}blockquote cite a{font-weight:400}a{color:#15171a;text-decoration:none}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;letter-spacing:-.01em}h1{margin:0 0 .5em;font-size:4.8rem;font-weight:700;letter-spacing:-.015em}@media (max-width:600px){h1{font-size:2.8rem}}h2{margin:1.5em 0 .5em;font-size:2.8rem;font-weight:700}@media (max-width:600px){h2{font-size:2.3rem}}h3{margin:1.5em 0 .5em;font-size:2.4rem;font-weight:600}@media (max-width:600px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:2rem}@media (max-width:600px){h4{font-size:1.7rem}}h5{font-size:2rem}h5,h6{margin:1.5em 0 .5em}h6{font-size:1.8rem}
a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}img{display:block;max-width:100%;height:auto}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn,em,i{font-style:italic}h1{margin:.67em 0;font-size:2em}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}mark{background-color:#fdffb6}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}kbd{padding:3px 5px;font-family:var(--font-mono);font-size:1.5rem;background:#f6f8fa;border:1px solid rgba(124,139,154,.25);border-radius:6px;box-shadow:inset 0 -1px 0 rgba(124,139,154,.25)}@media (max-width:600px){kbd{font-size:1.3rem}}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit}button{overflow:visible;border:none}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input:focus{outline:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{padding:0;border:0}textarea{overflow:auto}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}html{font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{color:var(--color-darkgrey);font-family:var(--font-sans);font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga" on}::-moz-selection{text-shadow:none;background:#daf2fd}::selection{text-shadow:none;background:#daf2fd}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #f0f0f0}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{margin:0;padding:0;border:0}textarea{resize:vertical}::not(.gh-content) blockquote,::not(.gh-content) dl,::not(.gh-content) ol,::not(.gh-content) p,::not(.gh-content) ul{margin:0 0 1.5em}ol,ul{padding-left:1.3em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}ol,ul{max-width:100%}li{padding-left:.3em;line-height:1.6em}li+li{margin-top:.5em}dt{float:left;margin:0 20px 0 0;width:120px;color:#daf2fd;font-weight:500;text-align:right}dd{margin:0 0 5px;text-align:left}blockquote{margin:1.5em 0;padding:0 1.6em;border-left:#daf2fd}blockquote small{display:inline-block;margin:.8em 0 .8em 1.5em;font-size:.9em;opacity:.8}blockquote small:before{content:"\2014 \00A0"}blockquote cite{font-weight:700}blockquote cite a{font-weight:400}a{color:#15171a;text-decoration:none}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;letter-spacing:-.01em}h1{margin:0 0 .5em;font-size:4.8rem;font-weight:700;letter-spacing:-.015em}@media (max-width:600px){h1{font-size:2.8rem}}h2{margin:1.5em 0 .5em;font-size:2.8rem;font-weight:700}@media (max-width:600px){h2{font-size:2.3rem}}h3{margin:1.5em 0 .5em;font-size:2.4rem;font-weight:600}@media (max-width:600px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:2rem}@media (max-width:600px){h4{font-size:1.7rem}}h5{font-size:2rem}h5,h6{margin:1.5em 0 .5em}h6{font-size:1.8rem}
/*# sourceMappingURL=global.css.map */

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

View File

@ -275,8 +275,8 @@ html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
color: #35373A;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
color: var(--color-darkgrey);
font-family: var(--font-sans);
font-size: 1.6rem;
line-height: 1.6em;
font-weight: 400;

View File

@ -36,8 +36,9 @@ production stylesheet in assets/built/screen.css
--color-red: #f05230;
--color-darkgrey: #15171A;
--color-midgrey: #738a94;
--color-lightgrey: #c5d2d9;
--color-lightgrey: #f1f1f1;
--color-secondary-text: #979797;
--color-border: #e1e1e1;
--color-wash: #e5eff5;
--color-darkmode: #151719;
@ -51,7 +52,7 @@ production stylesheet in assets/built/screen.css
*/
/* Fonts */
--font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
--font-serif: Georgia, Times, serif;
--font-mono: Menlo, Courier, monospace;
@ -615,7 +616,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
}
.has-sans-body .post-card-excerpt {
font-family: var(--font-sans-serif);
font-family: var(--font-sans);
}
.post-card-meta {
@ -784,28 +785,28 @@ make sure this only happens on large viewports / desktop-ish devices.
}
.article-header {
padding: 0 0 6vmin 0;
padding: 0 0 64px 0;
}
.article .article-header > * {
grid-column: wide-start / wide-end;
}
.article-tag {
display: flex;
justify-content: flex-start;
align-items: center;
margin: 0 0 0.5rem;
color: var(--color-midgrey);
font-size: 1.3rem;
line-height: 1.4em;
letter-spacing: 0.02em;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 16px;
font-size: 1.6rem;
}
.article-tag a {
color: var(--ghost-accent-color);
color: var(--color-secondary-text);
}
.article-title {
color: color-mod(var(--color-darkgrey) l(-5%));
margin-bottom: 16px;
font-size: 6.4rem;
font-weight: 800;
line-height: 1.05;
color: var(--color-darkgrey);
}
.has-serif-title .article-title {
@ -813,10 +814,10 @@ make sure this only happens on large viewports / desktop-ish devices.
}
.article-excerpt {
margin: 0 0 1rem;
max-width: 720px;
font-size: 2rem;
line-height: 1.4em;
opacity: 0.6;
line-height: 1.5;
color: var(--color-darkgrey);
}
.gh-canvas .article-image {
@ -1131,7 +1132,6 @@ figcaption {
padding: 1.5rem 1.5rem 0;
text-align: center;
color: rgba(0,0,0,0.5);
font-weight: 600;
font-size: 1.3rem;
line-height: 1.4em;
}
@ -1139,7 +1139,7 @@ figcaption strong {
color: rgba(0,0,0,0.8);
}
figcaption a {
color: var(--ghost-accent-color);
text-decoration: underline;
}
@ -1209,7 +1209,7 @@ iframe.instagram-media + script + :not([id]) {
width: auto;
border-spacing: 0;
border-collapse: collapse;
font-family: var(--font-sans-serif);
font-family: var(--font-sans);
font-size: 1.6rem;
white-space: nowrap;
vertical-align: top;
@ -1259,7 +1259,7 @@ iframe.instagram-media + script + :not([id]) {
.article-byline {
display: flex;
justify-content: space-between;
margin: 20px 0 0;
margin: 32px 0 0;
}
.article-byline-content {
@ -1270,51 +1270,34 @@ iframe.instagram-media + script + :not([id]) {
.article-byline-content .author-list {
justify-content: flex-start;
padding: 0 12px 0 0;
padding: 0 14px 0 0;
}
.article-byline-meta {
color: color-mod(var(--color-midgrey));
color: var(--color-secondary-text);
font-size: 1.4rem;
line-height: 1.2em;
}
.article-byline-meta h4 {
margin: 0 0 3px;
font-size: 1.6rem;
.article-byline-meta .author-name {
margin: 0 0 6px;
font-size: 1.7rem;
font-weight: 700;
}
.article-byline-meta .bull {
display: inline-block;
margin: 0 2px;
opacity: 0.6;
}
.author-avatar {
display: block;
overflow: hidden;
margin: 0 -4px;
width: 50px;
height: 50px;
width: 56px;
height: 56px;
border: #fff 2px solid;
border-radius: 100%;
transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;
}
.basic-info .avatar-wrapper {
position: relative;
margin: 0;
width: 60px;
height: 60px;
border: none;
background: rgba(229, 239, 245, 0.1);
}
.basic-info .avatar-wrapper svg {
margin: 0;
width: 60px;
height: 60px;
opacity: 0.15;
border-radius: 50%;
}
.page-template .article-title {
@ -1327,32 +1310,13 @@ iframe.instagram-media + script + :not([id]) {
.footer-cta {
position: relative;
margin-bottom: -40px;
padding: 9vmin 4vmin 10vmin;
color: #fff;
text-align: center;
background: var(--color-darkgrey);
}
.footer-cta.cta-alt {
padding: 2vmin 4vmin 12vmin;
background: transparent;
}
/* Increases the default h2 size by 15%, for small and large screens */
.footer-cta h2 {
margin: 0 0 30px;
font-size: 3.2rem;
}
.footer-cta.cta-alt h2 {
color: var(--color-darkgrey);
}
@media (max-width: 600px) {
.footer-cta h2 {
font-size: 2.65rem;
}
.footer-cta-title {
margin: 0 0 32px;
font-size: 3.8rem;
font-weight: 800;
}
.footer-cta-button {
@ -1363,23 +1327,27 @@ iframe.instagram-media + script + :not([id]) {
width: 100%;
max-width: 500px;
padding: 5px 5px 5px 15px;
font-size: 1.8rem;
color: var(--color-midgrey);
font-size: 1.7rem;
color: var(--color-secondary-text);
background: #fff;
border: 1px solid var(--color-border);
border-radius: 8px;
transition: border-color 0.2s;
}
.footer-cta.cta-alt .footer-cta-button {
border: 1px solid var(--color-lightgrey);
.footer-cta-button:hover {
border-color: color-mod(var(--color-border) l(-12%));
}
.footer-cta-button span {
display: inline-block;
padding: 10px 15px;
padding: 9px 15px;
color: #fff;
font-weight: 500;
font-size: 1.6rem;
font-weight: 600;
letter-spacing: -0.005em;
background: var(--ghost-accent-color);
border-radius: 5px;
border-radius: 6px;
}
@ -1387,47 +1355,29 @@ iframe.instagram-media + script + :not([id]) {
/* ---------------------------------------------------------- */
.read-more-wrap {
width: 100%;
padding: 4vmin;
margin: 40px auto -40px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
background: color-mod(var(--color-darkgrey) l(-5%));
margin-top: 120px;
}
.read-more {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(6, 1fr);
grid-gap: 4vmin;
}
.read-more .post-card-title {
color: #fff;
opacity: 0.8;
}
.read-more .post-card-excerpt {
color: rgba(255, 255, 255, 0.6);
}
.read-more .post-card-byline-content a {
color: #fff;
}
@media (max-width: 1000px) {
.read-more {
grid-template-columns: 1fr 1fr;
grid-template-columns: repeat(4, 1fr);
}
.read-more article:nth-child(3) {
.read-more .post-card:nth-child(3) {
display: none;
}
}
@media (max-width: 700px) {
.read-more {
grid-template-columns: 1fr;
grid-template-columns: repeat(2, 1fr);
}
.read-more article:nth-child(2) {
.read-more .post-card:nth-child(2) {
display: none;
}
}
@ -1559,8 +1509,9 @@ iframe.instagram-media + script + :not([id]) {
.site-footer {
position: relative;
margin: 40px 0 0 0;
padding: 40px 4vmin 140px;
margin: 120px 0 0 0;
padding-top: 48px;
padding-bottom: 140px;
color: #fff;
background: color-mod(var(--color-darkgrey) l(-5%));
}

View File

@ -13,7 +13,7 @@ into the {body} tag of the default.hbs template --}}
<header class="article-header gh-canvas">
{{#if primary_tag}}
<section class="article-tag">
<section class="article-tag post-card-primary-tag">
<a href="{{primary_tag.url}}">{{primary_tag.name}}</a>
</section>
{{/if}}
@ -26,6 +26,7 @@ into the {body} tag of the default.hbs template --}}
<div class="article-byline">
<section class="article-byline-content">
<ul class="author-list">
{{#foreach authors}}
<li class="author-list-item">
@ -39,6 +40,7 @@ into the {body} tag of the default.hbs template --}}
</li>
{{/foreach}}
</ul>
<div class="article-byline-meta">
<h4 class="author-name">{{authors}}</h4>
<div class="byline-meta-content">
@ -46,6 +48,7 @@ into the {body} tag of the default.hbs template --}}
<span class="byline-reading-time"><span class="bull">&bull;</span> {{reading_time}}</span>
</div>
</div>
</section>
</div>
@ -67,6 +70,7 @@ into the {body} tag of the default.hbs template --}}
{{/if}}
</figure>
{{/if}}
</header>
<section class="gh-content gh-canvas">
@ -85,9 +89,9 @@ into the {body} tag of the default.hbs template --}}
{{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}}
{{#match @custom.email_signup_for_logged_out_visitors "!=" "None"}}
{{#unless @member}}{{#if access}}
<section class="footer-cta {{#match @custom.email_signup_for_logged_out_visitors "Bottom of post"}}cta-alt{{/match}}">
<section class="footer-cta outer">
<div class="inner">
{{#if @custom.email_signup_text}}<h2>{{@custom.email_signup_text}}</h2>{{/if}}
{{#if @custom.email_signup_text}}<h2 class="footer-cta-title">{{@custom.email_signup_text}}</h2>{{/if}}
<a class="footer-cta-button" href="#/portal" data-portal>
<div class="footer-cta-input">Enter your email</div>
<span>Subscribe</span>
@ -110,7 +114,7 @@ into the {body} tag of the default.hbs template --}}
{{#get "posts" filter="id:-{{id}}" include="authors" limit="3" as |more_posts|}}
{{#if more_posts}}
<aside class="read-more-wrap">
<aside class="read-more-wrap outer">
<div class="read-more inner">
{{#foreach more_posts}}
{{> "post-card"}}