Browse Source

And so the lord said unto Moses, let us obliterate this CSS

master
John O'Nolan 4 months ago
parent
commit
b5d0589222
  1. 2
      assets/built/global.css
  2. 2
      assets/built/global.css.map
  3. 2
      assets/built/screen.css
  4. 2
      assets/built/screen.css.map
  5. 4
      assets/css/global.css
  6. 551
      assets/css/screen.css
  7. 68
      author.hbs
  8. 107
      default.hbs
  9. 18
      error-404.hbs
  10. 2
      error.hbs
  11. 56
      index.hbs
  12. 8
      page.hbs
  13. 31
      post.hbs
  14. 34
      tag.hbs

2
assets/built/global.css

@ -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 */

2
assets/built/global.css.map
File diff suppressed because it is too large
View File

2
assets/built/screen.css
File diff suppressed because it is too large
View File

2
assets/built/screen.css.map
File diff suppressed because it is too large
View File

4
assets/css/global.css

@ -423,7 +423,7 @@ h1 {
}
@media (max-width: 600px) {
h1 {
font-size: 2.4rem;
font-size: 2.8rem;
}
}
@ -434,7 +434,7 @@ h2 {
}
@media (max-width: 600px) {
h2 {
font-size: 2.6rem;
font-size: 2.3rem;
}
}

551
assets/css/screen.css

@ -15,7 +15,6 @@ production stylesheet in assets/built/screen.css
7. Single Post
7.1. Post Byline
7.2. Members Subscribe Form
7.3. Comments
7.4. Related Posts
7.5. Koenig Styles
8. Author Template
@ -41,7 +40,7 @@ production stylesheet in assets/built/screen.css
--color-midgrey: #738a94;
--color-lightgrey: #c5d2d9;
--color-wash: #e5eff5;
--color-darkmode: #1a1c20;
--color-darkmode: #151719;
/*
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
/* ---------------------------------------------------------- */
.site-wrapper {
.viewport {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-main {
z-index: 100;
flex-grow: 1;
}
/* Full width page blocks */
.outer {
position: relative;
@ -102,9 +96,8 @@ production stylesheet in assets/built/screen.css
/* 4. Site Header
/* ---------------------------------------------------------- */
.site-header-background {
.site-header {
position: relative;
padding-bottom: 12px;
color: #fff;
background: var(--ghost-accent-color);
}
@ -191,10 +184,12 @@ production stylesheet in assets/built/screen.css
overflow: hidden;
}
.site-home-header .site-header-content {
padding: 5vw 3vw 6vw;
.site-header-content {
padding: 18vmin 4vmin;
font-size: 2.5rem;
font-weight: 400;
color: #fff;
background: var(--ghost-accent-color);
}
@ -232,291 +227,343 @@ production stylesheet in assets/built/screen.css
/* 5. Site Navigation
/* ---------------------------------------------------------- */
.site-nav-main {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1000;
.gh-head {
padding: 1vmin 4vmin;
font-size: 1.6rem;
line-height: 1.3em;
color: #fff;
background: var(--ghost-accent-color);
}
.site-nav {
position: relative;
z-index: 100;
display: flex;
justify-content: space-between;
align-items: flex-start;
overflow: hidden;
height: 68px;
font-size: 1.5rem;
.gh-head a {
color: inherit;
text-decoration: none;
}
.site-nav-left-wrapper {
position: relative;
flex: 1 0 auto;
display: flex;
.gh-head-inner {
display: grid;
grid-gap: 2.5vmin;
grid-template-columns: auto auto 1fr;
grid-auto-flow: row dense;
}
.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;
}
/* Brand
/* ---------------------------------------------------------- */
.site-nav-left .nav li:last-of-type {
padding-right: 20px;
.gh-head-brand {
display: flex;
align-items: center;
height: 40px;
max-width: 200px;
text-align: center;
word-break: break-all;
}
/* 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;
.gh-head-logo {
display: block;
padding: 10px 0;
font-weight: 700;
font-size: 2rem;
line-height: 1.2em;
letter-spacing: -0.02em;
}
.site-nav-logo:hover {
text-decoration: none;
.gh-head-logo img {
max-height: 40px;
}
.site-nav-logo img {
display: block;
width: auto;
height: 21px;
}
.site-home-header .site-nav-logo {
display: none;
}
/* Primary Navigation
/* ---------------------------------------------------------- */
.site-nav-content {
position: relative;
align-self: flex-start;
.gh-head-menu {
display: flex;
align-items: center;
font-weight: 500;
}
.nav {
position: absolute;
z-index: 1000;
display: flex;
margin: 0 0 0 -12px;
padding: 0;
.gh-head-menu .nav {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
transition: all 1.0s cubic-bezier(0.19, 1, 0.22, 1);
margin: 0;
padding: 0;
}
.nav li {
display: block;
margin: 0;
.gh-head-menu .nav li {
margin: 0 2.5vmin 0 0;
padding: 0;
}
.nav li a {
position: relative;
display: block;
padding: 12px 12px;
color: #fff;
opacity: 0.75;
.gh-head-menu .nav a {
display: inline-block;
padding: 5px 0;
opacity: 0.8
}
.nav li a:hover {
text-decoration: none;
.gh-head-menu .nav a:hover {
opacity: 1;
}
.nav-post-title-active .nav {
visibility: hidden;
opacity: 0;
transform: translateY(-175%);
}
.nav-post-title {
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%);
/* Secondary Navigation
/* ---------------------------------------------------------- */
.gh-head-actions {
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
text-align: right;
}
.nav-post-title.dash {
left: -25px;
.gh-head-actions-list {
display: inline-flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
.nav-post-title.dash:before {
content: "– ";
opacity: 0.5;
.gh-head-actions-list a:not([class]) {
display: inline-block;
margin: 0 0 0 1.5vmin;
padding: 5px 0;
}
.nav-post-title-active .nav-post-title {
visibility: visible;
.gh-social a {
margin: 0 1.5vmin 0 0;
opacity: 0.8
}
.gh-social a:hover {
opacity: 1;
transform: translateY(0);
}
.site-nav-right {
flex: 0 1 auto;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 10px 0;
height: 64px;
.gh-social svg {
height: 22px;
width: 22px;
fill: #fff;
}
.site-nav-right .nav {
position: relative;
margin: 0;
a.gh-head-button {
display: block;
padding: 8px 15px;
color: var(--color-darkgrey);
font-weight: 500;
letter-spacing: -0.015em;
font-size: 1.5rem;
line-height: 1em;
background: #fff;
border-radius: 30px;
}
.site-nav-right .nav a {
white-space: nowrap;
}
.site-nav-right .nav a:before {
display: none;
}
/* Mobile Menu Trigger
/* ---------------------------------------------------------- */
.site-nav-right .nav li:last-of-type a {
margin-right: -12px;
.gh-burger {
position: relative;
display: none;
cursor: pointer;
}
.social-links {
flex-shrink: 0;
.gh-burger-box {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 33px;
height: 33px;
}
.social-link {
display: inline-block;
margin: 0;
padding: 10px;
opacity: 0.8;
}
.social-link:hover {
opacity: 1.0;
.gh-burger-inner {
width: 100%;
height: 100%;
}
.social-link svg {
height: 1.8rem;
fill: #fff;
.gh-burger-box::before {
position: absolute;
display: block;
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;
}
.social-link-fb svg {
height: 1.6rem;
.gh-burger-inner::before,
.gh-burger-inner::after {
position: absolute;
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;
}
.social-link-wb svg {
height: 1.6rem;
.gh-burger-inner::before {
transform: translatey(-6px);
}
.social-link-wb svg path {
stroke: #fff;
.gh-burger-inner::after {
transform: translatey(6px);
}
.social-link-rss svg {
height: 1.9rem;
body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::before {
transform: translatey(-8px);
}
.subscribe-button {
display: block;
margin: 0 0 0 10px;
padding: 8px 15px;
color: var(--color-darkgrey);
font-weight: 500;
letter-spacing: -0.015em;
font-size: 1.5rem;
line-height: 1em;
background: #fff;
border-radius: 30px;
body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
transform: translatey(8px);
}
.site-nav-right .nav + .subscribe-button {
margin-left: 24px;
.gh-head-open .gh-burger-box::before {
width: 0;
transform: translatex(19px);
transition: transform 200ms cubic-bezier(.2,.7,.3,1), width 200ms cubic-bezier(.2,.7,.3,1);
}
.rss-button {
padding: 10px 8px;
opacity: 0.8;
.gh-head-open .gh-burger-inner::before {
width: 26px;
transform: translatex(6px) rotate(135deg);
}
.rss-button:hover {
opacity: 1;
.gh-head-open .gh-burger-inner::after {
width: 26px;
transform: translatex(6px) rotate(-135deg);
}
.rss-button svg {
margin-bottom: 1px;
height: 2.1rem;
fill: #fff;
}
/* Special behaviors for home navigation */
/* Mobile Menu
/* ---------------------------------------------------------- */
/* IDs needed to ensure sufficient specificity */
.home-template .site-nav-main {
z-index: 100;
@media (max-width: 900px) {
.gh-burger {
display: inline-block;
}
#gh-head {
transition: all 0.4s ease-out;
overflow: hidden;
}
#gh-head .gh-head-inner {
height: 100%;
grid-template-columns: 1fr;
}
#gh-head .gh-head-brand {
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;
}
/* 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;
}
}
.home-template .site-nav-main .site-nav {
opacity: 0;
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
@media (max-width: 600px) {
#gh-head .gh-head-menu {
font-size: 6vmin;
}
}
.home-template .site-nav-main .fixed-nav-active {
opacity: 1;
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.05s;
.home-template .gh-head {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 2000;
}
@media (max-width: 700px) {
.site-home-header .site-nav {
margin-left: -5vw;
}
.site-nav-main {
padding-right: 0;
padding-left: 0;
}
.home-template .gh-head.has-cover {
background: transparent;
}
.site-nav-left {
margin-right: 0;
padding-left: 5vw;
}
.home-template.gh-head-open .gh-head {
background: var(--ghost-accent-color);
}
.site-nav-right {
display: none;
}
.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 {
padding: calc(68px + 8vmin) 0 8vmin;
/* Add 68px to account for sticky navbar */
padding: 8vmin 0;
}
.article-header {
@ -839,10 +885,9 @@ make sure this only happens on large viewports / desktop-ish devices.
margin: 6vmin 0 0;
}
@media (max-width: 500px) {
@media (max-width: 600px) {
.article-excerpt {
font-size: 1.9rem;
line-height: 1.5em;
font-size: 1.8rem;
}
}
@ -993,7 +1038,7 @@ is the very first element in the post content */
.gh-content ul,
.gh-content dl,
.gh-content p {
font-size: 1.8rem;
font-size: 1.7rem;
}
.gh-content blockquote::before {
@ -1216,7 +1261,9 @@ Ghost editor. */
grid-column: main-start / main-end;
}
.article-comments {
margin: 6vmin 0 0 0;
}
/* -----old------ */
@ -1356,33 +1403,44 @@ Ghost editor. */
opacity: 0.15;
}
@media (max-width: 500px) {
.author-avatar {
width: 36px;
height: 36px;
}
.article-byline {
margin-top: 20px;
}
.article-byline-meta {
font-size: 1.2rem;
}
/* 7.3. Subscribe
/* ---------------------------------------------------------- */
.article-byline-meta h4 {
margin-bottom: 2px;
font-size: 1.2rem;
}
.footer-cta {
position: relative;
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);
}
/* 7.3. Comments
/* ---------------------------------------------------------- */
.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;
}
.post-full-comments {
margin: 0 auto;
max-width: 840px;
.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;
margin: 40px 0 0 0;
padding-top: 40px;
padding-bottom: 120px;
padding-bottom: 140px;
color: #fff;
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 {
color: rgba(255, 255, 255, 0.75);
background: var(--color-darkmode);
}
html.dark-mode img {

68
author.hbs

@ -1,55 +1,49 @@
{{!< default}}
{{!-- 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 --}}
<header class="site-archive-header">
<div class="outer site-nav-main">
<div class="inner">
{{> "site-nav"}}
</div>
</div>
<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>
<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-header-content">
<h1 class="site-title">{{name}}</h1>
{{#if bio}}
<h2 class="author-bio">{{bio}}</h2>
<div class="author-meta">
{{#if location}}
<div class="author-location">{{location}}</div>
{{/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 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>
</header>
</div>
{{/author}}
{{!-- The main content area --}}
<main id="site-main" class="site-main outer">
<section class="outer">
<div class="inner posts">
<div class="post-feed">
@ -62,4 +56,4 @@
</div>
</div>
</main>
</section>

107
default.hbs

@ -19,27 +19,64 @@
</head>
<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="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>
<div class="site-wrapper">
<main>
{{!-- All other templates get inserted here, index.hbs, post.hbs, etc --}}
{{{body}}}
</main>
{{!-- The global footer at the very bottom of the screen --}}
<footer class="site-footer outer">
<div class="site-footer-content inner">
<section class="copyright"><a href="{{@site.url}}">{{@site.title}}</a> &copy; {{date format="YYYY"}}</section>
<nav class="site-footer-nav">
<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.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>
</div>
</footer>
{{!-- The global footer at the very bottom of the screen --}}
<footer class="site-footer outer">
<div class="site-footer-content inner">
<section class="copyright"><a href="{{@site.url}}">{{@site.title}}</a> &copy; {{date format="YYYY"}}</section>
<nav class="site-footer-nav">
<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.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>
</div>
</footer>
</div>
</div>
{{!-- /.viewport --}}
{{!-- Scripts - handle member signups, responsive videos, infinite scroll, floating headers, and galleries --}}
@ -50,40 +87,12 @@
</script>
<script src="{{asset "built/casper.js"}}"></script>
<script>
// Parse the URL parameter
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
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('');
});
$(document).ready(function () {
// Mobile Menu Trigger
$('.gh-burger').click(function () {
$('body').toggleClass('gh-head-open');
});
});
</script>
{{!-- Ghost outputs required functional scripts with this tag - it should always be the last thing before the closing body tag --}}

18
error-404.hbs

@ -1,3 +1,5 @@
{{!< default}}
{{!--
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}}
{{!-- 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">
<section class="outer error-content">
<div class="inner">
<section class="error-message">
<h1 class="error-code">{{statusCode}}</h1>
@ -38,4 +28,4 @@ into the {body} of the default.hbs template --}}
</div>
{{/get}}
</div>
</main>
</section>

2
error.hbs

@ -40,7 +40,7 @@ Keep this template as lightweight as you can!
</div>
</header>
<main id="site-main" class="site-main outer error-content">
<main class="outer error-content">
<div class="inner">
<section class="error-message">

56
index.hbs

@ -2,36 +2,29 @@
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}
<header class="site-home-header">
<div class="outer site-header-background">
{{#if @site.cover_image}}
{{!-- 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 --}}
<img class="site-header-cover"
srcset="{{img_url @site.cover_image size="s"}} 300w,
{{img_url @site.cover_image size="m"}} 600w,
{{img_url @site.cover_image size="l"}} 1000w,
{{img_url @site.cover_image size="xl"}} 2000w"
sizes="100vw"
src="{{img_url @site.cover_image size="xl"}}"
alt=""
/>
<div class="site-header-content">
{{#if @site.cover_image}}
{{!-- 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 --}}
<img class="site-header-cover"
srcset="{{img_url @site.cover_image size="s"}} 300w,
{{img_url @site.cover_image size="m"}} 600w,
{{img_url @site.cover_image size="l"}} 1000w,
{{img_url @site.cover_image size="xl"}} 2000w"
sizes="100vw"
src="{{img_url @site.cover_image size="xl"}}"
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}}
<div class="inner">
{{> "site-nav"}}
<div class="site-header-content">
<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>
</h1>
<p>{{@site.description}}</p>
</div>
{{!-- The main content area --}}
<main id="site-main" class="site-main outer">
@ -49,11 +42,6 @@ into the {body} of the default.hbs template --}}
</div>
</main>
<div class="outer site-nav-main">
<div class="inner">
{{> "site-nav"}}
</div>
</div>
{{!-- Scripts - Sticky behaviour for the header/nav when scrolling --}}
<script>

8
page.hbs

@ -3,14 +3,6 @@
{{!-- The tag above means: insert everything in this file
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}}
{{!-- Everything inside the #post block pulls data from the page --}}

31
post.hbs

@ -3,14 +3,6 @@
{{!-- The tag above means: insert everything in this file
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}}
{{!-- 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 class="post-full-comments">
If you want to embed comments, this is a good place to do it!
<section class="article-comments gh-canvas">
If you want to embed comments, this is a good place to paste your code!
</section>
--}}
</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 --}}
<aside class="read-more-wrap">
<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.
This query gets the latest 3 posts on the site, but adds a filter to

34
tag.hbs

@ -1,30 +1,24 @@
{{!< default}}
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
{{#tag}}
<header class="site-archive-header">
<div class="outer site-nav-main">
<div class="inner">
{{> "site-nav"}}
</div>
</div>
<div class="outer site-header-background">
<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 class="outer">
<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>
</header>
</div>
{{/tag}}
{{!-- The main content area --}}
<main id="site-main" class="site-main outer">
<section class="outer">
<div class="inner posts">
<div class="post-feed">
{{#foreach posts}}
@ -33,4 +27,4 @@
{{/foreach}}
</div>
</div>
</main>
</section>
Loading…
Cancel
Save