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!

assets/css/screen.css

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