This commit is contained in:
John O'Nolan
2021-03-03 15:44:25 -05:00
parent cf24eccdf2
commit 1365eab4ae
15 changed files with 89 additions and 235 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%}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:5rem;font-weight:700;letter-spacing:-.015em}@media (max-width:600px){h1{font-size:2.2rem}}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.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}
/*# 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

@ -109,6 +109,7 @@ table {
}
img {
max-width: 100%;
height: auto;
}
html {
box-sizing: border-box;
@ -416,13 +417,13 @@ h6 {
h1 {
margin: 0 0 0.5em 0;
font-size: 5rem;
font-size: 4.8rem;
font-weight: 700;
letter-spacing: -0.015em;
}
@media (max-width: 600px) {
h1 {
font-size: 2.2rem;
font-size: 2.4rem;
}
}

View File

@ -104,14 +104,23 @@ production stylesheet in assets/built/screen.css
.site-header-background {
position: relative;
margin-top: 64px;
padding-bottom: 12px;
color: #fff;
background: var(--ghost-accent-color) no-repeat center center;
background-size: cover;
background: var(--ghost-accent-color);
}
.site-header-background:before {
.site-header-cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.site-header-cover:before {
content: "";
position: absolute;
top: 0;
@ -123,7 +132,7 @@ production stylesheet in assets/built/screen.css
background: rgba(0,0,0,0.18);
}
.site-header-background:after {
.site-header-cover:after {
content: "";
position: absolute;
top: 0;
@ -133,15 +142,11 @@ production stylesheet in assets/built/screen.css
z-index: 10;
display: block;
height: 140px;
background: linear-gradient(rgba(0,0,0,0.15),rgba(0,0,0,0));
}
.site-header-background.no-image:before,
.site-header-background.no-image:after {
display: none;
background: linear-gradient(rgba(0,0,0,0.95),rgba(0,0,0,0));
}
.site-header-content {
position: relative;
z-index: 100;
display: flex;
flex-direction: column;
@ -150,55 +155,46 @@ production stylesheet in assets/built/screen.css
padding: 6vw 3vw;
min-height: 200px;
max-height: 340px;
text-align: center;
}
.site-title {
z-index: 10;
margin: 0 0 0 -2px;
margin: 0 0 0.15em;
padding: 0;
font-size: 5.0rem;
line-height: 1em;
font-weight: 600;
}
.site-logo {
max-height: 55px;
}
.site-description {
z-index: 10;
margin: 0;
padding: 5px 0;
font-size: 2.1rem;
line-height: 1.4em;
font-weight: 400;
.site-header-content p {
max-width: 600px;
margin: 0 auto;
line-height: 1.2em;
opacity: 0.8;
}
@media (max-width: 600px) {
.site-header-content p {
max-width: 80vmin;
font-size: 1.8rem;
}
}
/* 4.1 Home header
/* ---------------------------------------------------------- */
.site-home-header {
position: relative;
z-index: 1000;
}
.site-home-header .site-header-background {
margin-top: 0;
overflow: hidden;
}
.site-home-header .site-header-content {
padding: 5vw 3vw 6vw;
}
.site-home-header .site-title {
font-size: 5.5rem;
text-align: center;
}
.site-home-header .site-description {
font-size: 2.2rem;
font-weight: 300;
text-align: center;
font-size: 2.5rem;
font-weight: 400;
}
@ -232,39 +228,6 @@ production stylesheet in assets/built/screen.css
}
/* Special header styles for smaller screens */
@media (max-width: 900px) {
.site-header-content {
padding-bottom: 9vw;
}
}
@media (max-width: 500px) {
.site-home-header .site-title {
font-size: 4.2rem;
}
.site-home-header .site-description {
font-size: 1.8rem;
}
.site-archive-header .site-header-content {
flex-direction: column;
align-items: center;
min-height: unset;
}
.site-archive-header .site-title {
font-size: 4.2rem;
text-align: center;
}
.site-archive-header .no-image .site-header-content {
padding: 12vw 0 20px;
}
}
/* 5. Site Navigation
/* ---------------------------------------------------------- */
@ -383,7 +346,7 @@ hides that entirely. Slightly hacky code. But nice clean end-result.
display: block;
padding: 12px 12px;
color: #fff;
opacity: 0.7;
opacity: 0.75;
}
.nav li a:hover {
@ -491,18 +454,14 @@ hides that entirely. Slightly hacky code. But nice clean end-result.
.subscribe-button {
display: block;
margin: 0 0 0 10px;
padding: 5px 10px;
border: #fff 1px solid;
color: #fff;
font-size: 1.3rem;
padding: 8px 15px;
color: var(--color-darkgrey);
font-weight: 500;
letter-spacing: -0.015em;
font-size: 1.5rem;
line-height: 1em;
border-radius: 5px;
opacity: 0.8;
}
.subscribe-button:hover {
text-decoration: none;
opacity: 1;
background: #fff;
border-radius: 30px;
}
.site-nav-right .nav + .subscribe-button {
@ -564,10 +523,6 @@ hides that entirely. Slightly hacky code. But nice clean end-result.
/* 6. Post Feed
/* ---------------------------------------------------------- */
.posts {
overflow-x: hidden;
}
.post-feed {
position: relative;
display: grid;
@ -593,7 +548,6 @@ hides that entirely. Slightly hacky code. But nice clean end-result.
flex: 1 1 301px;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 220px;
background-size: cover;
}
@ -665,7 +619,7 @@ hides that entirely. Slightly hacky code. But nice clean end-result.
color: color-mod(var(--color-midgrey) l(-8%));
}
.post-card:not(.post-card-large) .post-card-excerpt p {
.post-card-excerpt p {
margin-bottom: 1em;
display: -webkit-box;
overflow-y: hidden;
@ -716,17 +670,17 @@ hides that entirely. Slightly hacky code. But nice clean end-result.
margin: 0 0 0 -6px;
width: 36px;
height: 36px;
border: #fff 2px solid;
border-radius: 100%;
box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
}
.post-card-byline-content {
flex: 1 1 50%;
display: flex;
flex-direction: column;
margin: 0 0 0 6px;
margin: 0 0 0 8px;
color: color-mod(var(--color-midgrey) l(+10%));
font-size: 1.3rem;
font-size: 1.4rem;
line-height: 1.2em;
font-weight: 400;
}
@ -736,17 +690,18 @@ hides that entirely. Slightly hacky code. But nice clean end-result.
}
.post-card-byline-content a {
color: color-mod(var(--color-darkgrey) l(+20%));
color: color-mod(var(--color-darkgrey) l(+15%));
font-weight: 600;
}
.post-card-byline-date {
font-size: 1.2rem;
font-size: 1.3rem;
line-height: 1.5em;
}
.post-card-byline-date .bull {
display: inline-block;
margin: 0 4px;
margin: 0 2px;
opacity: 0.6;
}
@ -821,6 +776,7 @@ make sure this only happens on large viewports / desktop-ish devices.
margin-bottom: 1.5em;
font-size: 1.7rem;
line-height: 1.55em;
-webkit-line-clamp: 8;
}
}
@ -947,13 +903,14 @@ headings, text, images and lists. We deal with cards lower down. */
}
/* [id] represents all headings h1-h6, reset all margins */
.gh-content [id] {
.gh-content > [id] {
margin: 0;
color: var(--color-darkgrey);
}
/* Add back a top margin to all headings, unless a heading
is the very first element in the post content */
.gh-content [id]:not(:first-child) {
.gh-content > [id]:not(:first-child) {
margin: 2em 0 0;
}
@ -963,12 +920,12 @@ is the very first element in the post content */
}
/* A larger margin before/after HRs and blockquotes */
.gh-content hr,
.gh-content blockquote {
.gh-content > hr,
.gh-content > blockquote {
margin-top: 6vmin;
}
.gh-content hr + *,
.gh-content blockquote + * {
.gh-content > hr + *,
.gh-content > blockquote + * {
margin-top: 6vmin !important;
}
@ -1357,21 +1314,13 @@ Ghost editor. */
.article-byline-meta {
color: color-mod(var(--color-midgrey));
font-size: 1.3rem;
font-size: 1.4rem;
line-height: 1.2em;
}
.article-byline-meta h4 {
margin: 0 0 3px;
font-size: 1.5rem;
}
.article-byline-meta h4 a {
color: color-mod(var(--color-darkgrey));
}
.article-byline-meta h4 a:hover {
color: var(--color-darkgrey);
font-size: 1.6rem;
}
.article-byline-meta .bull {
@ -1384,8 +1333,8 @@ Ghost editor. */
display: block;
overflow: hidden;
margin: 0 -4px;
width: 40px;
height: 40px;
width: 50px;
height: 50px;
border: #fff 2px solid;
border-radius: 100%;
transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;
@ -1805,10 +1754,6 @@ html.dark-mode img {
opacity: 0.9;
}
html.dark-mode .site-header-background:before {
background: rgba(0,0,0,0.6);
}
html.dark-mode .post-card,
html.dark-mode .post-card:hover {
border-bottom-color: color-mod(var(--color-darkmode) l(+8%));
@ -1838,11 +1783,6 @@ html.dark-mode .post-card-excerpt {
color: color-mod(var(--color-midgrey) l(+10%));
}
html.dark-mode .author-avatar,
html.dark-mode .static-avatar {
border-color: color-mod(var(--color-darkgrey) l(+2%));
}
html.dark-mode .post-full-content {
background: var(--color-darkmode);
}