And so the lord said unto Moses, let us obliterate this CSS
This commit is contained in:
John O'Nolan
parent
e95293cc22
commit
b5d0589222
|
|
@ -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.4rem}}h2{margin:1.5em 0 .5em;font-size:2.8rem;font-weight:700}@media (max-width:600px){h2{font-size:2.6rem}}h3{margin:1.5em 0 .5em;font-size:1.8rem;font-weight:500}@media (max-width:600px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:1.6rem}h5,h6{margin:1.5em 0 .5em;font-size:1.4rem}
|
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}
|
||||||
/*# 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
|
|
@ -423,7 +423,7 @@ h1 {
|
||||||
}
|
}
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 2.4rem;
|
font-size: 2.8rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -434,7 +434,7 @@ h2 {
|
||||||
}
|
}
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 2.6rem;
|
font-size: 2.3rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,6 @@ production stylesheet in assets/built/screen.css
|
||||||
7. Single Post
|
7. Single Post
|
||||||
7.1. Post Byline
|
7.1. Post Byline
|
||||||
7.2. Members Subscribe Form
|
7.2. Members Subscribe Form
|
||||||
7.3. Comments
|
|
||||||
7.4. Related Posts
|
7.4. Related Posts
|
||||||
7.5. Koenig Styles
|
7.5. Koenig Styles
|
||||||
8. Author Template
|
8. Author Template
|
||||||
|
|
@ -41,7 +40,7 @@ production stylesheet in assets/built/screen.css
|
||||||
--color-midgrey: #738a94;
|
--color-midgrey: #738a94;
|
||||||
--color-lightgrey: #c5d2d9;
|
--color-lightgrey: #c5d2d9;
|
||||||
--color-wash: #e5eff5;
|
--color-wash: #e5eff5;
|
||||||
--color-darkmode: #1a1c20;
|
--color-darkmode: #151719;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
An accent color is also set by Ghost itself in
|
An accent color is also set by Ghost itself in
|
||||||
|
|
@ -64,17 +63,12 @@ production stylesheet in assets/built/screen.css
|
||||||
/* 2. Layout - Page building blocks
|
/* 2. Layout - Page building blocks
|
||||||
/* ---------------------------------------------------------- */
|
/* ---------------------------------------------------------- */
|
||||||
|
|
||||||
.site-wrapper {
|
.viewport {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-main {
|
|
||||||
z-index: 100;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Full width page blocks */
|
/* Full width page blocks */
|
||||||
.outer {
|
.outer {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -102,9 +96,8 @@ production stylesheet in assets/built/screen.css
|
||||||
/* 4. Site Header
|
/* 4. Site Header
|
||||||
/* ---------------------------------------------------------- */
|
/* ---------------------------------------------------------- */
|
||||||
|
|
||||||
.site-header-background {
|
.site-header {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-bottom: 12px;
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: var(--ghost-accent-color);
|
background: var(--ghost-accent-color);
|
||||||
}
|
}
|
||||||
|
|
@ -191,10 +184,12 @@ production stylesheet in assets/built/screen.css
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-home-header .site-header-content {
|
.site-header-content {
|
||||||
padding: 5vw 3vw 6vw;
|
padding: 18vmin 4vmin;
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
color: #fff;
|
||||||
|
background: var(--ghost-accent-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -232,228 +227,127 @@ production stylesheet in assets/built/screen.css
|
||||||
/* 5. Site Navigation
|
/* 5. Site Navigation
|
||||||
/* ---------------------------------------------------------- */
|
/* ---------------------------------------------------------- */
|
||||||
|
|
||||||
.site-nav-main {
|
.gh-head {
|
||||||
position: fixed;
|
padding: 1vmin 4vmin;
|
||||||
top: 0;
|
font-size: 1.6rem;
|
||||||
right: 0;
|
line-height: 1.3em;
|
||||||
left: 0;
|
color: #fff;
|
||||||
z-index: 1000;
|
|
||||||
background: var(--ghost-accent-color);
|
background: var(--ghost-accent-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-nav {
|
.gh-head a {
|
||||||
position: relative;
|
color: inherit;
|
||||||
z-index: 100;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: flex-start;
|
|
||||||
overflow: hidden;
|
|
||||||
height: 68px;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-nav-left-wrapper {
|
|
||||||
position: relative;
|
|
||||||
flex: 1 0 auto;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-nav-left {
|
|
||||||
flex: 1 0 auto;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
overflow-x: auto;
|
|
||||||
overflow-y: hidden;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
margin-right: 10px;
|
|
||||||
padding: 10px 0 80px;
|
|
||||||
font-weight: 500;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
-ms-overflow-scrolling: touch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-nav-left .nav li:last-of-type {
|
|
||||||
padding-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Site Nav Hack Explanation (above):
|
|
||||||
|
|
||||||
What's happening above is .site-nav-left is set to overflow-x and
|
|
||||||
allow sideways scrolling, so that when there isn't enough space for
|
|
||||||
all nav items (either due to lots of nav items, or a small viewport),
|
|
||||||
you can still scroll side-to-side to reach them. Also, there is a
|
|
||||||
small gradient on the left and right side covering the menu so that
|
|
||||||
the menu goes offscreen smoothly.
|
|
||||||
|
|
||||||
The knock-on effect of this is ugly browser-scroll bars at the bottom,
|
|
||||||
so 80px of padding-bottom and a 40px fixed height parent (.site-nav)
|
|
||||||
hides that entirely. Slightly hacky code. But nice clean end-result.
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
.site-nav-logo {
|
|
||||||
position: relative;
|
|
||||||
z-index: 100;
|
|
||||||
flex-shrink: 0;
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 32px;
|
|
||||||
padding: 12px 0;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 1.7rem;
|
|
||||||
line-height: 1.8rem;
|
|
||||||
font-weight: bold;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-nav-logo:hover {
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-nav-logo img {
|
.gh-head-inner {
|
||||||
display: block;
|
display: grid;
|
||||||
width: auto;
|
grid-gap: 2.5vmin;
|
||||||
height: 21px;
|
grid-template-columns: auto auto 1fr;
|
||||||
|
grid-auto-flow: row dense;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-home-header .site-nav-logo {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-nav-content {
|
/* Brand
|
||||||
position: relative;
|
/* ---------------------------------------------------------- */
|
||||||
align-self: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav {
|
.gh-head-brand {
|
||||||
position: absolute;
|
|
||||||
z-index: 1000;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 0 0 0 -12px;
|
align-items: center;
|
||||||
padding: 0;
|
height: 40px;
|
||||||
list-style: none;
|
max-width: 200px;
|
||||||
transition: all 1.0s cubic-bezier(0.19, 1, 0.22, 1);
|
text-align: center;
|
||||||
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav li {
|
.gh-head-logo {
|
||||||
display: block;
|
display: block;
|
||||||
|
padding: 10px 0;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 2rem;
|
||||||
|
line-height: 1.2em;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-head-logo img {
|
||||||
|
max-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Primary Navigation
|
||||||
|
/* ---------------------------------------------------------- */
|
||||||
|
|
||||||
|
.gh-head-menu {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-head-menu .nav {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav li a {
|
.gh-head-menu .nav li {
|
||||||
position: relative;
|
margin: 0 2.5vmin 0 0;
|
||||||
display: block;
|
padding: 0;
|
||||||
padding: 12px 12px;
|
|
||||||
color: #fff;
|
|
||||||
opacity: 0.75;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav li a:hover {
|
.gh-head-menu .nav a {
|
||||||
text-decoration: none;
|
display: inline-block;
|
||||||
|
padding: 5px 0;
|
||||||
|
opacity: 0.8
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-head-menu .nav a:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-post-title-active .nav {
|
|
||||||
visibility: hidden;
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-175%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-post-title {
|
/* Secondary Navigation
|
||||||
visibility: hidden;
|
/* ---------------------------------------------------------- */
|
||||||
position: absolute;
|
|
||||||
top: 9px;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 1.7rem;
|
|
||||||
font-weight: 400;
|
|
||||||
opacity: 0;
|
|
||||||
transition: all 1.0s cubic-bezier(0.19, 1, 0.22, 1);
|
|
||||||
transform: translateY(175%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-post-title.dash {
|
.gh-head-actions {
|
||||||
left: -25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-post-title.dash:before {
|
|
||||||
content: "– ";
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-post-title-active .nav-post-title {
|
|
||||||
visibility: visible;
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-nav-right {
|
|
||||||
flex: 0 1 auto;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 10px 0;
|
list-style: none;
|
||||||
height: 64px;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-nav-right .nav {
|
.gh-head-actions-list {
|
||||||
position: relative;
|
display: inline-flex;
|
||||||
margin: 0;
|
flex-wrap: wrap;
|
||||||
}
|
justify-content: flex-end;
|
||||||
|
|
||||||
.site-nav-right .nav a {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-nav-right .nav a:before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-nav-right .nav li:last-of-type a {
|
|
||||||
margin-right: -12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-links {
|
|
||||||
flex-shrink: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.social-link {
|
.gh-head-actions-list a:not([class]) {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0;
|
margin: 0 0 0 1.5vmin;
|
||||||
padding: 10px;
|
padding: 5px 0;
|
||||||
opacity: 0.8;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.social-link:hover {
|
.gh-social a {
|
||||||
opacity: 1.0;
|
margin: 0 1.5vmin 0 0;
|
||||||
|
opacity: 0.8
|
||||||
|
}
|
||||||
|
.gh-social a:hover {
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.social-link svg {
|
.gh-social svg {
|
||||||
height: 1.8rem;
|
height: 22px;
|
||||||
|
width: 22px;
|
||||||
fill: #fff;
|
fill: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.social-link-fb svg {
|
a.gh-head-button {
|
||||||
height: 1.6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-link-wb svg {
|
|
||||||
height: 1.6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-link-wb svg path {
|
|
||||||
stroke: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-link-rss svg {
|
|
||||||
height: 1.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subscribe-button {
|
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 0 0 10px;
|
|
||||||
padding: 8px 15px;
|
padding: 8px 15px;
|
||||||
color: var(--color-darkgrey);
|
color: var(--color-darkgrey);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
@ -464,59 +358,212 @@ hides that entirely. Slightly hacky code. But nice clean end-result.
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-nav-right .nav + .subscribe-button {
|
|
||||||
margin-left: 24px;
|
/* Mobile Menu Trigger
|
||||||
|
/* ---------------------------------------------------------- */
|
||||||
|
|
||||||
|
.gh-burger {
|
||||||
|
position: relative;
|
||||||
|
display: none;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rss-button {
|
.gh-burger-box {
|
||||||
padding: 10px 8px;
|
position: relative;
|
||||||
opacity: 0.8;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 33px;
|
||||||
|
height: 33px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rss-button:hover {
|
.gh-burger-inner {
|
||||||
opacity: 1;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rss-button svg {
|
.gh-burger-box::before {
|
||||||
margin-bottom: 1px;
|
position: absolute;
|
||||||
height: 2.1rem;
|
display: block;
|
||||||
fill: #fff;
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
margin: auto;
|
||||||
|
content: '';
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background: currentcolor;
|
||||||
|
transition: transform 300ms cubic-bezier(.2,.6,.3,1), width 300ms cubic-bezier(.2,.6,.3,1);
|
||||||
|
will-change: transform, width;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Special behaviors for home navigation */
|
.gh-burger-inner::before,
|
||||||
|
.gh-burger-inner::after {
|
||||||
.home-template .site-nav-main {
|
position: absolute;
|
||||||
z-index: 100;
|
display: block;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
margin: auto;
|
||||||
|
content: '';
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background: currentcolor;
|
||||||
|
transition: transform 250ms cubic-bezier(.2,.7,.3,1), width 250ms cubic-bezier(.2,.7,.3,1);
|
||||||
|
will-change: transform, width;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-template .site-nav-main .site-nav {
|
.gh-burger-inner::before {
|
||||||
opacity: 0;
|
transform: translatey(-6px);
|
||||||
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
|
}
|
||||||
|
.gh-burger-inner::after {
|
||||||
|
transform: translatey(6px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-template .site-nav-main .fixed-nav-active {
|
body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::before {
|
||||||
opacity: 1;
|
transform: translatey(-8px);
|
||||||
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.05s;
|
}
|
||||||
|
body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
|
||||||
|
transform: translatey(8px);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 700px) {
|
.gh-head-open .gh-burger-box::before {
|
||||||
.site-home-header .site-nav {
|
width: 0;
|
||||||
margin-left: -5vw;
|
transform: translatex(19px);
|
||||||
|
transition: transform 200ms cubic-bezier(.2,.7,.3,1), width 200ms cubic-bezier(.2,.7,.3,1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-head-open .gh-burger-inner::before {
|
||||||
|
width: 26px;
|
||||||
|
transform: translatex(6px) rotate(135deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-head-open .gh-burger-inner::after {
|
||||||
|
width: 26px;
|
||||||
|
transform: translatex(6px) rotate(-135deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Mobile Menu
|
||||||
|
/* ---------------------------------------------------------- */
|
||||||
|
/* IDs needed to ensure sufficient specificity */
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.gh-burger {
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
#gh-head {
|
||||||
.site-nav-main {
|
transition: all 0.4s ease-out;
|
||||||
padding-right: 0;
|
overflow: hidden;
|
||||||
padding-left: 0;
|
|
||||||
}
|
}
|
||||||
|
#gh-head .gh-head-inner {
|
||||||
.site-nav-left {
|
height: 100%;
|
||||||
margin-right: 0;
|
grid-template-columns: 1fr;
|
||||||
padding-left: 5vw;
|
|
||||||
}
|
}
|
||||||
|
#gh-head .gh-head-brand {
|
||||||
.site-nav-right {
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
grid-column-start: auto;
|
||||||
|
max-width: none;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.home-template #gh-head .gh-head-brand {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
#gh-head .gh-head-logo {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
#gh-head .gh-head-logo img {
|
||||||
|
max-height: 40px;
|
||||||
|
}
|
||||||
|
#gh-head .gh-head-menu {
|
||||||
|
align-self: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 0 10vh 0;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 3.6rem;
|
||||||
|
line-height: 1.1em;
|
||||||
|
}
|
||||||
|
#gh-head .gh-head-menu .nav li {
|
||||||
|
margin: 5px 0;
|
||||||
|
}
|
||||||
|
#gh-head .gh-head-menu .nav a {
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
#gh-head .gh-head-menu .nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
#gh-head .gh-head-actions {
|
||||||
|
padding: 20px 0;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
#gh-head .gh-head-actions a {
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
/* Hide collapsed content */
|
||||||
|
#gh-head .gh-head-actions,
|
||||||
|
#gh-head .gh-head-menu {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
/* Open the menu */
|
||||||
|
.gh-head-open {
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
.gh-head-open #gh-head {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 9999999;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
.gh-head-open #gh-head .gh-head-inner {
|
||||||
|
grid-template-rows: auto 1fr auto;
|
||||||
|
}
|
||||||
|
.gh-head-open #gh-head .gh-head-actions,
|
||||||
|
.gh-head-open #gh-head .gh-head-menu {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
#gh-head .gh-head-menu {
|
||||||
|
font-size: 6vmin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-template .gh-head {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 2000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-template .gh-head.has-cover {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-template.gh-head-open .gh-head {
|
||||||
|
background: var(--ghost-accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-template .gh-head-logo {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.home-template .gh-head-menu {
|
||||||
|
margin-left: -2.5vmin;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -796,8 +843,7 @@ make sure this only happens on large viewports / desktop-ish devices.
|
||||||
/* ---------------------------------------------------------- */
|
/* ---------------------------------------------------------- */
|
||||||
|
|
||||||
.article {
|
.article {
|
||||||
padding: calc(68px + 8vmin) 0 8vmin;
|
padding: 8vmin 0;
|
||||||
/* Add 68px to account for sticky navbar */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-header {
|
.article-header {
|
||||||
|
|
@ -839,10 +885,9 @@ make sure this only happens on large viewports / desktop-ish devices.
|
||||||
margin: 6vmin 0 0;
|
margin: 6vmin 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
@media (max-width: 600px) {
|
||||||
.article-excerpt {
|
.article-excerpt {
|
||||||
font-size: 1.9rem;
|
font-size: 1.8rem;
|
||||||
line-height: 1.5em;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -993,7 +1038,7 @@ is the very first element in the post content */
|
||||||
.gh-content ul,
|
.gh-content ul,
|
||||||
.gh-content dl,
|
.gh-content dl,
|
||||||
.gh-content p {
|
.gh-content p {
|
||||||
font-size: 1.8rem;
|
font-size: 1.7rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-content blockquote::before {
|
.gh-content blockquote::before {
|
||||||
|
|
@ -1216,7 +1261,9 @@ Ghost editor. */
|
||||||
grid-column: main-start / main-end;
|
grid-column: main-start / main-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.article-comments {
|
||||||
|
margin: 6vmin 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
/* -----old------ */
|
/* -----old------ */
|
||||||
|
|
||||||
|
|
@ -1356,33 +1403,44 @@ Ghost editor. */
|
||||||
opacity: 0.15;
|
opacity: 0.15;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
|
||||||
.author-avatar {
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-byline {
|
/* 7.3. Subscribe
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-byline-meta {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-byline-meta h4 {
|
|
||||||
margin-bottom: 2px;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* 7.3. Comments
|
|
||||||
/* ---------------------------------------------------------- */
|
/* ---------------------------------------------------------- */
|
||||||
|
|
||||||
.post-full-comments {
|
.footer-cta {
|
||||||
margin: 0 auto;
|
position: relative;
|
||||||
max-width: 840px;
|
padding: 9vmin 4vmin 10vmin;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
background: var(--ghost-accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-cta h2 {
|
||||||
|
margin: 0 0 30px;
|
||||||
|
transform: scale(1.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-cta-button {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 500px;
|
||||||
|
padding: 5px 5px 5px 15px;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
color: var(--color-midgrey);
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-cta-button span {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 10px 20px;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 500;
|
||||||
|
background: var(--ghost-accent-color);
|
||||||
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1673,7 +1731,7 @@ Ghost editor. */
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 40px 0 0 0;
|
margin: 40px 0 0 0;
|
||||||
padding-top: 40px;
|
padding-top: 40px;
|
||||||
padding-bottom: 120px;
|
padding-bottom: 140px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: color-mod(var(--color-darkgrey) l(-5%));
|
background: color-mod(var(--color-darkgrey) l(-5%));
|
||||||
}
|
}
|
||||||
|
|
@ -1748,6 +1806,7 @@ to the html tag on the very first line of the file.
|
||||||
|
|
||||||
html.dark-mode body {
|
html.dark-mode body {
|
||||||
color: rgba(255, 255, 255, 0.75);
|
color: rgba(255, 255, 255, 0.75);
|
||||||
|
background: var(--color-darkmode);
|
||||||
}
|
}
|
||||||
|
|
||||||
html.dark-mode img {
|
html.dark-mode img {
|
||||||
|
|
|
||||||
68
author.hbs
68
author.hbs
|
|
@ -1,55 +1,49 @@
|
||||||
{{!< default}}
|
{{!< default}}
|
||||||
{{!-- 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}}
|
{{#author}}
|
||||||
{{!-- Everything inside the #author tags pulls data from the author --}}
|
{{!-- Everything inside the #author tags pulls data from the author --}}
|
||||||
|
|
||||||
|
<div class="outer site-header-background no-image">
|
||||||
<header class="site-archive-header">
|
<div class="inner">
|
||||||
<div class="outer site-nav-main">
|
<div class="site-header-content author-header">
|
||||||
<div class="inner">
|
{{#if profile_image}}
|
||||||
{{> "site-nav"}}
|
<img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
|
||||||
</div>
|
{{else}}
|
||||||
</div>
|
<span class="author-profile-image">{{> "icons/avatar"}}</span>
|
||||||
<div class="outer site-header-background no-image">
|
{{/if}}
|
||||||
<div class="inner">
|
<div class="author-header-content">
|
||||||
<div class="site-header-content author-header">
|
<h1 class="site-title">{{name}}</h1>
|
||||||
{{#if profile_image}}
|
{{#if bio}}
|
||||||
<img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
|
<h2 class="author-bio">{{bio}}</h2>
|
||||||
{{else}}
|
|
||||||
<span class="author-profile-image">{{> "icons/avatar"}}</span>
|
|
||||||
{{/if}}
|
{{/if}}
|
||||||
<div class="author-header-content">
|
<div class="author-meta">
|
||||||
<h1 class="site-title">{{name}}</h1>
|
{{#if location}}
|
||||||
{{#if bio}}
|
<div class="author-location">{{location}}</div>
|
||||||
<h2 class="author-bio">{{bio}}</h2>
|
|
||||||
{{/if}}
|
{{/if}}
|
||||||
<div class="author-meta">
|
<div class="author-stats">
|
||||||
{{#if location}}
|
{{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}}
|
||||||
<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>
|
||||||
|
{{#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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</div>
|
||||||
|
|
||||||
{{/author}}
|
{{/author}}
|
||||||
|
|
||||||
{{!-- The main content area --}}
|
{{!-- The main content area --}}
|
||||||
<main id="site-main" class="site-main outer">
|
<section class="outer">
|
||||||
<div class="inner posts">
|
<div class="inner posts">
|
||||||
|
|
||||||
<div class="post-feed">
|
<div class="post-feed">
|
||||||
|
|
@ -62,4 +56,4 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</section>
|
||||||
|
|
|
||||||
103
default.hbs
103
default.hbs
|
|
@ -19,27 +19,64 @@
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body class="{{body_class}}">
|
<body class="{{body_class}}">
|
||||||
|
<div class="viewport">
|
||||||
|
|
||||||
|
<header id="gh-head" class="gh-head {{#if @site.cover_image}}has-cover{{/if}}">
|
||||||
|
<nav class="gh-head-inner inner gh-container">
|
||||||
|
|
||||||
<div class="site-wrapper">
|
<div class="gh-head-brand">
|
||||||
|
<a class="gh-head-logo" href="{{@site.url}}">
|
||||||
|
{{#if @site.logo}}
|
||||||
|
<img src="{{@site.logo}}" alt="{{@site.title}}" />
|
||||||
|
{{else}}
|
||||||
|
{{@site.title}}
|
||||||
|
{{/if}}
|
||||||
|
</a>
|
||||||
|
<a class="gh-burger" role="button">
|
||||||
|
<div class="gh-burger-box">
|
||||||
|
<div class="gh-burger-inner"></div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="gh-head-menu">
|
||||||
|
{{navigation}}
|
||||||
|
</div>
|
||||||
|
<div class="gh-head-actions">
|
||||||
|
<div class="gh-social">
|
||||||
|
{{#if @site.twitter}}
|
||||||
|
<a class="gh-social-twitter" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{#unless @member}}
|
||||||
|
<a class="gh-head-button" href="#/portal">Subscribe</a>
|
||||||
|
{{else}}
|
||||||
|
<a class="gh-head-button" href="#/portal/account">Account</a>
|
||||||
|
{{/unless}}
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
{{!-- All other templates get inserted here, index.hbs, post.hbs, etc --}}
|
{{!-- All other templates get inserted here, index.hbs, post.hbs, etc --}}
|
||||||
{{{body}}}
|
{{{body}}}
|
||||||
|
</main>
|
||||||
|
|
||||||
{{!-- 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="site-footer-content 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>
|
<a href="{{@site.url}}">Latest Posts</a>
|
||||||
{{#if @site.facebook}}<a href="{{facebook_url @site.facebook}}" target="_blank" rel="noopener">Facebook</a>{{/if}}
|
{{#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}}
|
{{#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>
|
<a href="https://ghost.org/" target="_blank" rel="noopener">Powered by Ghost</a>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
{{!-- /.viewport --}}
|
||||||
|
|
||||||
|
|
||||||
{{!-- Scripts - handle member signups, responsive videos, infinite scroll, floating headers, and galleries --}}
|
{{!-- Scripts - handle member signups, responsive videos, infinite scroll, floating headers, and galleries --}}
|
||||||
|
|
@ -50,40 +87,12 @@
|
||||||
</script>
|
</script>
|
||||||
<script src="{{asset "built/casper.js"}}"></script>
|
<script src="{{asset "built/casper.js"}}"></script>
|
||||||
<script>
|
<script>
|
||||||
// Parse the URL parameter
|
$(document).ready(function () {
|
||||||
function getParameterByName(name, url) {
|
// Mobile Menu Trigger
|
||||||
if (!url) url = window.location.href;
|
$('.gh-burger').click(function () {
|
||||||
name = name.replace(/[\[\]]/g, "\\$&");
|
$('body').toggleClass('gh-head-open');
|
||||||
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
|
|
||||||
results = regex.exec(url);
|
|
||||||
if (!results) return null;
|
|
||||||
if (!results[2]) return '';
|
|
||||||
return decodeURIComponent(results[2].replace(/\+/g, " "));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Give the parameter a variable name
|
|
||||||
var action = getParameterByName('action');
|
|
||||||
var success = getParameterByName('success');
|
|
||||||
|
|
||||||
$(document).ready(function () {
|
|
||||||
if (action == 'subscribe' && (success === null || success === 'true')) {
|
|
||||||
$('body').addClass('subscribe-success');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (action == 'subscribe' && success === 'false') {
|
|
||||||
$('body').addClass('subscribe-failure');
|
|
||||||
}
|
|
||||||
|
|
||||||
$('.subscribe-notification .subscribe-close-button').click(function () {
|
|
||||||
$('.subscribe-notification').addClass('close');
|
|
||||||
});
|
|
||||||
|
|
||||||
// Reset form on opening subscrion overlay
|
|
||||||
$('.subscribe-button').click(function() {
|
|
||||||
$('.subscribe-overlay form').removeClass();
|
|
||||||
$('.subscribe-email').val('');
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{{!-- Ghost outputs required functional scripts with this tag - it should always be the last thing before the closing body tag --}}
|
{{!-- Ghost outputs required functional scripts with this tag - it should always be the last thing before the closing body tag --}}
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
{{!< default}}
|
||||||
|
|
||||||
{{!--
|
{{!--
|
||||||
|
|
||||||
There are two error files in this theme, one for 404s and one for all other errors.
|
There are two error files in this theme, one for 404s and one for all other errors.
|
||||||
|
|
@ -10,19 +12,7 @@ Keep this template as lightweight as you can!
|
||||||
|
|
||||||
--}}
|
--}}
|
||||||
|
|
||||||
{{!< default}}
|
<section class="outer error-content">
|
||||||
{{!-- The tag above means: insert everything in this file
|
|
||||||
into the {body} of the default.hbs template --}}
|
|
||||||
|
|
||||||
<header class="site-header">
|
|
||||||
<div class="outer site-nav-main">
|
|
||||||
<div class="inner">
|
|
||||||
{{> "site-nav"}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="site-main" class="site-main outer error-content">
|
|
||||||
<div class="inner">
|
<div class="inner">
|
||||||
<section class="error-message">
|
<section class="error-message">
|
||||||
<h1 class="error-code">{{statusCode}}</h1>
|
<h1 class="error-code">{{statusCode}}</h1>
|
||||||
|
|
@ -38,4 +28,4 @@ into the {body} of the default.hbs template --}}
|
||||||
</div>
|
</div>
|
||||||
{{/get}}
|
{{/get}}
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</section>
|
||||||
|
|
@ -40,7 +40,7 @@ Keep this template as lightweight as you can!
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main id="site-main" class="site-main outer error-content">
|
<main class="outer error-content">
|
||||||
<div class="inner">
|
<div class="inner">
|
||||||
|
|
||||||
<section class="error-message">
|
<section class="error-message">
|
||||||
|
|
|
||||||
56
index.hbs
56
index.hbs
|
|
@ -2,36 +2,29 @@
|
||||||
{{!-- The tag above means: insert everything in this file
|
{{!-- The tag above means: insert everything in this file
|
||||||
into the {body} of the default.hbs template --}}
|
into the {body} of the default.hbs template --}}
|
||||||
|
|
||||||
<header class="site-home-header">
|
<div class="site-header-content">
|
||||||
<div class="outer site-header-background">
|
{{#if @site.cover_image}}
|
||||||
{{#if @site.cover_image}}
|
{{!-- This is a responsive image, it loads different sizes depending on device
|
||||||
{{!-- This is a responsive image, it loads different sizes depending on device
|
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
|
||||||
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
|
<img class="site-header-cover"
|
||||||
<img class="site-header-cover"
|
srcset="{{img_url @site.cover_image size="s"}} 300w,
|
||||||
srcset="{{img_url @site.cover_image size="s"}} 300w,
|
{{img_url @site.cover_image size="m"}} 600w,
|
||||||
{{img_url @site.cover_image size="m"}} 600w,
|
{{img_url @site.cover_image size="l"}} 1000w,
|
||||||
{{img_url @site.cover_image size="l"}} 1000w,
|
{{img_url @site.cover_image size="xl"}} 2000w"
|
||||||
{{img_url @site.cover_image size="xl"}} 2000w"
|
sizes="100vw"
|
||||||
sizes="100vw"
|
src="{{img_url @site.cover_image size="xl"}}"
|
||||||
src="{{img_url @site.cover_image size="xl"}}"
|
alt=""
|
||||||
alt=""
|
/>
|
||||||
/>
|
{{/if}}
|
||||||
|
<h1 class="site-title">
|
||||||
|
{{#if @site.logo}}
|
||||||
|
<img class="site-logo" src="{{img_url @site.logo size="m"}}" alt="{{@site.title}}" />
|
||||||
|
{{else}}
|
||||||
|
{{@site.title}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
<div class="inner">
|
</h1>
|
||||||
{{> "site-nav"}}
|
<p>{{@site.description}}</p>
|
||||||
<div class="site-header-content">
|
</div>
|
||||||
<h1 class="site-title">
|
|
||||||
{{#if @site.logo}}
|
|
||||||
<img class="site-logo" src="{{img_url @site.logo size="m"}}" alt="{{@site.title}}" />
|
|
||||||
{{else}}
|
|
||||||
{{@site.title}}
|
|
||||||
{{/if}}
|
|
||||||
</h1>
|
|
||||||
<p>{{@site.description}}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
{{!-- The main content area --}}
|
{{!-- The main content area --}}
|
||||||
<main id="site-main" class="site-main outer">
|
<main id="site-main" class="site-main outer">
|
||||||
|
|
@ -49,11 +42,6 @@ into the {body} of the default.hbs template --}}
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<div class="outer site-nav-main">
|
|
||||||
<div class="inner">
|
|
||||||
{{> "site-nav"}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{!-- Scripts - Sticky behaviour for the header/nav when scrolling --}}
|
{{!-- Scripts - Sticky behaviour for the header/nav when scrolling --}}
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
8
page.hbs
8
page.hbs
|
|
@ -3,14 +3,6 @@
|
||||||
{{!-- The tag above means: insert everything in this file
|
{{!-- The tag above means: insert everything in this file
|
||||||
into the {body} tag of the default.hbs template --}}
|
into the {body} tag of the default.hbs template --}}
|
||||||
|
|
||||||
<header class="site-header">
|
|
||||||
<div class="outer site-nav-main">
|
|
||||||
<div class="inner">
|
|
||||||
{{> "site-nav"}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
|
|
||||||
{{#post}}
|
{{#post}}
|
||||||
{{!-- Everything inside the #post block pulls data from the page --}}
|
{{!-- Everything inside the #post block pulls data from the page --}}
|
||||||
|
|
|
||||||
31
post.hbs
31
post.hbs
|
|
@ -3,14 +3,6 @@
|
||||||
{{!-- The tag above means: insert everything in this file
|
{{!-- The tag above means: insert everything in this file
|
||||||
into the {body} tag of the default.hbs template --}}
|
into the {body} tag of the default.hbs template --}}
|
||||||
|
|
||||||
<header class="site-header">
|
|
||||||
<div class="outer site-nav-main">
|
|
||||||
<div class="inner">
|
|
||||||
{{> "site-nav"}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
|
|
||||||
{{#post}}
|
{{#post}}
|
||||||
{{!-- Everything inside the #post block pulls data from the post --}}
|
{{!-- Everything inside the #post block pulls data from the post --}}
|
||||||
|
|
@ -78,21 +70,34 @@ into the {body} tag of the default.hbs template --}}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{{!--
|
{{!--
|
||||||
|
<section class="article-comments gh-canvas">
|
||||||
<section class="post-full-comments">
|
If you want to embed comments, this is a good place to paste your code!
|
||||||
If you want to embed comments, this is a good place to do it!
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
--}}
|
--}}
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
{{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}}
|
||||||
|
{{#unless @member}}
|
||||||
|
<section class="footer-cta">
|
||||||
|
<div class="inner">
|
||||||
|
<h2>Sign up for more like this.</h2>
|
||||||
|
<a class="footer-cta-button" href="#/portal">
|
||||||
|
<div>Enter your email</div>
|
||||||
|
<span>Subscribe</span>
|
||||||
|
</a>
|
||||||
|
{{!-- ^ This looks like a form element, but it's just a link to Portal,
|
||||||
|
making the form validation and submission much simpler. --}}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{{/unless}}
|
||||||
|
|
||||||
|
|
||||||
{{!-- Read more links, just above the footer --}}
|
{{!-- Read more links, just above the footer --}}
|
||||||
<aside class="read-more-wrap">
|
<aside class="read-more-wrap">
|
||||||
<div class="read-more inner">
|
<div class="read-more inner">
|
||||||
|
|
||||||
{{!-- The {#get} helper fetches some of the latest posts here
|
{{!-- The {#get} helper below fetches some of the latest posts here
|
||||||
so that people have something else to read when they finish this one.
|
so that people have something else to read when they finish this one.
|
||||||
|
|
||||||
This query gets the latest 3 posts on the site, but adds a filter to
|
This query gets the latest 3 posts on the site, but adds a filter to
|
||||||
|
|
|
||||||
34
tag.hbs
34
tag.hbs
|
|
@ -1,30 +1,24 @@
|
||||||
{{!< default}}
|
{{!< default}}
|
||||||
{{!-- 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 --}}
|
||||||
|
|
||||||
|
|
||||||
{{#tag}}
|
{{#tag}}
|
||||||
<header class="site-archive-header">
|
<div class="outer">
|
||||||
<div class="outer site-nav-main">
|
<div class="inner site-header-content">
|
||||||
<div class="inner">
|
<h1 class="site-title">{{name}}</h1>
|
||||||
{{> "site-nav"}}
|
<h2 class="site-description">
|
||||||
</div>
|
{{#if description}}
|
||||||
|
{{description}}
|
||||||
|
{{else}}
|
||||||
|
A collection of {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}
|
||||||
|
{{/if}}
|
||||||
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="outer site-header-background">
|
</div>
|
||||||
<div class="inner site-header-content">
|
|
||||||
<h1 class="site-title">{{name}}</h1>
|
|
||||||
<h2 class="site-description">
|
|
||||||
{{#if description}}
|
|
||||||
{{description}}
|
|
||||||
{{else}}
|
|
||||||
A collection of {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}
|
|
||||||
{{/if}}
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
{{/tag}}
|
{{/tag}}
|
||||||
|
|
||||||
{{!-- The main content area --}}
|
{{!-- The main content area --}}
|
||||||
<main id="site-main" class="site-main outer">
|
<section class="outer">
|
||||||
<div class="inner posts">
|
<div class="inner posts">
|
||||||
<div class="post-feed">
|
<div class="post-feed">
|
||||||
{{#foreach posts}}
|
{{#foreach posts}}
|
||||||
|
|
@ -33,4 +27,4 @@
|
||||||
{{/foreach}}
|
{{/foreach}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</section>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue