Merge pull request #106 from xfiveco/XCORNER-19-blog-page

XCORNER-19 blog page
xfiveco · Feb 22, 2024 · 75b2ddc · 75b2ddc
2 parents b5d4c7d + 209360e
commit 75b2ddc
Show file tree

Hide file tree

Showing 14 changed files with 162 additions and 67 deletions.
diff --git a/assets/scss/components/_blog-post.scss b/assets/scss/components/_blog-post.scss
@@ -0,0 +1,83 @@
+.c-blog-post {
+    display: flex;
+    flex-direction: column;
+    gap: rem-calc(24px);
+
+    @include bp(medium) {
+        flex-direction: row;
+    }
+
+    @include bp(large) {
+        gap: rem-calc(50px);
+    }
+}
+
+.c-blog-post__image-wrapper {
+    display: block;
+    aspect-ratio: 230 / 132;
+    width: 100%;
+    height: auto;
+    position: relative;
+
+    @include bp(medium) {
+        width: 230px;
+    }
+
+    @include bp(large) {
+        aspect-ratio: 450 / 260;
+        width: 450px;
+    }
+}
+
+.c-blog-post__image {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+    aspect-ratio: 230 / 132;
+
+    @include bp(large) {
+        aspect-ratio: 450 / 260;
+    }
+}
+
+.c-blog-post__title {
+    font-family: $font-semi-bold;
+    font-weight: 600;
+    font-size: rem-calc(20px);
+    line-height: rem-calc(24px);
+    text-decoration: none;
+    color: $color-black;
+
+    @include bp(medium) {
+        font-size: rem-calc(24px);
+        line-height: rem-calc(40px);
+    }
+
+    &:hover {
+        color: $color-black;
+    }
+}
+
+.c-blog-post__meta {
+    font-family: $font-regular;
+    font-weight: 400;
+    font-size: rem-calc(16px);
+    line-height: rem-calc(24px);
+    color: $color-neutrals-300;
+}
+
+.c-blog-post__summary {
+    font-family: $font-regular;
+    font-weight: 400;
+    font-size: rem-calc(18px);
+    line-height: rem-calc(24px);
+    color: $color-neutrals-500;
+}
+
+.c-blog-post__read-more {
+    font-family: $font-semi-bold;
+    font-weight: 600;
+    font-size: rem-calc(18px);
+    line-height: rem-calc(24px);
+    color: $color-primary-300;
+}
diff --git a/assets/scss/components/_components.scss b/assets/scss/components/_components.scss
@@ -31,3 +31,4 @@
 @import 'wishlist';
 @import 'facet';
 @import 'accordion';
+@import 'blog-post';
diff --git a/assets/scss/pages/auth.scss b/assets/scss/pages/auth.scss
@@ -9,13 +9,3 @@
         gap: 3rem;
     }
 }
-
-.p-auth__title {
-    color: $color-black;
-    font-family: $font-semi-bold;
-    font-size: 2.625rem;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 1.33;
-    margin: 0;
-}
diff --git a/assets/scss/pages/blog.scss b/assets/scss/pages/blog.scss
@@ -0,0 +1,9 @@
+.p-blog {
+    display: flex;
+    flex-direction: column;
+    gap: rem-calc(24px);
+
+    @include bp(large) {
+        gap: rem-calc(50px);
+    }
+}
diff --git a/assets/scss/pages/page.scss b/assets/scss/pages/page.scss
@@ -9,3 +9,13 @@
         gap: 3rem;
     }
 }
+
+.p-common__title {
+    color: $color-black;
+    font-family: $font-semi-bold;
+    font-size: 2.625rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 1.33;
+    margin: 0;
+}
diff --git a/assets/scss/pages/pages.scss b/assets/scss/pages/pages.scss
@@ -4,3 +4,4 @@
 @import './create-account';
 @import './forgot-password';
 @import './page';
+@import './blog';
diff --git a/lang/en.json b/lang/en.json
@@ -19,7 +19,7 @@
         "recent_posts": "Recent Posts",
         "label": "Blog",
         "posted_by": "Posted by {name}",
-        "read_more": "read more"
+        "read_more": "Read more"
     },
     "unavailable": {
         "hibernation_title": "We'll be back",

diff --git a/templates/components/blog/post.html b/templates/components/blog/post.html
@@ -1,49 +1,50 @@
-<article>
-    <header>
-        {{#if post.thumbnail}}
-            <figure>
-                <a href="{{post.url}}">
-                    {{> components/common/image
-                        image=post.thumbnail
-                        fallback_size=theme_settings.blog_size
-                    }}
-                </a>
-            </figure>
-        {{/if}}
-        <h{{#if is_blog_post}}1{{else}}2{{/if}}>
-            <a href="{{post.url}}">
-                {{post.title}}
-            </a>
-        </h{{#if is_blog_post}}1{{else}}2{{/if}}>
-        <p>
-            {{#if post.author}}{{lang 'blog.posted_by' name=post.author}} on {{/if}}<time>{{post.date_published}}</time>
-        </p>
-    </header>
-    <div>
-        {{#if post.body}}
-            {{{post.body}}}
-        {{else}}
-            {{{post.summary}}}
-            {{#if post.show_read_more}}
-                &hellip;
-                <a href="{{url}}" aria-label="{{post.title}} {{lang 'blog.read_more'}}">
-                    {{lang 'blog.read_more'}}
-                </a>
-            {{/if}}
-        {{/if}}
-    </div>
-    {{#if show_tags}}
-        {{#if post.tags}}
-            <ul>
-                {{#each post.tags}}
-                    <li>
-                        <a href="{{url}}">
-                            #{{name}}
-                        </a>
-                    </li>
-                {{/each}}
-            </ul>
-        {{/if}}
-    {{/if}}
-    {{>components/common/share url=post.url}}
-</article>
+<article class="c-blog-post">
+    <header class="c-blog-post__header">
+        {{#if post.thumbnail}}
+            <a class="c-blog-post__image-wrapper" href="{{post.url}}">
+                {{> components/common/image
+                    image=post.thumbnail
+                    fallback_size=theme_settings.blog_size
+                    class="c-blog-post__image"
+                }}
+            </a>
+        {{/if}}
+    </header>
+    <div class="c-blog-post__body">
+        <h{{#if is_blog_post}}1{{else}}2{{/if}}>
+            <a class="c-blog-post__title" href="{{post.url}}">
+                {{post.title}}
+            </a>
+        </h{{#if is_blog_post}}1{{else}}2{{/if}}>
+        <p class="c-blog-post__meta">
+            {{#if post.author}}{{lang 'blog.posted_by' name=post.author}} on {{/if}}<time>{{post.date_published}}</time>
+        </p>
+        <p class="c-blog-post__summary">
+            {{#if post.body}}
+                {{{post.body}}}
+            {{else}}
+                {{{post.summary}}}
+            {{/if}}
+            &hellip;
+        </p>
+        {{#if post.show_read_more}}
+            <a class="c-blog-post__read-more" href="{{url}}" aria-label="{{post.title}} {{lang 'blog.read_more'}}">
+                {{lang 'blog.read_more'}}
+            </a>
+        {{/if}}
+    </div>
+    {{#if show_tags}}
+        {{#if post.tags}}
+            <ul>
+                {{#each post.tags}}
+                    <li>
+                        <a href="{{url}}">
+                            #{{name}}
+                        </a>
+                    </li>
+                {{/each}}
+            </ul>
+        {{/if}}
+    {{/if}}
+    {{>components/common/share url=post.url}}
+</article>
diff --git a/templates/pages/auth/create-account.html b/templates/pages/auth/create-account.html
@@ -4,7 +4,7 @@
 <section class="p-auth__section">
     {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
 
-    <h1 class="p-auth__title">
+    <h1 class="p-common__title">
         {{lang 'create_account.heading' }}
     </h1>
 

diff --git a/templates/pages/auth/forgot-password.html b/templates/pages/auth/forgot-password.html
@@ -2,7 +2,7 @@
 {{#partial "page"}}
 <section class="p-auth__section">
     {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
-    <h1 class="p-auth__title">
+    <h1 class="p-common__title">
         {{lang 'reset_password.heading' }}
     </h1>
     <div class="p-forgot-password__container">

diff --git a/templates/pages/auth/login.html b/templates/pages/auth/login.html
@@ -2,7 +2,7 @@
 <section class="p-auth__section">
     {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
 
-    <h1 class="p-auth__title">
+    <h1 class="p-common__title">
         {{lang 'login.heading' }}
     </h1>
 

diff --git a/templates/pages/blog.html b/templates/pages/blog.html
@@ -16,9 +16,9 @@
 
 {{#partial "page"}}
     {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
-    <section>
+    <section class="p-blog">
         {{#unless theme_settings.hide_blog_page_heading }}
-            <h1>
+            <h1 class="p-common__title">
                 {{ blog.name }}
             </h1>
         {{/unless}}

diff --git a/templates/pages/category.html b/templates/pages/category.html
@@ -28,7 +28,7 @@
 
 <div class="u-container">
     {{#unless theme_settings.hide_category_page_heading }}
-        <h1 class="p-page__title">{{strReplace category.name "(dropdown)" ""}}</h1>
+        <h1 class="p-common__title">{{strReplace category.name "(dropdown)" ""}}</h1>
         {{{region name="category_below_header"}}}
     {{/unless}}
 

diff --git a/templates/pages/page.html b/templates/pages/page.html
@@ -4,7 +4,7 @@
 
 <section class="page c-wysiwyg">
     {{#unless theme_settings.hide_page_heading }}
-        <h1 class="p-page__title">
+        <h1 class="p-common__title">
             {{ page.title }}
         </h1>
     {{/unless}}