<div class="o-banner-detail ">
<div class="o-banner-detail__content">
<img src="../../img/banner1.png" class="o-banner-detail__image" data-credit="Marc Wallberg">
<div class="o-banner-detail__content-inner">
<div class="o-banner-detail__wrapper">
<div class="o-banner-detail__container">
<div class="o-banner-detail__title-row">
<div class="o-banner-detail__title-wrap">
<h1 class="u-t-title-article">Comment protéger le bonheur des enfants</h1>
</div>
</div>
<div class="row o-banner__meta">
<div class="o-banner-detail__meta-inner">
<div class="o-banner-detail__tag-wrap">
<a href="#" class="o-banner-detail__tag">Reportages</a>
<a href="#" class="o-banner-detail__tag">Photos</a>
</div>
<div class="o-banner-detail__date-wrap">
<div class="o-banner-detail__date">Publié mardi 6 mars 2018 à 09:16</div>,
<div class="o-banner-detail__date">modifié mardi 6 mars 2018 à 11:45</div>.
</div>
</div>
</div>
</div>
</div>
<p class="o-banner-detail__photo-credit">© Marc Wallberg</p>
</div>
<div class="o-banner-detail__footer">
<div class="o-banner-detail__wrapper">
<div class="o-banner-detail__container">
<div class="o-banner-detail__footer-row">
<div class="o-banner-detail__footer-inner">
<div class="o-banner-detail__footer-data o-banner-detail__footer-data--readtime">
<svg class="a-icon a-icon--primary" role="img" title="Comment protéger le bonheur des enfants">
<use xlink:href="#timing" />
</svg>
<span class="o-banner-detail__footer-data-text"><strong class="o-banner-detail__footer-data-label">Lecture</strong> 4 minutes</span>
</div>
<a href="#" class="o-banner-detail__footer-data o-banner-detail__footer-data--author">
<img class="o-banner-detail__author-img" src="http://via.placeholder.com/60x60">
<span class="o-banner-detail__footer-data-text"><strong class="o-banner-detail__footer-data-label">Par</strong> <span class="o-banner-detail__author-name">Lise Bailat</span></span>
</a>
<a class="o-banner-detail__next-article" href="#">
<span>Au Vietnam, Bienvenue chez «Maman chance»</span>
<svg class="a-icon a-icon--primary" role="img" title="Comment protéger le bonheur des enfants">
<use xlink:href="#chevron-right" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="o-banner-detail__sponsor">
<span>Avec le soutien de</span> <img src="../../img/logo-jobup.png" class="o-banner-detail__sponsor-logo">
<a href="#">
<svg class="a-icon" role="img" title="Comment protéger le bonheur des enfants">
<use xlink:href="#info"/>
</svg>
</a>
</div>
<div class="o-banner-detail__under">
<div class="o-banner-detail__under-date">Publié mardi 6 mars 2018 à 09:16, </div>
<div class="o-banner-detail__under-date">modifié mardi 6 mars 2018 à 11:45.</div>
</div>
</div>
<div class="o-banner-detail {{modifiers_classes}}">
<div class="o-banner-detail__content">
<img src="{{path image}}" class="o-banner-detail__image"{{#if photocredit}} data-credit="{{photocredit}}"{{/if}}>
<div class="o-banner-detail__content-inner">
<div class="o-banner-detail__wrapper">
<div class="o-banner-detail__container">
<div class="o-banner-detail__title-row">
<div class="o-banner-detail__title-wrap">
<h1 class="u-t-title-article">{{title}}</h1>
</div>
</div>
<div class="row o-banner__meta">
<div class="o-banner-detail__meta-inner">
<div class="o-banner-detail__tag-wrap">
<a href="#" class="o-banner-detail__tag">{{category}}</a>
{{#each tags }}
<a href="#" class="o-banner-detail__tag">{{ . }}</a>
{{/each}}
</div>
{{!-- START PUBLISHED: add only if publish date is defined --}} {{#if dates}}
<div class="o-banner-detail__date-wrap">
{{#if dates.published}}<div class="o-banner-detail__date">{{dates.published}}</div>{{#if dates.modified}}, {{/if}}{{/if}}
{{#if dates.modified}}<div class="o-banner-detail__date">{{dates.modified}}</div>{{/if}}.
</div>
{{!-- END READTIME --}} {{/if}}
</div>
</div>
</div>
</div>
{{!-- START PHOTOCREDIT: add only if photo credit is defined --}} {{#if photocredit}}
<p class="o-banner-detail__photo-credit">© {{photocredit}}</p>
{{!-- END PHOTOCREDIT --}} {{/if}}
</div>
<div class="o-banner-detail__footer">
<div class="o-banner-detail__wrapper">
<div class="o-banner-detail__container">
<div class="o-banner-detail__footer-row">
<div class="o-banner-detail__footer-inner">
{{!-- START READTIME: add only if reading time is defined --}} {{#if readtime}}
<div class="o-banner-detail__footer-data o-banner-detail__footer-data--readtime">
{{> @a-icon name="timing" title=title modifier="primary" }}
<span class="o-banner-detail__footer-data-text"><strong class="o-banner-detail__footer-data-label">Lecture</strong> {{readtime}}</span>
</div>
{{!-- END READTIME --}} {{/if}}
{{!-- START VIDEOLENGTH: add only if it's a video article --}} {{#if videolength}}
<div class="o-banner-detail__footer-data o-banner-detail__footer-data--video">
{{> @a-icon name="video" title=title modifier="primary" }}
<span class="o-banner-detail__footer-data-text"><strong class="o-banner-detail__footer-data-label">Vidéo</strong> {{videolength}}</span>
</div>
{{!-- END VIDEOLENGTH --}} {{/if}}
{{!-- START NUMPHOTOS: add only if it's a video article --}} {{#if numphotos}}
<div class="o-banner-detail__footer-data o-banner-detail__footer-data-label o-banner-detail__footer-data--photo">
{{> @a-icon name="photo" title=title modifier="primary" }}
<span class="o-banner-detail__footer-data-text">{{numphotos}} Photos</span>
</div>
{{!-- END NUMPHOTOS --}} {{/if}}
{{!-- START AUTHOR: add only if author is defined --}} {{#if author}}
<a href="{{authorlink}}" class="o-banner-detail__footer-data o-banner-detail__footer-data--author">
<img class="o-banner-detail__author-img" src="{{path authorimage}}">
<span class="o-banner-detail__footer-data-text"><strong class="o-banner-detail__footer-data-label">Par</strong> <span class="o-banner-detail__author-name">{{author}}</span></span>
</a>
{{!-- END AUTHOR --}} {{/if}}
{{!-- START NEXTLINK: add only if next article link is defined --}} {{#if next}}
<a class="o-banner-detail__next-article" href="{{next.link}}">
<span>{{ next.title}}</span>
{{> @a-icon name="chevron-right" title=title modifier="primary" }}
</a>
{{!-- END VIDEOLENGTH --}} {{/if}}
</div>
</div>
</div>
</div>
</div>
</div>
{{!-- START ADVERT: add only if it's a sponsored article --}} {{#if sponsored}}
<div class="o-banner-detail__sponsor">
<span>Avec le soutien de</span> <img src="{{path sponsored.logo}}" class="o-banner-detail__sponsor-logo">
<a href="{{sponsored.link}}">
<svg class="a-icon" role="img" title="{{ title }}">
<use xlink:href="#info"/>
</svg>
</a>
</div>
{{!-- END ADVERT --}} {{/if}}
{{!-- START PUBLISHED: add only if publish date is defined --}} {{#if dates}}
<div class="o-banner-detail__under">
{{#if dates.published}}<div class="o-banner-detail__under-date">{{dates.published}}{{#if dates.modified}}, {{else}}.{{/if}}</div>{{/if}}
{{#if dates.modified}}<div class="o-banner-detail__under-date">{{dates.modified}}.</div>{{/if}}
</div>
{{!-- END PUBLISHED --}} {{/if}}
{{!-- START CTA: add only if it's a video header --}} {{#if cta}}
<a href="{{cta.link}}" rel="modal" class="o-banner-detail__cta">
{{#if cta.label}}<div class="o-banner-detail__cta-label"><span>{{ cta.label }}</span></div>{{/if}}
<div class="o-banner-detail__cta-icon">
{{> @a-icon name=cta.icon title=title modifier="negative" }}
</div>
</a>
{{!-- END VIDEO --}} {{/if}}
</div>
$color-banner-under: #7c7c7c;
.o-banner-detail {
$self: &;
max-width: 100%;
position: relative;
color: $color-text-negative;
z-index: 0;
a {
color: $color-text-negative;
&:not(.u-t-category-link):not(.o-banner-detail__next-article) {
font-weight: $font-weight-normal;
}
}
&__wrapper {
@extend .o-banner__wrapper;
}
&__container {
@extend .o-banner__container;
@include media($sm-breakpoint) {
padding-left: 16px;
padding-right: 16px;
}
@include media($md-breakpoint) {
padding-left: 0;
padding-right: 0;
}
}
&__image {
@extend .o-banner__image;
}
&__date-wrap {
@include fluid-props(font-size, $sm-breakpoint, $fluid-max, 12px, 14px);
padding-left: 25px;
display: none;
line-height: 1.2em;
@include media($sm-breakpoint) {
display: flex;
flex-wrap: wrap;
}
}
&__date {
white-space: nowrap;
letter-spacing: 1px;
}
&__content {
@extend .o-banner__content;
@include fluid-props(padding-top, $fluid-min, $fluid-max, 220px, 430px);
padding-bottom: 0;
@include media($sm-breakpoint) {
padding-top: 0;
}
}
&__content-inner {
position: relative;
}
&__title-row {
@extend .row;
}
&__title-wrap {
@extend .o-banner__title-wrap;
@extend .col-md-offset-2;
}
&__meta-inner {
@extend .col-xs-12;
@extend .col-md-8;
@extend .col-md-offset-2;
display: flex;
align-items: center;
}
&__tag-wrap {
margin-left: .2em;
}
&__tag {
@extend .u-t-tag-link;
padding-top: .1em;
margin-right: 1em;
&:first-child {
@extend .u-t-category-link;
}
}
&__footer {
@include fluid-props(margin-top, $fluid-min, $fluid-max, 20px, 40px);
border-top: 1px solid rgba(132, 132, 132, 0.5);
font-family: $font-highlight;
margin-left: 8px;
margin-right: 8px;
position: relative;
@include media($sm-breakpoint) {
margin-left: 16px;
margin-right: 16px;
}
@include media($md-breakpoint) {
margin-left: 32px;
margin-right: 32px;
}
.grid-container {
padding-left: 0;
padding-right: 0;
@include media(800px) {
padding-left: 8px;
padding-right: 8px;
}
@media ($lg-breakpoint) {
padding-right: 16px;
padding-left: 16px;
}
}
}
&__footer-row {
@extend .row;
}
&__footer-inner {
@extend .col-xs-12;
@extend .col-md-8;
@extend .col-md-offset-2;
display: flex;
@include fluid-props(height, $fluid-min, $fluid-max, 35px, 55px, false);
}
&__footer-data {
@extend .u-t-size--15;
margin-left: 20px;
@include fluid-props(padding-left, $fluid-min, $fluid-max, 22px, 37px);
padding-right: 20px;
display: flex;
flex: 1 0 auto;
align-items: center;
position: relative;
@include media($sm-breakpoint) {
flex: 0 0 auto;
}
&:first-child {
margin-left: 0;
}
svg {
position: absolute;
left: 0;
}
+ .o-banner-detail__footer-data {
&::after {
content: "";
width: 1px;
height: 30px;
background-color: $color-gray-dark;
position: absolute;
top: 50%;
left: -20px;
display: none;
transform: translateY(-50%);
@include media($sm-breakpoint) {
display: block;
}
}
img {
margin-left: 0;
}
}
.a-icon {
@include fluid-props(width height, $fluid-min, $fluid-max, 16px, 22px);
@include fluid-props(margin-right, $fluid-min, $fluid-max, 10px, 15px);
flex-shrink: 0;
}
&--readtime, &--video {
.o-banner-detail__footer-label {
display: none;
@include media($sm-breakpoint) {
display: flex;
}
}
}
}
&__footer-data-text {
flex-shrink: 0;
}
&__footer-data-label {
@extend .u-t-text--bold;
}
&__footer-data--author {
display: inline-block;
display: flex;
align-items: center;
justify-content: flex-end;
text-align: right;
flex-grow: 0;
@include fluid-props(padding-left, $fluid-min, $fluid-max, 32px, 40px);
@media (max-width: $sm-breakpoint - 1px) {
padding-right: 0;
}
@include media($sm-breakpoint) {
position: relative;
top: 0;
}
}
&__author-img {
@include fluid-props(width height, $sm-breakpoint, $fluid-max, 26px, 30px);
@include fluid-props(margin-right, $fluid-min, $fluid-max, 5px, 9px);
position: absolute;
left: 0;
margin-left: 0;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
}
&__author-name {
@extend .u-t-author-link;
}
&__next-article {
@extend .u-t-size--15;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
padding-right: 2em;
text-decoration: none;
font-weight: $font-weight-bold;
display: none;
@include media($sm-breakpoint) {
display: block;
}
span {
position: relative;
@include fluid-props(top, $sm-breakpoint, $fluid-max, 0px, -2px, false);
letter-spacing: 1px;
font-weight: normal;
&::after {
content: '';
position: absolute;
bottom: -.2em;
left: .1em;
width: 100%;
display: block;
border-bottom: solid 2px $color-primary;
transform: scaleX(0);
transform-origin: 0% 50%;
transition: transform .15s ease-in-out;
}
}
svg {
@include fluid-props(width height, $fluid-min, $fluid-max, 16px, 24px);
position: absolute;
@include fluid-props(right, $fluid-min, $fluid-max, -4px, -5px);
top: 50%;
transition: transform .15s ease-out;
transform: translate(0, -50%);
}
@include hover-behaviour {
span::after {
transform: scaleX(1);
}
svg {
transition-delay: .1s;
transform: translate(.5em, -50%);
}
}
}
&__sponsor {
@include fluid-props(padding-left padding-right, 801px, $fluid-max, 10px, 35px);
@include fluid-props(padding-top, 801px, $fluid-max, 5px, 10px);
@include fluid-props(padding-bottom, 801px, $fluid-max, 4px, 9px);
@include fluid-props(height, $fluid-min, $fluid-max, 30px, 55px);
@include fluid-props(font-size, $fluid-min, $fluid-max, 10px, 15px);
background: $color-text-lighten;
color: $color-gray-dark;
font-family: $font-highlight;
text-align: right;
padding-left: 8px;
padding-right: 8px;
svg {
@include fluid-props(width height, $fluid-min, $fluid-max, 12px, 14px);
@include fluid-props(margin-left, $fluid-min, $fluid-max, 6px, 8px);
vertical-align: middle;
fill: $color-gray-dark;
}
}
&__sponsor-logo {
vertical-align: middle;
max-height: 100%;
margin-left: 10px;
}
&__under {
background: $color-text-negative;
color: $color-banner-under;
padding: 15px 8px;
font-size: 10px;
font-family: $font-highlight;
font-weight: $font-weight-normal;
display: block;
@extend .u-t-line--22;
@include media($sm-breakpoint) {
display: none;
}
span {
max-width: 70%;
display: block;
}
}
&__photo-credit {
@extend .o-banner__photo-credit;
bottom: 0;
@include media($sm-breakpoint) {
bottom: -2px;
}
}
&--media {
@extend .o-banner--media;
#{ $self }__content {
@include fluid-props(padding-right, $fluid-min, $fluid-max, 4px, 12px);
position: relative;
&:before {
content: "";
position: absolute;
bottom: 0;
right: 0;
background: $color-primary;
height: 80%;
@include fluid-props(width, $fluid-min, $fluid-max, 4px, 12px);
@include media($md-breakpoint) {
height: 60%;
}
}
}
#{ $self }__cta {
@extend .o-banner__cta;
}
#{ $self }__cta-label {
@extend .o-banner__cta-label;
}
#{ $self }__cta-icon {
@extend .o-banner__cta-icon;
}
}
}
{
"image": "/img/banner1.png",
"title": "Comment protéger le bonheur des enfants",
"category": "Reportages",
"author": "Lise Bailat",
"authorlink": "#",
"authorimage": "http://via.placeholder.com/60x60",
"readtime": "4 minutes",
"photocredit": "Marc Wallberg",
"dates": {
"published": "Publié mardi 6 mars 2018 à 09:16",
"modified": "modifié mardi 6 mars 2018 à 11:45"
},
"next": {
"title": "Au Vietnam, Bienvenue chez «Maman chance»",
"link": "#"
},
"tags": [
"Photos"
],
"sponsored": {
"logo": "/img/logo-jobup.png",
"link": "#"
}
}