mirror of
https://github.com/ZetaKebab/kesper.git
synced 2025-07-01 09:27:37 +00:00
And so the lord said unto Moses, let us obliterate this CSS
This commit is contained in:
John O'Nolan
@ -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);
|
||||
}
|
||||
|
||||
.gh-head-open .gh-burger-inner::before {
|
||||
width: 26px;
|
||||
transform: translatex(6px) rotate(135deg);
|
||||
}
|
||||
|
||||
.gh-head-open .gh-burger-inner::after {
|
||||
width: 26px;
|
||||
transform: translatex(6px) rotate(-135deg);
|
||||
}
|
||||
|
||||
|
||||
/* Mobile Menu
|
||||
/* ---------------------------------------------------------- */
|
||||
/* IDs needed to ensure sufficient specificity */
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.gh-burger {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.site-nav-main {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
#gh-head {
|
||||
transition: all 0.4s ease-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.site-nav-left {
|
||||
margin-right: 0;
|
||||
padding-left: 5vw;
|
||||
#gh-head .gh-head-inner {
|
||||
height: 100%;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.site-nav-right {
|
||||
#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 {
|
||||
|
||||
Reference in New Issue
Block a user