XCORNER-23 blog post

assets/scss/components/_article.scss

@@ -0,0 +1,46 @@
+.c-blog-article__image {    
+    border-radius: rem-calc(4px);
+}
+
+.c-blog-article__title {
+    color: $color-black;
+    font-family: $font-semi-bold;
+    font-style: normal;
+    font-weight: 600;
+    font-size: rem-calc(32px);
+    line-height: rem-calc(40px);
+    margin-bottom: rem-calc(12px);
+
+    @include bp(medium) {
+        font-size: rem-calc(42px);
+        line-height: rem-calc(56px);
+        margin-bottom: rem-calc(31px);
+    }
+}
+
+.c-blog-article__meta {
+    color: $color-neutrals-300;
+    font-family: $font-regular;
+    font-style: normal;
+    font-weight: 400;
+    font-size: rem-calc(16px);
+    line-height: rem-calc(24px);
+    margin-bottom: rem-calc(20px);
+
+    @include bp(medium) {
+        margin-bottom: rem-calc(50px);
+    }
+}
+
+.c-blog-article__container {
+    max-width: rem-calc(782px);
+    margin: 0 auto;
+}
+
+.c-blog-article__header {
+    margin-block: rem-calc(24px);
+
+    @include bp(medium) {
+        margin-block: rem-calc(55px);
+    }
+}

assets/scss/components/_components.scss

@@ -32,3 +32,4 @@
 @import 'facet';
 @import 'accordion';
 @import 'blog-post';
+@import 'article';

assets/scss/components/_wysiwyg.scss

@@ -1,28 +1,95 @@
+.c-wysiwyg__heading {
+    color: $color-black;
+    font-family: $font-semi-bold;
+    font-style: normal;
+    font-weight: 600;
+}
+
 .c-wysiwyg {
     p {
         color: $color-neutrals-500;
         font-family: $font-regular;
-        font-size: 1.125rem;
+        font-size: rem-calc(18px);
         font-style: normal;
         font-weight: 400;
-        line-height: 1.5rem;
+        line-height: rem-calc(24px);
 
         &:last-of-type {
             margin-bottom: 0;
         }
     }
 
-    h1 {
-        color: $color-black;
+    strong {
         font-family: $font-semi-bold;
-        font-size: 2rem;
-        font-style: normal;
         font-weight: 600;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        @extend .c-wysiwyg__heading;
+    }
+
+    h1 {
+        font-size: 2rem;
         line-height: 2.5rem;
 
         @include bp(medium) {
             font-size: 2.625rem;
             line-height: 3.5rem;
         }
     }
+
+    h2 {
+        font-size: rem-calc(24px);
+        line-height: rem-calc(32px);
+
+        @include bp(medium) {
+            font-size: rem-calc(32px);
+            line-height: rem-calc(40px);
+        }
+    }
+
+    h3 {
+        font-size: rem-calc(20px);
+        line-height: rem-calc(24px);
+
+        @include bp(medium) {
+            font-size: rem-calc(24px);
+            line-height: rem-calc(40px);
+        }
+    }
+
+    h4 {
+        font-size: rem-calc(20px);
+        line-height: rem-calc(24px);
+
+        @include bp(medium) {
+            font-size: rem-calc(20px);
+            line-height: rem-calc(24px);
+        }
+    }
+
+    h5, 
+    h6 {
+        font-size: rem-calc(18px);
+        line-height: rem-calc(24px);
+
+        @include bp(medium) {
+            font-size: rem-calc(18px);
+            line-height: rem-calc(24px);
+        }
+    }
+
+    a {
+        color: $color-primary-300;
+        font-family: $font-regular;
+        font-size: rem-calc(18px);
+        font-style: normal;
+        font-weight: 400;
+        line-height: rem-calc(24px);
+    }
 }

templates/components/blog/article.html

@@ -0,0 +1,35 @@
+<article class="c-blog-article">
+    <h1 class="c-blog-article__title">
+        {{post.title}}
+    </h1>
+
+    <p class="c-blog-article__meta">
+        {{#if post.author}}{{lang 'blog.posted_by' name=post.author}} on {{/if}}<time>{{post.date_published}}</time>
+    </p>
+
+    <div class="c-blog-article__container">
+        <div class="c-wysiwyg">
+            {{#contains post.body '{more}'}}
+                {{{first (split post.body '{more}')}}}
+            {{/contains}}
+        </div>
+
+        <header class="c-blog-article__header">
+            {{#if post.thumbnail}}
+                <a class="c-blog-article__image-wrapper" href="{{post.url}}">
+                    {{> components/common/image
+                        image=post.thumbnail
+                        fallback_size=theme_settings.blog_size
+                        class="c-blog-article__image"
+                    }}
+                </a>
+            {{/if}}
+        </header>
+
+        <div class="c-blog-article__body c-wysiwyg">
+            {{#if post.body}}
+                {{{last (split post.body '{more}')}}}
+            {{/if}}
+        </div>
+    </div>
+</article>

templates/pages/blog-post.html

@@ -1,6 +1,6 @@
 {{#partial "page"}}
     {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
-    {{> components/blog/post post=blog.post show_tags=true is_blog_post=true}}
+    {{> components/blog/article post=blog.post show_tags=true is_blog_post=true}}
 {{/partial}}
 
 {{> layout/base}}