big improvement over projets, evenement, links, calendar, and mobile display
This commit is contained in:
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
@@ -13,9 +13,9 @@ const TITLE_SELECTORS = '\
|
||||
article.node-type-projet.view-mode-full h2.node-title,\
|
||||
article.node-type-evenement>header>h2,\
|
||||
article.node-type-evenement.view-mode-full h2.node-title,\
|
||||
article.node-type-evenement.view-mode-calendrier h2.node-title,\
|
||||
div.views-archives-evenements > h3 > time\
|
||||
article.node-type-evenement.view-mode-calendrier h2.node-title\
|
||||
';
|
||||
// div.views-archives-evenements > h3 > time\
|
||||
|
||||
// Police Epilogue = axe variable `wght` (100–900) uniquement ; l'italique est
|
||||
// un fichier séparé (font-style).
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
|
||||
@use "../abstracts/variables" as *;
|
||||
@use "fluid" as *;
|
||||
@use "../abstracts/event-date-time" as *;
|
||||
|
||||
@mixin event_calendar(){
|
||||
// @include evenementListe();
|
||||
border-top: 1px solid #ccc;
|
||||
padding: 2em 0 1em 0;
|
||||
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1em;
|
||||
header{
|
||||
flex:0 1 auto;
|
||||
// width: 5em;
|
||||
padding:0 1em 0 0;
|
||||
|
||||
.field_dates{
|
||||
@include event-date-time(5em);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.6em;
|
||||
span.date-sep{
|
||||
display: block;
|
||||
width: 1em;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
transform-origin: center;
|
||||
transform: rotate(90deg) translateX(0.1em);
|
||||
line-height: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.content{
|
||||
flex:1 1 auto;
|
||||
h2.node-title{
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
div.field_artiste_s_invite_s{
|
||||
font-size: fluid-clamp(1.8rem, $min: 1.134rem);
|
||||
.field-item{
|
||||
display: inline-block;
|
||||
&:not(:last-child)::after{
|
||||
content: ", ";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.field_type_d_evenement{
|
||||
.field-item{
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.last-cel{
|
||||
flex:0 1 auto;
|
||||
.field_images{
|
||||
a{
|
||||
display: block;
|
||||
width: 12em;
|
||||
height: 12em;
|
||||
overflow: hidden;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit:contain;
|
||||
object-position: top right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -46,3 +46,8 @@ $layout-anchor: 1112px;
|
||||
@function fluid-clamp($size, $at: $layout-anchor, $min: 0px) {
|
||||
@return clamp(#{px($min)}, #{vw-at($size, $at)}, #{px($size)});
|
||||
}
|
||||
|
||||
// Tokens dérivés : tailles de référence passées en fluide. Le plancher est
|
||||
// un choix de design — 70px à l'ancrage et au-dessus (desktop inchangé),
|
||||
// 56px au plus bas (téléphone).
|
||||
$header-height-fluid: fluid-clamp($header_height, $min: 40px);
|
||||
|
||||
@@ -6,6 +6,8 @@
|
||||
|
||||
@use "variables" as *;
|
||||
@use "fluid" as *;
|
||||
@use "../abstracts/nodes-on-liste" as *;
|
||||
@use "../abstracts/event-calendrier" as *;
|
||||
|
||||
@mixin nodefull{
|
||||
|
||||
@@ -25,7 +27,7 @@
|
||||
>h2.node-title{
|
||||
position: relative;
|
||||
// font-size: 12em;
|
||||
font-size: fluid-clamp(12rem, $min: 8rem);
|
||||
// font-size: fluid-clamp(12rem, $min: 8rem);
|
||||
margin: 0;
|
||||
&.leshed-svg-export-target{
|
||||
pointer-events: painted;
|
||||
@@ -33,13 +35,26 @@
|
||||
}
|
||||
}
|
||||
|
||||
.field{
|
||||
margin-bottom: 1rem;
|
||||
.field-item{
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.field_artiste_s_invite_s{
|
||||
font-size: 1.8em;
|
||||
font-weight: 300;
|
||||
// font-size: 1.8em;
|
||||
font-size: fluid-clamp(1.8rem, $min: 1.134rem);
|
||||
.field-item{
|
||||
font-weight: 300;
|
||||
display: inline-block;
|
||||
&:not(:last-child):after{
|
||||
content:", ";
|
||||
}
|
||||
}
|
||||
}
|
||||
.field_invite_accompagne_curate_p,
|
||||
.field_partenaire_s{
|
||||
margin-top: 1em;
|
||||
// margin-top: 1em;
|
||||
font-weight: 400;
|
||||
.field-label{
|
||||
font-weight: $default_fwght;
|
||||
@@ -48,13 +63,67 @@
|
||||
// display: inline-block;
|
||||
// }
|
||||
}
|
||||
|
||||
// Pas de marge basse sur le type de projet s'il est immédiatement
|
||||
// suivi des dates : l'écart de 16px mesuré venait d'ici.
|
||||
// NB : :has(+ …) — la marge appartient au PRÉCÉDENT, le combinateur
|
||||
// seul (field_type + field_dates) ne pourrait cibler que le suivant.
|
||||
div.field_type_de_projet:has(+ div.field_dates){
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.field_dates{
|
||||
margin-top: 1em;
|
||||
time{
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
div.field_projet_s_lie_s{
|
||||
// margin-top: 2em;
|
||||
// .field-label{
|
||||
// margin-bottom: 1em;
|
||||
// }
|
||||
>.field-items.multiple{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: $colsgap;
|
||||
>.field-item{
|
||||
flex: 1 0 calc(50% - $colsgap / 2);
|
||||
max-width: calc(50% - $colsgap / 2);
|
||||
>article{
|
||||
@include projetOnListe();
|
||||
>header{
|
||||
>h2{
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
.field_artiste_s_invite_s{
|
||||
font-size: 1.134em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.field_evenement_s_lie_s{
|
||||
article.node-type-evenement.view-mode-calendrier{
|
||||
@include event_calendar();
|
||||
>section.content{
|
||||
>h2.node-title{
|
||||
font-size: 2.68em;
|
||||
}
|
||||
div.field{
|
||||
margin:0;
|
||||
p{ margin:0;}
|
||||
}
|
||||
}
|
||||
>section.last-cel{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>div.spacer{
|
||||
display: block;
|
||||
height: 5em;
|
||||
@@ -127,7 +196,16 @@
|
||||
width: 205%;//calc(50% - $colsgap / 2);
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
|
||||
>h2.node-title{
|
||||
font-size: fluid-clamp(12rem, $min: 8rem);
|
||||
}
|
||||
}
|
||||
// .field_artiste_s_invite_s{
|
||||
// // font-size: 1.8em;
|
||||
// font-size: fluid-clamp(1.8rem, $min: 1rem);
|
||||
// font-weight: 300;
|
||||
// }
|
||||
}
|
||||
|
||||
&.right{
|
||||
@@ -212,9 +290,41 @@
|
||||
div.col.right .field_images .field-item:not(:first-child){
|
||||
order: 5;
|
||||
}
|
||||
div.col.left > .spacer{
|
||||
display: none;
|
||||
div.col.left > div.field_fichiers{
|
||||
order: 6;
|
||||
}
|
||||
div.col.left > div.field_partenaire_s{
|
||||
order:7;
|
||||
}
|
||||
div.col.left > div.field_projet_s_lie_s{
|
||||
order: 8;
|
||||
}
|
||||
// NB : div.spacer (et pas .spacer) — la règle de base `>div.spacer{display:block}`
|
||||
// a une spécificité de (0,4,5) : `.spacer` seul (0,4,4) perdait le cascade
|
||||
// malgré l'ordre. Égaler la spécificité, laisser la cascade trancher.
|
||||
div.col.left > div.spacer{
|
||||
order:20;
|
||||
}
|
||||
|
||||
div.col{
|
||||
&.left{
|
||||
>header{
|
||||
>h2.node-title{
|
||||
font-size: 5em;
|
||||
// font-size: fluid-clamp(12rem, $min: 8rem);
|
||||
}
|
||||
}
|
||||
// .field_artiste_s_invite_s{
|
||||
// .field-item{
|
||||
// display: inline-block;
|
||||
// &:not(:last-child):after{
|
||||
// content:", ";
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
// \_| |_/\___|\__,_|\__,_|\___|_|
|
||||
|
||||
@use "../abstracts/variables" as *;
|
||||
@use "../abstracts/fluid" as *;
|
||||
|
||||
|
||||
header[role="banner"]{
|
||||
@@ -77,7 +78,7 @@ header[role="banner"]{
|
||||
// .layout-container : sinon le débord pleine largeur (et donc le
|
||||
// backdrop-filter) est rogné aux bords du conteneur centré.
|
||||
position:fixed;
|
||||
top:$header_height;
|
||||
top:$header-height-fluid;
|
||||
left: 0;
|
||||
width:100vw;
|
||||
padding: 0 calc((100vw - $layout_width) / 2) 0 calc((100vw - $layout_width) / 2);
|
||||
@@ -89,7 +90,7 @@ header[role="banner"]{
|
||||
overflow: hidden;
|
||||
transition-duration: 0.5s;
|
||||
&[opened]{
|
||||
height: calc(100vh - $header_height);
|
||||
height: calc(100vh - $header-height-fluid);
|
||||
}
|
||||
nav#block-leshed-navigationprincipale{
|
||||
// width: $layout_width;
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
// |___/
|
||||
|
||||
@use "../abstracts/variables" as *;
|
||||
@use "../abstracts/fluid" as *;
|
||||
|
||||
|
||||
div.layout-container{
|
||||
@@ -22,13 +23,13 @@ div.layout-container{
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 0.5em 0;
|
||||
flex: 1 1 $header_height;
|
||||
flex: 1 1 $header-height-fluid;
|
||||
z-index: 100;
|
||||
// position: fixed;
|
||||
// top:0;
|
||||
// width: 100%;
|
||||
height: $header_height;
|
||||
min-height: $header_height;
|
||||
height: $header-height-fluid;
|
||||
min-height: $header-height-fluid;
|
||||
}
|
||||
main[role="main"]{
|
||||
flex: 1 1 auto;
|
||||
|
||||
@@ -18,16 +18,6 @@ article.node-type-evenement.view-mode-full{
|
||||
@include event-date-time();
|
||||
}
|
||||
|
||||
div.field_projet_s_lie_s{
|
||||
margin-top: 2em;
|
||||
.field-label{
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
article.node-type-projet.view-mode-tableau_liste{
|
||||
@include projetOnListe();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
+12
-55
@@ -4,68 +4,25 @@
|
||||
// \ V / | | __/\ V V /\__ \ / ___ \| | | (__| | | | |\ V / __/\__ \ | |___ \ V / __/ | | | __/ | | | | | __/ | | | |_\__ \
|
||||
// \_/ |_|\___| \_/\_/ |___/ /_/ \_\_| \___|_| |_|_| \_/ \___||___/ |_____| \_/ \___|_| |_|\___|_| |_| |_|\___|_| |_|\__|___/
|
||||
|
||||
@use "../abstracts/variables" as *;
|
||||
@use "../abstracts/event-date-time" as *;
|
||||
@use "../abstracts/event-calendrier" as *;
|
||||
|
||||
div.views-archives-evenements {
|
||||
|
||||
& > h3{
|
||||
border-bottom: 1px solid #999;
|
||||
// border-bottom: 1px solid #999;
|
||||
margin-bottom: 0;
|
||||
font-size: 2em;
|
||||
font-weight: 200;
|
||||
span.month{
|
||||
font-weight: 100;
|
||||
}
|
||||
span.year{
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
article.node-type-evenement.view-mode-calendrier{
|
||||
// @include evenementListe();
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1em;
|
||||
header{
|
||||
flex:0 1 auto;
|
||||
// width: 5em;
|
||||
padding:0 1em 0 0;
|
||||
|
||||
.field_dates{
|
||||
@include event-date-time(5em);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.6em;
|
||||
span.date-sep{
|
||||
display: block;
|
||||
width: 1em;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
transform-origin: center;
|
||||
transform: rotate(90deg) translateX(0.1em);
|
||||
line-height: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.content{
|
||||
flex:0 1 auto;
|
||||
h2.node-title{
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
section.last-cel{
|
||||
flex:0 1 auto;
|
||||
.field_images{
|
||||
a{
|
||||
display: block;
|
||||
width: 12em;
|
||||
height: 12em;
|
||||
overflow: hidden;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit:contain;
|
||||
object-position: top left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include event_calendar();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -46,18 +46,18 @@
|
||||
|
||||
{% if label_hidden %}
|
||||
{% if multiple %}
|
||||
<div{{ attributes.addClass("field-items").addClass("multiple") }}>
|
||||
<div{{ attributes.addClass("field").addClass("field-items").addClass("multiple") }}>
|
||||
{% for item in items %}
|
||||
<div{{ item.attributes.addClass("field-item") }}>{{ item.content }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% for item in items %}
|
||||
<div{{ attributes.addClass("field-item") }}>{{ item.content }}</div>
|
||||
<div{{ attributes.addClass("field").addClass("field-item") }}>{{ item.content }}</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div{{ attributes }}>
|
||||
<div{{ attributes.addClass("field") }}>
|
||||
<div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
|
||||
{% if multiple %}
|
||||
<div class="field-items multiple">
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
{#
|
||||
/**
|
||||
* @file
|
||||
* Default theme implementation to display a node.
|
||||
*
|
||||
* Available variables:
|
||||
* - node: The node entity with limited access to object properties and methods.
|
||||
* Only method names starting with "get", "has", or "is" and a few common
|
||||
* methods such as "id", "label", and "bundle" are available. For example:
|
||||
* - node.getCreatedTime() will return the node creation timestamp.
|
||||
* - node.hasField('field_example') returns TRUE if the node bundle includes
|
||||
* field_example. (This does not indicate the presence of a value in this
|
||||
* field.)
|
||||
* - node.isPublished() will return whether the node is published or not.
|
||||
* Calling other methods, such as node.delete(), will result in an exception.
|
||||
* See \Drupal\node\Entity\Node for a full list of public properties and
|
||||
* methods for the node object.
|
||||
* - label: (optional) The title of the node.
|
||||
* - content: All node items. Use {{ content }} to print them all,
|
||||
* or print a subset such as {{ content.field_example }}. Use
|
||||
* {{ content|without('field_example') }} to temporarily suppress the printing
|
||||
* of a given child element.
|
||||
* - author_picture: The node author user entity, rendered using the "compact"
|
||||
* view mode.
|
||||
* - metadata: Metadata for this node.
|
||||
* - date: (optional) Themed creation date field.
|
||||
* - author_name: (optional) Themed author name field.
|
||||
* - url: Direct URL of the current node.
|
||||
* - display_submitted: Whether submission information should be displayed.
|
||||
* - attributes: HTML attributes for the containing element.
|
||||
* The attributes.class element may contain one or more of the following
|
||||
* classes:
|
||||
* - node: The current template type (also known as a "theming hook").
|
||||
* - node--type-[type]: The current node type. For example, if the node is an
|
||||
* "Article" it would result in "node--type-article". Note that the machine
|
||||
* name will often be in a short form of the human readable label.
|
||||
* - node--view-mode-[view_mode]: The View Mode of the node; for example, a
|
||||
* teaser would result in: "node--view-mode-teaser", and
|
||||
* full: "node--view-mode-full".
|
||||
* The following are controlled through the node publishing options.
|
||||
* - node--promoted: Appears on nodes promoted to the front page.
|
||||
* - node--sticky: Appears on nodes ordered above other non-sticky nodes in
|
||||
* teaser listings.
|
||||
* - node--unpublished: Appears on unpublished nodes visible only to site
|
||||
* admins.
|
||||
* - title_attributes: Same as attributes, except applied to the main title
|
||||
* tag that appears in the template.
|
||||
* - content_attributes: Same as attributes, except applied to the main
|
||||
* content tag that appears in the template.
|
||||
* - author_attributes: Same as attributes, except applied to the author of
|
||||
* the node 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.
|
||||
* - view_mode: View mode; for example, "teaser" or "full".
|
||||
* - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
|
||||
* - page: Flag for the full page state. Will be true if view_mode is 'full'.
|
||||
*
|
||||
* @see template_preprocess_node()
|
||||
*
|
||||
* @ingroup themeable
|
||||
*/
|
||||
#}
|
||||
|
||||
{#
|
||||
{% if content.field_images.getvalue|length %}
|
||||
{% set attributes = attributes.addClass('has-image') %}
|
||||
{% endif %} #}
|
||||
|
||||
<article{{ attributes }}>
|
||||
|
||||
{# {{ title_prefix }} #}
|
||||
{# {% if label and not page %} #}
|
||||
<header>
|
||||
<h2{{ title_attributes }}>
|
||||
<a href="{{ url }}" rel="bookmark">{{ label }}</a>
|
||||
</h2>
|
||||
{{ content.field_images }}
|
||||
</header>
|
||||
{# {% endif %} #}
|
||||
{# {{ title_suffix }} #}
|
||||
|
||||
|
||||
<div{{ content_attributes }}>
|
||||
{{ content|without('field_images') }}
|
||||
</div>
|
||||
|
||||
</article>
|
||||
Reference in New Issue
Block a user