début du thème, footer et header en mobile
This commit is contained in:
		@@ -1,3 +1,4 @@
 | 
			
		||||
@charset "UTF-8";
 | 
			
		||||
/* GLOBAL */
 | 
			
		||||
/* Marianne */
 | 
			
		||||
@font-face {
 | 
			
		||||
@@ -32,10 +33,15 @@
 | 
			
		||||
  font-style: normal;
 | 
			
		||||
}
 | 
			
		||||
/* SIZES */
 | 
			
		||||
/* MIXINS */
 | 
			
		||||
a {
 | 
			
		||||
  text-decoration: none;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
#block-erabletheme-contenudelapageprincipale {
 | 
			
		||||
  margin-top: 7vh;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/* PARTIALS */
 | 
			
		||||
.layout-container {
 | 
			
		||||
  width: 100vw;
 | 
			
		||||
@@ -207,4 +213,214 @@ a {
 | 
			
		||||
  display: none;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.slick-container {
 | 
			
		||||
  background: linear-gradient(to bottom, #fcf9ee 80%, white 100%);
 | 
			
		||||
  width: 100vw;
 | 
			
		||||
  border-bottom: solid 2px #038788;
 | 
			
		||||
}
 | 
			
		||||
.slick-container div.views-row article {
 | 
			
		||||
  width: 100%;
 | 
			
		||||
}
 | 
			
		||||
.slick-container div.views-row article div:first-of-type {
 | 
			
		||||
  width: 100%;
 | 
			
		||||
  max-height: 40vh;
 | 
			
		||||
  overflow-y: hidden;
 | 
			
		||||
}
 | 
			
		||||
.slick-container div.views-row article div:first-of-type > div {
 | 
			
		||||
  width: 100%;
 | 
			
		||||
}
 | 
			
		||||
.slick-container div.views-row article div:first-of-type > div > a {
 | 
			
		||||
  max-width: 100%;
 | 
			
		||||
}
 | 
			
		||||
.slick-container div.views-row article div:first-of-type > div > a img {
 | 
			
		||||
  width: 100%;
 | 
			
		||||
  height: auto;
 | 
			
		||||
}
 | 
			
		||||
.slick-container div.views-row article .preview_date, .slick-container div.views-row article .preview_type, .slick-container div.views-row article .preview_sous_titre {
 | 
			
		||||
  font-family: "Marianne", sans-serif;
 | 
			
		||||
  font-size: 0.9rem;
 | 
			
		||||
  padding: 2px 3vw;
 | 
			
		||||
}
 | 
			
		||||
.slick-container div.views-row article .preview_date {
 | 
			
		||||
  margin-top: 1.3rem;
 | 
			
		||||
  font-weight: 800;
 | 
			
		||||
}
 | 
			
		||||
.slick-container div.views-row article h2 {
 | 
			
		||||
  font-family: "Barlow", sans-serif;
 | 
			
		||||
  font-size: 2.3rem;
 | 
			
		||||
  padding: 0 3vw;
 | 
			
		||||
  margin-top: 1rem;
 | 
			
		||||
}
 | 
			
		||||
.slick-container div.views-row article h2 a {
 | 
			
		||||
  color: #038788;
 | 
			
		||||
}
 | 
			
		||||
.slick-container #carousel_dots {
 | 
			
		||||
  position: relative;
 | 
			
		||||
  margin-top: -15px;
 | 
			
		||||
}
 | 
			
		||||
.slick-container #carousel_dots ul {
 | 
			
		||||
  position: relative;
 | 
			
		||||
  bottom: 0;
 | 
			
		||||
}
 | 
			
		||||
.slick-container #carousel_dots ul li.slick-active button::before {
 | 
			
		||||
  color: #00ff80;
 | 
			
		||||
}
 | 
			
		||||
.slick-container #carousel_dots ul li button::before {
 | 
			
		||||
  color: rgb(1, 1, 1);
 | 
			
		||||
}
 | 
			
		||||
.slick-container footer {
 | 
			
		||||
  text-align: center;
 | 
			
		||||
  margin-top: 4rem;
 | 
			
		||||
  margin-bottom: 4rem;
 | 
			
		||||
}
 | 
			
		||||
.slick-container footer a {
 | 
			
		||||
  text-align: center;
 | 
			
		||||
  color: black;
 | 
			
		||||
  font-family: "Marianne", sans-serif;
 | 
			
		||||
  font-weight: 800;
 | 
			
		||||
  font-size: 0.9rem;
 | 
			
		||||
  background-color: white;
 | 
			
		||||
  border: solid 2px #00ff80;
 | 
			
		||||
  padding: 9px 18px;
 | 
			
		||||
}
 | 
			
		||||
.slick-container footer a ::after {
 | 
			
		||||
  content: "→";
 | 
			
		||||
  padding-left: 10px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.actu_full {
 | 
			
		||||
  background: linear-gradient(to bottom, #fcf9ee 80%, white 100%);
 | 
			
		||||
  font-family: "Marianne", sans-serif;
 | 
			
		||||
  padding-top: 3vh;
 | 
			
		||||
  width: 100vw;
 | 
			
		||||
}
 | 
			
		||||
.actu_full div {
 | 
			
		||||
  font-family: "Marianne", sans-serif;
 | 
			
		||||
  font-size: 1.1rem;
 | 
			
		||||
  line-height: 1.2;
 | 
			
		||||
}
 | 
			
		||||
.actu_full .retour_actus {
 | 
			
		||||
  font-size: 0.8rem;
 | 
			
		||||
  font-weight: 800;
 | 
			
		||||
  color: #038788;
 | 
			
		||||
  padding-left: 3vw;
 | 
			
		||||
}
 | 
			
		||||
.actu_full .article_meta {
 | 
			
		||||
  padding-left: 3vw;
 | 
			
		||||
  margin: 20px 0;
 | 
			
		||||
}
 | 
			
		||||
.actu_full .article_meta div {
 | 
			
		||||
  font-size: 0.8rem;
 | 
			
		||||
  margin-bottom: 5px;
 | 
			
		||||
}
 | 
			
		||||
.actu_full h2 {
 | 
			
		||||
  font-family: "Barlow", sans-serif;
 | 
			
		||||
  font-size: 2.3rem;
 | 
			
		||||
  padding: 0 3vw;
 | 
			
		||||
  margin-top: 1rem;
 | 
			
		||||
}
 | 
			
		||||
.actu_full h2 a {
 | 
			
		||||
  color: #038788;
 | 
			
		||||
}
 | 
			
		||||
.actu_full h2 + div {
 | 
			
		||||
  padding: 3vw;
 | 
			
		||||
}
 | 
			
		||||
.actu_full h2 + div .visually-hidden {
 | 
			
		||||
  width: 0% !important;
 | 
			
		||||
}
 | 
			
		||||
.actu_full h2 + div div:first-of-type {
 | 
			
		||||
  margin-top: -10px;
 | 
			
		||||
  margin-bottom: 30px;
 | 
			
		||||
}
 | 
			
		||||
.actu_full h2 + div div:nth-of-type(2) > div {
 | 
			
		||||
  width: 100%;
 | 
			
		||||
  margin-bottom: 40px;
 | 
			
		||||
}
 | 
			
		||||
.actu_full h2 + div div:nth-of-type(2) > div img {
 | 
			
		||||
  width: 100%;
 | 
			
		||||
  height: auto;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/* PAGES */
 | 
			
		||||
.home_introduction {
 | 
			
		||||
  border-bottom: solid 2px #038788;
 | 
			
		||||
  width: 100%;
 | 
			
		||||
  padding: 2rem 3vw;
 | 
			
		||||
}
 | 
			
		||||
.home_introduction h2 {
 | 
			
		||||
  display: none;
 | 
			
		||||
}
 | 
			
		||||
.home_introduction article > div p {
 | 
			
		||||
  font-family: "Marianne", sans-serif;
 | 
			
		||||
  font-size: 1.1rem;
 | 
			
		||||
  line-height: 1.2;
 | 
			
		||||
}
 | 
			
		||||
.home_introduction div.more-link {
 | 
			
		||||
  margin-top: 3rem;
 | 
			
		||||
  margin-bottom: 1.5rem;
 | 
			
		||||
  display: flex;
 | 
			
		||||
  justify-content: center;
 | 
			
		||||
  align-items: center;
 | 
			
		||||
}
 | 
			
		||||
.home_introduction div.more-link a {
 | 
			
		||||
  text-align: center;
 | 
			
		||||
  color: black;
 | 
			
		||||
  font-family: "Marianne", sans-serif;
 | 
			
		||||
  font-weight: 800;
 | 
			
		||||
  font-size: 0.9rem;
 | 
			
		||||
  background-color: white;
 | 
			
		||||
  border: solid 2px #00ff80;
 | 
			
		||||
  padding: 9px 18px;
 | 
			
		||||
}
 | 
			
		||||
.home_introduction div.more-link a ::after {
 | 
			
		||||
  content: "→";
 | 
			
		||||
  padding-left: 10px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.home_consultation {
 | 
			
		||||
  background: linear-gradient(to bottom, #fcf9ee 80%, white 100%);
 | 
			
		||||
  width: 100%;
 | 
			
		||||
  padding: 2rem 0;
 | 
			
		||||
}
 | 
			
		||||
.home_consultation h2 {
 | 
			
		||||
  font-family: "Barlow", sans-serif;
 | 
			
		||||
  font-size: 2.3rem;
 | 
			
		||||
  padding: 0 3vw;
 | 
			
		||||
  margin-top: 1rem;
 | 
			
		||||
  margin-bottom: 1.2rem;
 | 
			
		||||
}
 | 
			
		||||
.home_consultation h2 a {
 | 
			
		||||
  color: #038788;
 | 
			
		||||
}
 | 
			
		||||
.home_consultation article > div p {
 | 
			
		||||
  padding: 0 3vw;
 | 
			
		||||
  font-family: "Marianne", sans-serif;
 | 
			
		||||
  font-size: 1.1rem;
 | 
			
		||||
  line-height: 1.2;
 | 
			
		||||
}
 | 
			
		||||
.home_consultation div.more-link {
 | 
			
		||||
  margin-top: 3rem;
 | 
			
		||||
  display: flex;
 | 
			
		||||
  justify-content: center;
 | 
			
		||||
  align-items: center;
 | 
			
		||||
}
 | 
			
		||||
.home_consultation div.more-link a {
 | 
			
		||||
  text-align: center;
 | 
			
		||||
  color: black;
 | 
			
		||||
  font-family: "Marianne", sans-serif;
 | 
			
		||||
  font-weight: 800;
 | 
			
		||||
  font-size: 0.9rem;
 | 
			
		||||
  background-color: white;
 | 
			
		||||
  border: solid 2px #00ff80;
 | 
			
		||||
  padding: 9px 18px;
 | 
			
		||||
}
 | 
			
		||||
.home_consultation div.more-link a ::after {
 | 
			
		||||
  content: "→";
 | 
			
		||||
  padding-left: 10px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.news_list:not(.slick-slider) {
 | 
			
		||||
  background-color: red;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/*# sourceMappingURL=styles.css.map */
 | 
			
		||||
 
 | 
			
		||||
@@ -1 +1 @@
 | 
			
		||||
{"version":3,"sourceRoot":"","sources":["../scss/styles.scss","../scss/global/_fonts.scss","../scss/global/variables/_typography.scss","../scss/global/_typography.scss","../scss/partials/_header.scss","../scss/global/variables/_layout.scss","../scss/global/variables/_colors.scss","../scss/partials/_footer.scss"],"names":[],"mappings":"AAAA;ACAA;AAEA;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;AAEA;EACI;EACA;EAEA;EACA;;ACzCJ;ACAA;EACI;;;AHMJ;AINA;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;EACA;;AACA;EACI,cCxBb;EDyBa;EACA;;AAIZ;EACI;;AACA;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AAIZ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;EACA,kBErDP;EFsDO;EACA;EACA;;AACA;EACI,WFzDT;EE0DS;EACA;EACA;;AAGR;EACI;;AAEJ;EACI;EACA;EACA,kBEnEP;EFoEO;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA,OEtFf;;;ACHb;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;EACA;;AAGR;EACI;;AACA;EACI;EACA;;AAIZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AACA;EACI;EACA;;AACA;EACI,ODxCP;ECyCO,WL3CL;EK4CK;EACA;EACA;;AAKZ;EACI;;AACA;EACI;EACA;;AAEI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBDjEjB;;ACmEa;EACI;EACA","file":"styles.css"}
 | 
			
		||||
{"version":3,"sourceRoot":"","sources":["../scss/styles.scss","../scss/global/_fonts.scss","../scss/global/variables/_typography.scss","../scss/global/_typography.scss","../scss/global/_global.scss","../scss/partials/_header.scss","../scss/global/variables/_layout.scss","../scss/global/variables/_colors.scss","../scss/partials/_footer.scss","../scss/partials/_carousel.scss","../scss/partials/_articles.scss","../scss/_home.scss","../scss/_newspage.scss"],"names":[],"mappings":";AAAA;ACAA;AAEA;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;AAEA;EACI;EACA;EAEA;EACA;;ACzCJ;AAMA;ACNA;EACI;;;ACDJ;EACI;;;AJOJ;AKPA;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;EACA;;AACA;EACI,cCxBb;EDyBa;EACA;;AAIZ;EACI;;AACA;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AAIZ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;EACA,kBErDP;EFsDO;EACA;EACA;;AACA;EACI,WHzDT;EG0DS;EACA;EACA;;AAGR;EACI;;AAEJ;EACI;EACA;EACA,kBEnEP;EFoEO;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA,OEtFf;;;ACHb;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;EACA;;AAGR;EACI;;AACA;EACI;EACA;;AAIZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AACA;EACI;EACA;;AACA;EACI,ODxCP;ECyCO,WN3CL;EM4CK;EACA;EACA;;AAKZ;EACI;;AACA;EACI;EACA;;AAEI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBDjEjB;;ACmEa;EACI;EACA;;;ACtExB;EFMI;EEJA;EACA;;AACA;EACI;;AACA;EACI;EACA;EACA;;AACA;EACI;;AACA;EACI;;AACA;EACI;EACA;;AAMhB;EACI;EACA,WPtBE;EOuBF;;AAEJ;EACI;EACA;;AAEJ;EPtBJ;EACA,WANS;EAOT;EACA;;AACA;EACI,OKbD;;AEkCH;EACI;EACA;;AACA;EACI;EACA;;AACA;EACI,OF1CH;;AE4CD;EACI;;AAIZ;EAEI;EACA;EACA;;AP5BJ;EACI;EACA;EACA;EACA;EACA,WA5BM;EA6BN;EACA;EACA;;AACA;EACI;EACA;;;AQpCZ;EHMI;EGJA;EACA;EACA;;AACA;ERcA;EACA,WAjBa;EAkBb;;AQbA;EACI,WRRO;EQSP;EACA,OHVD;EGWC,cJZG;;AIcP;EACI,cJfG;EIgBH;;AACA;EACI,WRjBG;EQkBH;;AAGR;ERbA;EACA,WANS;EAOT;EACA;;AACA;EACI,OKbD;;AGwBH;EACI,SJ1BG;;AI2BH;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AACA;EACI;EACA;;;AV1BpB;AWdA;EACI;EACA;EACA;;AACA;EACI;;AAGA;ETWJ;EACA,WAjBa;EAkBb;;ASTA;EAEI;EACA;EACA;EACA;EACA;;ATOJ;EACI;EACA;EACA;EACA;EACA,WA5BM;EA6BN;EACA;EACA;;AACA;EACI;EACA;;;ASdZ;EJhBI;EIkBA;EACA;;AACA;ETjBA;EACA,WANS;EAOT;EACA;ESgBI;;ATfJ;EACI,OKbD;;AI8BC;EACE;ETbN;EACA,WAjBa;EAkBb;;ASeA;EAEI;EACA;EACA;EACA;;AThBJ;EACI;EACA;EACA;EACA;EACA,WA5BM;EA6BN;EACA;EACA;;AACA;EACI;EACA;;;AUpCZ;EACI","file":"styles.css"}
 | 
			
		||||
@@ -7,6 +7,8 @@ global:
 | 
			
		||||
    theme:
 | 
			
		||||
      css/reset.css: {}
 | 
			
		||||
      css/styles.css: {}
 | 
			
		||||
      librairies/slick-1.8.1/slick/slick.css: {}
 | 
			
		||||
      librairies/slick-1.8.1/slick/slick-theme.css: {}
 | 
			
		||||
 | 
			
		||||
  dependencies:
 | 
			
		||||
    - core/jquery
 | 
			
		||||
@@ -23,7 +23,7 @@ function erabletheme_preprocess_page(&$variables) {
 | 
			
		||||
 * Implements hook_preprocess_HOOK() for node.html.twig.
 | 
			
		||||
 */
 | 
			
		||||
function erabletheme_preprocess_node(&$variables) {
 | 
			
		||||
 | 
			
		||||
  
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/**
 | 
			
		||||
 
 | 
			
		||||
@@ -9,6 +9,15 @@
 | 
			
		||||
  Drupal.behaviors.erabletheme = {
 | 
			
		||||
    attach: function (context, settings) {
 | 
			
		||||
 | 
			
		||||
      (function($, window) {
 | 
			
		||||
        let slickEl = $('.slick-container').children().first().children().first().children().first().children().first();
 | 
			
		||||
        $(slickEl).slick({
 | 
			
		||||
          arrows: false,
 | 
			
		||||
          dots: true,
 | 
			
		||||
          appendDots: $('#carousel_dots')
 | 
			
		||||
        });
 | 
			
		||||
      })(jQuery, window);
 | 
			
		||||
 | 
			
		||||
      const hamburgerBtn = document.getElementById("hamburger");
 | 
			
		||||
      const menu = hamburgerBtn.nextElementSibling;
 | 
			
		||||
    
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										44
									
								
								web/themes/erabletheme/scss/_home.scss
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										44
									
								
								web/themes/erabletheme/scss/_home.scss
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,44 @@
 | 
			
		||||
.home_introduction {
 | 
			
		||||
    border-bottom: solid 2px $teal;
 | 
			
		||||
    width: 100%;
 | 
			
		||||
    padding: 2rem $x_margin;
 | 
			
		||||
    h2 {
 | 
			
		||||
        display: none;
 | 
			
		||||
    }
 | 
			
		||||
    article > div {
 | 
			
		||||
        p {
 | 
			
		||||
        @include main_text_content();
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
    div.more-link {
 | 
			
		||||
        @include fluo_button();
 | 
			
		||||
        margin-top: 3rem;
 | 
			
		||||
        margin-bottom: 1.5rem;
 | 
			
		||||
        display: flex;
 | 
			
		||||
        justify-content: center;
 | 
			
		||||
        align-items: center;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.home_consultation {
 | 
			
		||||
    @include beige_gradient();
 | 
			
		||||
    width: 100%;
 | 
			
		||||
    padding: 2rem 0;
 | 
			
		||||
    h2 {
 | 
			
		||||
        @include main_title();
 | 
			
		||||
        margin-bottom: 1.2rem;
 | 
			
		||||
    }
 | 
			
		||||
    article > div {
 | 
			
		||||
        p {
 | 
			
		||||
          padding: 0 $x_margin;
 | 
			
		||||
          @include main_text_content();
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
    div.more-link {
 | 
			
		||||
        @include fluo_button();
 | 
			
		||||
        margin-top: 3rem;
 | 
			
		||||
        display: flex;
 | 
			
		||||
        justify-content: center;
 | 
			
		||||
        align-items: center;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										3
									
								
								web/themes/erabletheme/scss/_newspage.scss
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										3
									
								
								web/themes/erabletheme/scss/_newspage.scss
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,3 @@
 | 
			
		||||
.news_list:not(.slick-slider) {
 | 
			
		||||
    background-color: red;
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										3
									
								
								web/themes/erabletheme/scss/global/_global.scss
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										3
									
								
								web/themes/erabletheme/scss/global/_global.scss
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,3 @@
 | 
			
		||||
#block-erabletheme-contenudelapageprincipale {
 | 
			
		||||
    margin-top: 7vh;
 | 
			
		||||
}
 | 
			
		||||
@@ -1,4 +1,8 @@
 | 
			
		||||
$fluo_green: #00ff80;
 | 
			
		||||
$teal: #038788;
 | 
			
		||||
$beige: #fcf9ee;
 | 
			
		||||
$dark_green: #314e41;
 | 
			
		||||
$dark_green: #314e41;
 | 
			
		||||
 | 
			
		||||
@mixin beige_gradient() {
 | 
			
		||||
    background: linear-gradient(to bottom, $beige 80%, white 100%);
 | 
			
		||||
}
 | 
			
		||||
@@ -1,2 +1,40 @@
 | 
			
		||||
/* SIZES */
 | 
			
		||||
$sm_font_size: 0.8rem;
 | 
			
		||||
$sm_font_size: 0.8rem;
 | 
			
		||||
$m_font_size: 0.9rem;
 | 
			
		||||
$main_font_size: 1.1rem;
 | 
			
		||||
$title_size: 2.3rem;
 | 
			
		||||
 | 
			
		||||
/* MIXINS */
 | 
			
		||||
 | 
			
		||||
@mixin main_title() {
 | 
			
		||||
    font-family: "Barlow", sans-serif;
 | 
			
		||||
    font-size: $title_size;
 | 
			
		||||
    padding: 0 $x_margin;
 | 
			
		||||
    margin-top: 1rem;
 | 
			
		||||
    a {
 | 
			
		||||
        color: $teal;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@mixin main_text_content() {
 | 
			
		||||
    font-family: "Marianne", sans-serif;
 | 
			
		||||
    font-size: $main_font_size;
 | 
			
		||||
    line-height: 1.2;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@mixin fluo_button() {
 | 
			
		||||
    a {
 | 
			
		||||
        text-align: center;
 | 
			
		||||
        color: black;
 | 
			
		||||
        font-family: "Marianne", sans-serif;
 | 
			
		||||
        font-weight: 800;
 | 
			
		||||
        font-size: $m_font_size;
 | 
			
		||||
        background-color: white;
 | 
			
		||||
        border: solid 2px $fluo_green;
 | 
			
		||||
        padding: 9px 18px;
 | 
			
		||||
        ::after {
 | 
			
		||||
            content: "→";
 | 
			
		||||
            padding-left: 10px;
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										46
									
								
								web/themes/erabletheme/scss/partials/_articles.scss
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										46
									
								
								web/themes/erabletheme/scss/partials/_articles.scss
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,46 @@
 | 
			
		||||
.actu_full {
 | 
			
		||||
    @include beige_gradient();
 | 
			
		||||
    font-family: "Marianne", sans-serif;
 | 
			
		||||
    padding-top: 3vh;
 | 
			
		||||
    width: 100vw;
 | 
			
		||||
    div {
 | 
			
		||||
        @include main_text_content();
 | 
			
		||||
    }
 | 
			
		||||
    .retour_actus {
 | 
			
		||||
        font-size: $sm_font_size;
 | 
			
		||||
        font-weight: 800;
 | 
			
		||||
        color: $teal;
 | 
			
		||||
        padding-left: $x_margin;
 | 
			
		||||
    }
 | 
			
		||||
    .article_meta {
 | 
			
		||||
        padding-left: $x_margin;
 | 
			
		||||
        margin: 20px 0;
 | 
			
		||||
        div {
 | 
			
		||||
            font-size: $sm_font_size;
 | 
			
		||||
            margin-bottom: 5px;
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
    h2 {
 | 
			
		||||
        @include main_title();
 | 
			
		||||
    }
 | 
			
		||||
    h2 + div {
 | 
			
		||||
        padding: $x_margin;
 | 
			
		||||
        .visually-hidden {
 | 
			
		||||
            width: 0% !important;
 | 
			
		||||
        }
 | 
			
		||||
        div:first-of-type {
 | 
			
		||||
            margin-top: -10px;
 | 
			
		||||
            margin-bottom: 30px;
 | 
			
		||||
        }
 | 
			
		||||
        div:nth-of-type(2) {
 | 
			
		||||
            > div {
 | 
			
		||||
                width: 100%;
 | 
			
		||||
                margin-bottom: 40px;
 | 
			
		||||
                img {
 | 
			
		||||
                    width: 100%;
 | 
			
		||||
                    height: auto;
 | 
			
		||||
                }
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										56
									
								
								web/themes/erabletheme/scss/partials/_carousel.scss
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										56
									
								
								web/themes/erabletheme/scss/partials/_carousel.scss
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,56 @@
 | 
			
		||||
.slick-container {
 | 
			
		||||
    @include beige_gradient();
 | 
			
		||||
    width: 100vw;
 | 
			
		||||
    border-bottom: solid 2px $teal;
 | 
			
		||||
    div.views-row article {
 | 
			
		||||
        width: 100%;
 | 
			
		||||
        div:first-of-type { // container du lien image
 | 
			
		||||
            width: 100%;
 | 
			
		||||
            max-height: 40vh;
 | 
			
		||||
            overflow-y: hidden;
 | 
			
		||||
            > div {
 | 
			
		||||
                width: 100%;
 | 
			
		||||
                > a {
 | 
			
		||||
                    max-width: 100%;
 | 
			
		||||
                    img {
 | 
			
		||||
                        width: 100%;
 | 
			
		||||
                        height: auto;
 | 
			
		||||
                    }
 | 
			
		||||
                }
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
        
 | 
			
		||||
        .preview_date, .preview_type, .preview_sous_titre {
 | 
			
		||||
            font-family: "Marianne", sans-serif;
 | 
			
		||||
            font-size: $m_font_size;
 | 
			
		||||
            padding: 2px $x_margin;
 | 
			
		||||
        }
 | 
			
		||||
        .preview_date {
 | 
			
		||||
            margin-top: 1.3rem;
 | 
			
		||||
            font-weight: 800;
 | 
			
		||||
        }
 | 
			
		||||
        h2 {
 | 
			
		||||
            @include main_title();
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
    #carousel_dots {
 | 
			
		||||
        position: relative;
 | 
			
		||||
        margin-top: -15px;
 | 
			
		||||
        ul {
 | 
			
		||||
            position: relative;
 | 
			
		||||
            bottom: 0;
 | 
			
		||||
            li.slick-active button::before{
 | 
			
		||||
                color: $fluo_green;
 | 
			
		||||
            }
 | 
			
		||||
            li button::before{
 | 
			
		||||
                color: rgba(0.9, 0.9, 0.9, 1);
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
    footer {
 | 
			
		||||
        @include fluo_button();
 | 
			
		||||
        text-align: center;
 | 
			
		||||
        margin-top: 4rem;
 | 
			
		||||
        margin-bottom: 4rem;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
@@ -4,7 +4,15 @@
 | 
			
		||||
@import "global/variables/_layout";
 | 
			
		||||
@import "global/variables/_typography";
 | 
			
		||||
@import "global/_typography";
 | 
			
		||||
@import "global/_global";
 | 
			
		||||
 | 
			
		||||
/* PARTIALS */
 | 
			
		||||
@import "partials/_header";
 | 
			
		||||
@import "partials/_footer";
 | 
			
		||||
@import "partials/_footer";
 | 
			
		||||
@import "partials/_carousel";
 | 
			
		||||
@import "partials/_articles";
 | 
			
		||||
 | 
			
		||||
/* PAGES */
 | 
			
		||||
 | 
			
		||||
@import "_home.scss";
 | 
			
		||||
@import "_newspage.scss";
 | 
			
		||||
@@ -0,0 +1,40 @@
 | 
			
		||||
{#
 | 
			
		||||
/**
 | 
			
		||||
 * @file
 | 
			
		||||
 * Default theme implementation to display a block.
 | 
			
		||||
 *
 | 
			
		||||
 * Available variables:
 | 
			
		||||
 * - plugin_id: The ID of the block implementation.
 | 
			
		||||
 * - label: The configured label of the block if visible.
 | 
			
		||||
 * - configuration: A list of the block's configuration values.
 | 
			
		||||
 *   - label: The configured label for the block.
 | 
			
		||||
 *   - label_display: The display settings for the label.
 | 
			
		||||
 *   - provider: The module or other provider that provided this block plugin.
 | 
			
		||||
 *   - Block plugin specific settings will also be stored here.
 | 
			
		||||
 * - in_preview: Whether the plugin is being rendered in preview mode.
 | 
			
		||||
 * - content: The content of this block.
 | 
			
		||||
 * - attributes: array of HTML attributes populated by modules, intended to
 | 
			
		||||
 *   be added to the main container tag of this template.
 | 
			
		||||
 *   - id: A valid HTML ID and guaranteed unique.
 | 
			
		||||
 * - title_attributes: Same as attributes, except applied to the main title
 | 
			
		||||
 *   tag that appears in the template.
 | 
			
		||||
 * - title_prefix: Additional output populated by modules, intended to be
 | 
			
		||||
 *   displayed in front of the main title tag that appears in the template.
 | 
			
		||||
 * - title_suffix: Additional output populated by modules, intended to be
 | 
			
		||||
 *   displayed after the main title tag that appears in the template.
 | 
			
		||||
 *
 | 
			
		||||
 * @see template_preprocess_block()
 | 
			
		||||
 *
 | 
			
		||||
 * @ingroup themeable
 | 
			
		||||
 */
 | 
			
		||||
#}
 | 
			
		||||
<div{{ attributes.addClass('slick-container') }}>
 | 
			
		||||
  {{ title_prefix }}
 | 
			
		||||
  {% if label %}
 | 
			
		||||
    <h2{{ title_attributes }}>{{ label }}</h2>
 | 
			
		||||
  {% endif %}
 | 
			
		||||
  {{ title_suffix }}
 | 
			
		||||
  {% block content %}
 | 
			
		||||
    {{ content }}
 | 
			
		||||
  {% endblock %}
 | 
			
		||||
</div>
 | 
			
		||||
@@ -0,0 +1,37 @@
 | 
			
		||||
{#
 | 
			
		||||
/**
 | 
			
		||||
 * @file
 | 
			
		||||
 * Default theme implementation to display a block.
 | 
			
		||||
 *
 | 
			
		||||
 * Available variables:
 | 
			
		||||
 * - plugin_id: The ID of the block implementation.
 | 
			
		||||
 * - label: The configured label of the block if visible.
 | 
			
		||||
 * - configuration: A list of the block's configuration values.
 | 
			
		||||
 *   - label: The configured label for the block.
 | 
			
		||||
 *   - label_display: The display settings for the label.
 | 
			
		||||
 *   - provider: The module or other provider that provided this block plugin.
 | 
			
		||||
 *   - Block plugin specific settings will also be stored here.
 | 
			
		||||
 * - in_preview: Whether the plugin is being rendered in preview mode.
 | 
			
		||||
 * - content: The content of this block.
 | 
			
		||||
 * - attributes: array of HTML attributes populated by modules, intended to
 | 
			
		||||
 *   be added to the main container tag of this template.
 | 
			
		||||
 *   - id: A valid HTML ID and guaranteed unique.
 | 
			
		||||
 * - title_attributes: Same as attributes, except applied to the main title
 | 
			
		||||
 *   tag that appears in the template.
 | 
			
		||||
 * - title_prefix: Additional output populated by modules, intended to be
 | 
			
		||||
 *   displayed in front of the main title tag that appears in the template.
 | 
			
		||||
 * - title_suffix: Additional output populated by modules, intended to be
 | 
			
		||||
 *   displayed after the main title tag that appears in the template.
 | 
			
		||||
 *
 | 
			
		||||
 * @see template_preprocess_block()
 | 
			
		||||
 *
 | 
			
		||||
 * @ingroup themeable
 | 
			
		||||
 */
 | 
			
		||||
#}
 | 
			
		||||
<div{{ attributes }}>
 | 
			
		||||
    <div class="home_introduction">
 | 
			
		||||
        {% block content %}
 | 
			
		||||
            {{ content }}
 | 
			
		||||
        {% endblock %}
 | 
			
		||||
    </div>
 | 
			
		||||
</div>
 | 
			
		||||
@@ -0,0 +1,37 @@
 | 
			
		||||
{#
 | 
			
		||||
/**
 | 
			
		||||
 * @file
 | 
			
		||||
 * Default theme implementation to display a block.
 | 
			
		||||
 *
 | 
			
		||||
 * Available variables:
 | 
			
		||||
 * - plugin_id: The ID of the block implementation.
 | 
			
		||||
 * - label: The configured label of the block if visible.
 | 
			
		||||
 * - configuration: A list of the block's configuration values.
 | 
			
		||||
 *   - label: The configured label for the block.
 | 
			
		||||
 *   - label_display: The display settings for the label.
 | 
			
		||||
 *   - provider: The module or other provider that provided this block plugin.
 | 
			
		||||
 *   - Block plugin specific settings will also be stored here.
 | 
			
		||||
 * - in_preview: Whether the plugin is being rendered in preview mode.
 | 
			
		||||
 * - content: The content of this block.
 | 
			
		||||
 * - attributes: array of HTML attributes populated by modules, intended to
 | 
			
		||||
 *   be added to the main container tag of this template.
 | 
			
		||||
 *   - id: A valid HTML ID and guaranteed unique.
 | 
			
		||||
 * - title_attributes: Same as attributes, except applied to the main title
 | 
			
		||||
 *   tag that appears in the template.
 | 
			
		||||
 * - title_prefix: Additional output populated by modules, intended to be
 | 
			
		||||
 *   displayed in front of the main title tag that appears in the template.
 | 
			
		||||
 * - title_suffix: Additional output populated by modules, intended to be
 | 
			
		||||
 *   displayed after the main title tag that appears in the template.
 | 
			
		||||
 *
 | 
			
		||||
 * @see template_preprocess_block()
 | 
			
		||||
 *
 | 
			
		||||
 * @ingroup themeable
 | 
			
		||||
 */
 | 
			
		||||
#}
 | 
			
		||||
<div{{ attributes }}>
 | 
			
		||||
  <div class="home_consultation">
 | 
			
		||||
    {% block content %}
 | 
			
		||||
      {{ content }}
 | 
			
		||||
    {% endblock %}
 | 
			
		||||
  </div>
 | 
			
		||||
</div>
 | 
			
		||||
@@ -68,10 +68,17 @@
 | 
			
		||||
 * @ingroup themeable
 | 
			
		||||
 */
 | 
			
		||||
#}
 | 
			
		||||
<article{{ attributes }}>
 | 
			
		||||
<article{{ attributes }} class="actu_full">
 | 
			
		||||
 | 
			
		||||
  <div class="retour_actus">
 | 
			
		||||
    ← Retour aux actualités
 | 
			
		||||
  </div>
 | 
			
		||||
 | 
			
		||||
  <div class="article_meta">
 | 
			
		||||
    {{ content.field_date }}
 | 
			
		||||
    {{ content.field_type_d_actualite }}
 | 
			
		||||
  </div>
 | 
			
		||||
 | 
			
		||||
  {{ content.field_date }}
 | 
			
		||||
  {{ content.field_type_d_actualite }}
 | 
			
		||||
 | 
			
		||||
  <h2{{ title_attributes }}>
 | 
			
		||||
    <a href="{{ url }}" rel="bookmark">{{ label }}</a>
 | 
			
		||||
 
 | 
			
		||||
@@ -70,11 +70,16 @@
 | 
			
		||||
#}
 | 
			
		||||
<article{{ attributes }}>
 | 
			
		||||
    {{ content.field_image }}
 | 
			
		||||
    {{ content.field_date }}
 | 
			
		||||
    {{ content.field_type_d_actualite }}
 | 
			
		||||
    <div class="preview_date">
 | 
			
		||||
      {{ content.field_date }}
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="preview_type">
 | 
			
		||||
      {{ content.field_type_d_actualite }}
 | 
			
		||||
    </div>
 | 
			
		||||
    <h2{{ title_attributes }}>
 | 
			
		||||
      <a href="{{ url }}" rel="bookmark">{{ label }}</a>
 | 
			
		||||
    </h2>
 | 
			
		||||
 | 
			
		||||
    {{ content.field_sous_titre }}
 | 
			
		||||
    <div class="preview_sous_titre">
 | 
			
		||||
      {{ content.field_sous_titre }}
 | 
			
		||||
    </div>
 | 
			
		||||
</article>
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										77
									
								
								web/themes/erabletheme/templates/views-view.html.twig
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										77
									
								
								web/themes/erabletheme/templates/views-view.html.twig
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,77 @@
 | 
			
		||||
{#
 | 
			
		||||
/**
 | 
			
		||||
 * @file
 | 
			
		||||
 * Default theme implementation for main view template.
 | 
			
		||||
 *
 | 
			
		||||
 * Available variables:
 | 
			
		||||
 * - attributes: Remaining HTML attributes for the element.
 | 
			
		||||
 * - css_name: A CSS-safe version of the view name.
 | 
			
		||||
 * - css_class: The user-specified classes names, if any.
 | 
			
		||||
 * - header: The optional header.
 | 
			
		||||
 * - footer: The optional footer.
 | 
			
		||||
 * - rows: The results of the view query, if any.
 | 
			
		||||
 * - empty: The content to display if there are no rows.
 | 
			
		||||
 * - pager: The optional pager next/prev links to display.
 | 
			
		||||
 * - exposed: Exposed widget form/info to display.
 | 
			
		||||
 * - feed_icons: Optional feed icons to display.
 | 
			
		||||
 * - more: An optional link to the next page of results.
 | 
			
		||||
 * - title: Title of the view, only used when displaying in the admin preview.
 | 
			
		||||
 * - title_prefix: Additional output populated by modules, intended to be
 | 
			
		||||
 *   displayed in front of the view title.
 | 
			
		||||
 * - title_suffix: Additional output populated by modules, intended to be
 | 
			
		||||
 *   displayed after the view title.
 | 
			
		||||
 * - attachment_before: An optional attachment view to be displayed before the
 | 
			
		||||
 *   view content.
 | 
			
		||||
 * - attachment_after: An optional attachment view to be displayed after the
 | 
			
		||||
 *   view content.
 | 
			
		||||
 * - dom_id: Unique id for every view being printed to give unique class for
 | 
			
		||||
 *   JavaScript.
 | 
			
		||||
 *
 | 
			
		||||
 * @see template_preprocess_views_view()
 | 
			
		||||
 *
 | 
			
		||||
 * @ingroup themeable
 | 
			
		||||
 */
 | 
			
		||||
#}
 | 
			
		||||
{%
 | 
			
		||||
  set classes = [
 | 
			
		||||
    dom_id ? 'js-view-dom-id-' ~ dom_id,
 | 
			
		||||
  ]
 | 
			
		||||
%}
 | 
			
		||||
<div{{ attributes.addClass(classes) }}>
 | 
			
		||||
 <div>
 | 
			
		||||
    {{ title_prefix }}
 | 
			
		||||
    {{ title }}
 | 
			
		||||
    {{ title_suffix }}
 | 
			
		||||
 | 
			
		||||
    {% if header %}
 | 
			
		||||
      <header>
 | 
			
		||||
        {{ header }}
 | 
			
		||||
      </header>
 | 
			
		||||
    {% endif %}
 | 
			
		||||
 | 
			
		||||
    {{ exposed }}
 | 
			
		||||
    {{ attachment_before }}
 | 
			
		||||
 | 
			
		||||
    {% if rows -%}
 | 
			
		||||
      <div class="news_list">
 | 
			
		||||
        {{ rows }}
 | 
			
		||||
      </div>
 | 
			
		||||
    {% elseif empty -%}
 | 
			
		||||
      {{ empty }}
 | 
			
		||||
    {% endif %}
 | 
			
		||||
    {{ pager }}
 | 
			
		||||
 | 
			
		||||
    {{ attachment_after }}
 | 
			
		||||
    {{ more }}
 | 
			
		||||
  </div>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
  {% if footer %}
 | 
			
		||||
    <div id="carousel_dots"></div>
 | 
			
		||||
    <footer class="fluo_links">
 | 
			
		||||
      {{ footer }}
 | 
			
		||||
    </footer>
 | 
			
		||||
  {% endif %}
 | 
			
		||||
 
 | 
			
		||||
  {{ feed_icons }}
 | 
			
		||||
</div>
 | 
			
		||||
		Reference in New Issue
	
	Block a user