feat: implement new box structure for the blog page

source/_posts/2020-02-19-embark-5-2-release.md

@@ -6,7 +6,7 @@ categories:
   - releases
   - embark
 layout: blog-post
-image: '/assets/images/embark-header_blank.jpg'
+image: '/assets/images/embark_logo.png'
 ---
 
 <span class="o-center">

themes/embark/layout/blog.swig

@@ -1,10 +1,8 @@
-{{
+{{ partial('partial/header', {
-  partial('partial/header', {
   title: __(page.title),
   tagline: __(page.tagline),
   compact: true
-  })
+}) }}
-}}
 
 {% set len = site.posts.length %}
 {% set sortedPosts = site.posts.sort('date', 'desc') %}
@@ -12,10 +10,7 @@
 
 <main role="main">
   <section class="o-container o-distance">
-    <div class="o-grid">
+    {{ partial('partial/coverbox', {
-      {{
-        partial('partial/coverbox', {
-          className: 'o-grid__column--1-1 o-grid__column--large-2-3',
       title: posts[0].title,
       titleClassName: 'c-title-level-2',
       text: posts[0].summary,
@@ -25,73 +20,46 @@
         text: 'Read more',
         href: url_for(posts[0].path)
       }
-        })
+    }) }}
-      }}
+  </section>
+  <section class="o-distance-l o-container">
+    <div class="o-grid">
+      {% for i in [1, 2] %}
+        {{ partial('partial/event-box', {
+          className: 'o-grid__column--1-1 o-grid__column--large-1-2',
+          name: posts[i].title,
+          image: posts[i].image,
+          linkTitle: true,
+          dateInfo: date(posts[i].date),
+          description: posts[i].summary,
+          link: {
+            text: 'Read more',
+            href: url_for(posts[i].path)
+          }
+        }) }}
+      {% endfor %}
+    </div>
+  </section>
+  <section class="o-distance-l o-container">
+    <div class="o-grid">
+      {% for i in [3, 4, 5, 6, 7, 8] %}
+        {{ partial('partial/event-box', {
+          className: 'o-grid__column--1-1 o-grid__column--large-1-3',
+          name: posts[i].title,
+          image: posts[i].image,
+          linkTitle: true,
+          dateInfo: date(posts[i].date),
+          description: posts[i].summary,
+          link: {
+            text: 'Read more',
+            href: url_for(posts[i].path)
+          }
+        }) }}
+      {% endfor %}
+    </div>
+  </section>
 
-      {{
+  <div class="o-container o-distance-l o-center">
-        partial('partial/coverbox', {
-          className: 'o-grid__column--1-1 o-grid__column--large-1-3',
-          title: posts[1].title,
-          titleClassName: 'c-title-level-3',
-          text: posts[1].summary,
-          image: posts[1].image,
-          dateInfo: posts[1].date,
-          link: {
-            text: 'Read more',
-            href: url_for(posts[1].path)
-          }
-        })
-      }}
-    </div>
-  </section>
-  <section class="o-distance">
-    <div class="c-box c-box--universe">
-      <div class="o-container">
-        <div class="o-grid" id="event">
-          {{
-            partial('partial/event-box', {
-              className: 'o-grid__column--1-1 o-grid__column--large-1-3',
-              name: posts[4].title,
-              linkTitle: true,
-              dateInfo: date(posts[4].date),
-              description: posts[4].summary,
-              link: {
-                text: 'Read more',
-                href: url_for(posts[4].path)
-              }
-            })
-          }}
-          {{
-            partial('partial/event-box', {
-              className: 'o-grid__column--1-1 o-grid__column--large-1-3',
-              name: posts[3].title,
-              linkTitle: true,
-              dateInfo: date(posts[3].date),
-              description: posts[3].summary,
-              link: {
-                text: 'Read more',
-                href: url_for(posts[3].path)
-              }
-            })
-          }}
-          {{
-            partial('partial/event-box', {
-              className: 'o-grid__column--1-1 o-grid__column--large-1-3',
-              name: posts[2].title,
-              linkTitle: true,
-              dateInfo: date(posts[2].date),
-              description: posts[2].summary,
-              link: {
-                text: 'Read more',
-                href: url_for(posts[2].path)
-              }
-            })
-          }}
-        </div>
-      </div>
-    </div>
-  </section>
-  <div class="o-container o-distance o-center">
     <a href="/archives" class="c-button" title="{{ __('blog.view_all_link') }}">{{ __('blog.view_all_link') }}</a>
   </div>
 </main>

themes/embark/layout/partial/coverbox.swig

@@ -1,12 +1,22 @@
-<a href="{{link.href}}" class="c-box c-box--cover {% if className %} {{ className }} {% endif %}" style="background-image: url({% if image %}{{ image }}{% else %}https://images.unsplash.com/photo-1551086144-2e1250996ba7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80{% endif %})">
+<a href="{{ link.href }}" class="o-grid">
-  <div class="c-box__overlay"></div>
+  <div class="o-grid__column--1-1 o-grid__column--large-2-3">
-  <div class="c-box__body">
+    <img
+      class="border-normal"
+      src="{% if image %}{{ image }}{% else %}https://images.unsplash.com/photo-1551086144-2e1250996ba7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80{% endif %}"
+      alt="article image"/>
+  </div>
+
+  <div class="o-grid__column--1-1 o-grid__column--large-1-3">
     {% if icon %}
-    <svg class="c-icon c-icon--l"><use xlink:href="{{url_for('../../assets/icons/symbols.svg')}}#icon-{{ icon }}"></use></svg>
+      <svg class="c-icon c-icon--l">
+        <use xlink:href="{{ url_for('../../assets/icons/symbols.svg') }}#icon-{{ icon }}"></use>
+      </svg>
     {% endif %}
-    <h3 class="{% if titleClassName %}{{titleClassName}}{% else %}c-body-title{% endif %} u-text-ghost">{{title}}</h3>
+    <h3
-    {% if dateInfo %}<time class="c-meta u-text-ghost">{{ date(dateInfo, 'Do MMMM YYYY') }}</time>{% endif %}
+      class="{% if titleClassName %}{{ titleClassName }}{% else %}c-body-title{% endif %} u-text-normal">{{ title }}</h3>
-    <p class="c-box__subtitle u-text-ghost">{{ text }}</p>
+    {% if dateInfo %}
+      <time class="c-meta u-text-normal">{{ date(dateInfo, 'Do MMMM YYYY') }}</time>{% endif %}
+    <p class="c-box__subtitle u-text-normal">{{ text }}</p>
     {% if link %}
       <p class="c-box__footer">
         <span class="c-link">{{ link.text }}</span>

themes/embark/layout/partial/event-box.swig

@@ -1,23 +1,28 @@
-<div class="c-box {% if className %} {{ className }} {% endif %}">
+<a class="{% if className %} {{ className }} {% endif %}" href="{{ link.href }}">
+  <div
+    class="border-normal c-box--cover"
+    style="background-image: url({% if image %}{{ image }}{% else %}/assets/images/embark-header_blank.jpg{% endif %})"
+  ></div>
+
   {% if eventDate %}<span class="c-tag c-tag--light c-box__offset">{{eventDate}}</span>{% endif %}
-  <h3 class="c-body-title">
+  <h3 class="c-body-title u-text-normal o-distance-m">
     {% if linkTitle %}
-      <a href="{{link.href}}" title="{{name}}">{{name}}</a>
+     {{name}}
     {% else %}
       {{name}}
     {% endif %}
   </h3>
   {% if dateInfo || location %}
-    <p class="c-meta">
+    <p class="c-meta u-text-normal">
     {% if location %}{{location}}{% endif %}
     {% if dateInfo %}{{date(dateInfo, 'Do MMMM YYYY')}}{% endif %}
     </p>
   {% endif %}
-  <p class="c-box__subtitle u-text-ghost">{{description}}</p>
+  <p class="c-box__subtitle u-text-normal">{{description}}</p>
   {% if link %}
   <p class="c-box__footer">
-    <a href="{{ link.href }}" title="{{ link.text }}" class="c-link c-link--ghost">{{link.text}}</a>
+    <p>{{link.text}}</p>
   </p>
   {% endif %}
-</div>
+</a>
 

themes/embark/source/css/01-tools/_tools.border.scss

@@ -4,3 +4,7 @@
   }
   border: $border-width solid $color;
 }
+
+.border-normal {
+  @include border();
+}

themes/embark/source/css/05-components/_components.boxes.scss

@@ -64,13 +64,19 @@
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  border: 0;
+  height: 250px;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   color: get-color(unique, white);
 }
 
+.o-grid__column--large-1-3 {
+  .c-box--cover {
+    height: 150px;
+  }
+}
+
 .c-box--spot {
   background-color: #007e7f;
   background-image: linear-gradient(62deg, #003e65 0%, #51b988 100%);