Browse Source

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
master
John O'Nolan 3 years ago
parent
commit
aee9f69bb0
6 changed files with 105 additions and 57 deletions
  1. +1
    -1
      assets/built/global.css
  2. +1
    -1
      assets/built/global.css.map
  3. +1
    -1
      assets/built/screen.css
  4. +1
    -1
      assets/built/screen.css.map
  5. +2
    -2
      assets/css/global.css
  6. +99
    -51
      assets/css/screen.css

+ 1
- 1
assets/built/global.css 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 */

+ 1
- 1
assets/built/global.css.map
File diff suppressed because it is too large
View File


+ 1
- 1
assets/built/screen.css
File diff suppressed because it is too large
View File


+ 1
- 1
assets/built/screen.css.map
File diff suppressed because it is too large
View File


+ 2
- 2
assets/css/global.css View File

@@ -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;
}



+ 99
- 51
assets/css/screen.css View File

@@ -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;
}

@media (min-width: 1000px) {
.post-full-content blockquote:not(:first-of-type) {
width: 100vw;
max-width: 1060px;
}
margin: 0 0 1em 0;
color: inherit;
font-size: inherit;
line-height: inherit;
font-style: italic;
}

.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…
Cancel
Save