And so the lord said unto Moses, let us obliterate this CSS
This commit is contained in:
John O'Nolan
parent
e95293cc22
commit
b5d0589222
14 changed files with 469 additions and 438 deletions
|
|
@ -1,2 +1,2 @@
|
|||
a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}img{max-width:100%;height:auto}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn,em,i{font-style:italic}h1{margin:.67em 0;font-size:2em}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}mark{background-color:#fdffb6}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit}button{overflow:visible;border:none}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input:focus{outline:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{padding:0;border:0}textarea{overflow:auto}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}html{overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body,html{overflow-x:hidden}body{color:#35373a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga" on}::-moz-selection{text-shadow:none;background:#daf2fd}::selection{text-shadow:none;background:#daf2fd}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #f0f0f0}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{margin:0;padding:0;border:0}textarea{resize:vertical}blockquote,dl,ol,p,ul{margin:0 0 1.5em}ol,ul{padding-left:1.3em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}ol,ul{max-width:100%}li{margin:.5em 0;padding-left:.3em;line-height:1.6em}dt{float:left;margin:0 20px 0 0;width:120px;color:#daf2fd;font-weight:500;text-align:right}dd{margin:0 0 5px;text-align:left}blockquote{margin:1.5em 0;padding:0 1.6em;border-left:#daf2fd}blockquote p{margin:.8em 0;font-size:1.2em;font-weight:300}blockquote small{display:inline-block;margin:.8em 0 .8em 1.5em;font-size:.9em;opacity:.8}blockquote small:before{content:"\2014 \00A0"}blockquote cite{font-weight:700}blockquote cite a{font-weight:400}a{color:#15171a;text-decoration:none}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;letter-spacing:-.01em}h1{margin:0 0 .5em;font-size:4.8rem;font-weight:700;letter-spacing:-.015em}@media (max-width:600px){h1{font-size:2.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 */
|
||||
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) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,228 +227,127 @@ 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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
.gh-head a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.site-nav-logo img {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: 21px;
|
||||
.gh-head-inner {
|
||||
display: grid;
|
||||
grid-gap: 2.5vmin;
|
||||
grid-template-columns: auto auto 1fr;
|
||||
grid-auto-flow: row dense;
|
||||
}
|
||||
|
||||
.site-home-header .site-nav-logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.site-nav-content {
|
||||
position: relative;
|
||||
align-self: flex-start;
|
||||
}
|
||||
/* Brand
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.nav {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
.gh-head-brand {
|
||||
display: flex;
|
||||
margin: 0 0 0 -12px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
transition: all 1.0s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
max-width: 200px;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.nav li {
|
||||
.gh-head-logo {
|
||||
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;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav li a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 12px 12px;
|
||||
color: #fff;
|
||||
opacity: 0.75;
|
||||
.gh-head-menu .nav li {
|
||||
margin: 0 2.5vmin 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav li a:hover {
|
||||
text-decoration: none;
|
||||
.gh-head-menu .nav a {
|
||||
display: inline-block;
|
||||
padding: 5px 0;
|
||||
opacity: 0.8
|
||||
}
|
||||
|
||||
.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
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.nav-post-title.dash {
|
||||
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;
|
||||
.gh-head-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
height: 64px;
|
||||
list-style: none;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.site-nav-right .nav {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
.gh-head-actions-list {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.social-link {
|
||||
.gh-head-actions-list a:not([class]) {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
opacity: 0.8;
|
||||
margin: 0 0 0 1.5vmin;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
opacity: 1.0;
|
||||
.gh-social a {
|
||||
margin: 0 1.5vmin 0 0;
|
||||
opacity: 0.8
|
||||
}
|
||||
.gh-social a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.social-link svg {
|
||||
height: 1.8rem;
|
||||
.gh-social svg {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.social-link-fb svg {
|
||||
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 {
|
||||
a.gh-head-button {
|
||||
display: block;
|
||||
margin: 0 0 0 10px;
|
||||
padding: 8px 15px;
|
||||
color: var(--color-darkgrey);
|
||||
font-weight: 500;
|
||||
|
|
@ -464,59 +358,212 @@ hides that entirely. Slightly hacky code. But nice clean end-result.
|
|||
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 {
|
||||
padding: 10px 8px;
|
||||
opacity: 0.8;
|
||||
.gh-burger-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
}
|
||||
|
||||
.rss-button:hover {
|
||||
opacity: 1;
|
||||
.gh-burger-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.rss-button svg {
|
||||
margin-bottom: 1px;
|
||||
height: 2.1rem;
|
||||
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;
|
||||
}
|
||||
|
||||
/* Special behaviors for home navigation */
|
||||
|
||||
.home-template .site-nav-main {
|
||||
z-index: 100;
|
||||
.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;
|
||||
}
|
||||
|
||||
.home-template .site-nav-main .site-nav {
|
||||
opacity: 0;
|
||||
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
|
||||
.gh-burger-inner::before {
|
||||
transform: translatey(-6px);
|
||||
}
|
||||
.gh-burger-inner::after {
|
||||
transform: translatey(6px);
|
||||
}
|
||||
|
||||
.home-template .site-nav-main .fixed-nav-active {
|
||||
opacity: 1;
|
||||
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::before {
|
||||
transform: translatey(-8px);
|
||||
}
|
||||
body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
|
||||
transform: translatey(8px);
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.site-home-header .site-nav {
|
||||
margin-left: -5vw;
|
||||
.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);
|
||||
}
|
||||
|
||||
.site-nav-main {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
.gh-head-open .gh-burger-inner::before {
|
||||
width: 26px;
|
||||
transform: translatex(6px) rotate(135deg);
|
||||
}
|
||||
|
||||
.site-nav-left {
|
||||
margin-right: 0;
|
||||
padding-left: 5vw;
|
||||
.gh-head-open .gh-burger-inner::after {
|
||||
width: 26px;
|
||||
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;
|
||||
}
|
||||
/* 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 {
|
||||
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;
|
||||
}
|
||||
|
||||
.article-byline-meta h4 {
|
||||
margin-bottom: 2px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 7.3. Comments
|
||||
/* 7.3. Subscribe
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.post-full-comments {
|
||||
margin: 0 auto;
|
||||
max-width: 840px;
|
||||
.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);
|
||||
}
|
||||
|
||||
.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;
|
||||
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 {
|
||||
|
|
|
|||
14
author.hbs
14
author.hbs
|
|
@ -1,16 +1,10 @@
|
|||
{{!< 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">
|
||||
|
|
@ -45,11 +39,11 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{{/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>
|
||||
|
|
|
|||
73
default.hbs
73
default.hbs
|
|
@ -19,12 +19,48 @@
|
|||
|
||||
</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="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 --}}
|
||||
{{{body}}}
|
||||
</main>
|
||||
|
||||
{{!-- The global footer at the very bottom of the screen --}}
|
||||
<footer class="site-footer outer">
|
||||
|
|
@ -40,6 +76,7 @@
|
|||
</footer>
|
||||
|
||||
</div>
|
||||
{{!-- /.viewport --}}
|
||||
|
||||
|
||||
{{!-- Scripts - handle member signups, responsive videos, infinite scroll, floating headers, and galleries --}}
|
||||
|
|
@ -50,38 +87,10 @@
|
|||
</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('');
|
||||
// Mobile Menu Trigger
|
||||
$('.gh-burger').click(function () {
|
||||
$('body').toggleClass('gh-head-open');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
14
index.hbs
14
index.hbs
|
|
@ -2,8 +2,7 @@
|
|||
{{!-- 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">
|
||||
<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 --}}
|
||||
|
|
@ -17,9 +16,6 @@ into the {body} of the default.hbs template --}}
|
|||
alt=""
|
||||
/>
|
||||
{{/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}}" />
|
||||
|
|
@ -29,9 +25,6 @@ into the {body} of the default.hbs template --}}
|
|||
</h1>
|
||||
<p>{{@site.description}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{{!-- 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
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
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
|
||||
|
|
|
|||
14
tag.hbs
14
tag.hbs
|
|
@ -1,14 +1,9 @@
|
|||
{{!< 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="outer">
|
||||
<div class="inner site-header-content">
|
||||
<h1 class="site-title">{{name}}</h1>
|
||||
<h2 class="site-description">
|
||||
|
|
@ -20,11 +15,10 @@
|
|||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{{/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…
Reference in a new issue