Merge upstream master

This commit is contained in:
ViViDboarder 2021-04-07 09:49:47 -07:00
commit 7b3cda6ea0
19 changed files with 1335 additions and 1149 deletions

View File

@ -7,8 +7,8 @@ jobs:
deploy:
runs-on: ubuntu-18.04
steps:
- uses: actions/checkout@master
- uses: TryGhost/action-deploy-theme@v1.2.0
- uses: actions/checkout@v2
- uses: TryGhost/action-deploy-theme@v1.2.1
with:
api-url: ${{ secrets.GHOST_ADMIN_API_URL }}
api-key: ${{ secrets.GHOST_ADMIN_API_KEY }}

View File

@ -4,29 +4,12 @@ on:
push:
branches:
- master
- 'renovate/*'
jobs:
build:
runs-on: ubuntu-18.04
strategy:
matrix:
node: [ '10' ]
name: Node ${{ matrix.node }}
test:
runs-on: ubuntu-latest
if: github.event_name == 'push' || (github.event_name == 'pull_request' && !startsWith(github.head_ref, 'renovate/'))
steps:
- uses: actions/checkout@v1
- name: Cache node modules
uses: actions/cache@v1
with:
path: node_modules
key: ${{ runner.OS }}-build-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.OS }}-build-${{ env.cache-name }}-
${{ runner.OS }}-build-
${{ runner.OS }}-
- name: Setup node
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node }}
- run: npm install yarn
- run: yarn install
- run: yarn
- run: yarn test:ci

View File

@ -54,8 +54,7 @@ yarn zip
# PostCSS Features Used
- Autoprefixer - Don't worry about writing browser prefixes of any kind, it's all done automatically with support for the latest 2 major versions of every browser.
- Variables - Simple pure CSS variables
- [Color Function](https://github.com/postcss/postcss-color-function)
- [Color Mod](https://github.com/jonathantneal/postcss-color-mod-function)
# SVG Icons

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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:#313b3f;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:#cbeafb}::selection{text-shadow:none;background:#cbeafb}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e3e9ed}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:#15171a;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:.5em solid #e5eff5}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:#26a8ed;text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility}h1{margin:0 0 .5em;font-size:5.5rem;font-weight:600}@media (max-width:500px){h1{font-size:2.2rem}}h2{margin:1.5em 0 .5em;font-size:2.2rem}@media (max-width:500px){h2{font-size:1.8rem}}h3{margin:1.5em 0 .5em;font-size:1.8rem;font-weight:500}@media (max-width:500px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:1.6rem;font-weight:500}h5,h6{margin:1.5em 0 .5em;font-size:1.4rem;font-weight:500}
:root{--blue:#3eb0ef;--green:#a4d037;--purple:#ad26b4;--yellow:#fecd35;--red:#f05230;--darkgrey:#15171a;--midgrey:#738a94;--lightgrey:#c5d2d9;--whitegrey:#e5eff5;--pink:#fa3a57;--brown:#a3821a;--darkmode:#1a1c20}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:#303a3e;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:#cbeafb}::selection{text-shadow:none;background:#cbeafb}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed}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:var(--darkgrey);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:.5em solid var(--whitegrey)}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:#26a6ed;text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility}h1{margin:0 0 .5em;font-size:5.5rem;font-weight:600}@media (max-width:500px){h1{font-size:2.2rem}}h2{margin:1.5em 0 .5em;font-size:2.2rem}@media (max-width:500px){h2{font-size:1.8rem}}h3{margin:1.5em 0 .5em;font-size:1.8rem;font-weight:500}@media (max-width:500px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:1.6rem;font-weight:500}h5,h6{margin:1.5em 0 .5em;font-size:1.4rem;font-weight:500}
/*# 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

@ -14,7 +14,7 @@
--whitegrey: #e5eff5;
--pink: #fa3a57;
--brown: #a3821a;
--darkmode: color(var(--darkgrey) l(+2%));
--darkmode: color-mod(var(--darkgrey) l(+2%));
}
/* Reset
@ -281,7 +281,7 @@ html {
}
body {
overflow-x: hidden;
color: color(var(--midgrey) l(-30%));
color: color-mod(var(--midgrey) l(-30%));
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;
@ -298,7 +298,7 @@ body {
::selection {
text-shadow: none;
background: color(var(--blue) lightness(+30%));
background: color-mod(var(--blue) lightness(+30%));
}
hr {
@ -309,7 +309,7 @@ hr {
padding: 0;
height: 1px;
border: 0;
border-top: 1px solid color(var(--lightgrey) l(+10%));
border-top: 1px solid color-mod(var(--lightgrey) l(+10%));
}
audio,
@ -416,7 +416,7 @@ blockquote cite a {
}
a {
color: color(var(--blue) l(-5%));
color: color-mod(var(--blue) l(-5%));
text-decoration: none;
}

View File

@ -114,7 +114,7 @@ body {
margin-top: 64px;
padding-bottom: 12px;
color: #fff;
background: color(var(--darkgrey) l(-5%)) no-repeat center center;
background: color-mod(var(--darkgrey) l(-5%)) no-repeat center center;
background-size: cover;
}
@ -205,6 +205,7 @@ body {
.site-home-header .site-description {
font-size: 2.2rem;
font-weight: 300;
text-align: center;
}
@ -235,7 +236,7 @@ body {
.site-archive-header .no-image .site-header-content {
padding: 5vw 0 10px;
border-bottom: 1px solid color(var(--lightgrey) l(+12%));
border-bottom: 1px solid color-mod(var(--lightgrey) l(+12%));
}
@ -249,7 +250,7 @@ body {
@media (max-width: 500px) {
.site-home-header .site-title {
font-size: 3.2rem;
font-size: 4.2rem;
}
.site-home-header .site-description {
@ -257,8 +258,19 @@ body {
}
.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;
}
}
@ -271,7 +283,7 @@ body {
right: 0;
left: 0;
z-index: 1000;
background: color(var(--darkgrey) l(-5%));
background: color-mod(var(--darkgrey) l(-5%));
}
.site-nav {
@ -280,7 +292,7 @@ body {
display: flex;
justify-content: space-between;
align-items: flex-start;
overflow-y: hidden;
overflow: hidden;
height: 64px;
font-size: 1.3rem;
}
@ -304,7 +316,7 @@ body {
.site-header-background:not(.responsive-header-img) .site-nav-left-wrapper:after,
.site-nav-main .site-nav-left-wrapper:after {
right: 0;
background: linear-gradient(to right, color(var(--darkgrey) l(-5%) a(0)) 0%,color(var(--darkgrey) l(-5%)) 100%);
background: linear-gradient(to right, color-mod(var(--darkgrey) l(-5%) a(0)) 0%,color-mod(var(--darkgrey) l(-5%)) 100%);
}
.site-nav-left {
@ -454,8 +466,8 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
.site-nav-right {
flex: 0 1 auto;
display: flex;
align-items: center;
justify-content: flex-end;
align-items: center;
padding: 10px 0;
height: 64px;
}
@ -517,8 +529,8 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
.subscribe-button {
display: block;
padding: 4px 10px;
margin: 0 0 0 10px;
padding: 4px 10px;
border: #fff 1px solid;
color: #fff;
line-height: 1em;
@ -612,7 +624,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
margin: 0 0 40px;
padding: 0 20px 40px;
min-height: 220px;
border-bottom: 1px solid color(var(--lightgrey) l(+12%));
border-bottom: 1px solid color-mod(var(--lightgrey) l(+12%));
background-size: cover;
}
@ -699,7 +711,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
display: block;
width: 100%;
height: 100%;
background: color(var(--lightgrey) l(+10%));
background: color-mod(var(--lightgrey) l(+10%));
border-radius: 100%;
object-fit: cover;
@ -770,7 +782,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
display: flex;
flex-direction: column;
margin: 2px 0 0 6px;
color: color(var(--midgrey) l(+10%));
color: color-mod(var(--midgrey) l(+10%));
font-size: 1.2rem;
line-height: 1.4em;
font-weight: 400;
@ -783,7 +795,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
}
.post-card-byline-content a {
color: color(var(--darkgrey) l(+20%));
color: color-mod(var(--darkgrey) l(+20%));
font-weight: 600;
}
@ -801,7 +813,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
display: flex;
flex-direction: column;
margin-left: 5px;
color: color(var(--midgrey) l(-10%));
color: color-mod(var(--midgrey) l(-10%));
font-size: 1.3rem;
line-height: 1.4em;
font-weight: 500;
@ -838,7 +850,7 @@ make sure this only happens on large viewports / desktop-ish devices.
}
.post-card-large:hover {
border-bottom-color: color(var(--lightgrey) l(+10%));
border-bottom-color: color-mod(var(--lightgrey) l(+10%));
}
.post-card-large:not(.no-image) .post-card-header {
@ -968,7 +980,7 @@ make sure this only happens on large viewports / desktop-ish devices.
.post-full-title {
margin: 0 0 0.2em;
color: color(var(--darkgrey) l(-5%));
color: color-mod(var(--darkgrey) l(-5%));
}
.post-full-custom-excerpt {
@ -992,7 +1004,7 @@ make sure this only happens on large viewports / desktop-ish devices.
align-items: center;
overflow: hidden;
margin: 25px 0 50px;
background: color(var(--lightgrey) l(+10%));
background: color-mod(var(--lightgrey) l(+10%));
border-radius: 3px;
}
@ -1092,7 +1104,7 @@ make sure this only happens on large viewports / desktop-ish devices.
.post-full-content strong,
.post-full-content em {
color: color(var(--darkgrey) l(-5%));
color: color-mod(var(--darkgrey) l(-5%));
}
.post-full-content small {
@ -1157,7 +1169,7 @@ Usage (In Ghost editor):
.post-full-content blockquote {
margin: 0 0 1.5em;
padding: 0 1.5em;
border-left: #3eb0ef 3px solid;
border-left: color-mod(var(--blue)) 3px solid;
}
@media (max-width: 500px) {
.post-full-content blockquote {
@ -1195,16 +1207,16 @@ Usage (In Ghost editor):
margin: 1.5em 0 3em;
padding: 20px;
max-width: 100%;
border: color(var(--darkgrey) l(-10%)) 1px solid;
border: color-mod(var(--darkgrey) l(-10%)) 1px solid;
color: var(--whitegrey);
font-size: 1.4rem;
line-height: 1.5em;
background: color(var(--darkgrey) l(-3%));
background: color-mod(var(--darkgrey) l(-3%));
border-radius: 5px;
}
.post-full-content pre ::selection {
color: color(var(--midgrey) l(-25%));
color: color-mod(var(--midgrey) l(-25%));
}
.post-full-content pre code {
@ -1235,7 +1247,7 @@ Usage (In Ghost editor):
margin-left: -10px;
width: 1px;
height: 30px;
background: color(var(--lightgrey) l(+10%));
background: color-mod(var(--lightgrey) l(+10%));
box-shadow: #fff 0 0 0 5px;
transform: rotate(45deg);
}
@ -1250,7 +1262,7 @@ Usage (In Ghost editor):
.post-full-content h4,
.post-full-content h5,
.post-full-content h6 {
color: color(var(--darkgrey) l(-5%));
color: color-mod(var(--darkgrey) l(-5%));
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
@ -1408,7 +1420,8 @@ Usage (In Ghost editor):
.post-full-title {
margin-top: 0.2em;
font-size: 3.3rem;
font-size: 4.2rem;
line-height: 1.05em;
}
.post-full-image {
@ -1469,13 +1482,13 @@ Usage (In Ghost editor):
letter-spacing: 0.2px;
text-align: left;
text-transform: uppercase;
background-color: color(var(--whitegrey) l(+4%));
background-color: color-mod(var(--whitegrey) l(+4%));
}
.post-full-content table th,
.post-full-content table td {
padding: 6px 12px;
border: color(var(--whitegrey) l(-1%) s(-5%)) 1px solid;
border: color-mod(var(--whitegrey) l(-1%) s(-5%)) 1px solid;
}
@ -1487,7 +1500,7 @@ Usage (In Ghost editor):
justify-content: space-between;
margin: 35px 0 0;
padding-top: 15px;
border-top: 1px solid color(var(--lightgrey) l(+10%));
border-top: 1px solid color-mod(var(--lightgrey) l(+10%));
}
.post-full-byline-content {
@ -1503,7 +1516,7 @@ Usage (In Ghost editor):
.post-full-byline-meta {
margin: 2px 0 0;
color: color(var(--midgrey) l(+10%));
color: color-mod(var(--midgrey) l(+10%));
font-size: 1.2rem;
line-height: 1.2em;
letter-spacing: 0.2px;
@ -1518,7 +1531,7 @@ Usage (In Ghost editor):
}
.post-full-byline-meta h4 a {
color: color(var(--darkgrey) l(+10%));
color: color-mod(var(--darkgrey) l(+10%));
}
.post-full-byline-meta h4 a:hover {
@ -1598,7 +1611,7 @@ Usage (In Ghost editor):
.author-card .author-info p {
margin: 4px 0 0;
color: color(var(--midgrey) l(-10%));
color: color-mod(var(--midgrey) l(-10%));
}
.author-card .author-info .bio h2 {
@ -1652,8 +1665,12 @@ Usage (In Ghost editor):
@media (max-width: 500px) {
.author-avatar {
width: 32px;
height: 32px;
width: 36px;
height: 36px;
}
.post-full-byline {
margin-top: 20px;
}
.post-full-byline-meta {
@ -1672,9 +1689,9 @@ Usage (In Ghost editor):
.subscribe-form {
margin: 1.5em 0;
padding: 6.5vw 7vw 8vw;
border: color(var(--lightgrey) l(+10%)) 1px solid;
border: color-mod(var(--lightgrey) l(+10%)) 1px solid;
text-align: center;
background: linear-gradient(color(var(--whitegrey) l(+6%)), color(var(--whitegrey) l(+4%)));
background: linear-gradient(color-mod(var(--whitegrey) l(+6%)), color-mod(var(--whitegrey) l(+4%)));
border-radius: 3px;
}
@ -1712,7 +1729,7 @@ Usage (In Ghost editor):
display: block;
padding: 10px;
width: 100%;
border: color(var(--lightgrey) l(+7%)) 1px solid;
border: color-mod(var(--lightgrey) l(+7%)) 1px solid;
color: var(--midgrey);
font-size: 1.8rem;
line-height: 1em;
@ -1726,7 +1743,7 @@ Usage (In Ghost editor):
.subscribe-email:focus {
outline: 0;
border-color: color(var(--lightgrey) l(-2%));
border-color: color-mod(var(--lightgrey) l(-2%));
}
.subscribe-form button {
@ -1742,10 +1759,10 @@ Usage (In Ghost editor):
font-weight: 400;
text-align: center;
background: linear-gradient(
color(var(--blue) whiteness(+7%)),
color(var(--blue) lightness(-7%) saturation(-10%)) 60%,
color(var(--blue) lightness(-7%) saturation(-10%)) 90%,
color(var(--blue) lightness(-4%) saturation(-10%))
color-mod(var(--blue) whiteness(+7%)),
color-mod(var(--blue) lightness(-7%) saturation(-10%)) 60%,
color-mod(var(--blue) lightness(-7%) saturation(-10%)) 90%,
color-mod(var(--blue) lightness(-4%) saturation(-10%))
);
border-radius: 5px;
@ -1754,7 +1771,7 @@ Usage (In Ghost editor):
.subscribe-form button:active,
.subscribe-form button:focus {
background: color(var(--blue) lightness(-9%) saturation(-10%));
background: color-mod(var(--blue) lightness(-9%) saturation(-10%));
}
.subscribe-form .button-loader,
@ -1794,7 +1811,7 @@ Usage (In Ghost editor):
.subscribe-form .success .message-success {
display: block;
color: color(var(--green) l(-5%));
color: color-mod(var(--green) l(-5%));
}
.subscribe-form .invalid .message-error,
@ -1844,7 +1861,7 @@ Usage (In Ghost editor):
.read-next {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
background: color(var(--darkgrey) l(-5%));
background: color-mod(var(--darkgrey) l(-5%));
}
.read-next-feed {
@ -1902,7 +1919,7 @@ Usage (In Ghost editor):
overflow: hidden;
margin: 0 25px 50px;
padding: 25px;
background: linear-gradient(color(var(--darkgrey) l(+2%)), color(var(--darkgrey) l(-5%)));
background: linear-gradient(color-mod(var(--darkgrey) l(+2%)), color-mod(var(--darkgrey) l(-5%)));
border-radius: 3px;
}
@ -2057,6 +2074,7 @@ Usage (In Ghost editor):
}
.post-full-content .kg-image {
margin: 0 auto;
max-width: 100%;
}
@ -2089,12 +2107,13 @@ Usage (In Ghost editor):
}
.post-full-content figcaption {
margin: 1.0em 0 0;
color: color(var(--midgrey) l(-10%));
margin: 1.0em auto 0;
color: color-mod(var(--midgrey) l(-10%));
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-size: 75%;
line-height: 1.5em;
text-align: center;;
text-align: center;
max-width: 1040px;
}
.kg-width-full figcaption {
@ -2197,7 +2216,7 @@ Usage (In Ghost editor):
}
.kg-bookmark-title {
color: color(var(--midgrey) l(-30%));
color: color-mod(var(--midgrey) l(-30%));
font-size: 1.6rem;
line-height: 1.5em;
font-weight: 600;
@ -2213,7 +2232,7 @@ Usage (In Ghost editor):
overflow-y: hidden;
margin-top: 12px;
max-height: 48px;
color: color(var(--midgrey) l(-10%));
color: color-mod(var(--midgrey) l(-10%));
font-size: 1.5rem;
line-height: 1.5em;
font-weight: 400;
@ -2244,7 +2263,7 @@ Usage (In Ghost editor):
flex-wrap: wrap;
align-items: center;
margin-top: 14px;
color: color(var(--midgrey) l(-10%));
color: color-mod(var(--midgrey) l(-10%));
font-size: 1.5rem;
font-weight: 400;
}
@ -2337,6 +2356,10 @@ Usage (In Ghost editor):
padding: 10vw 0 10px;
}
.site-archive-header .author-header {
align-items: center;
}
.site-archive-header .no-image .author-header {
padding-bottom: 20px;
}
@ -2351,7 +2374,7 @@ Usage (In Ghost editor):
.site-header-content .author-profile-image {
z-index: 10;
flex-shrink: 0;
margin: 5px 0 0;
margin: -4px 0 0;
width: 110px;
height: 110px;
box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;
@ -2360,10 +2383,10 @@ Usage (In Ghost editor):
.author-header-content .author-bio {
z-index: 10;
flex-shrink: 0;
margin: 6px 0 -6px;
margin: 6px 0 0;
max-width: 46em;
font-size: 2.0rem;
line-height: 1.4em;
line-height: 1.3em;
font-weight: 400;
opacity: 0.8;
}
@ -2378,6 +2401,7 @@ Usage (In Ghost editor):
font-weight: 400;
letter-spacing: 0.2px;
text-transform: uppercase;
white-space: nowrap;
}
.author-header-content .social-link:first-of-type {
@ -2407,14 +2431,10 @@ Usage (In Ghost editor):
opacity: 1;
}
.author-social-link {
padding: 10px 0;
}
.author-social-link {
display: inline-block;
margin: 0;
padding: 10px 0;
padding: 6px 0;
}
.author-location + .author-stats:before,
@ -2433,6 +2453,14 @@ Usage (In Ghost editor):
color: var(--midgrey);
}
@media (max-width: 700px) {
.author-location,
.author-stats,
.author-stats + .author-social-link:first-of-type:before {
display: none;
}
}
@media (max-width: 500px) {
.author-header {
padding: 10px 0 0;
@ -2443,23 +2471,31 @@ Usage (In Ghost editor):
}
.author-header-content {
margin-left: 20px;
align-items: center;
margin: 16px 0 0 0;
}
.site-header-content .author-profile-image {
width: 80px;
height: 80px;
width: 96px;
height: 96px;
}
.author-header-content .author-bio {
font-size: 1.8rem;
line-height: 1.3em;
letter-spacing: 0;
text-align: center;
}
.author-location,
.author-stats {
display: none;
.author-header-content .author-meta {
margin-top: 8px;
}
.author-location + .author-stats:before,
.author-stats + .author-social-link:before,
.author-social-link + .author-social-link:before {
display: inline;
margin: 0 6px;
}
}
@ -2485,7 +2521,7 @@ Usage (In Ghost editor):
.error-message {
padding-bottom: 10vw;
border-bottom: 1px solid color(var(--lightgrey) l(+10%));
border-bottom: 1px solid color-mod(var(--lightgrey) l(+10%));
text-align: center;
}
@ -2573,7 +2609,7 @@ Usage (In Ghost editor):
transform: translateY(-175%);
}
.subscribe-close {
.subscribe-close-overlay {
position: absolute;
top: 0;
right: 0;
@ -2582,33 +2618,44 @@ Usage (In Ghost editor):
display: block;
}
.subscribe-close:before {
.subscribe-close-button {
position: absolute;
top: 16px;
right: 20px;
z-index: 2000;
display: block;
width: 40px;
height: 40px;
}
.subscribe-close-button:before {
content: "";
position: absolute;
top: 32px;
right: 25px;
top: 20px;
right: 4px;
display: block;
width: 20px;
width: 32px;
height: 1px;
background: #fff;
opacity: 0.8;
transform: rotate(45deg);
}
.subscribe-close:after {
.subscribe-close-button:after {
content: "";
position: absolute;
top: 32px;
right: 25px;
top: 20px;
right: 4px;
display: block;
width: 20px;
width: 32px;
height: 1px;
background: #fff;
opacity: 0.8;
transform: rotate(-45deg);
}
.subscribe-close:hover {
.subscribe-close-overlay:hover,
.subscribe-close-button:hover {
cursor: default;
}
@ -2618,7 +2665,7 @@ Usage (In Ghost editor):
right: 0;
bottom: 0;
left: 0;
z-index: 9000;
z-index: 2000;
display: flex;
justify-content: center;
align-items: center;
@ -2628,20 +2675,14 @@ Usage (In Ghost editor):
pointer-events: none;
}
.subscribe-overlay .subscribe-close:before,
.subscribe-overlay .subscribe-close:after {
top: 36px;
width: 30px;
}
.subscribe-overlay:target {
z-index: 2001;
opacity: 1;
pointer-events: auto;
}
.subscribe-overlay-content {
position: relative;
z-index: 9999;
margin: 0 0 5vw 0;
padding: 4vw;
color: #fff;
@ -2710,7 +2751,7 @@ Usage (In Ghost editor):
.subscribe-email:focus {
outline: 0;
border-color: color(var(--lightgrey) l(-2%));
border-color: color-mod(var(--lightgrey) l(-2%));
}
.subscribe-overlay button {
@ -2725,10 +2766,10 @@ Usage (In Ghost editor):
font-weight: 400;
text-align: center;
background: linear-gradient(
color(var(--blue) whiteness(+7%)),
color(var(--blue) lightness(-7%) saturation(-10%)) 60%,
color(var(--blue) lightness(-7%) saturation(-10%)) 90%,
color(var(--blue) lightness(-4%) saturation(-10%))
color-mod(var(--blue) whiteness(+7%)),
color-mod(var(--blue) lightness(-7%) saturation(-10%)) 60%,
color-mod(var(--blue) lightness(-7%) saturation(-10%)) 90%,
color-mod(var(--blue) lightness(-4%) saturation(-10%))
);
border-radius: 8px;
@ -2737,13 +2778,19 @@ Usage (In Ghost editor):
.subscribe-overlay button:active,
.subscribe-overlay button:focus {
background: color(var(--blue) lightness(-9%) saturation(-10%));
background: color-mod(var(--blue) lightness(-9%) saturation(-10%));
}
.subscribe-overlay .loading .button-loader {
top: 5px;
}
@media (max-width: 500px) {
.subscribe-overlay button {
margin: 12px 0 0;
}
}
/* 11. Site Footer
/* ---------------------------------------------------------- */
@ -2753,7 +2800,7 @@ Usage (In Ghost editor):
padding-top: 20px;
padding-bottom: 60px;
color: #fff;
background: color(var(--darkgrey) l(-5%));
background: color-mod(var(--darkgrey) l(-5%));
}
.site-footer-content {
@ -2832,7 +2879,7 @@ Usage (In Ghost editor):
.post-card,
.post-card:hover {
border-bottom-color: color(var(--darkmode) l(+8%));
border-bottom-color: color-mod(var(--darkmode) l(+8%));
}
.author-profile-image {
@ -2856,12 +2903,12 @@ Usage (In Ghost editor):
}
.post-card-excerpt {
color: color(var(--midgrey) l(+10%));
color: color-mod(var(--midgrey) l(+10%));
}
.author-avatar,
.static-avatar {
border-color: color(var(--darkgrey) l(+2%));
border-color: color-mod(var(--darkgrey) l(+2%));
}
.site-main,
@ -2879,15 +2926,15 @@ Usage (In Ghost editor):
}
.post-full-custom-excerpt {
color: color(var(--midgrey) l(+10%));
color: color-mod(var(--midgrey) l(+10%));
}
.post-full-image {
background-color: color(var(--darkmode) l(+8%));
background-color: color-mod(var(--darkmode) l(+8%));
}
.post-full-byline {
border-top-color: color(var(--darkmode) l(+15%));
border-top-color: color-mod(var(--darkmode) l(+15%));
}
.post-full-byline-meta h4 a {
@ -2899,12 +2946,12 @@ Usage (In Ghost editor):
}
.author-list-item .author-card {
background: color(var(--darkmode) l(+4%));
background: color-mod(var(--darkmode) l(+4%));
box-shadow: 0 12px 26px rgba(0,0,0,0.4);
}
.author-list-item .author-card:before {
border-top-color: color(var(--darkmode) l(+4%));
border-top-color: color-mod(var(--darkmode) l(+4%));
}
.no-image .author-social-link a {
@ -2938,7 +2985,7 @@ Usage (In Ghost editor):
}
hr {
border-top-color: color(var(--darkmode) l(+8%));
border-top-color: color-mod(var(--darkmode) l(+8%));
}
.post-full-content figcaption {
@ -2946,21 +2993,21 @@ Usage (In Ghost editor):
}
.post-full-content table td:first-child {
background-image: linear-gradient(to right, var(--darkmode) 50%, color(var(--darkmode) a(0%)) 100%);
background-image: linear-gradient(to right, var(--darkmode) 50%, color-mod(var(--darkmode) a(0%)) 100%);
}
.post-full-content table td:last-child {
background-image: linear-gradient(to left, var(--darkmode) 50%, color(var(--darkmode) a(0%)) 100%);
background-image: linear-gradient(to left, var(--darkmode) 50%, color-mod(var(--darkmode) a(0%)) 100%);
}
.post-full-content table th {
color: rgba(255, 255, 255, 0.85);
background-color: color(var(--darkmode) l(+8%));
background-color: color-mod(var(--darkmode) l(+8%));
}
.post-full-content table th,
.post-full-content table td {
border: color(var(--darkmode) l(+8%)) 1px solid;
border: color-mod(var(--darkmode) l(+8%)) 1px solid;
}
.post-full-content .kg-bookmark-container,
@ -2987,7 +3034,7 @@ Usage (In Ghost editor):
}
.site-archive-header .no-image .site-header-content {
border-bottom-color: color(var(--darkmode) l(+15%));
border-bottom-color: color-mod(var(--darkmode) l(+15%));
}
.site-header-content .author-profile-image {
@ -2996,7 +3043,7 @@ Usage (In Ghost editor):
.subscribe-form {
border: none;
background: linear-gradient(color(var(--darkmode) l(-6%)), color(var(--darkmode) l(-3%)));
background: linear-gradient(color-mod(var(--darkmode) l(-6%)), color-mod(var(--darkmode) l(-3%)));
}
.subscribe-form-title {
@ -3008,13 +3055,13 @@ Usage (In Ghost editor):
}
.subscribe-email {
border-color: color(var(--darkmode) l(+6%));
border-color: color-mod(var(--darkmode) l(+6%));
color: rgba(255, 255, 255, 0.9);
background: color(var(--darkmode) l(+3%));
background: color-mod(var(--darkmode) l(+3%));
}
.subscribe-email:focus {
border-color: color(var(--darkmode) l(+25%));
border-color: color-mod(var(--darkmode) l(+25%));
}
.subscribe-form button {
@ -3023,10 +3070,10 @@ Usage (In Ghost editor):
.subscribe-form .invalid .message-error,
.subscribe-form .error .message-error {
color: color(var(--red) l(+5%) s(-5%));
color: color-mod(var(--red) l(+5%) s(-5%));
}
.subscribe-form .success .message-success {
color: color(var(--green) l(+5%) s(-5%));
color: color-mod(var(--green) l(+5%) s(-5%));
}
}

View File

@ -12,6 +12,8 @@
<div class="site-header-content author-header">
{{#if profile_image}}
<img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
{{else}}
<span class="author-profile-image">{{> "icons/avatar"}}</span>
{{/if}}
<div class="author-header-content">
<h1 class="site-title">{{name}}</h1>

View File

@ -1,6 +1,5 @@
{
"github": {
"username": "<username>",
"token": "<gh-personal-access-token>"
}
}

View File

@ -55,7 +55,8 @@
</div>
<div id="subscribe" class="subscribe-overlay">
<a class="subscribe-close" href="#"></a>
<a class="subscribe-close-overlay" href="#"></a>
<a class="subscribe-close-button" href="#"></a>
<div class="subscribe-overlay-content">
{{#if @site.logo}}
<img class="subscribe-overlay-logo" src="{{@site.logo}}" alt="{{@site.title}}" />

View File

@ -1,5 +1,8 @@
const {series, watch, src, dest, parallel} = require('gulp');
const pump = require('pump');
const path = require('path');
const releaseUtils = require('@tryghost/release-utils');
const inquirer = require('inquirer');
// gulp plugins and utils
const livereload = require('gulp-livereload');
@ -12,11 +15,14 @@ const fs = require('fs');
// postcss plugins
const autoprefixer = require('autoprefixer');
const colorFunction = require('postcss-color-function');
const colorFunction = require('postcss-color-mod-function');
const cssnano = require('cssnano');
const customProperties = require('postcss-custom-properties');
const easyimport = require('postcss-easy-import');
const REPO = 'TryGhost/Casper';
const REPO_READONLY = 'TryGhost/Casper';
const CHANGELOG_PATH = path.join(process.cwd(), '.', 'changelog.md');
function serve(done) {
livereload.listen();
done();
@ -39,17 +45,14 @@ function hbs(done) {
}
function css(done) {
const processors = [
easyimport,
customProperties({preserve: false}),
colorFunction(),
autoprefixer(),
cssnano()
];
pump([
src('assets/css/*.css', {sourcemaps: true}),
postcss(processors),
postcss([
easyimport,
colorFunction(),
autoprefixer(),
cssnano()
]),
dest('assets/built/', {sourcemaps: '.'}),
livereload()
], handleError(done));
@ -70,18 +73,17 @@ function js(done) {
}
function zipper(done) {
const targetDir = 'dist/';
const themeName = require('./package.json').name;
const filename = themeName + '.zip';
const filename = require('./package.json').name + '.zip';
pump([
src([
'**',
'!node_modules', '!node_modules/**',
'!dist', '!dist/**'
'!dist', '!dist/**',
'!yarn-error.log'
]),
zip(filename),
dest(targetDir)
dest('dist/')
], handleError(done));
}
@ -89,128 +91,97 @@ const cssWatcher = () => watch('assets/css/**', css);
const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs'], hbs);
const watcher = parallel(cssWatcher, hbsWatcher);
const build = series(css, js);
const dev = series(build, serve, watcher);
exports.build = build;
exports.zip = series(build, zipper);
exports.default = dev;
exports.default = series(build, serve, watcher);
// release imports
const path = require('path');
const releaseUtils = require('@tryghost/release-utils');
let config;
try {
config = require('./config');
} catch (err) {
config = null;
}
const REPO = 'TryGhost/Casper';
const USER_AGENT = 'Casper';
const CHANGELOG_PATH = path.join(process.cwd(), '.', 'changelog.md');
const changelog = ({previousVersion}) => {
const changelog = new releaseUtils.Changelog({
changelogPath: CHANGELOG_PATH,
folder: path.join(process.cwd(), '.')
});
changelog
.write({
githubRepoPath: `https://github.com/${REPO}`,
lastVersion: previousVersion
})
.sort()
.clean();
};
const previousRelease = () => {
return releaseUtils
.releases
.get({
userAgent: USER_AGENT,
uri: `https://api.github.com/repos/${REPO}/releases`
})
.then((response) => {
if (!response || !response.length) {
console.log('No releases found. Skipping');
return;
}
let prevVersion = response[0].tag_name || response[0].name;
console.log(`Previous version ${prevVersion}`);
return prevVersion;
});
};
/**
*
* `yarn ship` will trigger `postship` task.
*
* [optional] For full automation
*
* `GHOST=2.10.1,2.10.0 yarn ship`
* First value: Ships with Ghost
* Second value: Compatible with Ghost/GScan
*
* You can manually run in case the task has thrown an error.
*
* `npm_package_version=0.5.0 gulp release`
*/
const release = () => {
exports.release = () => {
// @NOTE: https://yarnpkg.com/lang/en/docs/cli/version/
// require(./package.json) can run into caching issues, this re-reads from file everytime on release
var packageJSON = JSON.parse(fs.readFileSync('./package.json'));
const newVersion = packageJSON.version;
let shipsWithGhost = '{version}';
let compatibleWithGhost = '2.10.0';
const ghostEnvValues = process.env.GHOST || null;
if (ghostEnvValues) {
shipsWithGhost = ghostEnvValues.split(',')[0];
compatibleWithGhost = ghostEnvValues.split(',')[1];
if (!compatibleWithGhost) {
compatibleWithGhost = '2.10.0';
}
}
if (!newVersion || newVersion === '') {
console.log('Invalid version.');
console.log(`Invalid version: ${newVersion}`);
return;
}
console.log(`\nDraft release for ${newVersion}.`);
console.log(`\nCreating release for ${newVersion}...`);
if (!config || !config.github || !config.github.username || !config.github.token) {
let config;
try {
config = require('./config');
} catch (err) {
config = null;
}
if (!config || !config.github || !config.github.token) {
console.log('Please copy config.example.json and configure Github token.');
return;
}
return previousRelease()
.then((previousVersion) => {
changelog({previousVersion});
let compatibleWithGhost;
return releaseUtils
.releases
.create({
draft: true,
preRelease: false,
tagName: newVersion,
releaseName: newVersion,
userAgent: USER_AGENT,
uri: `https://api.github.com/repos/${REPO}/releases`,
github: {
username: config.github.username,
token: config.github.token
},
content: [`**Ships with Ghost ${shipsWithGhost} Compatible with Ghost >= ${compatibleWithGhost}**\n\n`],
changelogPath: CHANGELOG_PATH
})
.then((response) => {
console.log(`\nRelease draft generated: ${response.releaseUrl}\n`);
});
return inquirer.prompt([{
type: 'input',
name: 'compatibleWithGhost',
message: 'Which version of Ghost is it compatible with?',
default: '3.0.0'
}])
.then(result => {
compatibleWithGhost = result.compatibleWithGhost;
return Promise.resolve();
})
.then(() => releaseUtils.releases.get({
userAgent: 'Casper',
uri: `https://api.github.com/repos/${REPO_READONLY}/releases`
}))
.then((response) => {
if (!response || !response.length) {
console.log('No releases found. Skipping...');
return;
}
let previousVersion = response[0].tag_name || response[0].name;
console.log(`Previous version: ${previousVersion}`);
return Promise.resolve(previousVersion);
})
.then((previousVersion) => {
const changelog = new releaseUtils.Changelog({
changelogPath: CHANGELOG_PATH,
folder: path.join(process.cwd(), '.')
});
};
exports.release = release;
changelog
.write({
githubRepoPath: `https://github.com/${REPO}`,
lastVersion: previousVersion
})
.sort()
.clean();
return Promise.resolve();
})
.then(() => releaseUtils.releases.create({
draft: true,
preRelease: false,
tagName: newVersion,
releaseName: newVersion,
userAgent: 'Casper',
uri: `https://api.github.com/repos/${REPO}/releases`,
github: {
token: config.github.token
},
content: [`**Compatible with Ghost ≥ ${compatibleWithGhost}**\n\n`],
changelogPath: CHANGELOG_PATH
}))
.then((response) => {
console.log(`\nRelease draft generated: ${response.releaseUrl}\n`);
return Promise.resolve();
})
.catch((err) => {
console.error(err);
process.exit(1);
});
};

View File

@ -2,7 +2,7 @@
"name": "vivid-casper",
"description": "Minor tweaks from the default personal blogging theme for Ghost. Beautiful, minimal and responsive.",
"demo": "https://demo.ghost.io",
"version": "3.0.6",
"version": "3.1.0",
"engines": {
"ghost": ">=3.0.0",
"ghost-api": "v3"
@ -46,19 +46,19 @@
"bugs": "https://github.com/ViViDboarder/Casper/issues",
"contributors": "https://github.com/ViViDboarder/Casper/graphs/contributors",
"devDependencies": {
"@tryghost/release-utils": "0.3.3",
"autoprefixer": "9.7.1",
"@tryghost/release-utils": "0.6.3",
"autoprefixer": "9.8.6",
"beeper": "2.0.0",
"cssnano": "4.1.10",
"gscan": "3.2.1",
"gscan": "3.5.5",
"gulp": "4.0.2",
"gulp-concat": "2.6.1",
"gulp-livereload": "4.0.2",
"gulp-postcss": "8.0.0",
"gulp-uglify": "3.0.2",
"gulp-zip": "5.0.1",
"postcss-color-function": "4.1.0",
"postcss-custom-properties": "9.0.2",
"gulp-zip": "5.0.2",
"inquirer": "7.3.3",
"postcss-color-mod-function": "3.0.3",
"postcss-easy-import": "3.0.0",
"pump": "3.0.0"
},

View File

@ -10,6 +10,7 @@
{{img_url feature_image size="l"}} 1000w,
{{img_url feature_image size="xl"}} 2000w"
sizes="(max-width: 1000px) 400px, 700px"
loading="lazy"
src="{{img_url feature_image size="m"}}"
alt="{{title}}"
/>

View File

@ -1,8 +1,5 @@
{
"extends": [
"@tryghost:theme"
],
"node": {
"supportPolicy": ["lts_latest"]
}
]
}

1924
yarn.lock

File diff suppressed because it is too large Load Diff