<div class="page page--media-detail">
<div class="page__content">
<header class="o-header" data-header>
<div class="o-header__side-element">
<img src="../../img/logo.svg" alt="L'illustré logo" class="o-header__logo">
</div>
<nav class="m-nav" data-nav>
<ul class="m-nav__menu">
<li class="m-nav__item">
<a class="m-nav__link" href="/">
<svg class="a-icon" role="img" title="Accueil">
<use xlink:href="#home" />
</svg>
<p class="m-nav__item-title">Accueil</p>
</a>
</li>
<li class="m-nav__item">
<a class="m-nav__link" href="#">
<svg class="a-icon" role="img" title="Reportages">
<use xlink:href="#article" />
</svg>
<p class="m-nav__item-title">Reportages</p>
</a>
</li>
<li class="m-nav__item">
<a class="m-nav__link" href="#">
<svg class="a-icon" role="img" title="Portraits">
<use xlink:href="#portrait" />
</svg>
<p class="m-nav__item-title">Portraits</p>
</a>
</li>
<li class="m-nav__item is-current">
<a class="m-nav__link" href="#">
<svg class="a-icon" role="img" title="Vidéos">
<use xlink:href="#video" />
</svg>
<p class="m-nav__item-title">Vidéos</p>
</a>
</li>
<li class="m-nav__item">
<a class="m-nav__link" href="#">
<svg class="a-icon" role="img" title="Photos">
<use xlink:href="#photo" />
</svg>
<p class="m-nav__item-title">Photos</p>
</a>
</li>
</ul>
</nav>
<div class="o-header__side-element o-header__side-element--right">
<div class="o-header__side-element_content">
<a class="o-header__subscribe" href="#">S'abonner</a>
<a href="" class="o-header__search" rel="search">
<svg class="a-icon" role="img" title="Recherche">
<use xlink:href="#search" />
</svg>
<svg class="a-icon" role="img" title="Close">
<use xlink:href="#close" />
</svg>
</a>
</div>
</div>
<div class="o-search-bar " data-search>
<div class="o-search-bar__wrapper">
<div class="grid-wrapper">
<div class="grid-container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
<form action="#" class="o-search-bar__form">
<p class="o-search-bar__form-label">Rechercher sur L’illustré</p>
<div class="o-search-bar__input-wrapper">
<input class="o-search-bar__input" id="input--search" type="text" required>
<label for="input--search" class="o-search-bar__input-label">Entrer un mot clé ou un auteur</label>
<label for="input--search" class="o-search-bar__input-label o-search-bar__input-label--mobile">Entrer un mot clé</label>
<svg class="a-icon a-icon--primary" role="img" title="search">
<use xlink:href="#search" />
</svg>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="o-search-bar__backdrop"></div>
</div>
</header>
<article class="t-article--photo">
<div class="o-banner-detail o-banner-detail--media">
<div class="o-banner-detail__content">
<img src="../../img/banner4.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">L’interview exclusif d’Adarsh Alem</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">reportage</a>
<a href="#" class="o-banner-detail__tag">hebdomadaire</a>
</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--video">
<svg class="a-icon a-icon--primary" role="img" title="L’interview exclusif d’Adarsh Alem">
<use xlink:href="#video" />
</svg>
<span class="o-banner-detail__footer-data-text"><strong class="o-banner-detail__footer-data-label">Vidéo</strong> 3:25</span>
</div>
<div class="o-banner-detail__footer-data o-banner-detail__footer-data-label o-banner-detail__footer-data--photo">
<svg class="a-icon a-icon--primary" role="img" title="L’interview exclusif d’Adarsh Alem">
<use xlink:href="#photo" />
</svg>
<span class="o-banner-detail__footer-data-text">5 Photos</span>
</div>
<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="L’interview exclusif d’Adarsh Alem">
<use xlink:href="#chevron-right" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="/img/gallery-1.png" rel="modal" class="o-banner-detail__cta">
<div class="o-banner-detail__cta-label"><span>Regarder la vidéo</span></div>
<div class="o-banner-detail__cta-icon">
<svg class="a-icon a-icon--negative" role="img" title="L’interview exclusif d’Adarsh Alem">
<use xlink:href="#video" />
</svg>
</div>
</a>
</div>
<section class="t-article__media-content">
<div class="t-article__media-content-wrapper">
<div class="t-article__media-content-container">
<div class="t-article__media-content-inner">
<div class="t-article__share-wrapper">
<div class="m-share" data-share>
<div class="m-share__title-wrap m-share__mobile m-share__mobile--closed">
<svg class="a-icon" role="img" title="Partager">
<use xlink:href="#share" />
</svg>
<p class="m-share__title">Partager</p>
</div>
<div class="m-share__list-wrap">
<ul class="m-share__list">
<li class="m-share__item">
<a href="https://www.facebook.com/sharer/sharer.php?u=#" class="m-share__item-link" target="_blank"><svg class="a-icon" role="img" title="">
<use xlink:href="#facebook" />
</svg>
</a>
</li>
<li class="m-share__item">
<a href="https://twitter.com/home?status=#" class="m-share__item-link" target="_blank"><svg class="a-icon" role="img" title="">
<use xlink:href="#twitter" />
</svg>
</a>
</li>
<li class="m-share__item">
<a href="https://api.whatsapp.com/send?text=#" class="m-share__item-link" target="_blank"><svg class="a-icon" role="img" title="">
<use xlink:href="#whatsapp" />
</svg>
</a>
</li>
<li class="m-share__item">
<a href="mailto:?subject=Article Test&body=Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum molestiae voluptatem error molestias eum minima culpa nulla dolores rerum at!" class="m-share__item-link" target="_blank"><svg class="a-icon" role="img" title="">
<use xlink:href="#mail" />
</svg>
</a>
</li>
</ul>
<div class="m-share__close"><svg class="a-icon" role="img" title="close">
<use xlink:href="#close" />
</svg>
</div>
</div>
</div>
</div>
<div class="t-article__intro-wrap">
<div class="t-article__intro">
Ses refrains sont indissociables de beaucoup de nos émotions. Avant son passage à Genève, le chanteur revient avec franchise et un parler cash sur les moments les plus importants de sa vie.
</div>
</div>
</div>
<div class="t-article__content-video-wrap">
<div class="t-article__content-video">
<a href="../../img/video.mp4" rel="modal" class="m-video-block" data-video>
<figure>
<div class="m-video-block__image-wrapper">
<img src="../../img/video-block.png" class="m-video-block__image">
</div>
<div class="m-video-block__cta">
<div class="m-video-block__cta-label"><span>Regarder la vidéo</span></div>
<div class="m-video-block__cta-icon">
<svg class="a-icon a-icon--negative" role="img" title="">
<use xlink:href="#video" />
</svg>
</div>
</div>
<figcaption class="m-video-block__caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aremetis dolor sit amet.</figcaption>
</figure>
</a>
</div>
</div>
</div>
</div>
</section>
</article>
<section class="o-article-list o-article-list--red-title">
<h2 class="o-article-list__title">D'autres photos à découvrir</h2>
<div class="o-article-list__wrap">
<div class="o-article-list__cont">
<div class="o-article-list__inner">
<article class="m-preview-article m-preview-article--media o-article-list__item col-md-6" data-preview-article>
<a href="#" class="m-preview-article__link"></a>
<div class="m-preview-article__wrapper">
<div class="m-preview-article__image-wrapper">
<img src="../../img/article-1.jpg" class="m-preview-article__image">
<div class="m-preview-article__media-cta">
<svg class="a-icon a-icon--negative" role="img" title="L'interview exclusive d'Adarsh Alem">
<use xlink:href="#video" />
</svg>
</div>
<div class="m-preview-article__media-cta">
<svg class="a-gallery-number" width="55" height="55" viewBox="0 0 55 55" xmlns="http://www.w3.org/2000/svg" data-gallery-number>
<g fill="#FFF" fill-rule="evenodd">
<path fill-rule="nonzero" d="M11.124 36v2H5V8h36v6.074h-2V10H7v26z"/>
<path class="frame" d="M14 47V17h36v30H14zm2-2h32V19H16v26z" fill-rule="nonzero"/>
<text class="text" x="22" y="37">12</text>
</g>
</svg>
</div>
</div>
<div class="m-preview-article__content-wrapper">
<a href="#" class="m-preview-article__content-link">
<h1 class="m-preview-article__title">L'interview exclusive d'Adarsh Alem</h1>
<p class="m-preview-article__excerpt">A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans…</p>
</a>
<a href="#" class="m-preview-article__category-link">Photos</a>
</div>
</div>
<hr class="m-preview-article__meta-divider">
<div class="m-preview-article__meta">
<p class="m-preview-article__date-author-wrap"><span class="m-preview-article__date">2 mars 2018</span> <a class="m-preview-article__author-link" href="#">Patrick Baumann</a></p>
<a href="#" class="m-preview-article__category-link">Photos</a>
</div>
</article>
<article class="m-preview-article m-preview-article--media o-article-list__item col-md-6" data-preview-article>
<a href="#" class="m-preview-article__link"></a>
<div class="m-preview-article__wrapper">
<div class="m-preview-article__image-wrapper">
<img src="../../img/article-2.jpg" class="m-preview-article__image">
<div class="m-preview-article__media-cta">
<svg class="a-icon a-icon--negative" role="img" title="L'interview exclusive nouveau lauréat 2018 du guide Michelin">
<use xlink:href="#gallery" />
</svg>
</div>
</div>
<div class="m-preview-article__content-wrapper">
<a href="#" class="m-preview-article__content-link">
<h1 class="m-preview-article__title">L'interview exclusive nouveau lauréat 2018 du guide Michelin</h1>
<p class="m-preview-article__excerpt">A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans…</p>
</a>
<a href="#" class="m-preview-article__category-link">Photos</a>
</div>
</div>
<hr class="m-preview-article__meta-divider">
<div class="m-preview-article__meta">
<p class="m-preview-article__date-author-wrap"><span class="m-preview-article__date">2 mars 2018</span> <a class="m-preview-article__author-link" href="#">Patrick Baumann</a></p>
<a href="#" class="m-preview-article__category-link">Photos</a>
</div>
</article>
<article class="m-preview-article m-preview-article--media o-article-list__item col-md-6" data-preview-article>
<a href="#" class="m-preview-article__link"></a>
<div class="m-preview-article__wrapper">
<div class="m-preview-article__image-wrapper">
<img src="../../img/article-3.jpg" class="m-preview-article__image">
<div class="m-preview-article__media-cta">
<svg class="a-gallery-number" width="55" height="55" viewBox="0 0 55 55" xmlns="http://www.w3.org/2000/svg" data-gallery-number>
<g fill="#FFF" fill-rule="evenodd">
<path fill-rule="nonzero" d="M11.124 36v2H5V8h36v6.074h-2V10H7v26z"/>
<path class="frame" d="M14 47V17h36v30H14zm2-2h32V19H16v26z" fill-rule="nonzero"/>
<text class="text" x="22" y="37">25</text>
</g>
</svg>
</div>
</div>
<div class="m-preview-article__content-wrapper">
<a href="#" class="m-preview-article__content-link">
<h1 class="m-preview-article__title">Découvrez le nouveau lauréat 2018 du guide Michelin</h1>
<p class="m-preview-article__excerpt"></p>
</a>
<a href="#" class="m-preview-article__category-link">Photos</a>
</div>
</div>
<hr class="m-preview-article__meta-divider">
<div class="m-preview-article__meta">
<p class="m-preview-article__date-author-wrap"><span class="m-preview-article__date">2 mars 2018</span> <a class="m-preview-article__author-link" href="#">Patrick Baumann</a></p>
<a href="#" class="m-preview-article__category-link">Photos</a>
</div>
</article>
<article class="m-preview-article m-preview-article--media o-article-list__item col-md-6" data-preview-article>
<a href="#" class="m-preview-article__link"></a>
<div class="m-preview-article__wrapper">
<div class="m-preview-article__image-wrapper">
<img src="../../img/article-highlight.jpg" class="m-preview-article__image">
<div class="m-preview-article__media-cta">
<svg class="a-gallery-number" width="55" height="55" viewBox="0 0 55 55" xmlns="http://www.w3.org/2000/svg" data-gallery-number>
<g fill="#FFF" fill-rule="evenodd">
<path fill-rule="nonzero" d="M11.124 36v2H5V8h36v6.074h-2V10H7v26z"/>
<path class="frame" d="M14 47V17h36v30H14zm2-2h32V19H16v26z" fill-rule="nonzero"/>
<text class="text" x="22" y="37">33</text>
</g>
</svg>
</div>
</div>
<div class="m-preview-article__content-wrapper">
<a href="#" class="m-preview-article__content-link">
<h1 class="m-preview-article__title">L'interview exclusif du nouveau lauréat 2018 du guide Michelin</h1>
<p class="m-preview-article__excerpt"></p>
</a>
<a href="#" class="m-preview-article__category-link">Photos</a>
</div>
</div>
<hr class="m-preview-article__meta-divider">
<div class="m-preview-article__meta">
<p class="m-preview-article__date-author-wrap"><span class="m-preview-article__date">2 mars 2018</span> <a class="m-preview-article__author-link" href="#">Patrick Baumann</a></p>
<a href="#" class="m-preview-article__category-link">Photos</a>
</div>
</article>
</div>
</div>
</div>
</section>
<section class="o-newsletter ">
<h2 class="o-newsletter__title">
<span class="o-newsletter__title--short">Newsletter L'Illustré</span>
<span class="o-newsletter__title--full">Recevoir la newsletter L'Illustré</span>
</h2>
<div class="o-newsletter__form-wrap">
<form action="#" class="o-newsletter__form">
<div class="o-newsletter__form-inner">
<div class="o-newsletter__input-wrap">
<div class="o-newsletter__input">
<svg class="a-icon" role="img" title="e-mail">
<use xlink:href="#email" />
</svg>
<input class="o-newsletter__input-field" id="newsletter_input_email" name="newsletter-email" type="text" required>
<label for="newsletter_input_email" class="o-newsletter__input-label">Votre e-mail</label>
</div>
</div>
<div class="o-newsletter__btn">
<button type="submit" class="a-button ">
<span>S'inscrire</span>
</button>
</div>
</div>
</form>
</div>
</section>
</div>
<!-- page-content -->
<footer class="o-footer">
<div class="o-footer__top">
<div class="o-footer__wrapper">
<div class="o-footer__container">
<div class="o-footer__top_wrap">
<img src="../../img/logo.svg" alt="L'illustré logo" class="o-footer__logo">
<nav class="o-footer__menu">
<a href="#" class="o-footer__menu_item"><span>Abonnements</span></a>
<a href="#" class="o-footer__menu_item"><span>Publicité</span></a>
<a href="#" class="o-footer__menu_item"><span>Services</span></a>
<a href="#" class="o-footer__menu_item"><span>À propos</span></a>
</nav>
</div>
</div>
</div>
</div>
<div class="o-footer__bottom">
<div class="o-footer__wrapper">
<div class="o-footer__container">
<div class="o-footer__bottom_wrap">
<nav class="o-footer__social">
<div class="o-footer__social_wrap">
<a href="#" class="o-footer__social_item">
<svg class="a-icon" role="img" title="Facebook">
<use xlink:href="#facebook" />
</svg>
</a>
<a href="#" class="o-footer__social_item">
<svg class="a-icon" role="img" title="Twitter">
<use xlink:href="#twitter" />
</svg>
</a>
<a href="#" class="o-footer__social_item">
<svg class="a-icon" role="img" title="instagram">
<use xlink:href="#instagram" />
</svg>
</a>
<a href="#" class="o-footer__social_item">
<svg class="a-icon" role="img" title="YouTube">
<use xlink:href="#youtube" />
</svg>
</a>
</div>
</nav>
<nav class="o-footer__legal">
<a href="#" class="o-footer__legal_item">Mentions légales</a>
<a href="#" class="o-footer__legal_item">Impressum</a>
</nav>
<div class="o-footer__copyright">© 2018 Ringier Axel Springer Suisse SA</div>
</div>
</div>
</div>
</div>
</footer>
</div>
<div class="page page--media-detail">
<div class="page__content">
{{> '@o-header' header }}
<article class="t-article--photo">
{{> '@o-banner-detail' banner }}
<section class="t-article__media-content">
<div class="t-article__media-content-wrapper">
<div class="t-article__media-content-container">
<div class="t-article__media-content-inner">
<div class="t-article__share-wrapper">
{{ render '@m-share' }}
</div>
<div class="t-article__intro-wrap">
<div class="t-article__intro">
{{ content.intro }}
</div>
</div>
</div>
{{#if content.video}}
<div class="t-article__content-video-wrap">
<div class="t-article__content-video">
{{ render '@m-video-block' }}
</div>
</div>
{{/if}}
</div>
</div>
{{#if content.photos}}
<div class="t-article__content-gallery">
{{#each content.photos}}
{{> "@m-gallery-block" }}
{{/each}}
</div>
{{/if}}
</section>
</article>
{{ render '@o-article-list--red-title' list merge=true }}
{{ render '@o-newsletter' }}
</div> <!-- page-content -->
{{ render '@o-footer' }}
</div>
.page--media-detail {
@extend %page-wrapping-vertical;
.o-header,
.o-footer,
.page__content,
.t-article__share-wrapper {
@extend %page-wrapping;
}
.t-article__media-content {
@include fluid-props(margin-top, $fluid-min, $fluid-max, 0px, 50px);
}
.t-article__media-content-wrapper {
@extend .grid-wrapper;
}
.t-article__media-content-container {
@extend .grid-container;
padding-left: 0;
padding-right: 0;
}
.t-article__media-content-inner,
.t-article__content-video-wrap {
@extend .row;
}
.t-article__content-video-wrap,
.t-article__content-gallery {
@include fluid-props(margin-top, $sm-breakpoint, $fluid-max, 40px, 70px);
}
.t-article__content-gallery {
@include fluid-props(margin-bottom, $fluid-min, $fluid-max, 40px, 130px);
}
.t-article__intro-wrap {
@extend .col-xs-12;
@extend .col-sm-8;
@extend .col-sm-offset-1;
position: relative;
&::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: $color-text-lighten;
}
}
.t-article__intro {
position: relative;
@extend .u-t-excerpt;
margin-left: 8px;
margin-right: 8px;
@include media( $sm-breakpoint ) {
margin-left: 0;
margin-right: 0
}
&::after {
display: none !important;
}
}
.t-article {
&__photo,
&__media-content {
position: relative;
}
&__share-wrapper {
position: relative;
top: 0;
height: auto;
}
}
.t-article__content-video {
@extend .col-xs-12;
@extend .col-sm-10;
@extend .col-sm-offset-1;
}
.m-gallery-block {
@include fluid-props(margin-bottom, $fluid-min, $fluid-max, 48px, 96px);
&:last-child {
margin-bottom: 0;
}
}
// .o-article-list {
// @include fluid-props(margin-bottom, $fluid-min, $fluid-max, 0px, 20px);
// &__title {
// @include fluid-props(margin-top, $fluid-min, $fluid-max, 45px, 155px);
// }
// }
}
{
"header": {
"search": true,
"nav": {
"links": [
{
"name": "Accueil",
"url": "/",
"icon": {
"name": "home",
"title": "Accueil"
}
},
{
"name": "Reportages",
"url": "#",
"icon": {
"name": "article",
"title": "Reportages"
}
},
{
"name": "Portraits",
"url": "#",
"icon": {
"name": "portrait",
"title": "Portraits"
}
},
{
"name": "Vidéos",
"url": "#",
"current": true,
"icon": {
"name": "video",
"title": "Vidéos"
}
},
{
"name": "Photos",
"url": "#",
"icon": {
"name": "photo",
"title": "Photos"
}
}
]
}
},
"banner": {
"image": "/img/banner4.png",
"title": "L’interview exclusif d’Adarsh Alem",
"category": "reportage",
"tags": [
"hebdomadaire"
],
"numphotos": 5,
"photocredit": "Marc Wallberg",
"next": {
"title": "Au Vietnam, Bienvenue chez «Maman chance»",
"link": "#"
},
"cta": {
"link": "/img/gallery-1.png",
"label": "Regarder la vidéo",
"icon": "video"
},
"modifiers": [
"media"
],
"videolength": "3:25"
},
"content": {
"intro": "Ses refrains sont indissociables de beaucoup de nos émotions. Avant son passage à Genève, le chanteur revient avec franchise et un parler cash sur les moments les plus importants de sa vie.",
"photos": null,
"video": true
},
"list": {
"title": "D'autres photos à découvrir",
"articles": [
{
"columns": 6,
"data": {
"image": "/img/article-1.jpg",
"title": "L'interview exclusive d'Adarsh Alem",
"excerpt": "A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans…",
"date": "2 mars 2018",
"author": "Patrick Baumann",
"articlelink": "#",
"categorylink": "#",
"authorlink": "#",
"category": "Photos",
"gallery": true,
"numphotos": 12,
"modifiers": [
"media"
]
}
},
{
"columns": 6,
"data": {
"image": "/img/article-2.jpg",
"title": "L'interview exclusive nouveau lauréat 2018 du guide Michelin",
"excerpt": "A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans…",
"date": "2 mars 2018",
"author": "Patrick Baumann",
"articlelink": "#",
"categorylink": "#",
"authorlink": "#",
"category": "Photos",
"gallery": true,
"numphotos": 25,
"modifiers": [
"media"
]
}
},
{
"columns": 6,
"data": {
"image": "/img/article-3.jpg",
"title": "Découvrez le nouveau lauréat 2018 du guide Michelin",
"date": "2 mars 2018",
"author": "Patrick Baumann",
"articlelink": "#",
"categorylink": "#",
"authorlink": "#",
"category": "Photos",
"gallery": true,
"numphotos": 25,
"modifiers": [
"media"
]
}
},
{
"columns": 6,
"data": {
"image": "/img/article-highlight.jpg",
"title": "L'interview exclusif du nouveau lauréat 2018 du guide Michelin",
"date": "2 mars 2018",
"author": "Patrick Baumann",
"articlelink": "#",
"categorylink": "#",
"authorlink": "#",
"category": "Photos",
"gallery": true,
"numphotos": 33,
"modifiers": [
"media"
]
}
}
]
}
}