Update content styles

refs https://github.com/TryGhost/Team/issues/1227

assets/css/blog/content.css

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

assets/css/general/basics.css

@@ -16,6 +16,7 @@
 
 html {
     box-sizing: border-box;
+    font-size: 62.5%;
 }
 
 *,

assets/css/screen.css

@@ -16,6 +16,7 @@
 @import "blog/page.css";
 @import "blog/featured.css";
 @import "blog/single.css";
+@import "blog/content.css";
 @import "blog/share.css";
 @import "blog/author.css";
 @import "blog/navigation.css";

page.hbs

@@ -11,7 +11,7 @@
                             {{> post-header tag="h1" hide_link=true}}
                             {{> post-media with_caption=true}}
                             <div class="post-wrapper">
-                                <div class="post-content u-text-format">
+                                <div class="post-content gh-content">
                                     {{content}}
                                 </div>
                             </div>

post.hbs

@@ -19,7 +19,7 @@
                             </div>
                             {{> post-media with_caption=true}}
                             <div class="post-wrapper">
-                                <div class="post-content u-text-format">
+                                <div class="post-content gh-content">
                                     {{content}}
                                 </div>
                                 {{> tags}}