snipette/weflock
snipette/weflock
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Add .gh-inline class to make fonts work on nested elements

Browse source 
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:
Badri Sunderarajan 2021-11-14 16:30:26 +05:30
parent 033a36c35c
commit e6ae9b83e8
3 changed files with 34 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/built/screen.css
View file

File diff suppressed because one or more lines are too long

2
assets/built/screen.css.map
View file

File diff suppressed because one or more lines are too long

45
assets/css/screen.css
View file

@ -916,30 +916,37 @@ headings, text, images and lists. We deal with cards lower down. */
}
/* [id] represents all headings h1-h6, reset all margins */
.gh-content > [id] {
.gh-content > [id],
.gh-inline [id] {
margin: 0;
color: var(--color-darkgrey);
}
/* 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) {
.gh-content > [id]:not(:first-child),
.gh-inline [id]:not(:first-child) {
margin: 2em 0 0;
}
/* 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;
}
/* A larger margin before/after HRs and blockquotes */
.gh-content > hr,
.gh-content > blockquote {
.gh-content > blockquote
.gh-inline hr,
.gh-inline blockquote {
position: relative;
margin-top: 6vmin;
}
.gh-content > hr + *,
.gh-content > blockquote + * {
.gh-content > blockquote + *
.gh-inline hr + *,
.gh-inline blockquote + * {
margin-top: 6vmin !important;
}
@ -954,7 +961,12 @@ is the very first element in the post content */
.gh-content > ol,
.gh-content > ul,
.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-weight: 400;
font-size: 2.1rem;
@ -963,17 +975,22 @@ is the very first element in the post content */
.gh-content > ul,
.gh-content > ol,
.gh-content > dl {
.gh-content > dl,
.gh-inline ul,
.gh-inline ol,
.gh-inline dl {
padding-left: 1.9em;
}
.gh-content > blockquote {
.gh-content > blockquote,
.gh-inline blockquote {
position: relative;
font-style: italic;
padding: 0;
}
.gh-content > blockquote::before {
.gh-content > blockquote::before,
.gh-inline blockquote::before {
content: "";
position: absolute;
left: -1.5em;
@ -983,7 +1000,8 @@ is the very first element in the post content */
background: var(--ghost-accent-color);
}
.gh-content :not(pre) > code {
.gh-content :not(pre) > code,
.gh-inline :not(pre) > code {
vertical-align: middle;
padding: 0.15em 0.4em 0.15em;
border: #e1eaef 1px solid;
@ -1048,7 +1066,7 @@ except for when immediately preceeded by a heading */
width: 100%;
}
/* This keeps small iamges centered */
/* This keeps small images centered */
.kg-image-card img {
margin: auto;
}
@ -1529,7 +1547,8 @@ Ghost editor. */
/* 7.5. Snipette Scissors
/* ---------------------------------------------------------- */
.gh-content > hr {
.gh-content > hr,
.gh-inline hr {
border: 0;
height: 3rem;
display: block;
@ -1540,7 +1559,7 @@ Ghost editor. */
}
.gh-content > hr::after,
{
.gh-inline hr::after {
display: none;
}