detail css

This commit is contained in:
2020-07-20 20:21:08 +02:00
parent edd9e6e68a
commit e60eb9787e
26 changed files with 533 additions and 127 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,8 +1,8 @@
#block-popsu-colloque-submenu{
margin: 3rem auto;
ul{
display: flex;
padding: 0;
margin: 0;
li{
margin-right: 1rem;
a{
@@ -7,9 +7,9 @@ header{
}
main:not(.home){
margin-top: 0rem;
padding-top: 0rem;
@media screen and (min-width: 768px) {
margin-top: 5rem!important;
padding-top: 5rem!important;
}
}
@@ -59,12 +59,8 @@ article{
.__head{
div{
& > div{
margin-right: 0.5rem;
// padding: 0 0.5rem;
}
& > div:not(:first-child){
margin-left: 0.5rem;
}
}
}
}
@@ -113,3 +109,14 @@ blockquote{
}
}
}
// page moment
.container{
.__ressources{
section{
.row{
padding: 0rem 0rem 2rem 0rem;
}
}
}
}
@@ -8,9 +8,22 @@
@media screen and (min-width: 768px) {
.__rs{
&:not(.moment){
margin: auto;
& > div{
margin: 0 auto 0.5rem auto;
}
}
}
}
@media screen and (min-width: 992px) {
.__rs{
&.moment{
margin: auto;
& > div{
margin: 0 auto 0.5rem auto;
}
}
}
}
@@ -32,9 +32,6 @@
.head{
display: block;
}
.thumbnails{
margin: 1rem;
}
.flickity-slider{
margin-left: 1rem;
}
@@ -1,13 +1,16 @@
header{
display: none;
}
// thumbnails global
.thumbnails{
width: 100%;
height: auto;
background: white;
margin: 0.5rem 0;
@include shadow;
margin: $gutter1;
&:not(.bibliographie){
@include shadow;
}
figure{
height: 150px;
margin: 0;
@@ -21,7 +24,18 @@ header{
// thumbnails publications
&.publications{
.__media{
padding: 1rem 0 1rem 1rem;
padding: 0.5rem 0 0.5rem 0.5rem;
// .__img{
// height: 150px;
// width: 100%;
// img{
// width: auto;
// height: 100%;
// }
// }
}
.__wrap{
padding: 0.5rem;
}
@media screen and (min-width: 768px) {
width: calc(100% / 2 - #{$gutter1} * 2);
@@ -39,6 +53,15 @@ header{
.__slide{
.thumbnails{
max-width: 380px;
@media screen and (min-width: 768px) {
width: calc(100% / 2 - #{$gutter1} * 2);
}
@media screen and (min-width: 992px) {
width: calc(100% / 3 - #{$gutter1} * 2);
}
@media screen and (min-width: 1200px) {
width: calc(100% / 4 - #{$gutter1} * 2);
}
}
}
@@ -59,6 +82,69 @@ header{
}
}
}
// page moment
.__ressources{
.__publications{
.publications{
.__media{
padding: 0.5rem 0 0.5rem 0.5rem;
}
.__wrap{
padding: 0.5rem;
}
@media screen and (min-width: 768px) {
width: calc(100% / 2 - #{$gutter1});
}
@media screen and (min-width: 992px) {
width: calc(100% / 2 - #{$gutter1});
}
@media screen and (min-width: 1200px) {
width: calc(100% / 2 - #{$gutter1});
}
}
}
.__bibliographie{
.thumbnails{
background: transparent;
a{
& > div{
div, span, p{
display: inline;
background: white;
}
}
}
}
}
}
// thumbnails participant
.thumbnails_participants{
figure{
& > div{
width: 100px;
height: 100px;
margin-left: 0.5rem;
img{
border-radius: 50%;
width: 100%;
height: 100%;
object-fit: cover;
}
}
figcaption{
&.__info{
padding: 4rem 0.5rem 0.5rem 0.5rem;
margin-top: -3rem;
background: white;
.__name{
text-transform: uppercase;
}
}
}
}
}
// @media screen and (min-width: 992px) {
// .programme{
// .row{
@@ -193,36 +279,7 @@ header{
// }
// }
//
// .thumbnails_participants{
// figure{
// & > div{
// width: 100px;
// height: 100px;
// margin-left: 0.5rem;
//
// img{
// border-radius: 50%;
// width: 100%;
// height: 100%;
// object-fit: cover;
// }
// }
// figcaption{
// &.__info{
// padding: 4rem 0.5rem 0.5rem 0.5rem;
// margin-top: -3rem;
// background: white;
// .__name{
// text-transform: uppercase;
// }
// .__qualite{
//
// }
// }
// }
// }
// }
//
// article{
// .__publications{
// & > div{
@@ -33,3 +33,20 @@
box-shadow: 0px 0px 13px 0px $color2;
}
}
@mixin shadow_participants{
figure img{
box-shadow: none;
transition: 0.3s transform ease, 0.3s box-shadow ease;
}
figure{
&:hover{
& > div img{
transform: scale(1.05);
transition: 0.3s all ease;
box-shadow: 0px 0px 13px 0px $color2;
}
}
}
}
@@ -155,23 +155,9 @@ a{
}
}
.thumbnails_participants{
*{
color: $color2;
}
.__name{
font-family: 'truenoregular';
font-size: 1rem;
}
.__qualite{
font-family: 'truenoregular';
font-size: 1rem;
font-style: italic;
}
}
// Page programme
.container{
&.programme{
h3{
@@ -182,6 +168,37 @@ a{
}
}
// page publication
article{
&.publications{
.__wrap_content{
.__head{
& *{
color: $color2;
}
.__auteur{
div{
font-family: 'cormorantBold';
font-size: 1.5rem;
}
}
.__titre{
span{
font-family: 'cormorantBoldItalic';
font-size: 1.5rem;
}
}
.__info{
margin: 1rem 0;
div{
font-family: 'cormorantBold';
font-size: 1rem;
}
}
}
}
}
}
.thumbnails{
time, .type_moment{
font-family: 'truenoregular';
@@ -208,6 +225,59 @@ a{
}
}
}
&.bibliographie{
background: transparent;
div,p{
font-family: 'cormorantBold';
font-size: 1.2rem;
}
span{
font-family: 'cormorantBoldItalic';
font-size: 1.2rem;
}
}
}
// page shadow_participants
article{
&.participant_full{
.__auteur{
h2{
font-family: 'truenoregular';
font-size: 2rem;
letter-spacing: normal;
}
}
.status{
div{
font-family: 'truenoregular';
font-style: italic;
font-size: 0.8rem;
text-align: center;
@media screen and (min-width: 768px) {
text-align: left;
}
}
}
}
}
// thumbnails_participants
.thumbnails_participants{
@include shadow_participants;
*{
color: $color2;
}
.__name{
font-family: 'truenoregular';
font-size: 1rem;
}
.__qualite{
font-family: 'truenoregular';
font-size: 0.8rem;
font-style: italic;
}
}
.paragraph--type--role-de-l-intervenant{
@@ -226,7 +296,7 @@ a{
div{
font-family: 'truenoregular';
font-size: 1rem;
text-transform: uppercase;
// text-transform: uppercase;
}
}
}
@@ -5,7 +5,7 @@ $lightgrey: #6f6d7dff;
$fond: #1d378e0d;
$underline:#d2d2ebff;
$gutter1 : 1rem;
$gutter1 : 0.5rem;
$croix_or: '../images/croix_filetsable.svg';
@@ -0,0 +1,44 @@
{#
/**
* @file
* Default theme implementation to display a block.
*
* Available variables:
* - plugin_id: The ID of the block implementation.
* - label: The configured label of the block if visible.
* - configuration: A list of the block's configuration values.
* - label: The configured label for the block.
* - label_display: The display settings for the label.
* - provider: The module or other provider that provided this block plugin.
* - Block plugin specific settings will also be stored here.
* - content: The content of this block.
* - attributes: array of HTML attributes populated by modules, intended to
* be added to the main container tag of this template.
* - id: A valid HTML ID and guaranteed unique.
* - title_attributes: Same as attributes, except applied to the main title
* tag that appears in the template.
* - title_prefix: Additional output populated by modules, intended to be
* displayed in front of the main title tag that appears in the template.
* - title_suffix: Additional output populated by modules, intended to be
* displayed after the main title tag that appears in the template.
*
* @see template_preprocess_block()
*
* @ingroup themeable
*/
#}
{% set id = [elements][0].content['#view_id'] %}
<div class="container {{id}}">
{% if id == 'programme' %}
{{ title_prefix }}
{% if label %}
<h2{{ title_attributes }}>{{ label }}</h2>
{% endif %}
{% endif %}
{{ title_suffix }}
{% block content %}
{{ content }}
{% endblock %}
</div>
@@ -29,7 +29,6 @@
#}
{% set id = [elements][0].content['#view_id'] %}
<div class="container {{id}}">
{% if id == 'programme' %}
{{ title_prefix }}
@@ -41,4 +40,3 @@
{% block content %}
{{ content }}
{% endblock %}
</div>
@@ -0,0 +1,38 @@
{#
/**
* @file
* Default theme implementation to display a block.
*
* Available variables:
* - plugin_id: The ID of the block implementation.
* - label: The configured label of the block if visible.
* - configuration: A list of the block's configuration values.
* - label: The configured label for the block.
* - label_display: The display settings for the label.
* - provider: The module or other provider that provided this block plugin.
* - Block plugin specific settings will also be stored here.
* - content: The content of this block.
* - attributes: array of HTML attributes populated by modules, intended to
* be added to the main container tag of this template.
* - id: A valid HTML ID and guaranteed unique.
* - title_attributes: Same as attributes, except applied to the main title
* tag that appears in the template.
* - title_prefix: Additional output populated by modules, intended to be
* displayed in front of the main title tag that appears in the template.
* - title_suffix: Additional output populated by modules, intended to be
* displayed after the main title tag that appears in the template.
*
* @see template_preprocess_block()
*
* @ingroup themeable
*/
#}
<div class="col-sm-12 col-md-3">
{% block content %}
{{ content }}
{% endblock %}
</div>
</article>
</div>
@@ -1,4 +1,10 @@
<div class="__rs d-flex d-md-block">
{% if page == 'moments' %}
{% set class = "d-flex d-lg-block moment" %}
{% else %}
{% set class = "d-flex d-md-block" %}
{% endif %}
<div class="__rs {{class}}">
<div class="__mail">
<a href="#">
<img src="/themes/custom/popsu_colloque/images/mail.svg" alt="Mail">
@@ -45,7 +45,7 @@
%}
<h4>{{ label }}</h4>
<div class="d-lg-flex d-block">
<div class="d-lg-flex d-block pb-4">
{% for item in items %}
{{ item.content }}
{% endfor %}
@@ -45,7 +45,7 @@
%}
<h4>{{ label }}</h4>
<div class="d-lg-flex d-block">
<div class="row flex-wrap">
{% for item in items %}
{{ item.content }}
{% endfor %}
@@ -0,0 +1,29 @@
{#
/**
* @file
* Default theme implementation for a select element.
*
* Available variables:
* - attributes: HTML attributes for the <select> tag.
* - options: The <option> element children.
*
* @see template_preprocess_select()
*
* @ingroup themeable
*/
#}
{% spaceless %}
<select{{ attributes }}>
{% for option in options %}
{% if option.type == 'optgroup' %}
<optgroup label="{{ option.label }}">
{% for sub_option in option.options %}
<option value="{{ sub_option.value }}"{{ sub_option.selected ? ' selected="selected"' }}>{{ sub_option.label }}</option>
{% endfor %}
</optgroup>
{% elseif option.type == 'option' %}
<option value="{{ option.value }}"{{ option.selected ? ' selected="selected"' }}>{{ option.label }}</option>
{% endif %}
{% endfor %}
</select>
{% endspaceless %}
@@ -71,25 +71,29 @@
*
* @ingroup themeable
*/
#}
<article{{ attributes }} class="d-flex flex-wrap">
<article{{ attributes }} class="row">
<div class="__wrapper col-sm-12 col-md-9">
<div class="__img-hero">
{{content.field_image}}
</div>
<div class="__wrapper row mt-4">
<div class="__title col-12 mb-5">
<div class="__wrapper row">
<div class="__title col-12 my-3 my-lg-5">
<h2>{{label}}</h2>
</div>
<div class="__wrap_side col-sm-12 col-md-1 px-0 mt-3">
{% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' %}
<div class="__wrap_side col-md-12 col-lg-2 mt-3">
{% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' with { page : 'moments' } %}
</div>
<div class="__wrap_content col-sm-12 col-md-11 px-0 my-3">
<div class="__wrap_content col-12 col-lg-10 my-3">
<div class="__head mb-5">
<div class="d-flex">
<div class="d-flex flex-wrap">
{{ content.field_date_du_programme }} |
{{ content.field_heure_du_moment }} |
{{ content.field_type_de_moment }}
@@ -102,13 +106,14 @@
</div>
</div>
<div class="__ressources">
<div class="__publications">
<section class="__publications">
{{content.field_publications}}
</div>
<div class="__bibliographie">
</section>
<section class="__bibliographie">
{{content.field_bibliographie}}
</div>
</section>
</div>
</div>
<div class="__wrap_side col-sm-12 col-md-3">
@@ -89,7 +89,7 @@
</figure>
</div>
<div class="__wrap_content col-sm-12 col-md-9 mx-auto">
<div class="__wrap_content col-md-12 col-lg-9 mx-auto">
<div class="content">
{{content.body}}
</div>
@@ -81,7 +81,7 @@
</div>
<div class="__wrapper row mt-5">
<div class="__wrap_side col-sm-12 col-md-1 pr-0 mt-0 mb-3">
{% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' %}
{% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' with { page : 'presentation' } %}
</div>
<div class="__wrap_content col-sm-12 col-md-8">
{{content.body}}
@@ -72,13 +72,13 @@
* @ingroup themeable
*/
#}
<article class="d-flex">
<div class="__wrap_side col-sm-12 col-md-1 px-0 mt-3">
<article class="d-sm-flex flex-wrap d-block publications">
<div class="__wrap_side col-sm-12 col-md-12 col-lg-1">
{% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' %}
{{content.field_telecharger_la_ressource}}
</div>
<div class="__wrapper col-sm-12 col-md-11 px-0 my-3">
<div class="__wrapper col-sm-12 col-md-9 col-lg-8">
{% if content.field_ajouter_un_media[0]['#paragraph'].field_video %}
<div class="__hero">
{{content.field_ajouter_un_media}}
@@ -95,10 +95,10 @@
<div class="__auteur">
{{content.field_auteur}}
</div>
<div>
<div class="__titre">
{{label}}
</div>
<div class="my-3">
<div class="__info">
{{content.field_complement_d_info}}
</div>
</div>
@@ -108,5 +108,3 @@
</div>
</div>
</div>
</article>
@@ -72,7 +72,7 @@
* @ingroup themeable
*/
#}
<article{{ attributes }}>
<article{{ attributes }} class="thumbnails bibliographie">
<div>
<a href="{{url}}">
<div>
@@ -72,18 +72,20 @@
* @ingroup themeable
*/
#}
<article{{ attributes }}>
<article{{ attributes }} class=" thumbnails publications">
<div{{ content_attributes }}>
<a href="{{ url }}">
<figure class="d-flex">
<div class="d-flex">
<div class="__media">
{{content.field_ajouter_un_media}}
</div>
<figcaption class="__info">
{{ label|raw }}
{{content.field_complement_d_info|raw}}
</figcaption>
</figure>
<div class="__wrap">
<div class="__content">
{{ label|raw }}
{{content.field_complement_d_info|raw}}
</div>
</div>
</div>
</a>
</div>
</article>
@@ -0,0 +1,70 @@
{#
/**
* @file
* Default theme implementation for main view template.
*
* Available variables:
* - attributes: Remaining HTML attributes for the element.
* - css_name: A CSS-safe version of the view name.
* - css_class: The user-specified classes names, if any.
* - header: The optional header.
* - footer: The optional footer.
* - rows: The results of the view query, if any.
* - empty: The content to display if there are no rows.
* - pager: The optional pager next/prev links to display.
* - exposed: Exposed widget form/info to display.
* - feed_icons: Optional feed icons to display.
* - more: An optional link to the next page of results.
* - title: Title of the view, only used when displaying in the admin preview.
* - title_prefix: Additional output populated by modules, intended to be
* displayed in front of the view title.
* - title_suffix: Additional output populated by modules, intended to be
* displayed after the view title.
* - attachment_before: An optional attachment view to be displayed before the
* view content.
* - attachment_after: An optional attachment view to be displayed after the
* view content.
* - dom_id: Unique id for every view being printed to give unique class for
* Javascript.
*
* @see template_preprocess_views_view()
*
* @ingroup themeable
*/
#}
<div class="views col">
{{ title_prefix }}
{{ title }}
{{ title_suffix }}
{% if header %}
<section class="wrap_head">
{% include 'themes/custom/popsu_colloque/template/components/header_slide.html.twig' with { croix : true } %}
</section>
{% endif %}
{{ exposed }}
{{ attachment_before }}
{% if rows -%}
<section>
{{ rows }}
</section>
{% elseif empty -%}
{{ empty }}
{% endif %}
{{ pager }}
{{ attachment_after }}
{% if footer %}
<footer>
{{ footer }}
</footer>
{% endif %}
{{ feed_icons }}
</div>
@@ -34,7 +34,7 @@
#}
<div class="views">
<div class="views col">
{{ title_prefix }}
{{ title }}