Refactor headings, quotes and margins, mobile improvements

A few people commented how pull-quote styling is odd for blockquotes. I agree. This reverts casper to use more traditional blockquote styling, but maintains the special pullquote styling now over on the H5 element. So if you want nice/wide/centered blue text, use an H5.

- Closes https://github.com/TryGhost/Casper/issues/364
- Closes https://github.com/TryGhost/Casper/issues/368
This commit is contained in:
John O'Nolan 2017-08-25 16:31:10 -04:00
parent a7d5c885bd
commit aee9f69bb0
6 changed files with 105 additions and 57 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:#3c484e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1.5rem;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:#cbeafb}::selection{text-shadow:none;background:#cbeafb}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e3e9ed}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:1em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}li{margin:.5em 0;padding-left:.5em;line-height:1.6em}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171a;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:.5em solid #e5eff5}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:#26a8ed;text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:700;text-rendering:optimizeLegibility}h1{margin:0 0 .5em;font-size:5rem;font-weight:700}@media (max-width:500px){h1{font-size:2.2rem}}h2{margin:1.5em 0 .5em;font-size:2rem}@media (max-width:500px){h2{font-size:1.8rem}}h3{margin:1.5em 0 .5em;font-size:1.8rem;font-weight:500}@media (max-width:500px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:1.6rem;font-weight:500}h5,h6{margin:1.5em 0 .5em;font-size:1.4rem;font-weight:500} 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:#3c484e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1.5rem;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:#cbeafb}::selection{text-shadow:none;background:#cbeafb}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e3e9ed}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}li{margin:.5em 0;padding-left:.3em;line-height:1.6em}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171a;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:.5em solid #e5eff5}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:#26a8ed;text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:700;text-rendering:optimizeLegibility}h1{margin:0 0 .5em;font-size:5rem;font-weight:700}@media (max-width:500px){h1{font-size:2.2rem}}h2{margin:1.5em 0 .5em;font-size:2rem}@media (max-width:500px){h2{font-size:1.8rem}}h3{margin:1.5em 0 .5em;font-size:1.8rem;font-weight:500}@media (max-width:500px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:1.6rem;font-weight:500}h5,h6{margin:1.5em 0 .5em;font-size:1.4rem;font-weight:500}
/*# 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

@ -341,7 +341,7 @@ blockquote {
ol, ol,
ul { ul {
padding-left: 1em; padding-left: 1.3em;
padding-right: 1.5em; padding-right: 1.5em;
} }
@ -362,7 +362,7 @@ ol {
li { li {
margin: 0.5em 0; margin: 0.5em 0;
padding-left: 0.5em; padding-left: 0.3em;
line-height: 1.6em; line-height: 1.6em;
} }

View File

@ -156,11 +156,11 @@ body {
} }
.site-title { .site-title {
z-index: 10;
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 3.8rem; font-size: 3.8rem;
font-weight: 700; font-weight: 700;
z-index: 10;
} }
.site-logo { .site-logo {
@ -168,13 +168,13 @@ body {
} }
.site-description { .site-description {
z-index: 10;
margin: 0; margin: 0;
padding: 5px 0; padding: 5px 0;
font-size: 2.2rem; font-size: 2.2rem;
font-weight: 300; font-weight: 300;
letter-spacing: 0.5px; letter-spacing: 0.5px;
opacity: 0.8; opacity: 0.8;
z-index: 10;
} }
@media (max-width: 500px) { @media (max-width: 500px) {
@ -226,7 +226,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
flex-shrink: 0; flex-shrink: 0;
display: block; display: block;
margin-right: 24px; margin-right: 24px;
padding: 9px 0; padding: 11px 0;
color: #fff; color: #fff;
font-size: 1.7rem; font-size: 1.7rem;
line-height: 1em; line-height: 1em;
@ -459,6 +459,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
height: 25px; height: 25px;
margin-right: 5px; margin-right: 5px;
border-radius: 100%; border-radius: 100%;
object-fit: cover; object-fit: cover;
} }
@ -552,6 +553,11 @@ The first (most recent) post in the list is styled to be bigger than the others
padding: 6vw 3vw 3vw; padding: 6vw 3vw 3vw;
text-align: center; text-align: center;
} }
@media (max-width: 500px) {
.post-full-header {
padding: 14vw 3vw 10vw;
}
}
.post-full-meta { .post-full-meta {
display: flex; display: flex;
@ -665,22 +671,31 @@ The first (most recent) post in the list is styled to be bigger than the others
max-width: 920px; max-width: 920px;
} }
.post-full-content p,
.post-full-content ul,
.post-full-content ol,
.post-full-content dl,
.post-full-content pre,
.post-full-content h1, .post-full-content h1,
.post-full-content h2, .post-full-content h2,
.post-full-content h3, .post-full-content h3,
.post-full-content h4, .post-full-content h4,
.post-full-content h5, .post-full-content h5,
.post-full-content h6, .post-full-content h6,
.post-full-content p,
.post-full-content ul,
.post-full-content ol,
.post-full-content dl,
.post-full-content pre,
.post-full-content blockquote,
.post-full-comments, .post-full-comments,
.footnotes { .footnotes {
min-width: 100%; min-width: 100%;
} }
.post-full-content li {
word-break: break-word;
}
.post-full-content li p {
margin: 0;
}
.post-template .kg-card-markdown > p:first-child { .post-template .kg-card-markdown > p:first-child {
font-size: 1.25em; font-size: 1.25em;
line-height: 1.5em; line-height: 1.5em;
@ -746,7 +761,7 @@ Usage (In Ghost editor):
<small>Your image caption</small> <small>Your image caption</small>
*/ */
.post-full-content br + small { .post-full-content img + br + small {
display: block; display: block;
margin-top: -3em; margin-top: -3em;
margin-bottom: 1.5em; margin-bottom: 1.5em;
@ -754,36 +769,25 @@ Usage (In Ghost editor):
.post-full-content iframe { .post-full-content iframe {
margin: 0 auto 1.5em; margin: 0 auto;
} }
.post-full-content blockquote { .post-full-content blockquote {
margin: 0 0 1.5em 0; margin: 0 0 1.5em;
padding: 1.5em 0; padding: 0 1.5em;
border: 0; border-left: #3eb0ef 3px solid;
color: var(--blue);
font-size: 3rem;
line-height: 1.6em;
text-align: center;
}
.post-full-content blockquote:before {
content: open-quote;
} }
.post-full-content blockquote p { .post-full-content blockquote p {
margin: 0; margin: 0 0 1em 0;
color: inherit;
font-size: inherit;
line-height: inherit;
font-style: italic;
} }
@media (min-width: 1000px) { .post-full-content blockquote p:last-child {
.post-full-content blockquote:not(:first-of-type) { margin-bottom: 0;
width: 100vw;
max-width: 1060px;
}
}
.post-full-content blockquote + blockquote {
padding-top: 0;
} }
.post-full-content code { .post-full-content code {
@ -843,34 +847,87 @@ Usage (In Ghost editor):
.post-full-content h4, .post-full-content h4,
.post-full-content h5, .post-full-content h5,
.post-full-content h6 { .post-full-content h6 {
margin-top: -75px;
padding-top: 75px;
color: color(var(--darkgrey) l(-5%)); color: color(var(--darkgrey) l(-5%));
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
} }
.post-full-content h1 { .post-full-content h1 {
font-size: 5rem; margin: 0.5em 0 0.2em 0;
font-size: 4.6rem;
font-weight: 700;
}
@media (max-width: 500px) {
.post-full-content h1 {
font-size: 2.8rem;
}
} }
.post-full-content h2 { .post-full-content h2 {
font-size: 3.5rem; margin: 0.5em 0 0.2em 0;
font-size: 3.6rem;
font-weight: 700;
}
@media (max-width: 500px) {
.post-full-content h2 {
font-size: 2.6rem;
}
} }
.post-full-content h3 { .post-full-content h3 {
font-size: 2.5rem; margin: 0.5em 0 0.2em 0;
font-size: 2.8rem;
font-weight: 700;
}
@media (max-width: 500px) {
.post-full-content h3 {
font-size: 2.2rem;
}
} }
.post-full-content h4 { .post-full-content h4 {
font-size: 1.6rem; margin: 0.5em 0 0.2em 0;
font-size: 2.8rem;
font-weight: 700;
}
@media (max-width: 500px) {
.post-full-content h4 {
font-size: 2.2rem;
}
} }
.post-full-content h5 { .post-full-content h5 {
font-size: 1.4rem; display: block;
margin: 0.5em 0;
padding: 1em 0 1.5em;
border: 0;
color: var(--blue);
font-family: Georgia,serif;
font-size: 3.2rem;
line-height: 1.35em;
text-align: center;
}
@media (min-width: 1180px) {
.post-full-content h5 {
width: 100vw;
max-width: 1060px;
}
}
@media (max-width: 500px) {
.post-full-content h5 {
padding: 0 0 0.5em;
font-size: 2.2rem;
}
} }
.post-full-content h6 { .post-full-content h6 {
font-size: 1.4rem; margin: 0.5em 0 0.2em 0;
font-size: 2.3rem;
font-weight: 700;
}
@media (max-width: 500px) {
.post-full-content h6 {
font-size: 2rem;
}
} }
.footnotes-sep { .footnotes-sep {
@ -913,15 +970,6 @@ Usage (In Ghost editor):
.post-full-content:after { .post-full-content:after {
display: none; display: none;
} }
.post-full-content h1 {
font-size: 2.9rem;
}
.post-full-content h2 {
font-size: 2.9rem;
}
.post-full-content h3 {
font-size: 2rem;
}
} }
/* Tables */ /* Tables */
@ -1520,17 +1568,17 @@ Usage (In Ghost editor):
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.site-header-content .author-profile-image { .site-header-content .author-profile-image {
z-index: 10;
flex-shrink: 0; flex-shrink: 0;
width: 100px; width: 100px;
height: 100px; height: 100px;
margin: 0 0 20px 0; margin: 0 0 20px 0;
box-shadow: rgba(255,255,255,0.1) 0 0 0 6px; box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;
z-index: 10;
} }
.site-header-content .author-bio { .site-header-content .author-bio {
flex-shrink: 0;
z-index: 10; z-index: 10;
flex-shrink: 0;
max-width: 600px; max-width: 600px;
margin: 5px 0 10px 0; margin: 5px 0 10px 0;
font-size: 2rem; font-size: 2rem;
@ -1541,8 +1589,8 @@ Usage (In Ghost editor):
} }
.site-header-content .author-meta { .site-header-content .author-meta {
flex-shrink: 0;
z-index: 10; z-index: 10;
flex-shrink: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;