Add .gh-inline class to make fonts work on nested elements
By default, the theme only styles elements (eg. <p>) if they are directly in the post body: if there's a <p> inside a <div>, for example, it won't be styled. This is problematic for elements that need to look like part of the main text, such as mathbox passages or subscription detail boxes, because we'd have to manually style each of them to match... ...except we don't because now adding the `.gh-inline` class takes care of it all! We directly tack on to the `.gh-content` direct rules, so if that gets updated then ours will too, no further action needed. Yayy!
This commit is contained in:
parent
033a36c35c
commit
e6ae9b83e8
3 changed files with 34 additions and 15 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -916,30 +916,37 @@ headings, text, images and lists. We deal with cards lower down. */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* [id] represents all headings h1-h6, reset all margins */
|
/* [id] represents all headings h1-h6, reset all margins */
|
||||||
.gh-content > [id] {
|
.gh-content > [id],
|
||||||
|
.gh-inline [id] {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: var(--color-darkgrey);
|
color: var(--color-darkgrey);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Add back a top margin to all headings, unless a heading
|
/* Add back a top margin to all headings, unless a heading
|
||||||
is the very first element in the post content */
|
is the very first element in the post content */
|
||||||
.gh-content > [id]:not(:first-child) {
|
.gh-content > [id]:not(:first-child),
|
||||||
|
.gh-inline [id]:not(:first-child) {
|
||||||
margin: 2em 0 0;
|
margin: 2em 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Add a small margin between a heading and anything after it */
|
/* Add a small margin between a heading and anything after it */
|
||||||
.gh-content > [id] + * {
|
.gh-content > [id] + *,
|
||||||
|
.gh-inline [id] + * {
|
||||||
margin-top: 1.5rem !important;
|
margin-top: 1.5rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* A larger margin before/after HRs and blockquotes */
|
/* A larger margin before/after HRs and blockquotes */
|
||||||
.gh-content > hr,
|
.gh-content > hr,
|
||||||
.gh-content > blockquote {
|
.gh-content > blockquote
|
||||||
|
.gh-inline hr,
|
||||||
|
.gh-inline blockquote {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: 6vmin;
|
margin-top: 6vmin;
|
||||||
}
|
}
|
||||||
.gh-content > hr + *,
|
.gh-content > hr + *,
|
||||||
.gh-content > blockquote + * {
|
.gh-content > blockquote + *
|
||||||
|
.gh-inline hr + *,
|
||||||
|
.gh-inline blockquote + * {
|
||||||
margin-top: 6vmin !important;
|
margin-top: 6vmin !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -954,7 +961,12 @@ is the very first element in the post content */
|
||||||
.gh-content > ol,
|
.gh-content > ol,
|
||||||
.gh-content > ul,
|
.gh-content > ul,
|
||||||
.gh-content > dl,
|
.gh-content > dl,
|
||||||
.gh-content > p {
|
.gh-content > p,
|
||||||
|
.gh-inline blockquote,
|
||||||
|
.gh-inline ol,
|
||||||
|
.gh-inline ul,
|
||||||
|
.gh-inline dl,
|
||||||
|
.gh-inline p {
|
||||||
font-family: var(--font-serif);
|
font-family: var(--font-serif);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 2.1rem;
|
font-size: 2.1rem;
|
||||||
|
@ -963,17 +975,22 @@ is the very first element in the post content */
|
||||||
|
|
||||||
.gh-content > ul,
|
.gh-content > ul,
|
||||||
.gh-content > ol,
|
.gh-content > ol,
|
||||||
.gh-content > dl {
|
.gh-content > dl,
|
||||||
|
.gh-inline ul,
|
||||||
|
.gh-inline ol,
|
||||||
|
.gh-inline dl {
|
||||||
padding-left: 1.9em;
|
padding-left: 1.9em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-content > blockquote {
|
.gh-content > blockquote,
|
||||||
|
.gh-inline blockquote {
|
||||||
position: relative;
|
position: relative;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-content > blockquote::before {
|
.gh-content > blockquote::before,
|
||||||
|
.gh-inline blockquote::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: -1.5em;
|
left: -1.5em;
|
||||||
|
@ -983,7 +1000,8 @@ is the very first element in the post content */
|
||||||
background: var(--ghost-accent-color);
|
background: var(--ghost-accent-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-content :not(pre) > code {
|
.gh-content :not(pre) > code,
|
||||||
|
.gh-inline :not(pre) > code {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
padding: 0.15em 0.4em 0.15em;
|
padding: 0.15em 0.4em 0.15em;
|
||||||
border: #e1eaef 1px solid;
|
border: #e1eaef 1px solid;
|
||||||
|
@ -1048,7 +1066,7 @@ except for when immediately preceeded by a heading */
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* This keeps small iamges centered */
|
/* This keeps small images centered */
|
||||||
.kg-image-card img {
|
.kg-image-card img {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
@ -1529,7 +1547,8 @@ Ghost editor. */
|
||||||
/* 7.5. Snipette Scissors
|
/* 7.5. Snipette Scissors
|
||||||
/* ---------------------------------------------------------- */
|
/* ---------------------------------------------------------- */
|
||||||
|
|
||||||
.gh-content > hr {
|
.gh-content > hr,
|
||||||
|
.gh-inline hr {
|
||||||
border: 0;
|
border: 0;
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -1540,7 +1559,7 @@ Ghost editor. */
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-content > hr::after,
|
.gh-content > hr::after,
|
||||||
{
|
.gh-inline hr::after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue