/* Rectangle 2: */
background-image: linear-gradient(-180deg, #000F24 0%, #FF203C 100%);
+ @include margin-top(5);
@include mq($until: xs) {
div[class^="col-"] {
}
}
+ .section-title {
+ @include margin-bottom(2);
+ }
+
&__pre {
border-bottom: 3px solid white;
@include margin-top(0);
}
+ strong {
+ font-weight: weight(regular);
+ }
+
}
p:last-child {
text-align: center;
color: white;
+ display: inline-block;
- @include margin-bottom(2);
+ @include margin-bottom(4);
+ @include margin-top(0);
&--uppercase {
text-transform: uppercase;
}
&--underline {
- text-decoration: underline;
+ border-bottom: 1px solid white;
}
&--dark {
color: $color-background;
}
+ &--accent {
+ border-color: $color-accent;
+ &:before {
+ color: $color-accent;
+ }
+ }
+
&:before {
content: '_';
display: block;
- text-decoration: none;
+ text-decoration: none !important;
@include font-size(m);
@include margin-bottom(.5);
}
#{$module} {
position: relative;
- background: white;
display: block;
@include margin-bottom(1);
@include transition(all 0.25s ease-in-out);
+ border: 1px solid $color-main;
+ @include padding(1);
+
+ .slider-home & {
+ @include margin(0);
+ max-width: none;
+ }
+
&:hover {
- box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.17);
+
+ background: white;
+
+ .article-box__image-container {
+ background: black;
+ }
+
.article-box__image {
img {
- @include transform(scale(1.1));
+ -webkit-filter: grayscale(0);
+ filter: grayscale(0);
}
- &:after {
- border-width: 12px;
- }
}
+
+ .article-box__title {
+ color: $color-background;
+ }
+ .article-box__tags {
+ color: $color-background;
+ }
+ .article-box__subtitle {
+ color: $color-background;
+ }
+ .article-box__desc {
+ color: $color-background;
+ }
+
}
&__header {
position: relative;
}
+ &__image-container {
+ background: $color-background;
+ @include transition(all 0.5s ease-in-out);
+ }
+
&__image {
margin: 0;
padding: 0;
width: 100%;
max-width: 100%;
height: auto;
- @include transition(all 0.3s ease-in-out);
- }
- &:after {
- content: '';
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- border-width: 0px;
- border-color: white;
- border-style: solid;
- @include transition(all 0.25s ease-in-out);
+ @include transition(all 0.5s ease-in-out);
+
+ -webkit-filter: grayscale(1);
+ filter: grayscale(1);
+ mix-blend-mode: screen;
}
+
}
&__placeholder {
}
&__tags {
- position: absolute;
- bottom: 0;
- left: 0;
- @include margin-bottom(.55);
+ text-transform: uppercase;
+ @include font-size(s);
+ @include line-height(1.25);
+ @include typeface(sans-serif);
+ @include margin(0 0 0 0);
+ font-weight: weight(regular);
+ color: $color-main;
+ @include transition(color 0.5s ease-in-out);
}
&__btn {
}
&__content {
- @include padding(.25 .25 1 .25);
+ @include padding(.25 .25 .25 .25);
position: relative;
overflow: hidden;
@include filter-gradient(#ffffff, #ffffff, vertical);
@include background-image(linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%));
}*/
+
+ .slider-home & {
+ @include padding(0);
+ }
}
&__title {
@include font-size(xl);
@include line-height(1.25);
@include typeface(sans-serif);
- @include margin(0 0 .25 0);
+ @include margin(.5 0 0 0);
+ font-weight: weight(bold);
+ color: $color-main;
+ @include transition(color 0.5s ease-in-out);
+ }
+
+ &__tag {
+ color: $color-main;
}
&__subtitle {
- @include font-size(s);
+ @include font-size(m);
@include line-height(.75);
- @include typeface(serif);
+ @include typeface(sans-serif);
@include margin-top(.25);
- font-weight: weight(regular);
-
- .slider-home & {
-
- @include font-size(m);
- @include line-height(1);
- @include typeface(sans-serif);
- @include margin-top(.25);
+ font-weight: weight(bold);
+ color: white;
+ text-transform: uppercase;
+ @include transition(color 0.5s ease-in-out);
+
+ span {
+ @include typeface(serif);
+ @include font-size(s);
font-weight: weight(regular);
+ text-transform: none;
+ display: block;
+ @include margin-top(.25);
+ }
+ .slider-home & {
+ @include margin-top(.5);
}
}
@include typeface(serif);
@include margin(1 0 .25 0);
font-weight: weight(light);
+ color: white;
+ @include transition(color 0.5s ease-in-out);
}
&--small {
background: transparent;
&__content {
- background: white;
+ background: transparent;
margin-top: 1px;
}
}
#{$module} {
position: relative;
+ @include margin-bottom(4);
@include mq($until: sm) {
- @include margin-bottom(1);
- }
-
- @include mq($until: xs) {
display: none;
}
&__slide {
width: 100%;
- height: $home-slider-height;
- background-repeat: no-repeat;
- background-position: center center;
- background-size: cover;
position: relative;
}
&__wrapper {
- position: absolute;
- bottom: 75px;
- left: 0;
- right: 0;
+ position: relative;
+
+ @include padding(1);
+ border: 1px solid $color-main;
+ display: table;
+ width: 100%;
+ background: $color-background;
+ @include transition(background 0.5s ease-in-out);
+
+ &:hover {
+ background: $color-main;
+ #{$module}__image-container {
+ background: black;
+ }
+ #{$module}__image {
+ -webkit-filter: grayscale(0);
+ filter: grayscale(0);
+ }
+ .article-box__title {
+ color: $color-background;
+ }
+ .article-box__tags {
+ color: $color-background;
+ }
+ .article-box__subtitle {
+ color: $color-background;
+ }
+ .article-box__desc {
+ color: $color-background;
+ }
+ }
+
+ }
+
+ &__image-container {
+ background: $color-background;
+ @include transition(all 0.5s ease-in-out);
+ }
+
+ &__image {
+
+ width: 100%;
+ display: block;
+ @include transition(all 0.5s ease-in-out);
+
+ -webkit-filter: grayscale(1);
+ filter: grayscale(1);
+ mix-blend-mode: screen;
+ transition: all 0.5s ease-in-out;
}
&__content {
- background: white;
- display: inline-block;
- @include padding(1);
+ display: table-cell;
+ vertical-align: middle;
+ height: 373px;
+
+ @include mq($until: lg) {
+ height: 296px;
+ }
+
+ @include mq($until: md) {
+ height: 245px;
+ }
+
+ @include mq($until: sm) {
+ height: auto;
+ display: block;
+ @include margin-top(1);
+ }
}
}
+ .article-box {
+
+ @include padding(0);
+ border: 0;
+
+ }
+
//
// Overrides lightSlider
//
}
+ .lSAction {
+ > a {
+ background: transparent;
+ &:before {
+ color: #F2EDDC;
+ font-size: 40px;
+ }
+ }
+ > a.lSPrev {
+
+ }
+ > a.lSNext {
+
+ }
+ }
+
}
.home-mobile-nav {
{% endblock %}
{% block image %}
- {% with object.images.all|get_type:'card' as images %}
- {% if images %}
- <figure class="article-box__image">
- <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 top=0.5 left=article.photo_alignment|get_photo_alignment %}" class="lazyload" />
- </figure>
- {% else %}
- <figure class="article-box__image">
- {% if object.departments.first %}
- {% with object.departments.first as department %}
- <div class="article-box__placeholder {{department.department.name|slugify}}"></div>
- {% endwith %}
- {% else %}
- <div class="article-box__placeholder"></div>
- {% endif %}
- </figure>
- {% endif %}
- {% endwith %}
+ <div class="article-box__image-container">
+ {% with object.images.all|get_type:'card' as images %}
+ {% if images %}
+ <figure class="article-box__image">
+ <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 top=0.5 left=article.photo_alignment|get_photo_alignment %}" class="lazyload" />
+ </figure>
+ {% else %}
+ <figure class="article-box__image">
+ {% if object.departments.first %}
+ {% with object.departments.first as department %}
+ <div class="article-box__placeholder {{department.department.name|slugify}}"></div>
+ {% endwith %}
+ {% else %}
+ <div class="article-box__placeholder"></div>
+ {% endif %}
+ </figure>
+ {% endif %}
+ {% endwith %}
+ </div>
{% endblock %}
{% block tags %}
<div class="article-box__tags">
{% if object.departments.first %}
{% with object.departments.first as department %}
- <div class="tag tag--small dashed dashed--small">
- {{ department.department.name }}
- </div>
+ {{ department.department.name }}
{% endwith %}
{% endif %}
{% if object.category %}
- <div class="tag tag--small tag--category">
- {{ object.category|truncatechars:15 }}
- </div>
+ {{ object.category|truncatechars:15 }}
{% endif %}
</div>
{% endblock %}
{% include 'agenda/includes/event_date_line.html' %}
</strong>
{% if object.location %}
- <br />{{ object.location }}
+ <br /><span>{{ object.location }}</span>
{% endif %}
{% endblock %}
{% block image %}
{% endblock %}
- {% block tags %}
- {% endblock %}
-
{% block btn %}
{% endblock %}
{% block title %}
{% endblock %}
</h3>
+ <div class="article-box__tags">
+ {% block tags %}
+ {% endblock %}
+ </div>
<div class="article-box__subtitle">
{% block subtitle %}
{% endblock %}
{% load i18n %}
-<div class="page__block page__block--accent">
+<div class="page__block page__block--accent mb4">
<div class="container">
<div class="row">
<div class="col-xs-16 col-md-16 col-lg-10 fsxl lh5 ffss fwl">
- {{ host_organization.bio|safe }}
+ {% if host_organization.bio %}
+ {{ host_organization.bio|safe }}
+ {% else %}
+ <strong>« LES FORMES DU DIGITAL »</strong> questionnera les enjeux des mutations
+ formelles au sein d’un monde digitalisé dans les domaines de la musique, de l’art, du
+ design et de l’architecture au regard des avancées des technosciences. Comment les
+ champs de création se sont-ils emparés des technologies numériques ?
+ {% endif %}
</div>
</div>
</div>
{% load i18n pages_tags mezzanine_tags media_tags organization_tags %}
<div class="container">
<div class="row">
- {% for slider in home.dynamiccontenthomeslider_set.all %}
- {% with slider.content_object.images.all|get_type:'slider' as images %}
- {% if images %}
- <div class="col-xs-4 hide-from-xs">
- {% if slider.content_type.model == "brief" %}
+ <div class="col-sm-12 col-sm-push-2 tac">
+ <div class="section-title section-title--uppercase section-title--accent">
+ Autres articles
+ </div>
+ <div class="row">
+ {% for slider in home.dynamiccontenthomeslider_set.all %}
+ {% with slider.content_object.images.all|get_type:'slider' as images %}
+ {% if images %}
+ <div class="col-xs-8 hide-from-xs">
+ {% if slider.content_type.model == "brief" %}
+ {% include "magazine/brief/inc/brief_card.html" %}
+ {% elif slider.content_type.model == "article" %}
+ {% include "magazine/article/includes/article_card.html" with object=slider.content_object %}
+ {% elif slider.content_type.model == "event" %}
+ {% include "agenda/event/includes/event_card.html" with object=slider.content_object %}
+ {% elif slider.content_type.model == "custompage" %}
+ {% include "pages/page/includes/page_card.html" with object=slider.content_object %}
+ {% endif %}
+ </div>
+ {% endif %}
+ {% endwith %}
+ {% endfor %}
+ {% for content in home.dynamiccontenthomebody_set.all %}
+ <div class="col-xs-8{% if forloop.counter > 3 %} hide-until-xs{% endif %}">
+ {% if content.content_type.model == "brief" %}
{% include "magazine/brief/inc/brief_card.html" %}
- {% elif slider.content_type.model == "article" %}
- {% include "magazine/article/includes/article_card.html" with object=slider.content_object %}
- {% elif slider.content_type.model == "event" %}
- {% include "agenda/event/includes/event_card.html" with object=slider.content_object %}
- {% elif slider.content_type.model == "custompage" %}
- {% include "pages/page/includes/page_card.html" with object=slider.content_object %}
+ {% elif content.content_type.model == "article" %}
+ {% include "magazine/article/includes/article_card.html" with object=content.content_object %}
+ {% elif content.content_type.model == "event" %}
+ {% include "agenda/event/includes/event_card.html" with object=content.content_object %}
+ {% elif content.content_type.model == "custompage" %}
+ {% include "pages/page/includes/page_card.html" with object=content.content_object %}
{% endif %}
</div>
- {% endif %}
- {% endwith %}
- {% endfor %}
- {% for content in home.dynamiccontenthomebody_set.all %}
- <div class="col-xs-4{% if forloop.counter > 3 %} hide-until-xs{% endif %}">
- {% if content.content_type.model == "brief" %}
- {% include "magazine/brief/inc/brief_card.html" %}
- {% elif content.content_type.model == "article" %}
- {% include "magazine/article/includes/article_card.html" with object=content.content_object %}
- {% elif content.content_type.model == "event" %}
- {% include "agenda/event/includes/event_card.html" with object=content.content_object %}
- {% elif content.content_type.model == "custompage" %}
- {% include "pages/page/includes/page_card.html" with object=content.content_object %}
- {% endif %}
+ {% endfor %}
</div>
- {% endfor %}
+ </div>
</div>
</div>
{% load i18n pages_tags mezzanine_tags media_tags organization_tags %}
-<div class="slider-home">
- <ul data-slider-home>
- {% for slider in home.dynamiccontenthomeslider_set.all %}
- {% with slider.content_object.images.all|get_type:'slider' as images %}
- {% if images %}
- <li class="slider-home__slide" style="background-image: url('{{ MEDIA_URL }}{% thumbnail images.0.file 1440 760 %}');">
- <div class="slider-home__wrapper">
- <div class="container">
- <div class="row">
- <div class="col-xs-12 col-sm-11 col-sm-push-1">
- <a class="article-box article-box--inline" href="{{ slider.content_object.get_absolute_url }}" title="{{ slider.content_object.title }}">
- {% if slider.content_object.department %}
- <div class="tag dashed">
- {{ slider.content_object.department.name }}
- </div>
- {% endif %}
- {% if slider.content_type.model == 'article' %}
- <div class="tag tag--category">
- {% trans 'News' %}
- </div>
- {% elif slider.content_type.model == 'event' %}
- {% if slider.content_object.departments.first %}
- {% with slider.content_object.departments.first as department %}
- <div class="tag dashed">
- {{ department.department.name }}
+{% if home.dynamiccontenthomeslider_set.all|length > 0 %}
+ <div class="container">
+ <div class="row">
+ <div class="col-sm-16">
+ <div class="slider-home">
+ <ul data-slider-home>
+ {% for slider in home.dynamiccontenthomeslider_set.all %}
+ {% with slider.content_object.images.all|get_type:'slider' as images %}
+ {% if images %}
+ <li class="slider-home__slide">
+ <div class="row">
+ <div class="col-sm-12 col-sm-push-2">
+ <a href="{{ slider.content_object.get_absolute_url }}" class="slider-home__wrapper">
+ <div class="row">
+ <div class="col-sm-8">
+ <div class="slider-home__image-container">
+ <img class="slider-home__image" src="{{ MEDIA_URL }}{% thumbnail images.0.file 478 366 %}" />
+ </div>
</div>
- {% endwith %}
- {% endif %}
- {% if slider.content_object.category %}
- <div class="tag tag--category">
- {{ slider.content_object.category }}
- </div>
- {% endif %}
- {% endif %}
+ <div class="col-sm-8">
+ <div class="slider-home__content">
+ <div class="article-box article-box--inline" href="{{ slider.content_object.get_absolute_url }}" title="{{ slider.content_object.title }}">
+
+ <div class="article-box__content tal">
+ <h3 class="article-box__title">{{ slider.content_object.title }}</h3>
- <div class="article-box__content tal">
- <h3 class="article-box__title">{{ slider.content_object.title }}</h3>
- <div class="article-box__subtitle">
- {% if slider.content_type.model != 'event' %}
- {{ slider.content_object.sub_title }}
- {% endif %}
- {% if slider.content_object.start %}
- {% with slider.content_object as event %}
- {% if slider.content_object.sub_title %}
- <br />
- {% endif %}
- {% include 'agenda/includes/event_date_slider.html' %}
- {% endwith %}
- {% endif %}
- {% if slider.content_object.location %}
- <br />{{ slider.content_object.location }}
- {% endif %}
- </div>
- <div class="article-box__desc">
- {{ slider.content_object.description|richtext_filters|safe|truncatechars_html:200 }}
- </div>
+ {% if slider.content_type.model == 'article' %}
+ <div class="article-box__tags">
+ {% trans 'News' %}
+ </div>
+ {% elif slider.content_type.model == 'event' %}
+ {% if slider.content_object.category %}
+ <div class="article-box__tags">
+ {{ slider.content_object.category }}
+ </div>
+ {% endif %}
+ {% endif %}
+
+ <div class="article-box__subtitle">
+ {% if slider.content_type.model != 'event' %}
+ {{ slider.content_object.sub_title }}
+ {% endif %}
+ {% if slider.content_object.start %}
+ {% with slider.content_object as event %}
+ {% if slider.content_object.sub_title %}
+ <br />
+ {% endif %}
+ {% include 'agenda/includes/event_date_slider.html' %}
+ {% endwith %}
+ {% endif %}
+ {% if slider.content_object.location %}
+ <br /><span>{{ slider.content_object.location }}</span>
+ {% endif %}
+ </div>
+ <div class="article-box__desc">
+ {{ slider.content_object.description|richtext_filters|safe|truncatechars_html:200 }}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </a>
</div>
- </a>
- </div>
- </div>
- </div>
- </div>
- {% if image.credits %}
- <div class="slider-home__credits">
- {{ image.credits }}
- </div>
- {% endif %}
- </li>
- {% endif %}
- {% endwith %}
+ </div>
+ </li>
+ {% endif %}
+ {% endwith %}
- {% endfor %}
- </ul>
- <div class="slider-home__pager">
- <div class="container">
- <div class="row">
- <div class="col-xs-12 col-sm-11 col-sm-push-1">
- <ul class="">
- {% for slider in home.dynamiccontenthomeslider_set.all %}
- {% with slider.content_object.images.all|get_type:'slider' as images %}
- {% if images %}
- <li class="{% if forloop.first %}active{% endif %}">
- <a href="#"></a>
- </li>
- {% endif %}
- {% endwith %}
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
-</div>
+{% endif %}
</a>
{% if linked_organization_footer %}
- <div class="section-title section-title--dark">
- Porté par
+ <div class="tac">
+ <div class="section-title section-title--dark">
+ {% trans "Porté par" %}
+ </div>
</div>
{% include 'pages/page/includes/linked_organization_footer.html' %}
{% endif %}
<div class="col-xxs-16 col-xs-7 col-xs-push-1">
- <form method="GET" action="https://www.ircam.fr/etre-informe" target="_blank">
- <input placeholder="Votre email" class="newsletter__input" type="text" name="email" />
+ <form method="GET" action="http://public.message-business.com/form/46711/84/form.aspx" target="_blank">
+ <input placeholder="Votre email" class="newsletter__input" type="text" name="formItem-mbtext-email" />
<button class="newsletter__button" type="submit"><i class="fa fa-envelope-o"></i></button>
</form>
{% include "home/inc/slider.html" %}
- {% include "home/inc/body.html" %}
-
{% include "home/inc/bio.html" %}
- {% include "home/inc/services.html" %}
+ {% include "home/inc/body.html" %}
{% endblock %}
{% block image %}
{% with object.images.all|get_type:'card' as images %}
- {% if images %}
- <figure class="article-box__image">
- <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 top=0.5 left=object.photo_alignment|get_photo_alignment %}" class="lazyload" />
- </figure>
- {% else %}
- <figure class="article-box__image">
- {% if object.department %}
- <div class="article-box__placeholder {{object.department.name|slugify}}"></div>
- {% else %}
- <div class="article-box__placeholder"></div>
- {% endif %}
- </figure>
- {% endif %}
- {% endwith %}
-{% endblock %}
+ <div class="article-box__image-container">
+
+ {% if images %}
+ <figure class="article-box__image">
+ <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 top=0.5 left=object.photo_alignment|get_photo_alignment %}" class="lazyload" />
+ </figure>
+ {% else %}
+ <figure class="article-box__image">
+ {% if object.department %}
+ <div class="article-box__placeholder {{object.department.name|slugify}}"></div>
+ {% else %}
+ <div class="article-box__placeholder"></div>
+ {% endif %}
+ </figure>
+ {% endif %}
-{% block tags %}
- <div class="article-box__tags">
- <div class="tag tag--small tag--category">
- {% trans 'News' %}
</div>
- {% if object.department %}
- <div class="tag tag--small dashed dashed--gray dashed--small">
- {{ object.department.name }}
- </div>
- {% endif %}
- </div>
+ {% endwith %}
{% endblock %}
{% block content %}
{{ object.description|richtext_filters|safe|truncatechars_html:200 }}
{% endblock %}
-{% block subtitle %}
+{% block tags %}
{% comment %}
{{ object.publish_date|date:"DATE_FORMAT" }}
{% endcomment %}
{% for category in object.categories.all %}
{% comment %}{% if forloop.first %} | {% endif %}{% endcomment %}
{% if not forloop.first %}, {% endif %}
- <strong>{{ category }}</strong>
+ {{ category }}
{% endfor %}
{% endblock %}
{{ object.get_absolute_url }}
{% endblock %}
{% block image %}
- {% with object.images.all|get_type:'card' as images %}
- {% if images %}
- <figure class="article-box__image">
- <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 top=0.5 left=article.photo_alignment|get_photo_alignment %}" class="lazyload" />
- </figure>
- {% else %}
- <figure class="article-box__image">
- {% with object.get_ascendants|last as top_level_parent %}
- {% if top_level_parent.get_content_model %}
- <div class="article-box__placeholder {{top_level_parent.get_content_model|slugify}}"></div>
- {% else %}
- <div class="article-box__placeholder"></div>
- {% endif %}
- {% endwith %}
- </figure>
- {% endif %}
- {% endwith %}
+ <div class="article-box__image-container">
+ {% with object.images.all|get_type:'card' as images %}
+ {% if images %}
+ <figure class="article-box__image">
+ <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 top=0.5 left=article.photo_alignment|get_photo_alignment %}" class="lazyload" />
+ </figure>
+ {% else %}
+ <figure class="article-box__image">
+ {% with object.get_ascendants|last as top_level_parent %}
+ {% if top_level_parent.get_content_model %}
+ <div class="article-box__placeholder {{top_level_parent.get_content_model|slugify}}"></div>
+ {% else %}
+ <div class="article-box__placeholder"></div>
+ {% endif %}
+ {% endwith %}
+ </figure>
+ {% endif %}
+ {% endwith %}
+ </div>
{% endblock %}
{% block content %}
projects / mezzo.git / commitdiff