vividboarder
/
Vivid-Casper
mirror of https://github.com/ViViDboarder/Vivid-Casper.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge upstream master

This commit is contained in:
ViViDboarder 2021-04-07 09:49:47 -07:00
parent 17077c96e6 df2d20caab
commit 7b3cda6ea0
19 changed files with 1335 additions and 1149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.github/workflows/deploy-theme.yml vendored
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 }}

27
.github/workflows/test.yml vendored
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

3
README.md
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

2
assets/built/casper.js
View File

File diff suppressed because one or more lines are too long

2
assets/built/casper.js.map
View File

File diff suppressed because one or more lines are too long

2
assets/built/global.css
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 */

2
assets/built/global.css.map
View File

File diff suppressed because one or more lines are too long

2
assets/built/screen.css
View File

File diff suppressed because one or more lines are too long

2
assets/built/screen.css.map
View File

File diff suppressed because one or more lines are too long

10
assets/css/global.css
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;
} }

267
assets/css/screen.css
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%));
} }
} }

2
author.hbs
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>

1
config.example.json
View File

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

3
default.hbs
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}}" />

211
gulpfile.js
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 = [
easyimport,
customProperties({preserve: false}),
colorFunction(),
autoprefixer(),
cssnano()
];
pump([ pump([
src('assets/css/*.css', {sourcemaps: true}), src('assets/css/*.css', {sourcemaps: true}),
postcss(processors), postcss([
easyimport,
colorFunction(),
autoprefixer(),
cssnano()
]),
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,128 +91,97 @@ 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');
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 = () => {
// @NOTE: https://yarnpkg.com/lang/en/docs/cli/version/ // @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 // require(./package.json) can run into caching issues, this re-reads from file everytime on release
var packageJSON = JSON.parse(fs.readFileSync('./package.json')); var packageJSON = JSON.parse(fs.readFileSync('./package.json'));
const newVersion = packageJSON.version; 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 === '') { if (!newVersion || newVersion === '') {
console.log('Invalid version.'); console.log(`Invalid version: ${newVersion}`);
return; 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.'); console.log('Please copy config.example.json and configure Github token.');
return; return;
} }
return previousRelease() let compatibleWithGhost;
.then((previousVersion) => {
changelog({previousVersion});
return releaseUtils return inquirer.prompt([{
.releases type: 'input',
.create({ name: 'compatibleWithGhost',
draft: true, message: 'Which version of Ghost is it compatible with?',
preRelease: false, default: '3.0.0'
tagName: newVersion, }])
releaseName: newVersion, .then(result => {
userAgent: USER_AGENT, compatibleWithGhost = result.compatibleWithGhost;
uri: `https://api.github.com/repos/${REPO}/releases`, return Promise.resolve();
github: { })
username: config.github.username, .then(() => releaseUtils.releases.get({
token: config.github.token userAgent: 'Casper',
}, uri: `https://api.github.com/repos/${REPO_READONLY}/releases`
content: [`**Ships with Ghost ${shipsWithGhost} Compatible with Ghost >= ${compatibleWithGhost}**\n\n`], }))
changelogPath: CHANGELOG_PATH .then((response) => {
}) if (!response || !response.length) {
.then((response) => { console.log('No releases found. Skipping...');
console.log(`\nRelease draft generated: ${response.releaseUrl}\n`); 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);
});
};

14
package.json
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"
}, },

1
partials/post-card.hbs
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}}"
/> />

5
renovate.json
View File

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

1924
yarn.lock
View File

File diff suppressed because it is too large Load Diff