Compare commits
3 Commits
36928232d6
...
9c6643200d
| Author | SHA1 | Date | |
|---|---|---|---|
| 9c6643200d | |||
| f4208a492e | |||
| efe44ec52a |
File diff suppressed because one or more lines are too long
@ -1542,14 +1542,12 @@ footer {
|
||||
padding-top: 3rem;
|
||||
}
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite a {
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite a h2 {
|
||||
display: none;
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite a .field_field_images {
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite div .field_field_images {
|
||||
order: 1;
|
||||
background-color: black;
|
||||
-moz-border-radius: 9px; /* pour Mozilla */
|
||||
@ -1557,21 +1555,20 @@ footer {
|
||||
-webkit-border-radius: 9px; /* pour Safari sur Mac */
|
||||
border-radius: 9px; /* CSS3 */
|
||||
height: 250px;
|
||||
width: 100%;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite a .field_field_images {
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite div .field_field_images {
|
||||
height: 170px;
|
||||
}
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite a .field_field_images div {
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite div .field_field_images div.cadre-img-zoom {
|
||||
height: 100%;
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite a .field_field_images div div a {
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite a .field_field_images div div a img {
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite div .field_field_images div.cadre-img-zoom img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
@ -1581,103 +1578,92 @@ footer {
|
||||
border-radius: 9px; /* CSS3 */
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite a .field_field_images div div a img {
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite div .field_field_images div.cadre-img-zoom img {
|
||||
max-height: 170px;
|
||||
}
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite a .field_field_images img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
-moz-border-radius: 9px; /* pour Mozilla */
|
||||
-khtml-border-radius: 9px; /* pour Safari et Chrome */
|
||||
-webkit-border-radius: 9px; /* pour Safari sur Mac */
|
||||
border-radius: 9px; /* CSS3 */
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite a .field_field_images img {
|
||||
max-height: 170px;
|
||||
}
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite a .field_field_type_d_actualite {
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite div .field_field_type_d_actualite {
|
||||
order: 2;
|
||||
text-transform: uppercase;
|
||||
color: red;
|
||||
font-size: 0.5rem;
|
||||
font-family: "gilroy-bold";
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite a .field_field_type_d_actualite::before {
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite div .field_field_type_d_actualite::before {
|
||||
content: url("../img/type-actu.svg");
|
||||
padding-right: 0.3rem;
|
||||
padding-bottom: 0.2rem;
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite a .infos-actu {
|
||||
order: 2;
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite div .field_field_type_d_actualite a {
|
||||
color: red;
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite a .infos-actu h2 {
|
||||
font-family: "gilroy-semibold";
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite a .field_field_date {
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite div .field_field_date {
|
||||
order: 3;
|
||||
color: red;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
font-size: 0.5rem;
|
||||
font-family: "gilroy-bold";
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite a .field_field_date::before {
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite div .field_field_date::before {
|
||||
content: url("../img/date-actu.svg");
|
||||
padding-right: 0.3rem;
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite a .field_title {
|
||||
order: 3;
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite div .field_title {
|
||||
order: 4;
|
||||
padding-top: 0.2rem;
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite a .field_title h2 {
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite div .field_title h2 {
|
||||
margin: 0;
|
||||
line-height: 0.4;
|
||||
padding-bottom: 0.6rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite a .field_title h2 a {
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite div .field_title h2 a {
|
||||
font-size: 0.8rem;
|
||||
color: rgb(7, 50, 194);
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite a .field_body {
|
||||
order: 4;
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite div .field_body {
|
||||
order: 5;
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
font-family: "gilroy-regular";
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite a .field_body p {
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite div .field_body p {
|
||||
margin: 0;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite a .field_body a {
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite div .field_body a {
|
||||
color: rgb(7, 50, 194);
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite a .field_field_liens {
|
||||
order: 5;
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite div .field_field_liens {
|
||||
order: 6;
|
||||
width: fit-content;
|
||||
padding-left: 0.5rem;
|
||||
background: black;
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite a .field_field_liens {
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite div .field_field_liens {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite a .field_field_liens a {
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite div .field_field_liens a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite a .field_field_liens a svg {
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite div .field_field_liens a svg {
|
||||
display: none;
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite a .field_field_liens a::after {
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite div .field_field_liens a::after {
|
||||
display: inline-flex;
|
||||
content: url("../img/noun-arrow-to-right.svg");
|
||||
padding-right: 0.2rem;
|
||||
@ -3978,4 +3964,126 @@ main {
|
||||
}
|
||||
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row:has(.type-vidéo) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#actualites {
|
||||
background-color: #f6f7f3;
|
||||
}
|
||||
#actualites .layout-content .content_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
#actualites .layout-content .content_container #block-quartiers-de-demain-titredepage {
|
||||
margin-top: 3rem;
|
||||
margin-left: 15%;
|
||||
margin-bottom: 1rem;
|
||||
width: 70%;
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
#actualites .layout-content .content_container #block-quartiers-de-demain-titredepage {
|
||||
margin-top: 14rem;
|
||||
}
|
||||
}
|
||||
#actualites .layout-content .content_container #block-quartiers-de-demain-titredepage h1 {
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
text-transform: none;
|
||||
color: black;
|
||||
font-size: 2rem;
|
||||
font-family: "gilroy-medium";
|
||||
}
|
||||
#actualites .layout-content .content_container .views-element-container {
|
||||
margin-left: 20%;
|
||||
width: 65%;
|
||||
}
|
||||
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row {
|
||||
width: 100%;
|
||||
font-size: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite {
|
||||
width: 100%;
|
||||
padding-bottom: 7rem;
|
||||
}
|
||||
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .infos-actu {
|
||||
order: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 1rem 0rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .infos-actu .field_field_type_d_actualite {
|
||||
text-transform: uppercase;
|
||||
color: red;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .infos-actu .field_field_type_d_actualite::before {
|
||||
content: url("../img/type-actu.svg");
|
||||
padding-right: 0.4rem;
|
||||
}
|
||||
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .infos-actu .field_field_date {
|
||||
color: red;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .infos-actu .field_field_date::before {
|
||||
content: url("../img/date-actu.svg");
|
||||
padding-right: 0.4rem;
|
||||
}
|
||||
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_body {
|
||||
order: 2;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_body p {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_field_liens {
|
||||
order: 3;
|
||||
padding-bottom: 2rem;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_field_liens a {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding-left: 0.5rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: white;
|
||||
background: black;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_field_liens a svg {
|
||||
display: none;
|
||||
}
|
||||
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_field_liens a::after {
|
||||
display: inline-flex;
|
||||
content: url("../img/noun-arrow-to-right.svg");
|
||||
padding-right: 0.2rem;
|
||||
padding-left: 0.2rem;
|
||||
}
|
||||
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_field_images {
|
||||
order: 5;
|
||||
}
|
||||
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_field_images img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_field_images blockquote.image-field-caption {
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_field_images blockquote.image-field-caption p {
|
||||
margin-top: 0;
|
||||
font-size: 0.4rem;
|
||||
}
|
||||
@ -0,0 +1,87 @@
|
||||
/**
|
||||
* @file
|
||||
* quartiers_de_demain behaviors.
|
||||
*/
|
||||
(function (Drupal) {
|
||||
|
||||
'use strict';
|
||||
|
||||
Drupal.behaviors.quartiers_de_demain = {
|
||||
attach: function (context, settings) {
|
||||
console.log('It works!');
|
||||
}
|
||||
};
|
||||
} (Drupal));
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/////////////// start class à view-rows-ressources ////////
|
||||
$(document).ready(function () {
|
||||
$(".view-rows-wrapper").each(function () {
|
||||
let h3Container = $(this).prev("h3").find("div[class^='type-']");
|
||||
let classToAdd = h3Container.attr("class"); // Récupère la classe complète (ex: "type-Documentation")
|
||||
|
||||
if (classToAdd) {
|
||||
$(this).addClass(classToAdd); // Ajoute cette classe à .view-rows-wrapper
|
||||
}
|
||||
});
|
||||
});
|
||||
////////////////// end class à view-rows-wrapper ////////////////
|
||||
|
||||
|
||||
|
||||
/////////////////// start voir plus... ressources ////////////////////
|
||||
|
||||
$(document).ready(function () {
|
||||
// Vérifier si on est sur la page avec l'ID #ressources
|
||||
if ($("#ressources").length > 0) {
|
||||
$(".view-rows-wrapper").each(function () {
|
||||
let container = $(this); // Cible uniquement cette section
|
||||
let items = container.find(".views-row"); // Les éléments à afficher progressivement
|
||||
let visibleCount = 4; // Nombre d'éléments visibles au départ
|
||||
|
||||
|
||||
// Récupérer la classe `type-XXX`
|
||||
let typeClass = container.attr("class").split(" ").find(cls => cls.startsWith("type-"));
|
||||
let typeName = typeClass ? typeClass.replace("type-", "").replace(/-/g, " ") : "contenu"; // Nettoyer le nom
|
||||
|
||||
if (typeClass === "type-podcast" || typeClass === "type-video") {
|
||||
visibleCount = 2; // Pour Podcast et Vidéo
|
||||
}
|
||||
|
||||
// Ajouter un bouton dynamiquement après chaque `.view-rows-ressources`
|
||||
let button = $("<button>")
|
||||
.addClass("voir-plus")
|
||||
.text("Voir plus de " + typeName)
|
||||
.insertAfter(container);
|
||||
|
||||
// Cacher tous les éléments sauf les 4 premiers
|
||||
items.hide().slice(0, visibleCount).show();
|
||||
|
||||
// Action sur le bouton
|
||||
button.on("click", function () {
|
||||
let hiddenItems = container.find(".views-row:hidden").slice(0, 4); // Prochains éléments à afficher
|
||||
|
||||
if ($(this).text().includes("Voir plus")) {
|
||||
hiddenItems.slideDown(); // Afficher avec un effet de glissement
|
||||
|
||||
if (container.find(".views-row:hidden").length === 0) {
|
||||
$(this).text("Voir moins de " + typeName); // Changer le texte du bouton si tout est affiché
|
||||
}
|
||||
} else {
|
||||
container.find(".views-row").slice(visibleCount).slideUp(); // Replier les éléments
|
||||
$(this).text("Voir plus de " + typeName); // Revenir à l'état initial
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/////////////////// end voir plus... ressources ////////////////////
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -361,7 +361,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
// Maximum number of characters to display
|
||||
const maxChars = 140; // Adjust this value as needed
|
||||
|
||||
document.querySelectorAll('#actus-caroussel .node-type-actualite .field_body p').forEach(function(paragraph) {
|
||||
document.querySelectorAll('#actus-caroussel .node-type-actualite .field_body').forEach(function(paragraph) {
|
||||
let text = paragraph.textContent.trim();
|
||||
if (text.length > maxChars) {
|
||||
let truncatedText = text.slice(0, maxChars) + '...';
|
||||
@ -696,6 +696,8 @@ $(document).ready(function () {
|
||||
});
|
||||
////////////////// end class à view-rows-wrapper ////////////////
|
||||
|
||||
|
||||
|
||||
/////////////////// start voir plus... ressources ////////////////////
|
||||
|
||||
$(document).ready(function () {
|
||||
@ -743,8 +745,6 @@ $(document).ready(function () {
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
/////////////////// end voir plus... ressources ////////////////////
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,150 @@
|
||||
|
||||
#actualites{
|
||||
background-color: #f6f7f3;
|
||||
|
||||
|
||||
.layout-content{
|
||||
// padding-top: 1rem;
|
||||
.content_container{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
#block-quartiers-de-demain-titredepage{
|
||||
margin-top: 3rem;
|
||||
margin-left: 15%;
|
||||
margin-bottom: 1rem;
|
||||
width: 70%;
|
||||
@media(max-width: 810px){
|
||||
margin-top: 14rem;
|
||||
}
|
||||
h1{
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
text-transform: none;
|
||||
color: black;
|
||||
font-size: 2rem;
|
||||
font-family: "gilroy-medium"
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.views-element-container{
|
||||
margin-left: 20%;
|
||||
width: 65%;
|
||||
|
||||
.view-rows-wrapper{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
.views-row{
|
||||
width: 100%;
|
||||
font-size: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
.node-type-actualite{
|
||||
width: 100%;
|
||||
padding-bottom: 7rem;
|
||||
// a{
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// }
|
||||
|
||||
.infos-actu{
|
||||
order: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 1rem 0rem;
|
||||
margin-bottom: 1rem;
|
||||
.field_field_type_d_actualite{
|
||||
text-transform: uppercase;
|
||||
color: red;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
&::before{
|
||||
content: url('../img/type-actu.svg');
|
||||
padding-right: 0.4rem;
|
||||
}
|
||||
}
|
||||
.field_field_date{
|
||||
color: red;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-left: 1rem;
|
||||
&::before{
|
||||
content: url('../img/date-actu.svg');
|
||||
padding-right: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.field_body {
|
||||
order: 2;
|
||||
padding-bottom: 2rem;
|
||||
p{
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
.field_field_liens{
|
||||
order: 3;
|
||||
padding-bottom: 2rem;
|
||||
padding-top: 2rem;
|
||||
a{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding-left: 0.5rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: white;
|
||||
background: black;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.6rem;
|
||||
svg{
|
||||
display: none;
|
||||
}
|
||||
&::after{
|
||||
display: inline-flex;
|
||||
content: url("../img/noun-arrow-to-right.svg");
|
||||
padding-right: 0.2rem;
|
||||
padding-left: 0.2rem;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// a:not(.ext){
|
||||
// display: none;
|
||||
// }
|
||||
}
|
||||
|
||||
.field_field_images{
|
||||
order: 5;
|
||||
img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
blockquote.image-field-caption{
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
p{
|
||||
margin-top: 0;
|
||||
font-size: 0.4rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -42,156 +42,143 @@
|
||||
padding-top: 3rem;
|
||||
}
|
||||
article.node-type-actualite{
|
||||
a{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
h2{
|
||||
display: none;
|
||||
}
|
||||
.field_field_images{
|
||||
order: 1;
|
||||
background-color: black;
|
||||
-moz-border-radius: 9px; /* pour Mozilla */
|
||||
-khtml-border-radius: 9px; /* pour Safari et Chrome */
|
||||
-webkit-border-radius: 9px; /* pour Safari sur Mac */
|
||||
border-radius: 9px; /* CSS3 */
|
||||
height: 250px;
|
||||
margin-bottom: 0.6rem;
|
||||
@media(max-width: 550px){
|
||||
height: 170px;
|
||||
}
|
||||
div{
|
||||
height: 100%;
|
||||
div{
|
||||
// height: 600px;
|
||||
|
||||
a{
|
||||
display: block;
|
||||
height: 100%;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
-moz-border-radius: 9px; /* pour Mozilla */
|
||||
-khtml-border-radius: 9px; /* pour Safari et Chrome */
|
||||
-webkit-border-radius: 9px; /* pour Safari sur Mac */
|
||||
border-radius: 9px; /* CSS3 */
|
||||
@media(max-width: 550px){
|
||||
max-height: 170px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
div{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
.field_field_images{
|
||||
order: 1;
|
||||
background-color: black;
|
||||
-moz-border-radius: 9px; /* pour Mozilla */
|
||||
-khtml-border-radius: 9px; /* pour Safari et Chrome */
|
||||
-webkit-border-radius: 9px; /* pour Safari sur Mac */
|
||||
border-radius: 9px; /* CSS3 */
|
||||
height: 250px;
|
||||
width: 100%;
|
||||
margin-bottom: 0.6rem;
|
||||
@media(max-width: 550px){
|
||||
max-height: 170px;
|
||||
height: 170px;
|
||||
}
|
||||
div.cadre-img-zoom{
|
||||
height: 100%;
|
||||
display: block;
|
||||
height: 100%;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
-moz-border-radius: 9px; /* pour Mozilla */
|
||||
-khtml-border-radius: 9px; /* pour Safari et Chrome */
|
||||
-webkit-border-radius: 9px; /* pour Safari sur Mac */
|
||||
border-radius: 9px; /* CSS3 */
|
||||
@media(max-width: 550px){
|
||||
max-height: 170px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.field_field_type_d_actualite{
|
||||
order: 2;
|
||||
text-transform: uppercase;
|
||||
color: red;
|
||||
font-size: 0.5rem;
|
||||
font-family: 'gilroy-bold';
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
&::before{
|
||||
content: url('../img/type-actu.svg');
|
||||
padding-right: 0.3rem;
|
||||
padding-bottom: 0.2rem;
|
||||
}
|
||||
a{color: red;}
|
||||
}
|
||||
// .infos-actu{
|
||||
// order: 2;
|
||||
// h2{
|
||||
// font-family: 'gilroy-semibold';
|
||||
// }
|
||||
// }
|
||||
.field_field_date{
|
||||
order: 3;
|
||||
color: red;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
font-size: 0.5rem;
|
||||
font-family: 'gilroy-bold';
|
||||
|
||||
&::before{
|
||||
content: url('../img/date-actu.svg');
|
||||
padding-right: 0.3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.field_field_type_d_actualite{
|
||||
text-transform: uppercase;
|
||||
color: red;
|
||||
font-size: 0.5rem;
|
||||
font-family: 'gilroy-bold';
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
&::before{
|
||||
content: url('../img/type-actu.svg');
|
||||
padding-right: 0.3rem;
|
||||
padding-bottom: 0.2rem;
|
||||
.field_title{
|
||||
order: 4;
|
||||
padding-top: 0.2rem;
|
||||
h2{
|
||||
margin: 0;
|
||||
line-height: 0.4;
|
||||
padding-bottom: 0.6rem;
|
||||
padding-left: 0;
|
||||
a{
|
||||
font-size: 0.8rem;
|
||||
color: $blue_QDD;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.infos-actu{
|
||||
order: 2;
|
||||
h2{
|
||||
font-family: 'gilroy-semibold';
|
||||
}
|
||||
}
|
||||
.field_field_date{
|
||||
|
||||
color: red;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 0.5rem;
|
||||
font-family: 'gilroy-bold';
|
||||
|
||||
&::before{
|
||||
content: url('../img/date-actu.svg');
|
||||
padding-right: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.field_title{
|
||||
order: 3;
|
||||
padding-top: 0.2rem;
|
||||
h2{
|
||||
margin: 0;
|
||||
line-height: 0.4;
|
||||
padding-bottom: 0.6rem;
|
||||
.field_body{
|
||||
order: 5;
|
||||
// visibility: visible;
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
font-family: 'gilroy-regular';
|
||||
padding-bottom: 0.5rem;
|
||||
p{
|
||||
margin: 0;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.7rem ;
|
||||
}
|
||||
a{
|
||||
font-size: 0.8rem;
|
||||
color: $blue_QDD;
|
||||
}
|
||||
}
|
||||
}
|
||||
.field_body{
|
||||
order: 4;
|
||||
// visibility: visible;
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
font-family: 'gilroy-regular';
|
||||
p{
|
||||
margin: 0;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.7rem ;
|
||||
}
|
||||
a{
|
||||
color: $blue_QDD;
|
||||
}
|
||||
}
|
||||
.field_field_liens{
|
||||
order: 5;
|
||||
width: fit-content;
|
||||
padding-left: 0.5rem;
|
||||
// padding-bottom: 0.2rem;
|
||||
// padding-top: 0.2rem;
|
||||
background: black;
|
||||
@media (max-width:810px) {
|
||||
margin-left: 0;
|
||||
}
|
||||
.field_field_liens{
|
||||
order: 6;
|
||||
width: fit-content;
|
||||
padding-left: 0.5rem;
|
||||
// padding-bottom: 0.2rem;
|
||||
// padding-top: 0.2rem;
|
||||
background: black;
|
||||
@media (max-width:810px) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
a{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.6rem;
|
||||
|
||||
svg{
|
||||
display: none;
|
||||
}
|
||||
&::after{
|
||||
a{
|
||||
display: inline-flex;
|
||||
content: url("../img/noun-arrow-to-right.svg");
|
||||
padding-right: 0.2rem;
|
||||
padding-left: 0.2rem;
|
||||
// padding-bottom: 0.2rem;
|
||||
}
|
||||
}
|
||||
align-items: center;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.6rem;
|
||||
|
||||
svg{
|
||||
display: none;
|
||||
}
|
||||
&::after{
|
||||
display: inline-flex;
|
||||
content: url("../img/noun-arrow-to-right.svg");
|
||||
padding-right: 0.2rem;
|
||||
padding-left: 0.2rem;
|
||||
// padding-bottom: 0.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.views-row:nth-child(odd){
|
||||
|
||||
@ -49,6 +49,6 @@
|
||||
@import "pages/node-type-site";
|
||||
@import "pages/lessites.scss";
|
||||
@import "pages/ressources";
|
||||
|
||||
@import "pages/actualites";
|
||||
|
||||
@import "/home/ouidade/Developer/docker-quartiersdedemain/src/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.css";
|
||||
@ -88,11 +88,12 @@
|
||||
</footer>
|
||||
{% endif %}
|
||||
|
||||
{# <div{{ content_attributes }}> #}
|
||||
{# {{ content }} #}
|
||||
{# </div> #}
|
||||
{% block content %}
|
||||
<a href="{{ url }}" rel="bookmark">{{ label }}
|
||||
<div{{ content_attributes }}>
|
||||
{{ content }}
|
||||
|
||||
</div>
|
||||
|
||||
{# {% block content %}
|
||||
{{content.field_images}}
|
||||
<div class="infos-actu">
|
||||
{{content.field_type_d_actualite}}
|
||||
@ -100,9 +101,5 @@
|
||||
</div>
|
||||
{{content.body}}
|
||||
{{content.field_liens}}
|
||||
|
||||
|
||||
</a>
|
||||
{% endblock %}
|
||||
|
||||
{% endblock %} #}
|
||||
</article>
|
||||
|
||||
@ -0,0 +1,97 @@
|
||||
{#
|
||||
/**
|
||||
* @file
|
||||
* Claro's theme implementation to display a single Drupal page.
|
||||
*
|
||||
* The doctype, html, head, and body tags are not in this template. Instead
|
||||
* they can be found in the html.html.twig template normally located in the
|
||||
* core/modules/system directory.
|
||||
*
|
||||
* Available variables:
|
||||
*
|
||||
* General utility variables:
|
||||
* - base_path: The base URL path of the Drupal installation. Will usually be
|
||||
* "/" unless you have installed Drupal in a sub-directory.
|
||||
* - is_front: A flag indicating if the current page is the front page.
|
||||
* - logged_in: A flag indicating if the user is registered and signed in.
|
||||
* - is_admin: A flag indicating if the user has permission to access
|
||||
* administration pages.
|
||||
*
|
||||
* Site identity:
|
||||
* - front_page: The URL of the front page. Use this instead of base_path when
|
||||
* linking to the front page. This includes the language domain or prefix.
|
||||
*
|
||||
* Page content (in order of occurrence in the default page.html.twig):
|
||||
* - node: Fully loaded node, if there is an automatically-loaded node
|
||||
* associated with the page and the node ID is the second argument in the
|
||||
* page's path (e.g. node/12345 and node/12345/revisions, but not
|
||||
* comment/reply/12345).
|
||||
*
|
||||
* Regions:
|
||||
* - page.header: Items for the header region.
|
||||
* - page.pre_content: Items for the pre-content region.
|
||||
* - page.breadcrumb: Items for the breadcrumb region.
|
||||
* - page.highlighted: Items for the highlighted region.
|
||||
* - page.help: Dynamic help text, mostly for admin pages.
|
||||
* - page.content: The main content of the current page.
|
||||
*
|
||||
* @see template_preprocess_page()
|
||||
* @see html.html.twig
|
||||
*/
|
||||
#}
|
||||
<div class="layout-container " id="actualites">
|
||||
|
||||
<header role="banner">
|
||||
{{ page.header_left }}
|
||||
{{ page.header_right }}
|
||||
{{ page.header_nav }}
|
||||
</header>
|
||||
|
||||
{{ page.primary_menu }}
|
||||
{{ page.secondary_menu }}
|
||||
|
||||
{{ page.breadcrumb }}
|
||||
|
||||
{{ page.highlighted }}
|
||||
|
||||
{{ page.help }}
|
||||
|
||||
<main role="main">
|
||||
<a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
|
||||
|
||||
<div class="layout-content">
|
||||
|
||||
{{ page.content }}
|
||||
</div>{# /.layout-content #}
|
||||
|
||||
{% if page.sidebar_first %}
|
||||
<aside class="layout-sidebar-first" role="complementary">
|
||||
{{ page.sidebar_first }}
|
||||
</aside>
|
||||
{% endif %}
|
||||
|
||||
{% if page.sidebar_second %}
|
||||
<aside class="layout-sidebar-second" role="complementary">
|
||||
{{ page.sidebar_second }}
|
||||
</aside>
|
||||
{% endif %}
|
||||
|
||||
</main>
|
||||
{# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #}
|
||||
<footer role="contentinfo">
|
||||
{# <section id="footer-top"> #}
|
||||
<span class="totop"><a href="#" id="toTop"><i class="arrow-up"></i></a></span>
|
||||
{# </section> #}
|
||||
<div class="footer">
|
||||
<section id="footer-left">{{ page.footer_left }}</section>
|
||||
<div class='first-row'>
|
||||
<section id="footer-middle">{{ page.footer_middle }}</section>
|
||||
<section id="footer-right">{{ page.footer_right }}</section>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{# <section id="footer-bottom">{{ page.footer_bottom }}</section> #}
|
||||
</footer>
|
||||
{# {% endif %} #}
|
||||
|
||||
</div>{# /.layout-container #}
|
||||
@ -5,6 +5,7 @@ let config = {
|
||||
mode: 'development',
|
||||
entry: [
|
||||
"./src/assets/js/quartiers_de_demain.js",
|
||||
"./src/assets/js/page_ressources.js",
|
||||
// "./src/assets/js/animated_logo.js",
|
||||
"./src/assets/js/animated_formes.js",
|
||||
"./src/assets/scss/quartiers_de_demain.scss",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user