Author profile
This commit is contained in:
John O'Nolan
parent
b5d0589222
commit
7617c7baf2
11 changed files with 195 additions and 272 deletions
|
|
@ -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%;height:auto}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn,em,i{font-style:italic}h1{margin:.67em 0;font-size:2em}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}mark{background-color:#fdffb6}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit}button{overflow:visible;border:none}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input:focus{outline:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{padding:0;border:0}textarea{overflow:auto}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}html{overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body,html{overflow-x:hidden}body{color:#35373a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga" on}::-moz-selection{text-shadow:none;background:#daf2fd}::selection{text-shadow:none;background:#daf2fd}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #f0f0f0}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{margin:0;padding:0;border:0}textarea{resize:vertical}blockquote,dl,ol,p,ul{margin:0 0 1.5em}ol,ul{padding-left:1.3em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}ol,ul{max-width:100%}li{margin:.5em 0;padding-left:.3em;line-height:1.6em}dt{float:left;margin:0 20px 0 0;width:120px;color:#daf2fd;font-weight:500;text-align:right}dd{margin:0 0 5px;text-align:left}blockquote{margin:1.5em 0;padding:0 1.6em;border-left:#daf2fd}blockquote p{margin:.8em 0;font-size:1.2em;font-weight:300}blockquote small{display:inline-block;margin:.8em 0 .8em 1.5em;font-size:.9em;opacity:.8}blockquote small:before{content:"\2014 \00A0"}blockquote cite{font-weight:700}blockquote cite a{font-weight:400}a{color:#15171a;text-decoration:none}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;letter-spacing:-.01em}h1{margin:0 0 .5em;font-size:4.8rem;font-weight:700;letter-spacing:-.015em}@media (max-width:600px){h1{font-size:2.8rem}}h2{margin:1.5em 0 .5em;font-size:2.8rem;font-weight:700}@media (max-width:600px){h2{font-size:2.3rem}}h3{margin:1.5em 0 .5em;font-size:1.8rem;font-weight:500}@media (max-width:600px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:1.6rem}h5,h6{margin:1.5em 0 .5em;font-size:1.4rem}
|
a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}img{max-width:100%;height:auto}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn,em,i{font-style:italic}h1{margin:.67em 0;font-size:2em}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}mark{background-color:#fdffb6}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit}button{overflow:visible;border:none}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input:focus{outline:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{padding:0;border:0}textarea{overflow:auto}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}html{font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{color:#35373a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga" on}::-moz-selection{text-shadow:none;background:#daf2fd}::selection{text-shadow:none;background:#daf2fd}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #f0f0f0}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{margin:0;padding:0;border:0}textarea{resize:vertical}blockquote,dl,ol,p,ul{margin:0 0 1.5em}ol,ul{padding-left:1.3em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}ol,ul{max-width:100%}li{margin:.5em 0;padding-left:.3em;line-height:1.6em}dt{float:left;margin:0 20px 0 0;width:120px;color:#daf2fd;font-weight:500;text-align:right}dd{margin:0 0 5px;text-align:left}blockquote{margin:1.5em 0;padding:0 1.6em;border-left:#daf2fd}blockquote p{margin:.8em 0;font-size:1.2em;font-weight:300}blockquote small{display:inline-block;margin:.8em 0 .8em 1.5em;font-size:.9em;opacity:.8}blockquote small:before{content:"\2014 \00A0"}blockquote cite{font-weight:700}blockquote cite a{font-weight:400}a{color:#15171a;text-decoration:none}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;letter-spacing:-.01em}h1{margin:0 0 .5em;font-size:4.8rem;font-weight:700;letter-spacing:-.015em}@media (max-width:600px){h1{font-size:2.8rem}}h2{margin:1.5em 0 .5em;font-size:2.8rem;font-weight:700}@media (max-width:600px){h2{font-size:2.3rem}}h3{margin:1.5em 0 .5em;font-size:1.8rem;font-weight:500}@media (max-width:600px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:1.6rem}h5,h6{margin:1.5em 0 .5em;font-size:1.4rem}
|
||||||
/*# sourceMappingURL=global.css.map */
|
/*# sourceMappingURL=global.css.map */
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -255,14 +255,11 @@ th {
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
html {
|
html {
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: scroll;
|
|
||||||
font-size: 62.5%;
|
font-size: 62.5%;
|
||||||
|
|
||||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
overflow-x: hidden;
|
|
||||||
color: #35373A;
|
color: #35373A;
|
||||||
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;
|
||||||
|
|
|
||||||
|
|
@ -49,7 +49,6 @@ production stylesheet in assets/built/screen.css
|
||||||
--ghost-accent-color: {value};
|
--ghost-accent-color: {value};
|
||||||
|
|
||||||
You can use this variale throughout your styles
|
You can use this variale throughout your styles
|
||||||
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* Fonts */
|
/* Fonts */
|
||||||
|
|
@ -332,8 +331,11 @@ production stylesheet in assets/built/screen.css
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-social a {
|
.gh-social {
|
||||||
margin: 0 1.5vmin 0 0;
|
margin: 0 1.5vmin 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-social a {
|
||||||
opacity: 0.8
|
opacity: 0.8
|
||||||
}
|
}
|
||||||
.gh-social a:hover {
|
.gh-social a:hover {
|
||||||
|
|
@ -967,6 +969,7 @@ is the very first element in the post content */
|
||||||
/* A larger margin before/after HRs and blockquotes */
|
/* A larger margin before/after HRs and blockquotes */
|
||||||
.gh-content > hr,
|
.gh-content > hr,
|
||||||
.gh-content > blockquote {
|
.gh-content > blockquote {
|
||||||
|
position: relative;
|
||||||
margin-top: 6vmin;
|
margin-top: 6vmin;
|
||||||
}
|
}
|
||||||
.gh-content > hr + *,
|
.gh-content > hr + *,
|
||||||
|
|
@ -997,19 +1000,20 @@ is the very first element in the post content */
|
||||||
padding-left: 1.9em;
|
padding-left: 1.9em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-content blockquote {
|
.gh-content > blockquote {
|
||||||
position: relative;
|
position: relative;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-content blockquote::before {
|
.gh-content > blockquote::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: -1.5em;
|
left: -1.5em;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 0.3rem;
|
width: 0.3rem;
|
||||||
background: var(--color-primary);
|
background: var(--ghost-accent-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-content :not(pre) code {
|
.gh-content :not(pre) code {
|
||||||
|
|
@ -1470,6 +1474,10 @@ Ghost editor. */
|
||||||
color: rgba(255, 255, 255, 0.6);
|
color: rgba(255, 255, 255, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.read-more .post-card-byline-content a {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: 1000px) {
|
@media (max-width: 1000px) {
|
||||||
.read-more {
|
.read-more {
|
||||||
|
|
@ -1492,154 +1500,92 @@ Ghost editor. */
|
||||||
|
|
||||||
/* 8. Author Template
|
/* 8. Author Template
|
||||||
/* ---------------------------------------------------------- */
|
/* ---------------------------------------------------------- */
|
||||||
.author-header {
|
|
||||||
display: flex;
|
.author-template .posts {
|
||||||
flex-direction: row;
|
position: relative;
|
||||||
justify-content: flex-start;
|
height: 100%;
|
||||||
align-items: flex-start;
|
display: grid;
|
||||||
padding: 10vw 0 10px;
|
grid-template-columns: 200px 1fr 1fr;
|
||||||
|
grid-gap: 4vmin;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-archive-header .author-header {
|
.author-template .posts .post-feed {
|
||||||
align-items: center;
|
grid-column: 2 / 4;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-archive-header .no-image .author-header {
|
.author-profile {
|
||||||
padding-bottom: 20px;
|
padding: 4vmin 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.author-header-content {
|
.author-profile-content {
|
||||||
display: flex;
|
height: auto;
|
||||||
flex-direction: column;
|
position: sticky;
|
||||||
justify-content: center;
|
top: 4vmin;
|
||||||
margin: 5px 0 0 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-header-content .author-profile-image {
|
|
||||||
z-index: 10;
|
|
||||||
flex-shrink: 0;
|
|
||||||
margin: -4px 0 0;
|
|
||||||
width: 110px;
|
|
||||||
height: 110px;
|
|
||||||
box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.author-header-content .author-bio {
|
|
||||||
z-index: 10;
|
|
||||||
flex-shrink: 0;
|
|
||||||
margin: 6px 0 0;
|
|
||||||
max-width: 46em;
|
|
||||||
font-size: 2.0rem;
|
|
||||||
line-height: 1.3em;
|
|
||||||
font-weight: 400;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.author-header-content .author-meta {
|
|
||||||
z-index: 10;
|
|
||||||
flex-shrink: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin: 0 0 0 1px;
|
|
||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
font-weight: 400;
|
line-height: 1.4em;
|
||||||
letter-spacing: 0.2px;
|
}
|
||||||
|
|
||||||
|
.author-profile-pic {
|
||||||
|
display: block;
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
object-fit: cover;
|
||||||
|
margin: 0 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author-profile h1 {
|
||||||
|
margin: 0 0 0.3em;
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author-profile p {
|
||||||
|
color: color-mod(var(--color-midgrey) l(-8%));
|
||||||
|
}
|
||||||
|
|
||||||
|
.author-profile-location {
|
||||||
|
margin: 0 0 1.5em;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author-profile-social-link {
|
||||||
|
display: block;
|
||||||
|
padding: 0 0 5px;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
color: color-mod(var(--color-midgrey) l(-8%));
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
max-width: 100%;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.author-header-content .social-link:first-of-type {
|
.author-profile-social-link:hover {
|
||||||
padding-left: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-image .author-header-content .author-bio {
|
|
||||||
color: var(--color-midgrey);
|
|
||||||
opacity: 1.0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-image .author-header-content .author-meta {
|
|
||||||
color: var(--color-midgrey);
|
|
||||||
opacity: 1.0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.author-social-link a {
|
|
||||||
color: #fff;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-image .author-social-link a {
|
|
||||||
color: var(--color-darkgrey);
|
color: var(--color-darkgrey);
|
||||||
}
|
}
|
||||||
|
|
||||||
.author-social-link a:hover {
|
@media (max-width: 900px) {
|
||||||
opacity: 1;
|
.author-template .posts .post-feed {
|
||||||
}
|
grid-template-columns: 1fr;
|
||||||
|
|
||||||
.author-social-link {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0;
|
|
||||||
padding: 6px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.author-location + .author-stats:before,
|
|
||||||
.author-stats + .author-social-link:before,
|
|
||||||
.author-social-link + .author-social-link:before {
|
|
||||||
content: "\2022";
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 12px;
|
|
||||||
color: #fff;
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-image .author-location + .author-stats:before,
|
|
||||||
.no-image .author-stats + .author-social-link:before,
|
|
||||||
.no-image .author-social-link + .author-social-link:before {
|
|
||||||
color: var(--color-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: 650px) {
|
||||||
.author-header {
|
.author-template .posts {
|
||||||
padding: 10px 0 0;
|
grid-template-columns: 1fr;
|
||||||
|
grid-gap: 0;
|
||||||
}
|
}
|
||||||
|
.author-template .posts .post-feed {
|
||||||
.no-image .author-header {
|
grid-column: 1 / auto;
|
||||||
padding-bottom: 10px;
|
|
||||||
}
|
}
|
||||||
|
.author-profile {
|
||||||
.author-header-content {
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
.author-profile-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 16px 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-header-content .author-profile-image {
|
|
||||||
width: 96px;
|
|
||||||
height: 96px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.author-header-content .author-bio {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
line-height: 1.3em;
|
|
||||||
letter-spacing: 0;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.author-header-content .author-meta {
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.author-location + .author-stats:before,
|
|
||||||
.author-stats + .author-social-link:before,
|
|
||||||
.author-social-link + .author-social-link:before {
|
|
||||||
display: inline;
|
|
||||||
margin: 0 6px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1650,37 +1596,23 @@ Ghost editor. */
|
||||||
padding: 14vw 4vw 6vw;
|
padding: 14vw 4vw 6vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-nav-center {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 10px 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-nav-center .site-nav-logo {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-message {
|
.error-message {
|
||||||
padding-bottom: 10vw;
|
padding-bottom: 10vw;
|
||||||
border-bottom: 1px solid color-mod(var(--color-lightgrey) l(+10%));
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-code {
|
.error-code {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: var(--color-lightgrey);
|
color: var(--ghost-accent-color);
|
||||||
font-size: 12vw;
|
font-size: 12vw;
|
||||||
line-height: 1em;
|
line-height: 1em;
|
||||||
letter-spacing: -5px;
|
letter-spacing: -5px;
|
||||||
opacity: 0.75;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-description {
|
.error-description {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: var(--color-midgrey);
|
color: var(--color-midgrey);
|
||||||
font-size: 3rem;
|
font-size: 3.2rem;
|
||||||
line-height: 1.3em;
|
line-height: 1.3em;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
@ -1730,62 +1662,79 @@ Ghost editor. */
|
||||||
.site-footer {
|
.site-footer {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 40px 0 0 0;
|
margin: 40px 0 0 0;
|
||||||
padding-top: 40px;
|
padding: 40px 4vmin 140px;
|
||||||
padding-bottom: 140px;
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: color-mod(var(--color-darkgrey) l(-5%));
|
background: color-mod(var(--color-darkgrey) l(-5%));
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-footer-content {
|
.site-footer .inner {
|
||||||
display: flex;
|
display: grid;
|
||||||
flex-wrap: wrap;
|
grid-gap: 40px;
|
||||||
justify-content: space-between;
|
grid-template-columns: auto 1fr auto;
|
||||||
align-items: center;
|
|
||||||
color: rgba(255,255,255,0.7);
|
color: rgba(255,255,255,0.7);
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-footer-content a {
|
.site-footer .copyright a {
|
||||||
|
color: #fff;
|
||||||
|
letter-spacing: -0.015em;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-footer a {
|
||||||
color: rgba(255,255,255,0.7);
|
color: rgba(255,255,255,0.7);
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-footer-content a:hover {
|
.site-footer a:hover {
|
||||||
color: rgba(255,255,255,1);
|
color: rgba(255,255,255,1);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-footer-nav {
|
.site-footer-nav ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin: 0 0 20px;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-footer-nav li {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
line-height: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-footer-nav a {
|
.site-footer-nav a {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-left: 20px;
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-footer-nav a:before {
|
.site-footer-nav li:not(:first-child) a:before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
|
||||||
top: 11px;
|
|
||||||
left: -11px;
|
|
||||||
display: block;
|
display: block;
|
||||||
width: 2px;
|
width: 2px;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
|
margin: 0 10px 0 0;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-footer-nav a:first-of-type:before {
|
@media (max-width: 800px) {
|
||||||
display: none;
|
.site-footer .inner {
|
||||||
}
|
max-width: 500px;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
@media (max-width: 650px) {
|
grid-gap: 0;
|
||||||
.site-footer-content {
|
text-align: center;
|
||||||
flex-direction: column;
|
|
||||||
}
|
}
|
||||||
|
.site-footer .copyright,
|
||||||
.site-footer-nav a:first-child {
|
.site-footer .copyright a {
|
||||||
margin-left: 0;
|
color: #fff;
|
||||||
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1818,10 +1767,6 @@ html.dark-mode .post-card:hover {
|
||||||
border-bottom-color: color-mod(var(--color-darkmode) l(+8%));
|
border-bottom-color: color-mod(var(--color-darkmode) l(+8%));
|
||||||
}
|
}
|
||||||
|
|
||||||
html.dark-mode .author-profile-image {
|
|
||||||
background: var(--color-darkmode);
|
|
||||||
}
|
|
||||||
|
|
||||||
html.dark-mode .post-card-byline-content a {
|
html.dark-mode .post-card-byline-content a {
|
||||||
color: rgba(255, 255, 255, 0.75);
|
color: rgba(255, 255, 255, 0.75);
|
||||||
}
|
}
|
||||||
|
|
@ -1958,10 +1903,6 @@ html.dark-mode .site-archive-header .no-image {
|
||||||
background: var(--color-darkmode);
|
background: var(--color-darkmode);
|
||||||
}
|
}
|
||||||
|
|
||||||
html.dark-mode .site-header-content .author-profile-image {
|
|
||||||
box-shadow: 0 0 0 6px hsla(0,0%,100%,0.04);
|
|
||||||
}
|
|
||||||
|
|
||||||
html.dark-mode .subscribe-form {
|
html.dark-mode .subscribe-form {
|
||||||
border: none;
|
border: none;
|
||||||
background: linear-gradient(color-mod(var(--color-darkmode) l(-6%)), color-mod(var(--color-darkmode) l(-3%)));
|
background: linear-gradient(color-mod(var(--color-darkmode) l(-6%)), color-mod(var(--color-darkmode) l(-3%)));
|
||||||
|
|
@ -1997,3 +1938,18 @@ html.dark-mode .subscribe-form .error .message-error {
|
||||||
html.dark-mode .subscribe-form .success .message-success {
|
html.dark-mode .subscribe-form .success .message-success {
|
||||||
color: color-mod(var(--color-green) l(+5%) s(-5%));
|
color: color-mod(var(--color-green) l(+5%) s(-5%));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|
||||||
|
Hey! You reached the end.
|
||||||
|
|
||||||
|
Hope you enjoyed this CSS file, if you have any suggestions
|
||||||
|
for improvements that might be useful for everyone who uses
|
||||||
|
this theme, you can find the open source repository for it
|
||||||
|
here: https://github.com/tryghost/casper
|
||||||
|
|
||||||
|
Or, if you've just scrolled all the way to the bottom of the
|
||||||
|
file to add some of your own styles. Well, you've come to
|
||||||
|
the right place. Onward!
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
|
||||||
78
author.hbs
78
author.hbs
|
|
@ -2,56 +2,48 @@
|
||||||
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
|
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
|
||||||
|
|
||||||
|
|
||||||
{{#author}}
|
|
||||||
{{!-- Everything inside the #author tags pulls data from the author --}}
|
|
||||||
|
|
||||||
<div class="outer site-header-background no-image">
|
|
||||||
<div class="inner">
|
|
||||||
<div class="site-header-content author-header">
|
|
||||||
{{#if profile_image}}
|
|
||||||
<img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
|
|
||||||
{{else}}
|
|
||||||
<span class="author-profile-image">{{> "icons/avatar"}}</span>
|
|
||||||
{{/if}}
|
|
||||||
<div class="author-header-content">
|
|
||||||
<h1 class="site-title">{{name}}</h1>
|
|
||||||
{{#if bio}}
|
|
||||||
<h2 class="author-bio">{{bio}}</h2>
|
|
||||||
{{/if}}
|
|
||||||
<div class="author-meta">
|
|
||||||
{{#if location}}
|
|
||||||
<div class="author-location">{{location}}</div>
|
|
||||||
{{/if}}
|
|
||||||
<div class="author-stats">
|
|
||||||
{{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}}
|
|
||||||
</div>
|
|
||||||
{{#if website}}
|
|
||||||
<span class="author-social-link"><a href="{{website}}" target="_blank" rel="noopener">Website</a></span>
|
|
||||||
{{/if}}
|
|
||||||
{{#if twitter}}
|
|
||||||
<span class="author-social-link"><a href="{{twitter_url}}" target="_blank" rel="noopener">Twitter</a></span>
|
|
||||||
{{/if}}
|
|
||||||
{{#if facebook}}
|
|
||||||
<span class="author-social-link"><a href="{{facebook_url}}" target="_blank" rel="noopener">Facebook</a></span>
|
|
||||||
{{/if}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{/author}}
|
|
||||||
|
|
||||||
{{!-- The main content area --}}
|
|
||||||
<section class="outer">
|
<section class="outer">
|
||||||
<div class="inner posts">
|
<div class="inner posts">
|
||||||
|
|
||||||
|
<header class="author-profile">
|
||||||
|
{{#author}}
|
||||||
|
{{!-- Everything inside the #author tags pulls data from the author --}}
|
||||||
|
|
||||||
|
<div class="author-profile-content">
|
||||||
|
|
||||||
|
{{#if profile_image}}
|
||||||
|
<img class="author-profile-pic" src="{{profile_image}}" alt="{{name}}" />
|
||||||
|
{{else}}
|
||||||
|
<span class="author-profile-pic">{{> "icons/avatar"}}</span>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
<h1>{{name}}</h1>
|
||||||
|
{{#if bio}}<p>{{bio}}</p>{{/if}}
|
||||||
|
|
||||||
|
<div class="author-profile-meta">
|
||||||
|
{{#if location}}
|
||||||
|
<div class="author-profile-location">📍 {{location}}</div>
|
||||||
|
{{/if}}
|
||||||
|
{{#if website}}
|
||||||
|
<a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a>
|
||||||
|
{{/if}}
|
||||||
|
{{#if twitter}}
|
||||||
|
<a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{twitter_url}}</a>
|
||||||
|
{{/if}}
|
||||||
|
{{#if facebook}}
|
||||||
|
<a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{facebook_url}}</a>
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{/author}}
|
||||||
|
</header>
|
||||||
|
|
||||||
<div class="post-feed">
|
<div class="post-feed">
|
||||||
{{#foreach posts}}
|
{{#foreach posts}}
|
||||||
|
|
||||||
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
|
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
|
||||||
{{> "post-card"}}
|
{{> "post-card"}}
|
||||||
|
|
||||||
{{/foreach}}
|
{{/foreach}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
10
default.hbs
10
default.hbs
|
|
@ -64,14 +64,12 @@
|
||||||
|
|
||||||
{{!-- The global footer at the very bottom of the screen --}}
|
{{!-- The global footer at the very bottom of the screen --}}
|
||||||
<footer class="site-footer outer">
|
<footer class="site-footer outer">
|
||||||
<div class="site-footer-content inner">
|
<div class="inner">
|
||||||
<section class="copyright"><a href="{{@site.url}}">{{@site.title}}</a> © {{date format="YYYY"}}</section>
|
<section class="copyright"><a href="{{@site.url}}">{{@site.title}}</a> © {{date format="YYYY"}}</section>
|
||||||
<nav class="site-footer-nav">
|
<nav class="site-footer-nav">
|
||||||
<a href="{{@site.url}}">Latest Posts</a>
|
{{navigation type="secondary"}}
|
||||||
{{#if @site.facebook}}<a href="{{facebook_url @site.facebook}}" target="_blank" rel="noopener">Facebook</a>{{/if}}
|
|
||||||
{{#if @site.twitter}}<a href="{{twitter_url @site.twitter}}" target="_blank" rel="noopener">Twitter</a>{{/if}}
|
|
||||||
<a href="https://ghost.org/" target="_blank" rel="noopener">Powered by Ghost</a>
|
|
||||||
</nav>
|
</nav>
|
||||||
|
<div><a href="https://ghost.org/" target="_blank" rel="noopener">Powered by Ghost</a></div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
|
@ -92,6 +90,8 @@ $(document).ready(function () {
|
||||||
$('.gh-burger').click(function () {
|
$('.gh-burger').click(function () {
|
||||||
$('body').toggleClass('gh-head-open');
|
$('body').toggleClass('gh-head-open');
|
||||||
});
|
});
|
||||||
|
// FitVids - Makes video embeds responsive
|
||||||
|
$(".gh-content").fitVids();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -19,13 +19,19 @@ Keep this template as lightweight as you can!
|
||||||
<p class="error-description">{{message}}</p>
|
<p class="error-description">{{message}}</p>
|
||||||
<a class="error-link" href="{{@site.url}}">Go to the front page →</a>
|
<a class="error-link" href="{{@site.url}}">Go to the front page →</a>
|
||||||
</section>
|
</section>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
{{#get "posts" limit="3" include="authors,tags"}}
|
{{!-- Given that people landing on this page didn't find what they
|
||||||
<div class="post-feed">
|
were looking for, let's give them some alternative stuff to read. --}}
|
||||||
{{#foreach posts}}
|
<aside class="read-more-wrap">
|
||||||
{{> "post-card"}}
|
<div class="read-more inner">
|
||||||
|
{{#get "posts" include="authors" limit="3" as |more_posts|}}
|
||||||
|
{{#if more_posts}}
|
||||||
|
{{#foreach more_posts}}
|
||||||
|
{{> "post-card"}}
|
||||||
{{/foreach}}
|
{{/foreach}}
|
||||||
</div>
|
{{/if}}
|
||||||
{{/get}}
|
{{/get}}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</aside>
|
||||||
12
page.hbs
12
page.hbs
|
|
@ -40,14 +40,4 @@ into the {body} tag of the default.hbs template --}}
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
{{/post}}
|
{{/post}}
|
||||||
|
|
||||||
|
|
||||||
{{!-- Scripts - Extra functionality for the post template --}}
|
|
||||||
<script>
|
|
||||||
$(document).ready(function () {
|
|
||||||
// FitVids - Makes video embeds responsive
|
|
||||||
var $postContent = $(".gh-content");
|
|
||||||
$postContent.fitVids();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
20
post.hbs
20
post.hbs
|
|
@ -114,22 +114,4 @@ into the {body} tag of the default.hbs template --}}
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
|
{{/post}}
|
||||||
{{/post}}
|
|
||||||
|
|
||||||
|
|
||||||
{{!-- Scripts - Extra functionality for the post template --}}
|
|
||||||
<script>
|
|
||||||
$(document).ready(function () {
|
|
||||||
// FitVids - Makes video embeds responsive
|
|
||||||
var $postContent = $(".gh-content");
|
|
||||||
$postContent.fitVids();
|
|
||||||
|
|
||||||
// StickyNavTitle - Shows post title in navbar when scrolling
|
|
||||||
Casper.stickyNavTitle({
|
|
||||||
navSelector: '.site-nav-main',
|
|
||||||
titleSelector: '.article-title',
|
|
||||||
activeClass: 'nav-post-title-active'
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
Loading…
Reference in a new issue