This commit is contained in:
John O'Nolan 2021-03-03 15:44:25 -05:00
parent cf24eccdf2
commit 1365eab4ae
15 changed files with 89 additions and 235 deletions

View File

@ -1,19 +0,0 @@
Do you need help or have a question? Please come chat in our forum: https://forum.ghost.org 👫.
If you're filing a bug 🐛, please include the following information:
### Screenshot
![]()
### Steps to Reproduce
1. This is the first step
2. This may be the post content used to cause an issue...
### Technical details
* Casper Version:
* Ghost Version:
* Browser Version:
* OS Version:

View File

@ -1,16 +0,0 @@
name: Deploy Theme
on:
push:
branches:
- master
- main
jobs:
deploy:
runs-on: ubuntu-18.04
steps:
- uses: actions/checkout@v2
- uses: TryGhost/action-deploy-theme@v1.4.1
with:
api-url: ${{ secrets.GHOST_ADMIN_API_URL }}
api-key: ${{ secrets.GHOST_ADMIN_API_KEY }}
theme-name: "casper-master"

View File

@ -1,15 +0,0 @@
name: Test
on:
pull_request:
push:
branches:
- master
- 'renovate/*'
jobs:
test:
runs-on: ubuntu-latest
if: github.event_name == 'push' || (github.event_name == 'pull_request' && !startsWith(github.head_ref, 'renovate/'))
steps:
- uses: actions/checkout@v2
- run: yarn
- run: yarn test:ci

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{max-width:100%}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}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{overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body,html{overflow-x:hidden}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}blockquote,dl,ol,p,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{margin:.5em 0;padding-left:.3em;line-height:1.6em}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 p{margin:.8em 0;font-size:1.2em;font-weight:300}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:5rem;font-weight:700;letter-spacing:-.015em}@media (max-width:600px){h1{font-size:2.2rem}}h2{margin:1.5em 0 .5em;font-size:2.8rem;font-weight:700}@media (max-width:600px){h2{font-size:2.6rem}}h3{margin:1.5em 0 .5em;font-size:1.8rem;font-weight:500}@media (max-width:600px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:1.6rem}h5,h6{margin:1.5em 0 .5em;font-size:1.4rem} 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{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}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{overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body,html{overflow-x:hidden}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}blockquote,dl,ol,p,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{margin:.5em 0;padding-left:.3em;line-height:1.6em}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 p{margin:.8em 0;font-size:1.2em;font-weight:300}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.4rem}}h2{margin:1.5em 0 .5em;font-size:2.8rem;font-weight:700}@media (max-width:600px){h2{font-size:2.6rem}}h3{margin:1.5em 0 .5em;font-size:1.8rem;font-weight:500}@media (max-width:600px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:1.6rem}h5,h6{margin:1.5em 0 .5em;font-size:1.4rem}
/*# sourceMappingURL=global.css.map */ /*# 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

@ -109,6 +109,7 @@ table {
} }
img { img {
max-width: 100%; max-width: 100%;
height: auto;
} }
html { html {
box-sizing: border-box; box-sizing: border-box;
@ -416,13 +417,13 @@ h6 {
h1 { h1 {
margin: 0 0 0.5em 0; margin: 0 0 0.5em 0;
font-size: 5rem; font-size: 4.8rem;
font-weight: 700; font-weight: 700;
letter-spacing: -0.015em; letter-spacing: -0.015em;
} }
@media (max-width: 600px) { @media (max-width: 600px) {
h1 { h1 {
font-size: 2.2rem; font-size: 2.4rem;
} }
} }

View File

@ -104,14 +104,23 @@ production stylesheet in assets/built/screen.css
.site-header-background { .site-header-background {
position: relative; position: relative;
margin-top: 64px;
padding-bottom: 12px; padding-bottom: 12px;
color: #fff; color: #fff;
background: var(--ghost-accent-color) no-repeat center center; background: var(--ghost-accent-color);
background-size: cover;
} }
.site-header-background:before { .site-header-cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.site-header-cover:before {
content: ""; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
@ -123,7 +132,7 @@ production stylesheet in assets/built/screen.css
background: rgba(0,0,0,0.18); background: rgba(0,0,0,0.18);
} }
.site-header-background:after { .site-header-cover:after {
content: ""; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
@ -133,15 +142,11 @@ production stylesheet in assets/built/screen.css
z-index: 10; z-index: 10;
display: block; display: block;
height: 140px; height: 140px;
background: linear-gradient(rgba(0,0,0,0.15),rgba(0,0,0,0)); background: linear-gradient(rgba(0,0,0,0.95),rgba(0,0,0,0));
}
.site-header-background.no-image:before,
.site-header-background.no-image:after {
display: none;
} }
.site-header-content { .site-header-content {
position: relative;
z-index: 100; z-index: 100;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -150,55 +155,46 @@ production stylesheet in assets/built/screen.css
padding: 6vw 3vw; padding: 6vw 3vw;
min-height: 200px; min-height: 200px;
max-height: 340px; max-height: 340px;
text-align: center;
} }
.site-title { .site-title {
z-index: 10; z-index: 10;
margin: 0 0 0 -2px; margin: 0 0 0.15em;
padding: 0; padding: 0;
font-size: 5.0rem;
line-height: 1em;
font-weight: 600;
} }
.site-logo { .site-logo {
max-height: 55px; max-height: 55px;
} }
.site-description { .site-header-content p {
z-index: 10; max-width: 600px;
margin: 0; margin: 0 auto;
padding: 5px 0; line-height: 1.2em;
font-size: 2.1rem;
line-height: 1.4em;
font-weight: 400;
opacity: 0.8; opacity: 0.8;
} }
@media (max-width: 600px) {
.site-header-content p {
max-width: 80vmin;
font-size: 1.8rem;
}
}
/* 4.1 Home header /* 4.1 Home header
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.site-home-header { .site-home-header {
position: relative;
z-index: 1000; z-index: 1000;
} overflow: hidden;
.site-home-header .site-header-background {
margin-top: 0;
} }
.site-home-header .site-header-content { .site-home-header .site-header-content {
padding: 5vw 3vw 6vw; padding: 5vw 3vw 6vw;
} font-size: 2.5rem;
font-weight: 400;
.site-home-header .site-title {
font-size: 5.5rem;
text-align: center;
}
.site-home-header .site-description {
font-size: 2.2rem;
font-weight: 300;
text-align: center;
} }
@ -232,39 +228,6 @@ production stylesheet in assets/built/screen.css
} }
/* Special header styles for smaller screens */
@media (max-width: 900px) {
.site-header-content {
padding-bottom: 9vw;
}
}
@media (max-width: 500px) {
.site-home-header .site-title {
font-size: 4.2rem;
}
.site-home-header .site-description {
font-size: 1.8rem;
}
.site-archive-header .site-header-content {
flex-direction: column;
align-items: center;
min-height: unset;
}
.site-archive-header .site-title {
font-size: 4.2rem;
text-align: center;
}
.site-archive-header .no-image .site-header-content {
padding: 12vw 0 20px;
}
}
/* 5. Site Navigation /* 5. Site Navigation
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
@ -383,7 +346,7 @@ hides that entirely. Slightly hacky code. But nice clean end-result.
display: block; display: block;
padding: 12px 12px; padding: 12px 12px;
color: #fff; color: #fff;
opacity: 0.7; opacity: 0.75;
} }
.nav li a:hover { .nav li a:hover {
@ -491,18 +454,14 @@ hides that entirely. Slightly hacky code. But nice clean end-result.
.subscribe-button { .subscribe-button {
display: block; display: block;
margin: 0 0 0 10px; margin: 0 0 0 10px;
padding: 5px 10px; padding: 8px 15px;
border: #fff 1px solid; color: var(--color-darkgrey);
color: #fff; font-weight: 500;
font-size: 1.3rem; letter-spacing: -0.015em;
font-size: 1.5rem;
line-height: 1em; line-height: 1em;
border-radius: 5px; background: #fff;
opacity: 0.8; border-radius: 30px;
}
.subscribe-button:hover {
text-decoration: none;
opacity: 1;
} }
.site-nav-right .nav + .subscribe-button { .site-nav-right .nav + .subscribe-button {
@ -564,10 +523,6 @@ hides that entirely. Slightly hacky code. But nice clean end-result.
/* 6. Post Feed /* 6. Post Feed
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.posts {
overflow-x: hidden;
}
.post-feed { .post-feed {
position: relative; position: relative;
display: grid; display: grid;
@ -593,7 +548,6 @@ hides that entirely. Slightly hacky code. But nice clean end-result.
flex: 1 1 301px; flex: 1 1 301px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden;
min-height: 220px; min-height: 220px;
background-size: cover; background-size: cover;
} }
@ -665,7 +619,7 @@ hides that entirely. Slightly hacky code. But nice clean end-result.
color: color-mod(var(--color-midgrey) l(-8%)); color: color-mod(var(--color-midgrey) l(-8%));
} }
.post-card:not(.post-card-large) .post-card-excerpt p { .post-card-excerpt p {
margin-bottom: 1em; margin-bottom: 1em;
display: -webkit-box; display: -webkit-box;
overflow-y: hidden; overflow-y: hidden;
@ -716,17 +670,17 @@ hides that entirely. Slightly hacky code. But nice clean end-result.
margin: 0 0 0 -6px; margin: 0 0 0 -6px;
width: 36px; width: 36px;
height: 36px; height: 36px;
border: #fff 2px solid;
border-radius: 100%; border-radius: 100%;
box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
} }
.post-card-byline-content { .post-card-byline-content {
flex: 1 1 50%; flex: 1 1 50%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0 0 0 6px; margin: 0 0 0 8px;
color: color-mod(var(--color-midgrey) l(+10%)); color: color-mod(var(--color-midgrey) l(+10%));
font-size: 1.3rem; font-size: 1.4rem;
line-height: 1.2em; line-height: 1.2em;
font-weight: 400; font-weight: 400;
} }
@ -736,17 +690,18 @@ hides that entirely. Slightly hacky code. But nice clean end-result.
} }
.post-card-byline-content a { .post-card-byline-content a {
color: color-mod(var(--color-darkgrey) l(+20%)); color: color-mod(var(--color-darkgrey) l(+15%));
font-weight: 600; font-weight: 600;
} }
.post-card-byline-date { .post-card-byline-date {
font-size: 1.2rem; font-size: 1.3rem;
line-height: 1.5em;
} }
.post-card-byline-date .bull { .post-card-byline-date .bull {
display: inline-block; display: inline-block;
margin: 0 4px; margin: 0 2px;
opacity: 0.6; opacity: 0.6;
} }
@ -821,6 +776,7 @@ make sure this only happens on large viewports / desktop-ish devices.
margin-bottom: 1.5em; margin-bottom: 1.5em;
font-size: 1.7rem; font-size: 1.7rem;
line-height: 1.55em; line-height: 1.55em;
-webkit-line-clamp: 8;
} }
} }
@ -947,13 +903,14 @@ headings, text, images and lists. We deal with cards lower down. */
} }
/* [id] represents all headings h1-h6, reset all margins */ /* [id] represents all headings h1-h6, reset all margins */
.gh-content [id] { .gh-content > [id] {
margin: 0; margin: 0;
color: var(--color-darkgrey);
} }
/* Add back a top margin to all headings, unless a heading /* Add back a top margin to all headings, unless a heading
is the very first element in the post content */ is the very first element in the post content */
.gh-content [id]:not(:first-child) { .gh-content > [id]:not(:first-child) {
margin: 2em 0 0; margin: 2em 0 0;
} }
@ -963,12 +920,12 @@ is the very first element in the post content */
} }
/* A larger margin before/after HRs and blockquotes */ /* A larger margin before/after HRs and blockquotes */
.gh-content hr, .gh-content > hr,
.gh-content blockquote { .gh-content > blockquote {
margin-top: 6vmin; margin-top: 6vmin;
} }
.gh-content hr + *, .gh-content > hr + *,
.gh-content blockquote + * { .gh-content > blockquote + * {
margin-top: 6vmin !important; margin-top: 6vmin !important;
} }
@ -1357,21 +1314,13 @@ Ghost editor. */
.article-byline-meta { .article-byline-meta {
color: color-mod(var(--color-midgrey)); color: color-mod(var(--color-midgrey));
font-size: 1.3rem; font-size: 1.4rem;
line-height: 1.2em; line-height: 1.2em;
} }
.article-byline-meta h4 { .article-byline-meta h4 {
margin: 0 0 3px; margin: 0 0 3px;
font-size: 1.5rem; font-size: 1.6rem;
}
.article-byline-meta h4 a {
color: color-mod(var(--color-darkgrey));
}
.article-byline-meta h4 a:hover {
color: var(--color-darkgrey);
} }
.article-byline-meta .bull { .article-byline-meta .bull {
@ -1384,8 +1333,8 @@ Ghost editor. */
display: block; display: block;
overflow: hidden; overflow: hidden;
margin: 0 -4px; margin: 0 -4px;
width: 40px; width: 50px;
height: 40px; height: 50px;
border: #fff 2px solid; border: #fff 2px solid;
border-radius: 100%; border-radius: 100%;
transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms; transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;
@ -1805,10 +1754,6 @@ html.dark-mode img {
opacity: 0.9; opacity: 0.9;
} }
html.dark-mode .site-header-background:before {
background: rgba(0,0,0,0.6);
}
html.dark-mode .post-card, html.dark-mode .post-card,
html.dark-mode .post-card:hover { html.dark-mode .post-card:hover {
border-bottom-color: color-mod(var(--color-darkmode) l(+8%)); border-bottom-color: color-mod(var(--color-darkmode) l(+8%));
@ -1838,11 +1783,6 @@ html.dark-mode .post-card-excerpt {
color: color-mod(var(--color-midgrey) l(+10%)); color: color-mod(var(--color-midgrey) l(+10%));
} }
html.dark-mode .author-avatar,
html.dark-mode .static-avatar {
border-color: color-mod(var(--color-darkgrey) l(+2%));
}
html.dark-mode .post-full-content { html.dark-mode .post-full-content {
background: var(--color-darkmode); background: var(--color-darkmode);
} }

View File

@ -11,7 +11,7 @@
{{> "site-nav"}} {{> "site-nav"}}
</div> </div>
</div> </div>
{{> header-background background=cover_image}} {{!--Special header-image.hbs partial to generate the background image--}} <div class="outer site-header-background no-image">
<div class="inner"> <div class="inner">
<div class="site-header-content author-header"> <div class="site-header-content author-header">
{{#if profile_image}} {{#if profile_image}}

View File

@ -3,18 +3,31 @@
into the {body} of the default.hbs template --}} into the {body} of the default.hbs template --}}
<header class="site-home-header"> <header class="site-home-header">
{{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}} <div class="outer site-header-background">
{{#if @site.cover_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 --}}
<img class="site-header-cover"
srcset="{{img_url @site.cover_image size="s"}} 300w,
{{img_url @site.cover_image size="m"}} 600w,
{{img_url @site.cover_image size="l"}} 1000w,
{{img_url @site.cover_image size="xl"}} 2000w"
sizes="100vw"
src="{{img_url @site.cover_image size="xl"}}"
alt=""
/>
{{/if}}
<div class="inner"> <div class="inner">
{{> "site-nav"}} {{> "site-nav"}}
<div class="site-header-content"> <div class="site-header-content">
<h1 class="site-title"> <h1 class="site-title">
{{#if @site.logo}} {{#if @site.logo}}
<img class="site-logo" src="{{img_url @site.logo size="l"}}" alt="{{@site.title}}" /> <img class="site-logo" src="{{img_url @site.logo size="m"}}" alt="{{@site.title}}" />
{{else}} {{else}}
{{@site.title}} {{@site.title}}
{{/if}} {{/if}}
</h1> </h1>
<h2 class="site-description">{{@site.description}}</h2> <p>{{@site.description}}</p>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,47 +0,0 @@
{{!--
Wow what the hell is going on in here even?
Ok so, several templates use this big header with a giant BG image. Nice idea, but big images
have a heavy impact on performance, so it's a good idea to make them responsive. Because we
can only get the image dynamically using Handlebars, and we can only set the image to properly
be a background image using CSS, we end up with a handful of inline styles.
If the template in question has a background image, then we render responsive image styles
for it, and apply those styles to the <header> tag. Else, we just output a <header> tag
with a `no-image` class so we can style it accordingly.
--}}
{{#if background}}
<style type="text/css">
.responsive-header-img {
background-image: url({{img_url background size='xl'}});
}
@media(max-width: 1000px) {
.responsive-header-img {
background-image: url({{img_url background size='l'}});
background-image: -webkit-image-set(url({{img_url background size='l'}}) 1x,
url({{img_url background size='xl'}}) 2x);
background-image: image-set(url({{img_url background size='l'}}) 1x,
url({{img_url background size='xl'}}) 2x);
}
}
@media(max-width: 600px) {
.responsive-header-img {
background-image: url({{img_url background size='m'}});
background-image: -webkit-image-set(url({{img_url background size='m'}}) 1x,
url({{img_url background size='l'}}) 2x);
background-image: image-set(url({{img_url background size='m'}}) 1x,
url({{img_url background size='l'}}) 2x);
}
}
</style>
<div class="outer site-header-background responsive-header-img">
{{else}}
<div class="outer site-header-background no-image">
{{/if}}

View File

@ -21,18 +21,14 @@
{{navigation type="secondary"}} {{navigation type="secondary"}}
{{else}} {{else}}
<div class="social-links"> <div class="social-links">
{{#if @site.facebook}}
<a class="social-link social-link-fb" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
{{/if}}
{{#if @site.twitter}} {{#if @site.twitter}}
<a class="social-link social-link-tw" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a> <a class="social-link social-link-tw" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
{{/if}} {{/if}}
</div> </div>
<a class="rss-button" href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/" title="RSS" target="_blank" rel="noopener">{{> "icons/rss"}}</a>
{{/if}} {{/if}}
{{#unless @member}} {{#unless @member}}
<a class="subscribe-button" href="#subscribe">Subscribe</a> <a class="subscribe-button" href="#/portal">Subscribe</a>
{{else}} {{else}}
<a class="subscribe-button" href="#/portal/account">Account</a> <a class="subscribe-button" href="#/portal/account">Account</a>
{{/unless}} {{/unless}}

View File

@ -98,7 +98,7 @@ into the {body} tag of the default.hbs template --}}
This query gets the latest 3 posts on the site, but adds a filter to This query gets the latest 3 posts on the site, but adds a filter to
exclude the post we're currently on from being included. --}} exclude the post we're currently on from being included. --}}
{{#get "posts" filter="id:-{{id}}" limit="3" as |more_posts|}} {{#get "posts" filter="id:-{{id}}" include="authors" limit="3" as |more_posts|}}
{{#if more_posts}} {{#if more_posts}}
{{#foreach more_posts}} {{#foreach more_posts}}
{{> "post-card"}} {{> "post-card"}}
@ -109,6 +109,7 @@ into the {body} tag of the default.hbs template --}}
</div> </div>
</aside> </aside>
{{/post}} {{/post}}

View File

@ -8,7 +8,7 @@
{{> "site-nav"}} {{> "site-nav"}}
</div> </div>
</div> </div>
{{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}} <div class="outer site-header-background">
<div class="inner site-header-content"> <div class="inner site-header-content">
<h1 class="site-title">{{name}}</h1> <h1 class="site-title">{{name}}</h1>
<h2 class="site-description"> <h2 class="site-description">