From ee4f0d37fb700415bbd2173b0a5e188a13713e8a Mon Sep 17 00:00:00 2001 From: ouidade Date: Thu, 15 May 2025 15:09:35 +0200 Subject: [PATCH] css ressource livre --- .../custom/eql/dist/assets/css/bundle.css | 62 +++++++++++++------ .../custom/eql/scss/pages/_ressource.scss | 21 ++++--- .../custom/eql/scss/pages/ressources.scss | 38 +++++++----- 3 files changed, 80 insertions(+), 41 deletions(-) diff --git a/web/themes/custom/eql/dist/assets/css/bundle.css b/web/themes/custom/eql/dist/assets/css/bundle.css index ee3f8cd..04c7ee3 100644 --- a/web/themes/custom/eql/dist/assets/css/bundle.css +++ b/web/themes/custom/eql/dist/assets/css/bundle.css @@ -2139,6 +2139,9 @@ svg.ext { display: none; } +.page-node-type-ressource .layout-container { + overflow: visible; +} .page-node-type-ressource .layout__region--top { padding-top: 4rem; /* Hide empty blocks */ @@ -2156,12 +2159,11 @@ svg.ext { .page-node-type-ressource .layout__region--top .block-region-top { display: grid; grid-template-columns: 1fr 2fr; /* 1/3 pour l'image, 2/3 pour le contenu */ - gap: 1rem; + gap: 0.5rem; } } .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-images { width: fit-content; - padding-right: 2rem; padding-left: 25%; } @media screen and (min-width: 1100px) { @@ -2265,7 +2267,7 @@ svg.ext { .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-ressource { color: rgb(0, 158, 227); text-transform: uppercase; - font-weight: 800; + font-weight: 900; } @media (max-width: 1099px) { .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-ressource { @@ -2273,8 +2275,9 @@ svg.ext { } } .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodetitle { - font-size: 2rem; + font-size: 3rem; font-weight: 600; + line-height: 1.2; } @media (max-width: 550px) { .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodetitle .field--name-title { @@ -2291,13 +2294,14 @@ svg.ext { .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-auteur-s- .field--name-field-auteur-s- { font-size: 1.5rem; font-weight: 800; + line-height: 0.8; } .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-auteur-s- .field--name-field-auteur-s- p { margin: 0; } .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-mots-clefs .field--name-field-mots-clefs { display: inline-flex; - margin-top: 2rem; + margin-top: 0.5rem; } .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-mots-clefs .field--name-field-mots-clefs .field__item { background: rgb(9, 57, 139); @@ -2341,7 +2345,7 @@ svg.ext { display: flex; justify-content: flex-end; position: sticky; - top: 7rem; + top: 13rem; } .page-node-type-ressource .layout__region--first .block-region-first .block-entity-fieldnodefield-textes { display: flex; @@ -2438,12 +2442,14 @@ svg.ext { .page-node-type-ressource .layout__region--third .block-region-third .field--name-field-fichiers .file--mime-application-pdf { height: inherit; margin: auto; + width: fit-content; } .page-node-type-ressource .layout__region--third .block-region-third .field--name-field-fichiers .file--mime-application-pdf ::before { - content: url("../images/pictos/noun_Download_file_307900.svg"); + content: url("../images/pictos/download.png"); min-width: 30px; height: auto; padding-right: 1rem; + margin-right: 1rem; } .page-node-type-ressource .layout__region--third .block-region-third .field--name-field-fichiers .file--mime-application-pdf a { hyphens: auto; @@ -5611,6 +5617,7 @@ svg.ext { width: 100%; position: relative; z-index: 0; + padding-bottom: 4rem; } .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer)::before { content: ""; @@ -5625,6 +5632,7 @@ svg.ext { z-index: 1; } .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) h3 { + margin-top: 3rem; text-transform: uppercase; } .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) h3 a { @@ -5670,44 +5678,58 @@ svg.ext { .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource svg.ext { display: none; } -.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-productions-du-programme-engages-pour-la-qualite-du-logement-de-demain .wrapper-ressource { +.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-de-ressource-Productions-du-programme-Engagés-pour-la-qualité-du-logement-de-demain .wrapper-ressource { display: grid; grid-template-columns: 1fr 1.5fr; grid-template-rows: repeat(5 1fr); } -.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-productions-du-programme-engages-pour-la-qualite-du-logement-de-demain .wrapper-ressource .field--name-field-type-de-ressource { +.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-de-ressource-Productions-du-programme-Engagés-pour-la-qualité-du-logement-de-demain .wrapper-ressource .field--name-field-type-de-ressource { order: 1; grid-row: 1; + margin-bottom: 1rem; } -.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-productions-du-programme-engages-pour-la-qualite-du-logement-de-demain .wrapper-ressource .field--name-field-images { +.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-de-ressource-Productions-du-programme-Engagés-pour-la-qualité-du-logement-de-demain .wrapper-ressource .field--name-field-type-de-media { order: 2; - grid-row: 2/span 5; + grid-row: 2; +} +.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-de-ressource-Productions-du-programme-Engagés-pour-la-qualité-du-logement-de-demain .wrapper-ressource .field--name-field-images { + order: 3; + grid-row: 3/span 5; height: auto; width: 90%; } -.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-productions-du-programme-engages-pour-la-qualite-du-logement-de-demain .wrapper-ressource .field--name-field-images img { +.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-de-ressource-Productions-du-programme-Engagés-pour-la-qualité-du-logement-de-demain .wrapper-ressource .field--name-field-images img { height: auto; width: 90%; border: 1px solid #a3a3a3; } -.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-productions-du-programme-engages-pour-la-qualite-du-logement-de-demain .wrapper-ressource .field--name-title { - grid-row: 2; -} -.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-productions-du-programme-engages-pour-la-qualite-du-logement-de-demain .wrapper-ressource .field--name-field-sous-titre { +.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-de-ressource-Productions-du-programme-Engagés-pour-la-qualité-du-logement-de-demain .wrapper-ressource .field--name-title { grid-row: 3; + margin-top: 0; } -.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-productions-du-programme-engages-pour-la-qualite-du-logement-de-demain .wrapper-ressource .field--name-field-auteur-s- { +.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-de-ressource-Productions-du-programme-Engagés-pour-la-qualité-du-logement-de-demain .wrapper-ressource .field--name-title a { + color: rgb(0, 158, 227); + font-size: 1.2rem; + font-style: normal; +} +.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-de-ressource-Productions-du-programme-Engagés-pour-la-qualité-du-logement-de-demain .wrapper-ressource .field--name-field-sous-titre { grid-row: 4; + color: rgb(0, 158, 227); + font-size: 0.8rem; + font-weight: 800; } -.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-productions-du-programme-engages-pour-la-qualite-du-logement-de-demain .wrapper-ressource .field--name-field-edition { +.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-de-ressource-Productions-du-programme-Engagés-pour-la-qualité-du-logement-de-demain .wrapper-ressource .field--name-field-auteur-s- { grid-row: 5; } -.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-productions-du-programme-engages-pour-la-qualite-du-logement-de-demain .wrapper-ressource .field--name-field-date-de-parution { +.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-de-ressource-Productions-du-programme-Engagés-pour-la-qualité-du-logement-de-demain .wrapper-ressource .field--name-field-edition { grid-row: 6; } -.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-productions-du-programme-engages-pour-la-qualite-du-logement-de-demain .wrapper-ressource .field--name-field-mots-clefs { +.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-de-ressource-Productions-du-programme-Engagés-pour-la-qualité-du-logement-de-demain .wrapper-ressource .field--name-field-date-de-parution { grid-row: 7; } +.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-de-ressource-Productions-du-programme-Engagés-pour-la-qualité-du-logement-de-demain .wrapper-ressource .field--name-field-mots-clefs { + grid-row: 8; +} @media (max-width: 479px) { .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource { margin-left: 0; diff --git a/web/themes/custom/eql/scss/pages/_ressource.scss b/web/themes/custom/eql/scss/pages/_ressource.scss index 6c22d4c..3d54613 100644 --- a/web/themes/custom/eql/scss/pages/_ressource.scss +++ b/web/themes/custom/eql/scss/pages/_ressource.scss @@ -1,5 +1,8 @@ .page-node-type-ressource{ + .layout-container{ + overflow: visible; + } // #block-contenudelapageprincipale{ .layout__region--top{ @@ -13,11 +16,11 @@ @media screen and (min-width:1100px) { display: grid; grid-template-columns: 1fr 2fr; /* 1/3 pour l'image, 2/3 pour le contenu */ - gap: 1rem; + gap: 0.5rem; } .block-entity-fieldnodefield-images{ width: fit-content; - padding-right: 2rem; + // padding-right: 2rem; padding-left: 25%; @media screen and (min-width:1100px) { @@ -86,14 +89,15 @@ .block-entity-fieldnodefield-type-de-ressource{ color: $blue-light; text-transform: uppercase; - font-weight: 800; + font-weight: 900; @media (max-width: 1099px) { margin-top: 2rem; } } .block-entity-fieldnodetitle{ - font-size: 2rem; + font-size: 3rem; font-weight: 600; + line-height: 1.2; .field--name-title{ @media (max-width: 550px) { font-size: 1.5rem; @@ -121,6 +125,7 @@ .field--name-field-auteur-s-{ font-size: 1.5rem; font-weight: 800; + line-height: 0.8; p{ margin: 0; } @@ -132,7 +137,7 @@ .block-entity-fieldnodefield-mots-clefs{ .field--name-field-mots-clefs{ display: inline-flex; - margin-top: 2rem; + margin-top: 0.5rem; .field__item{ background: $blue-dark; margin-right: 1rem; @@ -180,7 +185,7 @@ display: flex; justify-content: flex-end; position: sticky; - top: 7rem; + top: 13rem; .block-entity-fieldnodefield-textes{ display: flex; width: 50%; @@ -277,11 +282,13 @@ .file--mime-application-pdf{ height: inherit; margin: auto; + width: fit-content; ::before{ - content: url("../images/pictos/noun_Download_file_307900.svg"); + content: url("../images/pictos/download.png"); min-width:30px; height: auto; padding-right: 1rem; + margin-right: 1rem; } a{ hyphens: auto; diff --git a/web/themes/custom/eql/scss/pages/ressources.scss b/web/themes/custom/eql/scss/pages/ressources.scss index 3d0e7a6..7832eb7 100644 --- a/web/themes/custom/eql/scss/pages/ressources.scss +++ b/web/themes/custom/eql/scss/pages/ressources.scss @@ -271,17 +271,15 @@ width: 100%; .view-type-ressource-slide:not(footer){ width: 100%; - // padding-top: 1rem; position: relative; - // overflow: hidden; z-index: 0; + padding-bottom: 4rem; &::before { content: ""; position: absolute; left: -30%; height: 100%; width: 110vw; - // background-color: $background-actus; z-index: 0; } > * { @@ -289,6 +287,7 @@ z-index: 1; } h3{ + margin-top: 3rem; text-transform: uppercase; a{color: rgb(9, 57, 139) !important;} } @@ -339,7 +338,7 @@ svg.ext{ display: none; } - &.type-productions-du-programme-engages-pour-la-qualite-du-logement-de-demain{ + &.type-de-ressource-Productions-du-programme-Engagés-pour-la-qualité-du-logement-de-demain{ // background-color: $background-actus; .wrapper-ressource{ display: grid; @@ -348,13 +347,15 @@ .field--name-field-type-de-ressource{ order: 1; grid-row: 1; + margin-bottom: 1rem; } .field--name-field-type-de-media{ - + order: 2; + grid-row: 2; } .field--name-field-images{ - order: 2; - grid-row: 2 /span 5; + order: 3; + grid-row: 3 /span 5; height: auto; width: 90%; img{ @@ -364,23 +365,32 @@ } } .field--name-title{ - grid-row: 2; + grid-row: 3; + margin-top: 0; + a{ + color: $blue-light; + font-size: 1.2rem; + font-style: normal; + } } .field--name-field-sous-titre{ - grid-row: 3; + grid-row: 4; + color: $blue-light; + font-size: 0.8rem; + font-weight: 800; } .field--name-field-auteur-s-{ - grid-row: 4; - } - .field--name-field-edition{ grid-row: 5; } - .field--name-field-date-de-parution{ + .field--name-field-edition{ grid-row: 6; } - .field--name-field-mots-clefs{ + .field--name-field-date-de-parution{ grid-row: 7; } + .field--name-field-mots-clefs{ + grid-row: 8; + } } } &.type-de-ressource-Paroles-de-lauréats{