feat: implement new box structure for the blog page
This commit is contained in:
Jonathan Rainville
parent
3dfdb014d7
commit
77a479eb27
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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', {
|
||||
className: 'o-grid__column--1-1 o-grid__column--large-2-3',
|
||||
{{ partial('partial/coverbox', {
|
||||
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>
|
||||
|
||||
{{
|
||||
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">
|
||||
<div class="o-container o-distance-l o-center">
|
||||
<a href="/archives" class="c-button" title="{{ __('blog.view_all_link') }}">{{ __('blog.view_all_link') }}</a>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -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 %})">
|
||||
<div class="c-box__overlay"></div>
|
||||
<div class="c-box__body">
|
||||
<a href="{{ link.href }}" class="o-grid">
|
||||
<div class="o-grid__column--1-1 o-grid__column--large-2-3">
|
||||
<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>
|
||||
{% if dateInfo %}<time class="c-meta u-text-ghost">{{ date(dateInfo, 'Do MMMM YYYY') }}</time>{% endif %}
|
||||
<p class="c-box__subtitle u-text-ghost">{{ text }}</p>
|
||||
<h3
|
||||
class="{% if titleClassName %}{{ titleClassName }}{% else %}c-body-title{% endif %} u-text-normal">{{ title }}</h3>
|
||||
{% 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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,3 +4,7 @@
|
|||
}
|
||||
border: $border-width solid $color;
|
||||
}
|
||||
|
||||
.border-normal {
|
||||
@include border();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
|
|
|
|||
Loading…
Reference in New Issue