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
parent
a7d5c885bd
commit
aee9f69bb0
|
|
@ -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 */
|
||||
|
|
|
|||
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
|
|
@ -341,7 +341,7 @@ blockquote {
|
|||
|
||||
ol,
|
||||
ul {
|
||||
padding-left: 1em;
|
||||
padding-left: 1.3em;
|
||||
padding-right: 1.5em;
|
||||
}
|
||||
|
||||
|
|
@ -362,7 +362,7 @@ ol {
|
|||
|
||||
li {
|
||||
margin: 0.5em 0;
|
||||
padding-left: 0.5em;
|
||||
padding-left: 0.3em;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -156,11 +156,11 @@ body {
|
|||
}
|
||||
|
||||
.site-title {
|
||||
z-index: 10;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 3.8rem;
|
||||
font-weight: 700;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.site-logo {
|
||||
|
|
@ -168,13 +168,13 @@ body {
|
|||
}
|
||||
|
||||
.site-description {
|
||||
z-index: 10;
|
||||
margin: 0;
|
||||
padding: 5px 0;
|
||||
font-size: 2.2rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.5px;
|
||||
opacity: 0.8;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
@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;
|
||||
display: block;
|
||||
margin-right: 24px;
|
||||
padding: 9px 0;
|
||||
padding: 11px 0;
|
||||
color: #fff;
|
||||
font-size: 1.7rem;
|
||||
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;
|
||||
margin-right: 5px;
|
||||
border-radius: 100%;
|
||||
|
||||
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;
|
||||
text-align: center;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
.post-full-header {
|
||||
padding: 14vw 3vw 10vw;
|
||||
}
|
||||
}
|
||||
|
||||
.post-full-meta {
|
||||
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;
|
||||
}
|
||||
|
||||
.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 h2,
|
||||
.post-full-content h3,
|
||||
.post-full-content h4,
|
||||
.post-full-content h5,
|
||||
.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,
|
||||
.footnotes {
|
||||
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 {
|
||||
font-size: 1.25em;
|
||||
line-height: 1.5em;
|
||||
|
|
@ -746,7 +761,7 @@ Usage (In Ghost editor):
|
|||
<small>Your image caption</small>
|
||||
|
||||
*/
|
||||
.post-full-content br + small {
|
||||
.post-full-content img + br + small {
|
||||
display: block;
|
||||
margin-top: -3em;
|
||||
margin-bottom: 1.5em;
|
||||
|
|
@ -754,36 +769,25 @@ Usage (In Ghost editor):
|
|||
|
||||
|
||||
.post-full-content iframe {
|
||||
margin: 0 auto 1.5em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.post-full-content blockquote {
|
||||
margin: 0 0 1.5em 0;
|
||||
padding: 1.5em 0;
|
||||
border: 0;
|
||||
color: var(--blue);
|
||||
font-size: 3rem;
|
||||
line-height: 1.6em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.post-full-content blockquote:before {
|
||||
content: open-quote;
|
||||
margin: 0 0 1.5em;
|
||||
padding: 0 1.5em;
|
||||
border-left: #3eb0ef 3px solid;
|
||||
}
|
||||
|
||||
.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:not(:first-of-type) {
|
||||
width: 100vw;
|
||||
max-width: 1060px;
|
||||
}
|
||||
}
|
||||
|
||||
.post-full-content blockquote + blockquote {
|
||||
padding-top: 0;
|
||||
.post-full-content blockquote p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.post-full-content code {
|
||||
|
|
@ -843,34 +847,87 @@ Usage (In Ghost editor):
|
|||
.post-full-content h4,
|
||||
.post-full-content h5,
|
||||
.post-full-content h6 {
|
||||
margin-top: -75px;
|
||||
padding-top: 75px;
|
||||
color: color(var(--darkgrey) l(-5%));
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
.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 {
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
|
|
@ -913,15 +970,6 @@ Usage (In Ghost editor):
|
|||
.post-full-content:after {
|
||||
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 */
|
||||
|
|
@ -1520,17 +1568,17 @@ Usage (In Ghost editor):
|
|||
/* ---------------------------------------------------------- */
|
||||
|
||||
.site-header-content .author-profile-image {
|
||||
z-index: 10;
|
||||
flex-shrink: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 0 0 20px 0;
|
||||
box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.site-header-content .author-bio {
|
||||
flex-shrink: 0;
|
||||
z-index: 10;
|
||||
flex-shrink: 0;
|
||||
max-width: 600px;
|
||||
margin: 5px 0 10px 0;
|
||||
font-size: 2rem;
|
||||
|
|
@ -1541,8 +1589,8 @@ Usage (In Ghost editor):
|
|||
}
|
||||
|
||||
.site-header-content .author-meta {
|
||||
flex-shrink: 0;
|
||||
z-index: 10;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
|
|||
Loading…
Reference in New Issue