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: deploy:
runs-on: ubuntu-18.04 runs-on: ubuntu-18.04
steps: steps:
- uses: actions/checkout@master - uses: actions/checkout@v2
- uses: TryGhost/action-deploy-theme@v1.2.0 - uses: TryGhost/action-deploy-theme@v1.2.1
with: with:
api-url: ${{ secrets.GHOST_ADMIN_API_URL }} api-url: ${{ secrets.GHOST_ADMIN_API_URL }}
api-key: ${{ secrets.GHOST_ADMIN_API_KEY }} api-key: ${{ secrets.GHOST_ADMIN_API_KEY }}

View File

@ -4,29 +4,12 @@ on:
push: push:
branches: branches:
- master - master
- 'renovate/*'
jobs: jobs:
build: test:
runs-on: ubuntu-18.04 runs-on: ubuntu-latest
strategy: if: github.event_name == 'push' || (github.event_name == 'pull_request' && !startsWith(github.head_ref, 'renovate/'))
matrix:
node: [ '10' ]
name: Node ${{ matrix.node }}
steps: steps:
- uses: actions/checkout@v1 - uses: actions/checkout@v1
- name: Cache node modules - run: yarn
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 test:ci - run: yarn test:ci

View File

@ -54,8 +54,7 @@ yarn zip
# PostCSS Features Used # 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. - 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 Mod](https://github.com/jonathantneal/postcss-color-mod-function)
- [Color Function](https://github.com/postcss/postcss-color-function)
# SVG Icons # 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 */ /*# 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; --whitegrey: #e5eff5;
--pink: #fa3a57; --pink: #fa3a57;
--brown: #a3821a; --brown: #a3821a;
--darkmode: color(var(--darkgrey) l(+2%)); --darkmode: color-mod(var(--darkgrey) l(+2%));
} }
/* Reset /* Reset
@ -281,7 +281,7 @@ html {
} }
body { body {
overflow-x: hidden; 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-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-size: 1.6rem; font-size: 1.6rem;
line-height: 1.6em; line-height: 1.6em;
@ -298,7 +298,7 @@ body {
::selection { ::selection {
text-shadow: none; text-shadow: none;
background: color(var(--blue) lightness(+30%)); background: color-mod(var(--blue) lightness(+30%));
} }
hr { hr {
@ -309,7 +309,7 @@ hr {
padding: 0; padding: 0;
height: 1px; height: 1px;
border: 0; border: 0;
border-top: 1px solid color(var(--lightgrey) l(+10%)); border-top: 1px solid color-mod(var(--lightgrey) l(+10%));
} }
audio, audio,
@ -416,7 +416,7 @@ blockquote cite a {
} }
a { a {
color: color(var(--blue) l(-5%)); color: color-mod(var(--blue) l(-5%));
text-decoration: none; text-decoration: none;
} }

View File

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

View File

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

View File

@ -55,7 +55,8 @@
</div> </div>
<div id="subscribe" class="subscribe-overlay"> <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"> <div class="subscribe-overlay-content">
{{#if @site.logo}} {{#if @site.logo}}
<img class="subscribe-overlay-logo" src="{{@site.logo}}" alt="{{@site.title}}" /> <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 {series, watch, src, dest, parallel} = require('gulp');
const pump = require('pump'); const pump = require('pump');
const path = require('path');
const releaseUtils = require('@tryghost/release-utils');
const inquirer = require('inquirer');
// gulp plugins and utils // gulp plugins and utils
const livereload = require('gulp-livereload'); const livereload = require('gulp-livereload');
@ -12,11 +15,14 @@ const fs = require('fs');
// postcss plugins // postcss plugins
const autoprefixer = require('autoprefixer'); const autoprefixer = require('autoprefixer');
const colorFunction = require('postcss-color-function'); const colorFunction = require('postcss-color-mod-function');
const cssnano = require('cssnano'); const cssnano = require('cssnano');
const customProperties = require('postcss-custom-properties');
const easyimport = require('postcss-easy-import'); 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) { function serve(done) {
livereload.listen(); livereload.listen();
done(); done();
@ -39,17 +45,14 @@ function hbs(done) {
} }
function css(done) { function css(done) {
const processors = [ pump([
src('assets/css/*.css', {sourcemaps: true}),
postcss([
easyimport, easyimport,
customProperties({preserve: false}),
colorFunction(), colorFunction(),
autoprefixer(), autoprefixer(),
cssnano() cssnano()
]; ]),
pump([
src('assets/css/*.css', {sourcemaps: true}),
postcss(processors),
dest('assets/built/', {sourcemaps: '.'}), dest('assets/built/', {sourcemaps: '.'}),
livereload() livereload()
], handleError(done)); ], handleError(done));
@ -70,18 +73,17 @@ function js(done) {
} }
function zipper(done) { function zipper(done) {
const targetDir = 'dist/'; const filename = require('./package.json').name + '.zip';
const themeName = require('./package.json').name;
const filename = themeName + '.zip';
pump([ pump([
src([ src([
'**', '**',
'!node_modules', '!node_modules/**', '!node_modules', '!node_modules/**',
'!dist', '!dist/**' '!dist', '!dist/**',
'!yarn-error.log'
]), ]),
zip(filename), zip(filename),
dest(targetDir) dest('dist/')
], handleError(done)); ], handleError(done));
} }
@ -89,15 +91,23 @@ const cssWatcher = () => watch('assets/css/**', css);
const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs'], hbs); const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs'], hbs);
const watcher = parallel(cssWatcher, hbsWatcher); const watcher = parallel(cssWatcher, hbsWatcher);
const build = series(css, js); const build = series(css, js);
const dev = series(build, serve, watcher);
exports.build = build; exports.build = build;
exports.zip = series(build, zipper); exports.zip = series(build, zipper);
exports.default = dev; exports.default = series(build, serve, watcher);
// release imports exports.release = () => {
const path = require('path'); // @NOTE: https://yarnpkg.com/lang/en/docs/cli/version/
const releaseUtils = require('@tryghost/release-utils'); // 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;
if (!newVersion || newVersion === '') {
console.log(`Invalid version: ${newVersion}`);
return;
}
console.log(`\nCreating release for ${newVersion}...`);
let config; let config;
try { try {
@ -106,11 +116,38 @@ try {
config = null; config = null;
} }
const REPO = 'TryGhost/Casper'; if (!config || !config.github || !config.github.token) {
const USER_AGENT = 'Casper'; console.log('Please copy config.example.json and configure Github token.');
const CHANGELOG_PATH = path.join(process.cwd(), '.', 'changelog.md'); return;
}
const changelog = ({previousVersion}) => { let compatibleWithGhost;
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({ const changelog = new releaseUtils.Changelog({
changelogPath: CHANGELOG_PATH, changelogPath: CHANGELOG_PATH,
folder: path.join(process.cwd(), '.') folder: path.join(process.cwd(), '.')
@ -123,94 +160,28 @@ const changelog = ({previousVersion}) => {
}) })
.sort() .sort()
.clean(); .clean();
};
const previousRelease = () => { return Promise.resolve();
return releaseUtils
.releases
.get({
userAgent: USER_AGENT,
uri: `https://api.github.com/repos/${REPO}/releases`
}) })
.then((response) => { .then(() => releaseUtils.releases.create({
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 = () => {
// @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.');
return;
}
console.log(`\nDraft release for ${newVersion}.`);
if (!config || !config.github || !config.github.username || !config.github.token) {
console.log('Please copy config.example.json and configure Github token.');
return;
}
return previousRelease()
.then((previousVersion) => {
changelog({previousVersion});
return releaseUtils
.releases
.create({
draft: true, draft: true,
preRelease: false, preRelease: false,
tagName: newVersion, tagName: newVersion,
releaseName: newVersion, releaseName: newVersion,
userAgent: USER_AGENT, userAgent: 'Casper',
uri: `https://api.github.com/repos/${REPO}/releases`, uri: `https://api.github.com/repos/${REPO}/releases`,
github: { github: {
username: config.github.username,
token: config.github.token token: config.github.token
}, },
content: [`**Ships with Ghost ${shipsWithGhost} Compatible with Ghost >= ${compatibleWithGhost}**\n\n`], content: [`**Compatible with Ghost ≥ ${compatibleWithGhost}**\n\n`],
changelogPath: CHANGELOG_PATH changelogPath: CHANGELOG_PATH
}) }))
.then((response) => { .then((response) => {
console.log(`\nRelease draft generated: ${response.releaseUrl}\n`); console.log(`\nRelease draft generated: ${response.releaseUrl}\n`);
}); return Promise.resolve();
})
.catch((err) => {
console.error(err);
process.exit(1);
}); });
}; };
exports.release = release;

View File

@ -2,7 +2,7 @@
"name": "vivid-casper", "name": "vivid-casper",
"description": "Minor tweaks from the default personal blogging theme for Ghost. Beautiful, minimal and responsive.", "description": "Minor tweaks from the default personal blogging theme for Ghost. Beautiful, minimal and responsive.",
"demo": "https://demo.ghost.io", "demo": "https://demo.ghost.io",
"version": "3.0.6", "version": "3.1.0",
"engines": { "engines": {
"ghost": ">=3.0.0", "ghost": ">=3.0.0",
"ghost-api": "v3" "ghost-api": "v3"
@ -46,19 +46,19 @@
"bugs": "https://github.com/ViViDboarder/Casper/issues", "bugs": "https://github.com/ViViDboarder/Casper/issues",
"contributors": "https://github.com/ViViDboarder/Casper/graphs/contributors", "contributors": "https://github.com/ViViDboarder/Casper/graphs/contributors",
"devDependencies": { "devDependencies": {
"@tryghost/release-utils": "0.3.3", "@tryghost/release-utils": "0.6.3",
"autoprefixer": "9.7.1", "autoprefixer": "9.8.6",
"beeper": "2.0.0", "beeper": "2.0.0",
"cssnano": "4.1.10", "cssnano": "4.1.10",
"gscan": "3.2.1", "gscan": "3.5.5",
"gulp": "4.0.2", "gulp": "4.0.2",
"gulp-concat": "2.6.1", "gulp-concat": "2.6.1",
"gulp-livereload": "4.0.2", "gulp-livereload": "4.0.2",
"gulp-postcss": "8.0.0", "gulp-postcss": "8.0.0",
"gulp-uglify": "3.0.2", "gulp-uglify": "3.0.2",
"gulp-zip": "5.0.1", "gulp-zip": "5.0.2",
"postcss-color-function": "4.1.0", "inquirer": "7.3.3",
"postcss-custom-properties": "9.0.2", "postcss-color-mod-function": "3.0.3",
"postcss-easy-import": "3.0.0", "postcss-easy-import": "3.0.0",
"pump": "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="l"}} 1000w,
{{img_url feature_image size="xl"}} 2000w" {{img_url feature_image size="xl"}} 2000w"
sizes="(max-width: 1000px) 400px, 700px" sizes="(max-width: 1000px) 400px, 700px"
loading="lazy"
src="{{img_url feature_image size="m"}}" src="{{img_url feature_image size="m"}}"
alt="{{title}}" alt="{{title}}"
/> />

View File

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

1924
yarn.lock

File diff suppressed because it is too large Load Diff