Merge pull request #464 from kbayliss/fix/markdown-styles

Adding a fix from @kbayliss to address some spacing inconsistencies in the code blocks and markdown blocks being used for the blog.

Apply richtext styles to markdown blocks and improve spacing of markdown/code blocks

wagtailio/project_styleguide/templates/patterns/components/streamfields/code_block/code_block.html

@@ -1,6 +1,6 @@
 {% load wagtailcore_tags %}
 <div class="grid">
-    <div class="grid-align">
+    <div class="code-block code-block--{{ self.block.name|default:'markdownblock' }}">
         {{ code }}
     </div>
 </div>

wagtailio/static/sass/abstracts/_mixins.scss

@@ -110,3 +110,46 @@
 @mixin z-index($key) {
     z-index: z-index($key);
 }
+
+// Apply formatting for elements using richtext 
+@mixin richtext() {
+    a {
+        color: var(--color--link);
+        transition: color 0.3s;
+
+        &:hover {
+            color: var(--color--interaction);
+        }
+    }
+
+    b {
+        font-weight: $weight--bold;
+    }
+
+    ul,
+    ol {
+        list-style: outside;
+        padding-left: 20px;
+        margin-bottom: 20px;
+
+        @include media-query(medium) {
+            margin-bottom: 40px;
+        }
+    }
+
+    ol {
+        list-style: roman;
+    }
+
+    p {
+        margin: 0 0 20px;
+
+        @include media-query(large) {
+            margin: 0 0 40px;
+        }
+
+        &:last-child {
+            margin: 0;
+        }
+    }
+}

wagtailio/static/sass/components/_code-block.scss

@@ -0,0 +1,23 @@
+.code-block {
+    @include sf-spacing(2);
+
+    grid-column: 2 / span 2;
+
+    @include media-query(medium) {
+        grid-column: 2 / span 3;
+    }
+
+    @include media-query(large) {
+        grid-column: 3 / span 3;
+    }
+
+    &--markdownblock {
+        // Ensure HTML components are styled correctly.
+        @include richtext();
+
+        // Make `CodeBlock` and code blocks within `MarkDownBlock` look the same.
+        pre {
+            @include sf-spacing(2);
+        }
+    }
+}

wagtailio/static/sass/components/_rich-text.scss

@@ -1,43 +1,5 @@
 .rich-text {
-    a {
-        color: var(--color--link);
-        transition: color 0.3s;
-
-        &:hover {
-            color: var(--color--interaction);
-        }
-    }
-
-    b {
-        font-weight: $weight--bold;
-    }
-
-    ul,
-    ol {
-        list-style: outside;
-        padding-left: 20px;
-        margin-bottom: 20px;
-
-        @include media-query(medium) {
-            margin-bottom: 40px;
-        }
-    }
-
-    ol {
-        list-style: roman;
-    }
-
-    p {
-        margin: 0 0 20px;
-
-        @include media-query(large) {
-            margin: 0 0 40px;
-        }
-
-        &:last-child {
-            margin: 0;
-        }
-    }
+    @include richtext();
 
     &--sf {
         @include sf-spacing(2);

wagtailio/static/sass/main.scss

@@ -28,6 +28,7 @@
 @import 'components/code-snippet';
 @import 'components/comparison-table';
 @import 'components/cookie-message';
+@import 'components/code-block';
 @import 'components/cta';
 @import 'components/cta-block';
 @import 'components/document';
@@ -39,7 +40,6 @@
 @import 'components/footer-menu';
 @import 'components/get-started';
 @import 'components/grid';
-@import 'components/grid-align';
 @import 'components/heading';
 @import 'components/headline';
 @import 'components/hero';

wagtailio/static/sass/vendor/_code-highlighting.scss

@@ -3,6 +3,7 @@
     white-space: pre-wrap;
     padding: 1em;
     font-size: 0.85em;
+    margin: 0;
 
     @media (forced-colors: active) {
         border: 1px solid;