bachir
/
drupal-erable
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

redesign blocks présentation et slider actus sur l'intro

This commit is contained in:
Valentin 2024-10-31 20:08:58 +01:00
parent 42ed7763d0
commit c56dadee02
15 changed files with 433 additions and 301 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
config/sync/page_manager.page_variant.home-panels_variant-0.yml
View File

@ -44,18 +44,6 @@ variant_settings:
region: content region: content
weight: -1 weight: -1
uuid: 42e5f5be-e990-4ced-854c-3f431dbfdcc0 uuid: 42e5f5be-e990-4ced-854c-3f431dbfdcc0
0e39f25a-d433-49bd-84d4-3e6c11c16c47:
id: 'views_block:home_blocks-block_2'
label: ''
label_display: '0'
provider: views
context_mapping: { }
views_label: ''
items_per_page: none
exposed: { }
region: content
weight: 1
uuid: 0e39f25a-d433-49bd-84d4-3e6c11c16c47
41595e31-d8d6-4940-a1e5-8687c04af5a5: 41595e31-d8d6-4940-a1e5-8687c04af5a5:
id: sitesmap_block id: sitesmap_block
label: 'Sites map Block' label: 'Sites map Block'

312
web/themes/erabletheme/css/styles.css
View File

@ -32,6 +32,12 @@
font-weight: 300; font-weight: 300;
font-style: normal; font-style: normal;
} }
@font-face {
font-family: "Barlow Condensed";
src: url("../fonts/Barlow/BarlowCondensed-Regular.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
/* BREAKPOINTS */ /* BREAKPOINTS */
.layout-container { .layout-container {
display: flex; display: flex;
@ -262,11 +268,6 @@ body.toolbar-fixed header[role=banner] {
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
} }
@media screen and (min-width: 1080px) {
.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul:not(.social-media-links--platforms) {
padding-top: 3rem;
}
}
.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul:not(.social-media-links--platforms) > li { .layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul:not(.social-media-links--platforms) > li {
width: 100%; width: 100%;
display: flex; display: flex;
@ -350,6 +351,7 @@ body.toolbar-fixed header[role=banner] {
position: relative; position: relative;
} }
.layout-container #block-erabletheme-navigationprincipale { .layout-container #block-erabletheme-navigationprincipale {
background: linear-gradient(to bottom, white, transparent);
width: 100vw; width: 100vw;
display: none; display: none;
position: absolute; position: absolute;
@ -395,7 +397,7 @@ body.toolbar-fixed header[role=banner] {
background-color: #00ff80; background-color: #00ff80;
} }
.layout-container #block-erabletheme-leprogramme { .layout-container #block-erabletheme-leprogramme {
position: absolute; position: fixed;
background-color: white; background-color: white;
max-height: 0vh; max-height: 0vh;
overflow: hidden; overflow: hidden;
@ -416,6 +418,9 @@ body.toolbar-fixed header[role=banner] {
.layout-container #block-erabletheme-leprogramme ul li a { .layout-container #block-erabletheme-leprogramme ul li a {
color: black; color: black;
} }
.layout-container #block-erabletheme-leprogramme ul li a:hover, .layout-container #block-erabletheme-leprogramme ul li a.is-active {
font-weight: 800;
}
.layout-container > footer { .layout-container > footer {
width: 100vw; width: 100vw;
@ -538,72 +543,115 @@ body.toolbar-fixed header[role=banner] {
} }
.slick-container { .slick-container {
background: linear-gradient(to bottom, #fcf9ee 80%, white 100%); width: 100%;
width: 100vw; margin-bottom: 5rem;
border-bottom: solid 2px #038788;
} }
.slick-container div.views-row article { @media screen and (min-width: 760px) {
.slick-container {
width: 200vw;
transform: translateX(-50vw);
}
}
.slick-container div.views-row {
padding: 0 3vw;
}
@media screen and (min-width: 760px) {
.slick-container div.views-row {
padding: 0 6vw;
}
}
.slick-container div.views-row > article {
width: 100%; width: 100%;
} }
.slick-container div.views-row article > div:first-of-type { .slick-container div.views-row > article > div:first-of-type {
width: 100%;
height: 30vh !important;
overflow-y: hidden; overflow-y: hidden;
padding: 0 !important; padding: 0 !important;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.slick-container div.views-row article > div:first-of-type > div { .slick-container div.views-row > article > div:first-of-type > div {
width: 100%; width: 100%;
} }
.slick-container div.views-row article > div:first-of-type > div > a { .slick-container div.views-row > article > div:first-of-type > div > a {
max-width: 100%; max-width: 100%;
} }
.slick-container div.views-row article > div:first-of-type > div > a img { .slick-container div.views-row > article > div:first-of-type > div > a img {
width: 100%; width: 100%;
height: auto; height: auto;
} }
@media (min-width: 1080px) {
.slick-container div.views-row article > div:first-of-type {
height: 50vh !important;
}
}
@media (min-width: 760px) { @media (min-width: 760px) {
.slick-container div.views-row article .preview_meta { .slick-container div.views-row > article .preview_meta {
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
.slick-container div.views-row article h2, .slick-container div.views-row article .preview_sous_titre { .slick-container div.views-row > article h2, .slick-container div.views-row > article .preview_sous_titre {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }
} }
.slick-container .slick-arrow { .slick-container .slick-arrow {
display: none !important; width: 1.5rem;
height: 1.5rem;
border-radius: 1.5rem;
background-color: #038788 !important;
transition: background-color 0.3s ease;
top: unset !important;
bottom: calc(-25px - 4rem);
}
@media (min-width: 760px) {
.slick-container .slick-arrow {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
border-radius: 1.5rem; bottom: calc(-25px - 6rem);
border: solid 1px #038788;
top: unset;
bottom: 5%;
background-color: rgba(255, 255, 255, 0.4) !important;
transition: background-color 0.3s ease;
}
@media (min-width: 1080px) {
.slick-container .slick-arrow {
transform: translateY(-5rem);
} }
} }
.slick-container .slick-arrow:hover { .slick-container .slick-arrow:hover {
background-color: rgba(255, 255, 255, 0.8) !important; background-color: white !important;
}
.slick-container .slick-arrow:hover::before {
color: #038788;
} }
.slick-container .slick-arrow::before { .slick-container .slick-arrow::before {
color: #038788; opacity: 1 !important;
color: white;
font-weight: bold;
font-family: "Marianne", sans-serif; font-family: "Marianne", sans-serif;
display: block; display: block;
padding-bottom: 3px; font-size: 0.8rem !important;
}
@media (min-width: 760px) {
.slick-container .slick-arrow::before {
font-size: 1.2rem !important;
}
}
.slick-container .slick-prev {
left: 20vw;
}
@media (min-width: 1080px) {
.slick-container .slick-prev {
left: 85vw;
}
}
.slick-container .slick-next {
right: 20vw;
}
@media (min-width: 1080px) {
.slick-container .slick-next {
right: 85vw;
}
}
.slick-container > div > div > div:first-of-type {
z-index: 2;
position: relative;
margin-bottom: 4rem;
}
@media (min-width: 760px) {
.slick-container > div > div > div:first-of-type {
margin-bottom: 6rem;
}
} }
.slick-container #carousel_dots { .slick-container #carousel_dots {
z-index: 1;
position: relative; position: relative;
margin-top: -15px; margin-top: -15px;
} }
@ -612,16 +660,11 @@ body.toolbar-fixed header[role=banner] {
bottom: 0; bottom: 0;
} }
.slick-container #carousel_dots ul li.slick-active button::before { .slick-container #carousel_dots ul li.slick-active button::before {
color: #00ff80; color: #038788;
} }
.slick-container #carousel_dots ul li button::before { .slick-container #carousel_dots ul li button::before {
color: rgb(0.9, 0.9, 0.9); color: rgb(0.9, 0.9, 0.9);
} }
@media (min-width: 1080px) {
.slick-container #carousel_dots {
margin-top: 4vh;
}
}
.slick-container footer { .slick-container footer {
text-align: center; text-align: center;
margin-top: 4rem; margin-top: 4rem;
@ -644,20 +687,6 @@ body.toolbar-fixed header[role=banner] {
.slick-container footer a:hover { .slick-container footer a:hover {
background-color: #00ff80; background-color: #00ff80;
} }
@media (min-width: 760px) {
.slick-container {
padding: 0 12.5vw;
}
.slick-container .slick-prev, .slick-container .slick-next {
display: block !important;
}
.slick-container .slick-prev {
left: -5rem;
}
.slick-container .slick-next {
right: -5rem;
}
}
.actu_full div { .actu_full div {
font-family: "Marianne", sans-serif; font-family: "Marianne", sans-serif;
@ -696,7 +725,7 @@ body.toolbar-fixed header[role=banner] {
margin-top: -1.5rem; margin-top: -1.5rem;
} }
.actu_full h2 + div .sous_titre > div > div { .actu_full h2 + div .sous_titre > div > div {
font-size: 1.3rem; font-size: 1.2rem;
margin-bottom: 30px; margin-bottom: 30px;
} }
.actu_full h2 + div > div > div { .actu_full h2 + div > div > div {
@ -712,11 +741,16 @@ body.toolbar-fixed header[role=banner] {
} }
.actu_full h3, .actu_full h4, .actu_full h5, .actu_full h6 { .actu_full h3, .actu_full h4, .actu_full h5, .actu_full h6 {
font-family: "Marianne", sans-serif; font-family: "Marianne", sans-serif;
font-size: 1.3rem; font-size: 0.9rem;
color: #038788; color: #038788;
font-weight: 800; font-weight: 800;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@media (min-width: 760px) {
.actu_full h3, .actu_full h4, .actu_full h5, .actu_full h6 {
font-size: 1.2rem;
}
}
.actu_full .liens_fixed > div > div:nth-of-type(2), .actu_full .file_fixed > div > div > div { .actu_full .liens_fixed > div > div:nth-of-type(2), .actu_full .file_fixed > div > div > div {
padding: 0 1.5vw; padding: 0 1.5vw;
text-align: right; text-align: right;
@ -761,59 +795,71 @@ body.toolbar-fixed header[role=banner] {
display: none; display: none;
} }
.views-row article > div:first-of-type { .views-row article.actu-teaser {
background-color: white;
padding: 2rem;
box-sizing: border-box;
}
.views-row article.actu-teaser > div:first-of-type {
width: 100%; width: 100%;
height: 30vh; aspect-ratio: 16/9;
overflow: hidden; overflow: hidden;
padding-left: 3vw; padding-left: 3vw;
padding-right: 3vw; padding-right: 3vw;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.views-row article > div:first-of-type a img { .views-row article.actu-teaser > div:first-of-type a img {
height: auto; height: auto;
width: 100%; width: 100%;
} }
@media (min-width: 760px) { .views-row article.actu-teaser > div:first-of-type a .legende {
.views-row article > div:first-of-type { display: none !important;
height: 20vh;
} }
} .views-row article.actu-teaser .preview_meta {
.views-row article .preview_meta {
font-family: "Marianne", sans-serif; font-family: "Marianne", sans-serif;
font-size: 0.9rem; font-size: 0.8rem;
width: auto; width: auto;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
color: #038788; color: #038788;
border-top: solid 1px #038788;
margin: 0 3vw; margin: 0 3vw;
margin-top: 1.3rem; margin-top: 1.3rem;
padding-top: 0.7rem; padding-top: 0.7rem;
} }
.views-row article .preview_meta > div:first-of-type { @media (min-width: 760px) {
font-weight: 800; .views-row article.actu-teaser .preview_meta {
font-size: 0.9rem;
} }
.views-row article .preview_sous_titre { }
.views-row article.actu-teaser .preview_sous_titre {
font-family: "Marianne", sans-serif; font-family: "Marianne", sans-serif;
font-size: 1.3rem; font-size: 0.9rem;
padding: 5px 3vw; padding: 5px 3vw;
} }
@media (min-width: 760px) { @media (min-width: 760px) {
.views-row article .preview_sous_titre { .views-row article.actu-teaser .preview_sous_titre {
font-size: 1.2rem;
padding-top: 0; padding-top: 0;
} }
} }
.views-row article h2 { .views-row article.actu-teaser h2 {
font-family: "Barlow", sans-serif; font-family: "Barlow Condensed", sans-serif;
font-size: 2.3rem; font-size: 1.2rem;
padding: 0 3vw; padding: 0 3vw;
margin-top: 1rem; margin-top: 1rem;
color: #038788; color: #038788;
text-transform: uppercase;
margin-bottom: 0.5rem;
} }
.views-row article h2 a { .views-row article.actu-teaser h2 a {
color: #038788; color: #038788;
} }
@media (min-width: 760px) {
.views-row article.actu-teaser h2 {
font-size: 2.3rem;
}
}
main.main-login, main.main-user, main.main-register, main.main-contact, main.main-ask, main.main-add-offre { main.main-login, main.main-user, main.main-register, main.main-contact, main.main-ask, main.main-add-offre {
min-height: 50vh; min-height: 50vh;
@ -904,49 +950,49 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
/* PAGES */ /* PAGES */
.home_introduction { .home_introduction {
background-color: rgb(27, 197, 112); background-color: white;
position: relative;
border-bottom: solid 2px #038788;
width: 100%; width: 100%;
padding: 4rem 0; box-sizing: border-box;
padding: 4rem 1rem;
} }
.home_introduction h2 { .home_introduction h2 {
display: none; display: none;
} }
.home_introduction > div {
z-index: 1;
position: relative;
}
.home_introduction > .logo { .home_introduction > .logo {
text-align: center; display: flex;
justify-content: center;
align-items: center;
width: 100%; width: 100%;
margin-bottom: 3rem; margin-bottom: 2rem;
} }
.home_introduction > .logo img { .home_introduction > .logo img {
width: 35vw; width: 50%;
height: auto;
} }
@media (min-width: 760px) { @media (min-width: 760px) {
.home_introduction > .logo img { .home_introduction > .logo img {
width: 25vw; width: 100%;
} }
} }
@media (min-width: 1080px) { @media (min-width: 760px) {
.home_introduction > .logo img { .home_introduction > .logo {
width: 18vw; width: 170%;
margin: 0 3rem;
} }
} }
.home_introduction article > div { .home_introduction article > div {
height: unset !important; height: unset !important;
min-height: 100%;
} }
.home_introduction article > div p { .home_introduction article > div p {
font-family: "Marianne", sans-serif; font-family: "Marianne", sans-serif;
font-size: 1rem; font-size: 1rem;
line-height: 1.4; line-height: 1.4;
width: 100%;
} }
@media (min-width: 1080px) { @media (min-width: 760px) {
.home_introduction article > div p { .home_introduction article > div p {
margin-left: 12.5vw; padding-right: 3rem;
max-width: 50vw;
} }
} }
@media (min-width: 760px) { @media (min-width: 760px) {
@ -978,16 +1024,23 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
.home_introduction div.more-link a:hover { .home_introduction div.more-link a:hover {
background-color: #00ff80; background-color: #00ff80;
} }
@media (min-width: 1080px) { @media (min-width: 760px) {
.home_introduction div.more-link { .home_introduction div.more-link {
display: flex; position: absolute;
justify-content: flex-end; left: 0;
right: 0;
} }
} }
@media (min-width: 760px) { @media (min-width: 760px) {
.home_introduction { .home_introduction {
padding-left: 12.5vw; padding: 8rem 1rem;
padding-right: 12.5vw; padding-top: 4rem;
margin: 6rem 0;
margin-left: 20vw;
margin-right: 20vw;
width: calc(100% - 40vw);
display: flex;
justify-content: space-around;
} }
} }
@ -998,16 +1051,22 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
padding: 4rem 0; padding: 4rem 0;
} }
.home_consultation h2 { .home_consultation h2 {
font-family: "Barlow", sans-serif; font-family: "Barlow Condensed", sans-serif;
font-size: 2.3rem; font-size: 1.2rem;
padding: 0 3vw; padding: 0 3vw;
margin-top: 1rem; margin-top: 1rem;
color: #038788; color: #038788;
text-transform: uppercase;
margin-bottom: 1.2rem; margin-bottom: 1.2rem;
} }
.home_consultation h2 a { .home_consultation h2 a {
color: #038788; color: #038788;
} }
@media (min-width: 760px) {
.home_consultation h2 {
font-size: 2.3rem;
}
}
@media (min-width: 760px) { @media (min-width: 760px) {
.home_consultation h2 { .home_consultation h2 {
padding-left: 0 !important; padding-left: 0 !important;
@ -1093,11 +1152,12 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
position: relative; position: relative;
} }
.fullpage > h2 { .fullpage > h2 {
font-family: "Barlow", sans-serif; font-family: "Barlow Condensed", sans-serif;
font-size: 2.3rem; font-size: 1.2rem;
padding: 0 3vw; padding: 0 3vw;
margin-top: 1rem; margin-top: 1rem;
color: #038788; color: #038788;
text-transform: uppercase;
margin-top: 5vh; margin-top: 5vh;
margin-bottom: 7vh; margin-bottom: 7vh;
background-color: #fcf9ee; background-color: #fcf9ee;
@ -1109,6 +1169,11 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
.fullpage > h2 a { .fullpage > h2 a {
color: #038788; color: #038788;
} }
@media (min-width: 760px) {
.fullpage > h2 {
font-size: 2.3rem;
}
}
@media (min-width: 760px) { @media (min-width: 760px) {
.fullpage > h2 { .fullpage > h2 {
background-color: unset; background-color: unset;
@ -1120,11 +1185,12 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
color: #314e41; color: #314e41;
} }
.fullpage .fullpage_content > h2 { .fullpage .fullpage_content > h2 {
font-family: "Barlow", sans-serif; font-family: "Barlow Condensed", sans-serif;
font-size: 2.3rem; font-size: 1.2rem;
padding: 0 3vw; padding: 0 3vw;
margin-top: 1rem; margin-top: 1rem;
color: #038788; color: #038788;
text-transform: uppercase;
margin-top: 5vh; margin-top: 5vh;
margin-bottom: 1rem; margin-bottom: 1rem;
background-color: #fcf9ee; background-color: #fcf9ee;
@ -1136,6 +1202,11 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
.fullpage .fullpage_content > h2 a { .fullpage .fullpage_content > h2 a {
color: #038788; color: #038788;
} }
@media (min-width: 760px) {
.fullpage .fullpage_content > h2 {
font-size: 2.3rem;
}
}
@media (min-width: 760px) { @media (min-width: 760px) {
.fullpage .fullpage_content > h2 { .fullpage .fullpage_content > h2 {
background-color: unset; background-color: unset;
@ -1145,7 +1216,7 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
font-family: "Marianne", sans-serif; font-family: "Marianne", sans-serif;
font-size: 1rem; font-size: 1rem;
line-height: 1.4; line-height: 1.4;
font-size: 1.3rem; font-size: 1.2rem;
padding: 0 3vw; padding: 0 3vw;
} }
.fullpage .fullpage_content p { .fullpage .fullpage_content p {
@ -1203,12 +1274,17 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
} }
.fullpage .fullpage_content h3, .fullpage .fullpage_content h4, .fullpage .fullpage_content h5, .fullpage .fullpage_content h6 { .fullpage .fullpage_content h3, .fullpage .fullpage_content h4, .fullpage .fullpage_content h5, .fullpage .fullpage_content h6 {
font-family: "Marianne", sans-serif; font-family: "Marianne", sans-serif;
font-size: 1.3rem; font-size: 0.9rem;
color: #038788; color: #038788;
font-weight: 800; font-weight: 800;
margin-bottom: 1rem; margin-bottom: 1rem;
padding-left: 3vw; padding-left: 3vw;
} }
@media (min-width: 760px) {
.fullpage .fullpage_content h3, .fullpage .fullpage_content h4, .fullpage .fullpage_content h5, .fullpage .fullpage_content h6 {
font-size: 1.2rem;
}
}
.fullpage .views-row { .fullpage .views-row {
margin-bottom: 8vh; margin-bottom: 8vh;
} }
@ -1260,12 +1336,18 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
.paragraph--type--membre-equipe > div:nth-of-type(2), .paragraph--type--membre-equipe > div:nth-of-type(2),
.paragraph--type--membre-equipe > div:nth-of-type(3) { .paragraph--type--membre-equipe > div:nth-of-type(3) {
font-family: "Marianne", sans-serif; font-family: "Marianne", sans-serif;
font-size: 1.3rem; font-size: 0.9rem;
color: #038788; color: #038788;
font-weight: 800; font-weight: 800;
margin-bottom: 2vh; margin-bottom: 2vh;
align-self: flex-end; align-self: flex-end;
} }
@media (min-width: 760px) {
.paragraph--type--membre-equipe > div:nth-of-type(2),
.paragraph--type--membre-equipe > div:nth-of-type(3) {
font-size: 1.2rem;
}
}
.paragraph--type--membre-equipe > div:nth-of-type(3) { .paragraph--type--membre-equipe > div:nth-of-type(3) {
padding-left: 0.5rem; padding-left: 0.5rem;
} }
@ -1705,17 +1787,23 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
color: #038788; color: #038788;
} }
.fullpage.meetup-offre > h2 { .fullpage.meetup-offre > h2 {
font-family: "Barlow", sans-serif; font-family: "Barlow Condensed", sans-serif;
font-size: 2.3rem; font-size: 1.2rem;
padding: 0 3vw; padding: 0 3vw;
margin-top: 1rem; margin-top: 1rem;
color: #038788; color: #038788;
text-transform: uppercase;
margin-bottom: 3vh; margin-bottom: 3vh;
width: auto; width: auto;
} }
.fullpage.meetup-offre > h2 a { .fullpage.meetup-offre > h2 a {
color: #038788; color: #038788;
} }
@media (min-width: 760px) {
.fullpage.meetup-offre > h2 {
font-size: 2.3rem;
}
}
.fullpage.meetup-offre > .offre-content > div { .fullpage.meetup-offre > .offre-content > div {
border-top: solid 1px #038788; border-top: solid 1px #038788;
padding-top: 4vh; padding-top: 4vh;

2
web/themes/erabletheme/css/styles.css.map
View File

File diff suppressed because one or more lines are too long

BIN
web/themes/erabletheme/fonts/Barlow/BarlowCondensed-Regular.woff2 Normal file
View File

Binary file not shown.

15
web/themes/erabletheme/js/erabletheme.js
View File

@ -16,8 +16,19 @@
let slickEl = $('.slick-container').children().first().children().first().children().first().children().first(); let slickEl = $('.slick-container').children().first().children().first().children().first().children().first();
console.log(slickEl); console.log(slickEl);
$(slickEl).slick({ $(slickEl).slick({
centerMode: true,
//centerPadding: '600px',
slidesToShow: 3,
dots: true, dots: true,
appendDots: $('#carousel_dots') appendDots: $('#carousel_dots'),
responsive: [
{
breakpoint: 760,
settings: {
slidesToShow: 1
}
},
],
}); });
})(jQuery, window); })(jQuery, window);
@ -191,7 +202,7 @@
function showSubmenu() { function showSubmenu() {
programLink.classList.add("submenu-open"); programLink.classList.add("submenu-open");
const rect = programLink.getBoundingClientRect(); let rect = programLink.getBoundingClientRect();
programSubmenu.style.top = `${rect.bottom}px`; programSubmenu.style.top = `${rect.bottom}px`;
programSubmenu.style.left = `${rect.left}px`; programSubmenu.style.left = `${rect.left}px`;
programSubmenu.style.display = "block"; programSubmenu.style.display = "block";

53
web/themes/erabletheme/scss/_home.scss
View File

@ -1,37 +1,40 @@
.home_introduction { .home_introduction {
background-color: rgb(27, 197, 112); // to remove background-color: white;
position: relative;
border-bottom: solid 2px $teal;
width: 100%; width: 100%;
padding: 4rem 0; box-sizing: border-box;
padding: 4rem 1rem;
h2 { h2 {
display: none; display: none;
} }
> div {
z-index: 1;
position: relative;
}
> .logo { > .logo {
text-align: center; display: flex;
justify-content: center;
align-items: center;
width: 100%; width: 100%;
margin-bottom: 3rem; margin-bottom: 2rem;
img { img {
width: 35vw; width: 50%;
height: auto;
@media (min-width: $breakpoint_tablet) { @media (min-width: $breakpoint_tablet) {
width: 25vw; width: 100%;
} }
@media (min-width: $breakpoint_desktop) { @media (min-width: $breakpoint_desktop) {
width: 18vw; //width: 18vw;
} }
} }
@media (min-width: $breakpoint_tablet) {
width: 170%;
margin: 0 3rem;
}
} }
article > div { article > div {
height: unset !important; height: unset !important;
min-height: 100%;
p { p {
@include main_text_content(); @include main_text_content();
@media (min-width: $breakpoint_desktop) { width: 100%;
margin-left: 12.5vw; @media (min-width: $breakpoint_tablet) {
max-width: 50vw; padding-right: 3rem;
} }
} }
@media (min-width: $breakpoint_tablet) { @media (min-width: $breakpoint_tablet) {
@ -45,17 +48,25 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@media (min-width: $breakpoint_desktop) { @media (min-width: $breakpoint_tablet) {
display: flex; position: absolute;
justify-content: flex-end; left:0;
right:0;
} }
} }
@media (min-width: $breakpoint_tablet) { @media (min-width: $breakpoint_tablet) {
padding-left: 12.5vw; padding: 8rem 1rem;
padding-right: 12.5vw; padding-top: 4rem;
margin: 6rem 0;
margin-left: 20vw;
margin-right: 20vw;
width: calc(100% - 40vw);
display: flex;
justify-content: space-around;
} }
} }
// plus sur l'accueil
.home_consultation { .home_consultation {
position: relative; position: relative;
@include beige_gradient(); @include beige_gradient();

7
web/themes/erabletheme/scss/global/_fonts.scss
View File

@ -39,5 +39,12 @@
src: url('../fonts/Barlow/barlow-light.woff2') format('woff2'), src: url('../fonts/Barlow/barlow-light.woff2') format('woff2'),
url('../fonts/Barlow/barlow_light.woff') format('woff'); url('../fonts/Barlow/barlow_light.woff') format('woff');
font-weight: 300; font-weight: 300;
font-style: normal
}
@font-face {
font-family: 'Barlow Condensed';
src: url('../fonts/Barlow/BarlowCondensed-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal; font-style: normal;
} }

15
web/themes/erabletheme/scss/global/variables/_typography.scss
View File

@ -1,7 +1,7 @@
/* SIZES */ /* SIZES */
$sm_font_size: 0.8rem; $sm_font_size: 0.8rem;
$m_font_size: 0.9rem; $m_font_size: 0.9rem;
$l_font_size: 1.3rem; $l_font_size: 1.2rem;
$xl_font_size: 1.6rem; $xl_font_size: 1.6rem;
$main_font_size: 1rem; $main_font_size: 1rem;
$title_size: 2.3rem; $title_size: 2.3rem;
@ -9,14 +9,18 @@ $title_size: 2.3rem;
/* MIXINS */ /* MIXINS */
@mixin main_title() { @mixin main_title() {
font-family: "Barlow", sans-serif; font-family: "Barlow Condensed", sans-serif;
font-size: $title_size; font-size: $l_font_size;
padding: 0 $x_margin; padding: 0 $x_margin;
margin-top: 1rem; margin-top: 1rem;
color: $teal; color: $teal;
text-transform: uppercase;
a { a {
color: $teal; color: $teal;
} }
@media (min-width: $breakpoint_tablet) {
font-size: $title_size;
}
} }
@mixin main_text_content() { @mixin main_text_content() {
@ -27,9 +31,12 @@ $title_size: 2.3rem;
@mixin sous_titre() { @mixin sous_titre() {
font-family: "Marianne", sans-serif; font-family: "Marianne", sans-serif;
font-size: $l_font_size; font-size: $m_font_size;
color: $teal; color: $teal;
font-weight: 800; font-weight: 800;
@media (min-width: $breakpoint_tablet) {
font-size: $l_font_size;
}
} }
@mixin sous_titre_alt() { @mixin sous_titre_alt() {

22
web/themes/erabletheme/scss/partials/_articles_teaser.scss
View File

@ -1,8 +1,11 @@
.views-row { .views-row {
article { article.actu-teaser {
background-color: white;
padding: 2rem;
box-sizing: border-box;
> div:first-of-type { > div:first-of-type {
width: 100%; width: 100%;
height: 30vh; aspect-ratio: 16 / 9;
overflow: hidden; overflow: hidden;
padding-left: $x_margin; padding-left: $x_margin;
padding-right: $x_margin; padding-right: $x_margin;
@ -13,39 +16,40 @@
height: auto; height: auto;
width: 100%; width: 100%;
} }
.legende {
display: none !important;
} }
@media (min-width: $breakpoint_tablet) {
height: 20vh;
} }
} }
.preview_meta { .preview_meta {
font-family: "Marianne", sans-serif; font-family: "Marianne", sans-serif;
font-size: $m_font_size; font-size: $sm_font_size;
width: auto; width: auto;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
color: $teal; color: $teal;
border-top: solid 1px $teal;
margin: 0 $x_margin; margin: 0 $x_margin;
margin-top: 1.3rem; margin-top: 1.3rem;
padding-top: 0.7rem; padding-top: 0.7rem;
> div:first-of-type { @media (min-width: $breakpoint_tablet) {
font-weight: 800; font-size: $m_font_size;
} }
} }
.preview_sous_titre { .preview_sous_titre {
font-family: "Marianne", sans-serif; font-family: "Marianne", sans-serif;
font-size: $l_font_size; font-size: $m_font_size;
padding: 5px $x_margin; padding: 5px $x_margin;
@media (min-width: $breakpoint_tablet) { @media (min-width: $breakpoint_tablet) {
font-size: $l_font_size;
padding-top: 0; padding-top: 0;
} }
} }
h2 { h2 {
@include main_title(); @include main_title();
margin-bottom: 0.5rem;
} }
} }

98
web/themes/erabletheme/scss/partials/_carousel.scss
View File

@ -1,12 +1,18 @@
.slick-container { .slick-container {
@include beige_gradient(); width: 100%;
width: 100vw; margin-bottom: 5rem;
border-bottom: solid 2px $teal; @media screen and (min-width: $breakpoint_tablet) {
div.views-row article { width: 200vw;
transform: translateX(-50vw);
}
div.views-row {
padding: 0 3vw;
@media screen and (min-width: $breakpoint_tablet) {
padding: 0 6vw;
}
> article {
width: 100%; width: 100%;
> div:first-of-type { // container du lien image > div:first-of-type { // container du lien image
width: 100%;
height: 30vh !important;
overflow-y: hidden; overflow-y: hidden;
padding: 0 !important; padding: 0 !important;
display: flex; display: flex;
@ -21,9 +27,6 @@
} }
} }
} }
@media (min-width: $breakpoint_desktop) {
height: 50vh !important;
}
} }
@media (min-width: $breakpoint_tablet) { @media (min-width: $breakpoint_tablet) {
.preview_meta { .preview_meta {
@ -36,45 +39,72 @@
} }
} }
} }
}
.slick-arrow { .slick-arrow {
display: none !important; width: 1.5rem;
height: 1.5rem;
border-radius: 1.5rem;
background-color: $teal !important;
transition: background-color 0.3s ease;
top: unset !important;
bottom: calc(-25px - 4rem);
@media (min-width: $breakpoint_tablet) {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
border-radius: 1.5rem; bottom: calc(-25px - 6rem);
border: solid 1px $teal;
top: unset;
bottom: 5%;
background-color: rgba(255, 255, 255, 0.4) !important;
transition: background-color 0.3s ease;
@media (min-width: $breakpoint_desktop) {
transform: translateY(-5rem);
} }
} &:hover {
.slick-arrow:hover { background-color: white !important;
background-color: rgba(255, 255, 255, 0.8) !important; &::before {
}
.slick-arrow::before {
color: $teal; color: $teal;
}
}
&::before {
opacity: 1 !important;
color: white;
font-weight: bold;
font-family: 'Marianne', sans-serif; font-family: 'Marianne', sans-serif;
display: block; display: block;
padding-bottom: 3px; font-size: $sm_font_size !important;
@media (min-width: $breakpoint_tablet) {
font-size: $l_font_size !important;
}
}
}
.slick-prev {
left: 20vw;
@media (min-width: $breakpoint_desktop) {
left: calc(50vw + 35vw);
}
}
.slick-next {
right: 20vw;
@media (min-width: $breakpoint_desktop) {
right: calc(50vw + 35vw);
}
}
> div > div > div:first-of-type {
z-index: 2;
position: relative;
margin-bottom: 4rem;
@media (min-width: $breakpoint_tablet) {
margin-bottom: 6rem;
}
} }
#carousel_dots { #carousel_dots {
z-index: 1;
position: relative; position: relative;
margin-top: -15px; margin-top: -15px;
ul { ul {
position: relative; position: relative;
bottom: 0; bottom: 0;
li.slick-active button::before{ li.slick-active button::before{
color: $fluo_green; color: $teal;
} }
li button::before{ li button::before{
color: rgba(0.9, 0.9, 0.9, 1); color: rgba(0.9, 0.9, 0.9, 1);
} }
} }
@media (min-width: $breakpoint_desktop) {
margin-top: 4vh;
}
} }
footer { footer {
@include fluo_button(); @include fluo_button();
@ -82,16 +112,4 @@
margin-top: 4rem; margin-top: 4rem;
margin-bottom: 4rem; margin-bottom: 4rem;
} }
@media (min-width: $breakpoint_tablet) {
padding: 0 12.5vw;
.slick-prev, .slick-next {
display: block !important;
}
.slick-prev {
left: -5rem;
}
.slick-next {
right: -5rem;
}
}
} }

12
web/themes/erabletheme/scss/partials/_header.scss
View File

@ -174,9 +174,6 @@ body.toolbar-fixed header[role="banner"] {
padding: 0; padding: 0;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
@media screen and (min-width: $breakpoint_desktop) {
padding-top: 3rem;
}
> li { > li {
width: 100%; width: 100%;
display: flex; display: flex;
@ -264,12 +261,11 @@ body.toolbar-fixed header[role="banner"] {
} }
} }
#block-erabletheme-navigationprincipale { #block-erabletheme-navigationprincipale {
background: linear-gradient(to bottom, white, transparent);
width: 100vw; width: 100vw;
display: none; display: none;
position: absolute; position: absolute;
padding-top: 1rem; padding-top: 1rem;
// background-color: white;
// box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
@media (min-width: $breakpoint_desktop) { @media (min-width: $breakpoint_desktop) {
display: block; display: block;
} }
@ -278,7 +274,6 @@ body.toolbar-fixed header[role="banner"] {
display: flex; display: flex;
padding: 1rem 10vw; padding: 1rem 10vw;
justify-content: space-around; justify-content: space-around;
// border-top: solid 1px $dark_green;
li { li {
font-family: 'Marianne', sans-serif; font-family: 'Marianne', sans-serif;
font-size: $m_font_size; font-size: $m_font_size;
@ -310,7 +305,7 @@ body.toolbar-fixed header[role="banner"] {
} }
} }
#block-erabletheme-leprogramme { #block-erabletheme-leprogramme {
position: absolute; position: fixed;
background-color: white; background-color: white;
max-height: 0vh; max-height: 0vh;
overflow: hidden; overflow: hidden;
@ -327,6 +322,9 @@ body.toolbar-fixed header[role="banner"] {
margin: 0.5rem 0; margin: 0.5rem 0;
a { a {
color: black; color: black;
&:hover, &.is-active {
font-weight: 800;
}
} }
} }
} }

2
web/themes/erabletheme/templates/node/node--actualite--home.html.twig
View File

@ -68,7 +68,7 @@
* @ingroup themeable * @ingroup themeable
*/ */
#} #}
<article{{ attributes }}> <article{{ attributes.addClass('actu-teaser') }}>
{{ content.field_image }} {{ content.field_image }}
<div class="preview_infos"> <div class="preview_infos">
<div class="preview_meta"> <div class="preview_meta">

2
web/themes/erabletheme/templates/node/node--actualite--teaser.html.twig
View File

@ -68,7 +68,7 @@
* @ingroup themeable * @ingroup themeable
*/ */
#} #}
<article{{ attributes }}> <article{{ attributes.addClass('actu-teaser') }}>
{{ content.field_image }} {{ content.field_image }}
{{ content.field_date }} {{ content.field_date }}
{{ content.field_type_d_actualite }} {{ content.field_type_d_actualite }}