mirror of
https://github.com/TryGhost/Ruby.git
synced 2024-10-29 20:38:33 +02:00
Update content styles
refs https://github.com/TryGhost/Team/issues/1227
This commit is contained in:
parent
62849a3742
commit
6dca7ac745
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
97
assets/css/blog/content.css
Normal file
97
assets/css/blog/content.css
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
/* Content refers to styling all page and post content that is
|
||||||
|
created within the Ghost editor. The main content handles
|
||||||
|
headings, text, images and lists. We deal with cards lower down. */
|
||||||
|
|
||||||
|
/* Default vertical spacing */
|
||||||
|
.gh-content > * + * {
|
||||||
|
margin-top: 2.4rem;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* [id] represents all headings h1-h6, reset all margins */
|
||||||
|
.gh-content > [id] {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-serif-title .gh-content > [id] {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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) {
|
||||||
|
margin-top: 3.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add a small margin between a heading and anything after it */
|
||||||
|
.gh-content > [id] + * {
|
||||||
|
margin-top: 1.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-content > [id] + .kg-card {
|
||||||
|
margin-top: 2.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* A larger margin before/after HRs and blockquotes */
|
||||||
|
.gh-content > hr,
|
||||||
|
.gh-content > blockquote {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 3.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-content > hr + *,
|
||||||
|
.gh-content > blockquote + * {
|
||||||
|
margin-top: 3.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cards */
|
||||||
|
.gh-content :not(.kg-card):not([id]) + .kg-card {
|
||||||
|
margin-top: 3.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-content .kg-card + :not(.kg-card) {
|
||||||
|
margin-top: 3.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Now the content typography styles */
|
||||||
|
.gh-content h2 {
|
||||||
|
font-size: 2.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-content h3 {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-content a:not(.kg-bookmark-container):not(.kg-btn):not(.kg-nft-card-container) {
|
||||||
|
color: var(--ghost-accent-color);
|
||||||
|
text-decoration: underline;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-content > ol,
|
||||||
|
.gh-content > ul,
|
||||||
|
.gh-content > dl,
|
||||||
|
.gh-content > p,
|
||||||
|
.kg-callout-text {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-serif-body .gh-content > blockquote,
|
||||||
|
.has-serif-body .gh-content > ol,
|
||||||
|
.has-serif-body .gh-content > ul,
|
||||||
|
.has-serif-body .gh-content > dl,
|
||||||
|
.has-serif-body .gh-content > p,
|
||||||
|
.has-serif-body .kg-callout-text {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-content > ul,
|
||||||
|
.gh-content > ol,
|
||||||
|
.gh-content > dl {
|
||||||
|
padding-left: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-content li + li {
|
||||||
|
margin-top: 0.8rem;
|
||||||
|
}
|
@ -16,6 +16,7 @@
|
|||||||
|
|
||||||
html {
|
html {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
font-size: 62.5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
*,
|
*,
|
||||||
|
@ -16,6 +16,7 @@
|
|||||||
@import "blog/page.css";
|
@import "blog/page.css";
|
||||||
@import "blog/featured.css";
|
@import "blog/featured.css";
|
||||||
@import "blog/single.css";
|
@import "blog/single.css";
|
||||||
|
@import "blog/content.css";
|
||||||
@import "blog/share.css";
|
@import "blog/share.css";
|
||||||
@import "blog/author.css";
|
@import "blog/author.css";
|
||||||
@import "blog/navigation.css";
|
@import "blog/navigation.css";
|
||||||
|
2
page.hbs
2
page.hbs
@ -11,7 +11,7 @@
|
|||||||
{{> post-header tag="h1" hide_link=true}}
|
{{> post-header tag="h1" hide_link=true}}
|
||||||
{{> post-media with_caption=true}}
|
{{> post-media with_caption=true}}
|
||||||
<div class="post-wrapper">
|
<div class="post-wrapper">
|
||||||
<div class="post-content u-text-format">
|
<div class="post-content gh-content">
|
||||||
{{content}}
|
{{content}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
2
post.hbs
2
post.hbs
@ -19,7 +19,7 @@
|
|||||||
</div>
|
</div>
|
||||||
{{> post-media with_caption=true}}
|
{{> post-media with_caption=true}}
|
||||||
<div class="post-wrapper">
|
<div class="post-wrapper">
|
||||||
<div class="post-content u-text-format">
|
<div class="post-content gh-content">
|
||||||
{{content}}
|
{{content}}
|
||||||
</div>
|
</div>
|
||||||
{{> tags}}
|
{{> tags}}
|
||||||
|
Loading…
Reference in New Issue
Block a user