diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css index 8e15ef4..2fbd537 100644 --- a/web/themes/custom/eql/css-compiled/styles.css +++ b/web/themes/custom/eql/css-compiled/styles.css @@ -1,211 +1,6 @@ @charset "UTF-8"; /*eql*/ /*setup*/ -/* Slider */ -.slick-slider { - position: relative; - display: block; - box-sizing: border-box; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -ms-touch-action: pan-y; - touch-action: pan-y; - -webkit-tap-highlight-color: transparent; } - -.slick-list { - position: relative; - overflow: hidden; - display: block; - margin: 0; - padding: 0; } - .slick-list:focus { - outline: none; } - .slick-list.dragging { - cursor: pointer; - cursor: hand; } - -.slick-slider .slick-track, -.slick-slider .slick-list { - -webkit-transform: translate3d(0, 0, 0); - -moz-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - -o-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } - -.slick-track { - position: relative; - left: 0; - top: 0; - display: block; - margin-left: auto; - margin-right: auto; } - .slick-track:before, .slick-track:after { - content: ""; - display: table; } - .slick-track:after { - clear: both; } - .slick-loading .slick-track { - visibility: hidden; } - -.slick-slide { - float: left; - height: 100%; - min-height: 1px; - display: none; } - [dir="rtl"] .slick-slide { - float: right; } - .slick-slide img { - display: block; } - .slick-slide.slick-loading img { - display: none; } - .slick-slide.dragging img { - pointer-events: none; } - .slick-initialized .slick-slide { - display: block; } - .slick-loading .slick-slide { - visibility: hidden; } - .slick-vertical .slick-slide { - display: block; - height: auto; - border: 1px solid transparent; } - -.slick-arrow.slick-hidden { - display: none; } - -/* Slider */ -.slick-loading .slick-list { - background: #fff url("./ajax-loader.gif") center center no-repeat; } - -/* Icons */ -@font-face { - font-family: "slick"; - src: url("./fonts/slick.eot"); - src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg"); - font-weight: normal; - font-style: normal; } - -/* Arrows */ -.slick-prev, -.slick-next { - position: absolute; - display: block; - height: 20px; - width: 20px; - line-height: 0px; - font-size: 0px; - cursor: pointer; - background: transparent; - color: transparent; - top: 50%; - -webkit-transform: translate(0, -50%); - -ms-transform: translate(0, -50%); - transform: translate(0, -50%); - padding: 0; - border: none; - outline: none; } - .slick-prev:hover, .slick-prev:focus, - .slick-next:hover, - .slick-next:focus { - outline: none; - background: transparent; - color: transparent; } - .slick-prev:hover:before, .slick-prev:focus:before, - .slick-next:hover:before, - .slick-next:focus:before { - opacity: 1; } - .slick-prev.slick-disabled:before, - .slick-next.slick-disabled:before { - opacity: 0.25; } - .slick-prev:before, - .slick-next:before { - font-family: "slick"; - font-size: 20px; - line-height: 1; - color: white; - opacity: 0.75; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; } - -.slick-prev { - left: -25px; } - [dir="rtl"] .slick-prev { - left: auto; - right: -25px; } - .slick-prev:before { - content: "←"; } - [dir="rtl"] .slick-prev:before { - content: "→"; } - -.slick-next { - right: -25px; } - [dir="rtl"] .slick-next { - left: -25px; - right: auto; } - .slick-next:before { - content: "→"; } - [dir="rtl"] .slick-next:before { - content: "←"; } - -/* Dots */ -.slick-dotted.slick-slider { - margin-bottom: 30px; } - -.slick-dots { - position: absolute; - bottom: -25px; - list-style: none; - display: block; - text-align: center; - padding: 0; - margin: 0; - width: 100%; } - .slick-dots li { - position: relative; - display: inline-block; - height: 20px; - width: 20px; - margin: 0 5px; - padding: 0; - cursor: pointer; } - .slick-dots li button { - border: 0; - background: transparent; - display: block; - height: 20px; - width: 20px; - outline: none; - line-height: 0px; - font-size: 0px; - color: transparent; - padding: 5px; - cursor: pointer; } - .slick-dots li button:hover, .slick-dots li button:focus { - outline: none; } - .slick-dots li button:hover:before, .slick-dots li button:focus:before { - opacity: 1; } - .slick-dots li button:before { - position: absolute; - top: 0; - left: 0; - content: "•"; - width: 20px; - height: 20px; - font-family: "slick"; - font-size: 6px; - line-height: 20px; - text-align: center; - color: black; - opacity: 0.25; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; } - .slick-dots li.slick-active button:before { - color: black; - opacity: 0.75; } - /*global*/ @font-face { font-family: 'Font Awesome'; @@ -604,73 +399,149 @@ a { font-weight: 800; vertical-align: middle; } +/* Slider */ +.slick-slider { + padding-top: 6rem; + position: relative; + display: block; + box-sizing: border-box; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -ms-touch-action: pan-y; + touch-action: pan-y; + -webkit-tap-highlight-color: transparent; } + +.slick-list { + position: relative; + overflow: hidden; + display: block; + margin: 0; + padding: 0; } + .slick-list:focus { + outline: none; } + .slick-list.dragging { + cursor: pointer; + cursor: hand; } + +.slick-slider .slick-track, +.slick-slider .slick-list { + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + +.slick-track { + position: relative; + left: 0; + top: 0; + display: block; + margin-left: auto; + margin-right: auto; } + .slick-track:before, .slick-track:after { + content: ""; + display: table; } + .slick-track:after { + clear: both; } + .slick-loading .slick-track { + visibility: hidden; } + +.slick-slide { + float: left; + height: 100%; + min-height: 1px; + display: none; } + [dir="rtl"] .slick-slide { + float: right; } + .slick-slide img { + display: block; } + .slick-slide.slick-loading img { + display: none; } + .slick-slide.dragging img { + pointer-events: none; } + .slick-initialized .slick-slide { + display: block; } + .slick-loading .slick-slide { + visibility: hidden; } + .slick-vertical .slick-slide { + display: block; + height: auto; + border: 1px solid transparent; } + +.slick-arrow.slick-hidden { + display: none; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 { width: 100vw; border-bottom: 5px solid #009ee3; background: rgba(0, 158, 227, 0.2); } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content { - display: flex; - flex-basis: auto; } - @media (max-width: 479px) { - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content { - display: flex; - flex-direction: column; - width: 80%; } } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .views-row { + .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages { + padding-top: 5rem; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content { + display: flex; flex-basis: auto; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .views-row:nth-of-type(1) { - grid-column: 2; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite { - color: black; - line-height: 1.5rem; - padding: 0.5rem; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite div:first-child { - display: flex; - flex-direction: column; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-images { - order: 1; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-images .field__item img { - max-width: 95%; - max-height: 150px; - object-fit: cover; - width: 100%; - padding-bottom: 1rem; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-date { - order: 2; - display: flex; - flex-direction: row; - justify-content: flex-start; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-date:not(:last-child):after { - padding-right: 1rem; - content: "|"; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-date time { - font-size: 0.9rem; - font-weight: 800; - padding-right: 1rem; - width: fit-content; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-title { - order: 3; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-sous-titre { - order: 4; - margin-top: 0.3rem; - font-weight: 800; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field:not(.field--name-field-images) { - width: 100%; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite h2 { - margin: 0; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite a { - color: black; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .inline.links { - padding-top: none !important; - list-style: none; - width: fit-content; - align-self: flex-end; - padding-right: 1rem; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .inline.links a { - display: none; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-actu-type { - order: 5; - padding-top: 1rem; } + @media (max-width: 479px) { + .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content { + display: flex; + flex-direction: column; + width: 80%; } } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .views-row { + flex-basis: auto; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite { + color: black; + line-height: 1.5rem; + padding: 0.5rem; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite div:first-child { + display: flex; + flex-direction: column; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-images { + order: 1; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-images .field__item img { + max-width: 95%; + max-height: 150px; + object-fit: cover; + width: 100%; + padding-bottom: 1rem; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-date { + order: 2; + display: flex; + flex-direction: row; + justify-content: flex-start; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-date:not(:last-child):after { + padding-right: 1rem; + content: "|"; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-date time { + font-size: 0.9rem; + font-weight: 800; + padding-right: 1rem; + width: fit-content; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-title { + order: 3; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-sous-titre { + order: 4; + margin-top: 0.3rem; + font-weight: 800; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field:not(.field--name-field-images) { + width: 100%; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite h2 { + margin: 0; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite a { + color: black; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .inline.links { + padding-top: none !important; + list-style: none; + width: fit-content; + align-self: flex-end; + padding-right: 1rem; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .inline.links a { + display: none; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-actu-type { + order: 5; + padding-top: 1rem; } .path-frontpage .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2 { visibility: hidden; } @@ -3742,12 +3613,11 @@ a { margin: auto; } .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content { display: grid; - grid-template-columns: 1fr repeat(8, 2fr) 1fr; } + grid-template-columns: 1fr repeat(4, 1fr) 1fr; } .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-config-pages-block { - grid-column: 3 / span 5; } + grid-column: 1 / span 6; } .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-config-pages-block .config_pages--base-de-donnees--full { - grid-column: 3 / span 5; - margin: 2rem; } + grid-column: 1 / span 5; } .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-config-pages-block .config_pages--base-de-donnees--full .field--name-field-introduction { margin: auto; background: white; @@ -3757,13 +3627,12 @@ a { padding: 2rem; margin-top: 1rem; } } .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-block-content82917d0c-5004-4bfb-af66-ce334782d82d { - grid-column: 8 / span 9; + grid-column: 6 / span 6; grid-row: 1; margin-top: 4rem; background-color: #009ee3; height: fit-content; - width: 60%; - margin-left: 2rem; + width: 100%; grid-row: 2; } .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-block-content82917d0c-5004-4bfb-af66-ce334782d82d .display { display: block; } @@ -3789,7 +3658,7 @@ a { margin: auto; } } .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 { width: 100%; - grid-column: 3 / span 8; } + grid-column: 1 / span 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-filters { background-color: white; margin-top: 2rem; @@ -3804,17 +3673,19 @@ a { .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-filters .views-exposed-form-base-de-donnees-block-1 .form-item-field-type-de-ressource-target-id { width: fit-content; } .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-content { + width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; } .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-content .views-row { width: 25%; - flex: 0 0 25%; - border: 2px solid #009ee3; } + flex: 0 0 22%; + padding: 0.5rem; } .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-content .views-row .node-type-ressource { display: flex; flex-direction: column; - padding: 1rem; } + padding: 1rem; + border: 2px solid #009ee3; } .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-content .views-row .node-type-ressource .field--name-field-type-de-ressource { 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-content .views-row .node-type-ressource .field--name-field-type-de-ressource a { @@ -3825,8 +3696,9 @@ a { margin: 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-content .views-row .node-type-ressource .field--name-title h2 a { color: black; - font-size: 1.4rem; - font-weight: 600; } + font-size: 1rem; + font-weight: 900; + font-style: italic; } .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-content .views-row .node-type-ressource .field--name-field-auteur-s- { 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-content .views-row .node-type-ressource .field--name-field-auteur-s- p { @@ -4152,3 +4024,209 @@ a { #fotter-bottom .region-footer-bottom-middle .view-id-partenaires .view-content .node-type-partenaires_logo_footer_ { padding-right: 1rem; padding-bottom: 1rem; } + +/* Slider */ +.slick-slider { + padding-top: 6rem; + position: relative; + display: block; + box-sizing: border-box; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -ms-touch-action: pan-y; + touch-action: pan-y; + -webkit-tap-highlight-color: transparent; } + +.slick-list { + position: relative; + overflow: hidden; + display: block; + margin: 0; + padding: 0; } + .slick-list:focus { + outline: none; } + .slick-list.dragging { + cursor: pointer; + cursor: hand; } + +.slick-slider .slick-track, +.slick-slider .slick-list { + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + +.slick-track { + position: relative; + left: 0; + top: 0; + display: block; + margin-left: auto; + margin-right: auto; } + .slick-track:before, .slick-track:after { + content: ""; + display: table; } + .slick-track:after { + clear: both; } + .slick-loading .slick-track { + visibility: hidden; } + +.slick-slide { + float: left; + height: 100%; + min-height: 1px; + display: none; } + [dir="rtl"] .slick-slide { + float: right; } + .slick-slide img { + display: block; } + .slick-slide.slick-loading img { + display: none; } + .slick-slide.dragging img { + pointer-events: none; } + .slick-initialized .slick-slide { + display: block; } + .slick-loading .slick-slide { + visibility: hidden; } + .slick-vertical .slick-slide { + display: block; + height: auto; + border: 1px solid transparent; } + +.slick-arrow.slick-hidden { + display: none; } + +/* Slider */ +.slick-loading .slick-list { + background: #fff url("./ajax-loader.gif") center center no-repeat; } + +/* Icons */ +@font-face { + font-family: "slick"; + src: url("./fonts/slick.eot"); + src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg"); + font-weight: normal; + font-style: normal; } + +/* Arrows */ +.slick-prev, +.slick-next { + position: absolute; + display: block; + height: 20px; + width: 20px; + line-height: 0px; + font-size: 0px; + cursor: pointer; + background: transparent; + color: transparent; + top: 50%; + -webkit-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + transform: translate(0, -50%); + padding: 0; + border: none; + outline: none; } + .slick-prev:hover, .slick-prev:focus, + .slick-next:hover, + .slick-next:focus { + outline: none; + background: transparent; + color: transparent; } + .slick-prev:hover:before, .slick-prev:focus:before, + .slick-next:hover:before, + .slick-next:focus:before { + opacity: 1; } + .slick-prev.slick-disabled:before, + .slick-next.slick-disabled:before { + opacity: 0.25; } + .slick-prev:before, + .slick-next:before { + font-family: "slick"; + font-size: 20px; + line-height: 1; + color: white; + opacity: 0.75; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } + +.slick-prev { + left: -25px; } + [dir="rtl"] .slick-prev { + left: auto; + right: -25px; } + .slick-prev:before { + content: "←"; } + [dir="rtl"] .slick-prev:before { + content: "→"; } + +.slick-next { + right: -25px; } + [dir="rtl"] .slick-next { + left: -25px; + right: auto; } + .slick-next:before { + content: "→"; } + [dir="rtl"] .slick-next:before { + content: "←"; } + +/* Dots */ +.slick-dotted.slick-slider { + margin-bottom: 30px; } + +.slick-dots { + position: absolute; + bottom: -25px; + list-style: none; + display: block; + text-align: center; + padding: 0; + margin: 0; + width: 100%; } + .slick-dots li { + position: relative; + display: inline-block; + height: 20px; + width: 20px; + margin: 0 5px; + padding: 0; + cursor: pointer; } + .slick-dots li button { + border: 0; + background: transparent; + display: block; + height: 20px; + width: 20px; + outline: none; + line-height: 0px; + font-size: 0px; + color: transparent; + padding: 5px; + cursor: pointer; } + .slick-dots li button:hover, .slick-dots li button:focus { + outline: none; } + .slick-dots li button:hover:before, .slick-dots li button:focus:before { + opacity: 1; } + .slick-dots li button:before { + position: absolute; + top: 0; + left: 0; + content: "•"; + width: 20px; + height: 20px; + font-family: "slick"; + font-size: 6px; + line-height: 20px; + text-align: center; + color: black; + opacity: 0.25; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } + .slick-dots li.slick-active button:before { + color: black; + opacity: 0.75; } diff --git a/web/themes/custom/eql/eql.libraries.yml b/web/themes/custom/eql/eql.libraries.yml index a478b27..8b3ad01 100644 --- a/web/themes/custom/eql/eql.libraries.yml +++ b/web/themes/custom/eql/eql.libraries.yml @@ -5,8 +5,9 @@ global-css: # css-prefixed/styles.css: {} global-js: js: - scripts/main.js: {} scripts/slick.js: {} + scripts/main.js: {} + dependencies: - core/jquery diff --git a/web/themes/custom/eql/scripts/main.js b/web/themes/custom/eql/scripts/main.js index 5ffc1d0..742d26f 100644 --- a/web/themes/custom/eql/scripts/main.js +++ b/web/themes/custom/eql/scripts/main.js @@ -185,7 +185,6 @@ jQuery(function($) { (function($, window) { - // 'slick-carousel'; var mobile = false; $(function(){ @@ -201,23 +200,23 @@ jQuery(function($) { // $("#"+).fadeIn(); $(".node-type-actualite").slick({ - slidesToShow: 1, - slidesToScroll: 4, - centerMode: true, - centerPadding: '300px', - // appendDots: $(element), dots: true, - // appendArrows: $(element), + slidesToShow: 1, + slidesToScroll: 1, + centerMode: true, + centerPadding: '500px', + // appendDots: $(element), + // // appendArrows: $(element), arrows: true, // prevArrow: '', - // nextArrow: '', - responsive: [ - { - breakpoint: 800, - settings: { - centerPadding: '0', - } - }] + // // nextArrow: '', + // responsive: [ + // { + // breakpoint: 800, + // settings: { + // centerPadding: '0', + // } + // }] }); console.log(".node-type-actualite"); diff --git a/web/themes/custom/eql/scss/pages/_home.scss b/web/themes/custom/eql/scss/pages/_home.scss index e976c7c..85d7063 100644 --- a/web/themes/custom/eql/scss/pages/_home.scss +++ b/web/themes/custom/eql/scss/pages/_home.scss @@ -1,4 +1,5 @@ // home juin 2023 +@import "../partials/_slick-slider.scss"; .path-frontpage{ // bandeau actus @@ -9,6 +10,7 @@ // border-top: 5px solid $blue-light; background: $background-actus; .view-actus-blocks-pages{ + padding-top: 5rem; .view-content{ display: flex; flex-basis: auto; @@ -27,10 +29,12 @@ flex-basis: auto; } - .w3-button{ + // .w3-button{ - } - .views-row:nth-of-type(1) { grid-column: 2; } + // } + // .views-row:nth-of-type(1) { grid-column: 2; } + + .node-type-actualite{ color: $black; line-height: 1.5rem; diff --git a/web/themes/custom/eql/scss/pages/_ressources.scss b/web/themes/custom/eql/scss/pages/_ressources.scss index bab23f4..6f8e319 100644 --- a/web/themes/custom/eql/scss/pages/_ressources.scss +++ b/web/themes/custom/eql/scss/pages/_ressources.scss @@ -11,16 +11,16 @@ .layout__region--content{ .block-region-content{ display: grid; - grid-template-columns: 1fr repeat(8, 2fr) 1fr; + grid-template-columns: 1fr repeat(4, 1fr) 1fr; // texte présentation .block-config-pages-block{ - grid-column: 3 / span 5; + grid-column: 1 / span 6; .config_pages--base-de-donnees--full{ // .field--name-field-introduction{ - grid-column: 3 / span 5; - margin: 2rem; + grid-column: 1 / span 5; + // margin: 2rem; .field--name-field-introduction{ // width: 65%; margin: auto; @@ -52,13 +52,13 @@ //button proposer une ressource .block-block-content82917d0c-5004-4bfb-af66-ce334782d82d{ // visibility: hidden; - grid-column: 8 / span 9; + grid-column: 6 / span 6; grid-row: 1; margin-top: 4rem; background-color: $blue-light; height: fit-content; - width: 60%; - margin-left: 2rem; + width: 100%; + // margin-left: 2rem; grid-row: 2; .display{ display: block; @@ -96,7 +96,7 @@ // grille des ressources .block-views-blockbase-de-donnees-block-1{ width: 100%; - grid-column: 3 / span 8; + grid-column: 1 / span 6; .view-filters{ background-color: $white; margin-top: 2rem; @@ -118,13 +118,15 @@ } } .view-content{ + width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; + // justify-content: space-between; .views-row{ width: 25%; - flex: 0 0 25%; - border: 2px solid $blue-light; + flex: 0 0 22%; + padding: 0.5rem; // background-color: $white; // margin-bottom: 1rem; // &:hover{ @@ -134,8 +136,9 @@ display: flex; flex-direction: column; // border: 2px solid $blue-light; - padding: 1rem; - + padding: 1rem; + border: 2px solid $blue-light; + // &:hover{ // background-color: $blue-light; // .field--name-field-mots-clefs{ @@ -165,9 +168,10 @@ margin: 0; a{ color: $black; - font-size: 1.4rem; - font-weight: 600; - + font-size: 1rem; + // font-weight: 600; + font-weight: 900; + font-style: italic; } } diff --git a/web/themes/custom/eql/scss/global/_slick-slider.scss b/web/themes/custom/eql/scss/partials/_slick-slider.scss similarity index 93% rename from web/themes/custom/eql/scss/global/_slick-slider.scss rename to web/themes/custom/eql/scss/partials/_slick-slider.scss index 0fdf62f..1f22abf 100644 --- a/web/themes/custom/eql/scss/global/_slick-slider.scss +++ b/web/themes/custom/eql/scss/partials/_slick-slider.scss @@ -1,7 +1,8 @@ /* Slider */ .slick-slider { - background-color: blue; + padding-top: 6rem; + // background-color: blue; position: relative; display: block; box-sizing: border-box; @@ -42,6 +43,8 @@ .slick-track { position: relative; + // width: 600px !important ; + left: 0; top: 0; display: block; @@ -63,6 +66,8 @@ } } .slick-slide { + // width: 600px !important ; + float: left; height: 100%; min-height: 1px; diff --git a/web/themes/custom/eql/scss/partials/_slick-theme.scss b/web/themes/custom/eql/scss/partials/_slick-theme.scss new file mode 100644 index 0000000..7fe63e1 --- /dev/null +++ b/web/themes/custom/eql/scss/partials/_slick-theme.scss @@ -0,0 +1,194 @@ +@charset "UTF-8"; + +// Default Variables + +// Slick icon entity codes outputs the following +// "\2190" outputs ascii character "←" +// "\2192" outputs ascii character "→" +// "\2022" outputs ascii character "•" + +$slick-font-path: "./fonts/" !default; +$slick-font-family: "slick" !default; +$slick-loader-path: "./" !default; +$slick-arrow-color: white !default; +$slick-dot-color: black !default; +$slick-dot-color-active: $slick-dot-color !default; +$slick-prev-character: "\2190" !default; +$slick-next-character: "\2192" !default; +$slick-dot-character: "\2022" !default; +$slick-dot-size: 6px !default; +$slick-opacity-default: 0.75 !default; +$slick-opacity-on-hover: 1 !default; +$slick-opacity-not-active: 0.25 !default; + +@function slick-image-url($url) { + @if function-exists(image-url) { + @return image-url($url); + } + @else { + @return url($slick-loader-path + $url); + } +} + +@function slick-font-url($url) { + @if function-exists(font-url) { + @return font-url($url); + } + @else { + @return url($slick-font-path + $url); + } +} + +/* Slider */ + +.slick-list { + .slick-loading & { + background: #fff slick-image-url("ajax-loader.gif") center center no-repeat; + } +} + +/* Icons */ +@if $slick-font-family == "slick" { + @font-face { + font-family: "slick"; + src: slick-font-url("slick.eot"); + src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg"); + font-weight: normal; + font-style: normal; + } +} + +/* Arrows */ + +.slick-prev, +.slick-next { + position: absolute; + display: block; + height: 20px; + width: 20px; + line-height: 0px; + font-size: 0px; + cursor: pointer; + background: transparent; + color: transparent; + top: 50%; + -webkit-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + transform: translate(0, -50%); + padding: 0; + border: none; + outline: none; + &:hover, &:focus { + outline: none; + background: transparent; + color: transparent; + &:before { + opacity: $slick-opacity-on-hover; + } + } + &.slick-disabled:before { + opacity: $slick-opacity-not-active; + } + &:before { + font-family: $slick-font-family; + font-size: 20px; + line-height: 1; + color: $slick-arrow-color; + opacity: $slick-opacity-default; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } +} + +.slick-prev { + left: -25px; + [dir="rtl"] & { + left: auto; + right: -25px; + } + &:before { + content: $slick-prev-character; + [dir="rtl"] & { + content: $slick-next-character; + } + } +} + +.slick-next { + right: -25px; + [dir="rtl"] & { + left: -25px; + right: auto; + } + &:before { + content: $slick-next-character; + [dir="rtl"] & { + content: $slick-prev-character; + } + } +} + +/* Dots */ + +.slick-dotted.slick-slider { + margin-bottom: 30px; +} + +.slick-dots { + position: absolute; + bottom: -25px; + list-style: none; + display: block; + text-align: center; + padding: 0; + margin: 0; + width: 100%; + li { + position: relative; + display: inline-block; + height: 20px; + width: 20px; + margin: 0 5px; + padding: 0; + cursor: pointer; + button { + border: 0; + background: transparent; + display: block; + height: 20px; + width: 20px; + outline: none; + line-height: 0px; + font-size: 0px; + color: transparent; + padding: 5px; + cursor: pointer; + &:hover, &:focus { + outline: none; + &:before { + opacity: $slick-opacity-on-hover; + } + } + &:before { + position: absolute; + top: 0; + left: 0; + content: $slick-dot-character; + width: 20px; + height: 20px; + font-family: $slick-font-family; + font-size: $slick-dot-size; + line-height: 20px; + text-align: center; + color: $slick-dot-color; + opacity: $slick-opacity-not-active; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + } + &.slick-active button:before { + color: $slick-dot-color-active; + opacity: $slick-opacity-default; + } + } +} diff --git a/web/themes/custom/eql/scss/styles.scss b/web/themes/custom/eql/scss/styles.scss index 8412af6..174a3a6 100644 --- a/web/themes/custom/eql/scss/styles.scss +++ b/web/themes/custom/eql/scss/styles.scss @@ -1,8 +1,8 @@ /*eql*/ /*setup*/ -@import "../node_modules/slick-carousel/slick/slick.scss"; -@import "../node_modules/slick-carousel/slick/slick-theme.scss"; +// @import "../node_modules/slick-carousel/slick/slick.scss"; +// @import "../node_modules/slick-carousel/slick/slick-theme.scss"; /*global*/ @@ -14,7 +14,7 @@ // @import "global/_reset"; @import "global/_typography"; @import "global/_mediaqueries"; -// @import "global/_slick-slider"; + @@ -56,3 +56,5 @@ /*partials*/ @import "partials/_header"; @import "partials/_footer"; +@import "partials/_slick-slider.scss"; +@import "partials/_slick-theme.scss"; diff --git a/web/themes/custom/eql/templates/block--views-block--actus-blocks-pages-block-1.html.twig b/web/themes/custom/eql/templates/block--views-block--actus-blocks-pages-block-1.html.twig new file mode 100644 index 0000000..b3877ab --- /dev/null +++ b/web/themes/custom/eql/templates/block--views-block--actus-blocks-pages-block-1.html.twig @@ -0,0 +1,49 @@ +{# +/** + * @file + * Theme override 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() + */ +#} +{% + set classes = [ + 'block', + 'block-' ~ configuration.provider|clean_class, + 'block-' ~ plugin_id|clean_class, + ] +%} + + {{ title_prefix }} + {% if label %} + {# #} + {{ label }} + {% endif %} + {{ title_suffix }} + + + {% block content %} + {{ content }} + {% endblock %} + diff --git a/web/themes/custom/eql/templates/node--view--actus-blocks-pages--block-1.html.twig b/web/themes/custom/eql/templates/node--view--actus-blocks-pages--block-1.html.twig index 39d57d1..0b568b1 100644 --- a/web/themes/custom/eql/templates/node--view--actus-blocks-pages--block-1.html.twig +++ b/web/themes/custom/eql/templates/node--view--actus-blocks-pages--block-1.html.twig @@ -78,6 +78,8 @@ 'mySlides', ] %} +{# #} + diff --git a/web/themes/custom/eql/templates/views-view-actus-blocks-pages--block-1.html.twig b/web/themes/custom/eql/templates/views-view-actus-blocks-pages--block-1.html.twig new file mode 100644 index 0000000..ee5881b --- /dev/null +++ b/web/themes/custom/eql/templates/views-view-actus-blocks-pages--block-1.html.twig @@ -0,0 +1,97 @@ +{# +/** + * @file + * Theme override for a 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() + */ +#} +{% + set classes = [ + 'view', + 'view-' ~ id|clean_class, + 'view-id-' ~ id, + 'view-display-id-' ~ display_id, + dom_id ? 'js-view-dom-id-' ~ dom_id, + ] +%} + + {{ title_prefix }} + {% if title %} + {{ title }} + {% endif %} + {{ title_suffix }} + {% if header %} +
+ {{ header }} +
+ {% endif %} + {% if exposed %} +
+ {{ exposed }} +
+ {% endif %} + {% if attachment_before %} +
+ {{ attachment_before }} +
+ {% endif %} + + {% if rows %} + +
+ {{ rows }} +{# #} +
+ {% elseif empty %} +
+ {{ empty }} +
+ {% endif %} + + {% if pager %} + {{ pager }} + {% endif %} + {% if attachment_after %} +
+ {{ attachment_after }} +
+ {% endif %} + {% if more %} + {{ more }} + {% endif %} + {% if footer %} +
+ {{ footer }} +
+ {% endif %} + {% if feed_icons %} +
+ {{ feed_icons }} +
+ {% endif %} + diff --git a/web/themes/custom/eql/templates/views-view-unformatted.html.twig b/web/themes/custom/eql/templates/views-view-unformatted.html.twig index d988fdf..69a4355 100644 --- a/web/themes/custom/eql/templates/views-view-unformatted.html.twig +++ b/web/themes/custom/eql/templates/views-view-unformatted.html.twig @@ -31,4 +31,6 @@ {{- row.content -}} + {# #} + {% endfor %} diff --git a/web/themes/custom/eql/templates/views-view.html.twig b/web/themes/custom/eql/templates/views-view.html.twig index 5dd00eb..6c6b323 100644 --- a/web/themes/custom/eql/templates/views-view.html.twig +++ b/web/themes/custom/eql/templates/views-view.html.twig @@ -65,7 +65,7 @@
{{ rows }} - +
{% elseif empty %}