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

This commit is contained in:
John O'Nolan 2021-03-03 20:22:45 -05:00
parent e95293cc22
commit b5d0589222
14 changed files with 469 additions and 438 deletions

View File

@ -1,2 +1,2 @@
a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}img{max-width:100%;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

View File

@ -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;
} }
} }

View File

@ -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);
} }
.site-nav-main { .gh-head-open .gh-burger-inner::before {
padding-right: 0; width: 26px;
padding-left: 0; transform: translatex(6px) rotate(135deg);
} }
.site-nav-left { .gh-head-open .gh-burger-inner::after {
margin-right: 0; width: 26px;
padding-left: 5vw; transform: translatex(6px) rotate(-135deg);
} }
.site-nav-right {
/* Mobile Menu
/* ---------------------------------------------------------- */
/* IDs needed to ensure sufficient specificity */
@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; 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 {

View File

@ -1,16 +1,10 @@
{{!< 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 --}}
<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="outer site-header-background no-image">
<div class="inner"> <div class="inner">
<div class="site-header-content author-header"> <div class="site-header-content author-header">
@ -45,11 +39,11 @@
</div> </div>
</div> </div>
</div> </div>
</header>
{{/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>

View File

@ -19,12 +19,48 @@
</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">
@ -40,6 +76,7 @@
</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,38 +87,10 @@
</script> </script>
<script src="{{asset "built/casper.js"}}"></script> <script src="{{asset "built/casper.js"}}"></script>
<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 () { $(document).ready(function () {
if (action == 'subscribe' && (success === null || success === 'true')) { // Mobile Menu Trigger
$('body').addClass('subscribe-success'); $('.gh-burger').click(function () {
} $('body').toggleClass('gh-head-open');
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>

View File

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

View File

@ -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">

View File

@ -2,8 +2,7 @@
{{!-- 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 --}}
@ -17,9 +16,6 @@ into the {body} of the default.hbs template --}}
alt="" alt=""
/> />
{{/if}} {{/if}}
<div class="inner">
{{> "site-nav"}}
<div class="site-header-content">
<h1 class="site-title"> <h1 class="site-title">
{{#if @site.logo}} {{#if @site.logo}}
<img class="site-logo" src="{{img_url @site.logo size="m"}}" alt="{{@site.title}}" /> <img class="site-logo" src="{{img_url @site.logo size="m"}}" alt="{{@site.title}}" />
@ -29,9 +25,6 @@ into the {body} of the default.hbs template --}}
</h1> </h1>
<p>{{@site.description}}</p> <p>{{@site.description}}</p>
</div> </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>

View File

@ -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 --}}

View File

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

14
tag.hbs
View File

@ -1,14 +1,9 @@
{{!< 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-nav"}}
</div>
</div>
<div class="outer site-header-background">
<div class="inner site-header-content"> <div class="inner site-header-content">
<h1 class="site-title">{{name}}</h1> <h1 class="site-title">{{name}}</h1>
<h2 class="site-description"> <h2 class="site-description">
@ -20,11 +15,10 @@
</h2> </h2>
</div> </div>
</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>