mirror of
https://github.com/ViViDboarder/Vivid-Casper.git
synced 2024-12-22 11:37:38 +00:00
Post template
This commit is contained in:
Sodbileg Gansukh
parent
d9f92dfe89
commit
98f7f53119
@ -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
@ -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;
|
||||
|
||||
@ -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%));
|
||||
}
|
||||
|
||||
96
post.hbs
96
post.hbs
@ -8,48 +8,51 @@ into the {body} tag of the default.hbs template --}}
|
||||
{{!-- Everything inside the #post block pulls data from the post --}}
|
||||
|
||||
<main id="site-main" class="site-main">
|
||||
<article class="article {{post_class}} {{#match @custom.post_image_width "Full"}}image-full{{else match @custom.post_image_width "=" "Small"}}image-small{{/match}}">
|
||||
<article class="article {{post_class}} {{#match @custom.post_image_width "Full"}}image-full{{else match @custom.post_image_width "=" "Small"}}image-small{{/match}}">
|
||||
|
||||
<header class="article-header gh-canvas">
|
||||
<header class="article-header gh-canvas">
|
||||
|
||||
{{#if primary_tag}}
|
||||
<section class="article-tag">
|
||||
{{#if primary_tag}}
|
||||
<section class="article-tag post-card-primary-tag">
|
||||
<a href="{{primary_tag.url}}">{{primary_tag.name}}</a>
|
||||
</section>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
<h1 class="article-title">{{title}}</h1>
|
||||
<h1 class="article-title">{{title}}</h1>
|
||||
|
||||
{{#if custom_excerpt}}
|
||||
{{#if custom_excerpt}}
|
||||
<p class="article-excerpt">{{custom_excerpt}}</p>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
<div class="article-byline">
|
||||
<section class="article-byline-content">
|
||||
<ul class="author-list">
|
||||
{{#foreach authors}}
|
||||
<li class="author-list-item">
|
||||
{{#if profile_image}}
|
||||
<a href="{{url}}" class="author-avatar">
|
||||
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
|
||||
</a>
|
||||
{{else}}
|
||||
<a href="{{url}}" class="author-avatar author-profile-image">{{> "icons/avatar"}}</a>
|
||||
{{/if}}
|
||||
</li>
|
||||
{{/foreach}}
|
||||
</ul>
|
||||
<div class="article-byline-meta">
|
||||
<h4 class="author-name">{{authors}}</h4>
|
||||
<div class="byline-meta-content">
|
||||
<time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
|
||||
<span class="byline-reading-time"><span class="bull">•</span> {{reading_time}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="article-byline">
|
||||
<section class="article-byline-content">
|
||||
|
||||
<ul class="author-list">
|
||||
{{#foreach authors}}
|
||||
<li class="author-list-item">
|
||||
{{#if profile_image}}
|
||||
<a href="{{url}}" class="author-avatar">
|
||||
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
|
||||
</a>
|
||||
{{else}}
|
||||
<a href="{{url}}" class="author-avatar author-profile-image">{{> "icons/avatar"}}</a>
|
||||
{{/if}}
|
||||
</li>
|
||||
{{/foreach}}
|
||||
</ul>
|
||||
|
||||
<div class="article-byline-meta">
|
||||
<h4 class="author-name">{{authors}}</h4>
|
||||
<div class="byline-meta-content">
|
||||
<time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
|
||||
<span class="byline-reading-time"><span class="bull">•</span> {{reading_time}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if feature_image}}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{{#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 --}}
|
||||
@ -66,28 +69,29 @@ 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">
|
||||
{{content}}
|
||||
</section>
|
||||
</header>
|
||||
|
||||
{{!--
|
||||
<section class="article-comments gh-canvas">
|
||||
If you want to embed comments, this is a good place to paste your code!
|
||||
</section>
|
||||
--}}
|
||||
<section class="gh-content gh-canvas">
|
||||
{{content}}
|
||||
</section>
|
||||
|
||||
</article>
|
||||
{{!--
|
||||
<section class="article-comments gh-canvas">
|
||||
If you want to embed comments, this is a good place to paste your code!
|
||||
</section>
|
||||
--}}
|
||||
|
||||
</article>
|
||||
</main>
|
||||
|
||||
{{!-- 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"}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user