début du thème, footer et header en mobile

This commit is contained in:
Valentin 2023-12-06 17:06:45 +01:00
parent b258cc3181
commit a08922d8be
19 changed files with 644 additions and 12 deletions

View File

@ -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 */

View File

@ -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"}

View File

@ -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

View File

@ -23,7 +23,7 @@ function erabletheme_preprocess_page(&$variables) {
* Implements hook_preprocess_HOOK() for node.html.twig.
*/
function erabletheme_preprocess_node(&$variables) {
}
/**

View File

@ -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;

View 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;
}
}

View File

@ -0,0 +1,3 @@
.news_list:not(.slick-slider) {
background-color: red;
}

View File

@ -0,0 +1,3 @@
#block-erabletheme-contenudelapageprincipale {
margin-top: 7vh;
}

View File

@ -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%);
}

View File

@ -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;
}
}
}

View 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;
}
}
}
}
}

View 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;
}
}

View File

@ -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";

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View 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>