redesign blocks présentation et slider actus sur l'intro
This commit is contained in:
Valentin
parent
42ed7763d0
commit
c56dadee02
|
|
@ -44,18 +44,6 @@ variant_settings:
|
|||
region: content
|
||||
weight: -1
|
||||
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:
|
||||
id: sitesmap_block
|
||||
label: 'Sites map Block'
|
||||
|
|
|
|||
|
|
@ -32,6 +32,12 @@
|
|||
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;
|
||||
}
|
||||
/* BREAKPOINTS */
|
||||
.layout-container {
|
||||
display: flex;
|
||||
|
|
@ -262,11 +268,6 @@ body.toolbar-fixed header[role=banner] {
|
|||
align-items: center;
|
||||
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 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
@ -350,6 +351,7 @@ body.toolbar-fixed header[role=banner] {
|
|||
position: relative;
|
||||
}
|
||||
.layout-container #block-erabletheme-navigationprincipale {
|
||||
background: linear-gradient(to bottom, white, transparent);
|
||||
width: 100vw;
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
|
@ -395,7 +397,7 @@ body.toolbar-fixed header[role=banner] {
|
|||
background-color: #00ff80;
|
||||
}
|
||||
.layout-container #block-erabletheme-leprogramme {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
background-color: white;
|
||||
max-height: 0vh;
|
||||
overflow: hidden;
|
||||
|
|
@ -416,6 +418,9 @@ body.toolbar-fixed header[role=banner] {
|
|||
.layout-container #block-erabletheme-leprogramme ul li a {
|
||||
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 {
|
||||
width: 100vw;
|
||||
|
|
@ -538,72 +543,115 @@ body.toolbar-fixed header[role=banner] {
|
|||
}
|
||||
|
||||
.slick-container {
|
||||
background: linear-gradient(to bottom, #fcf9ee 80%, white 100%);
|
||||
width: 100vw;
|
||||
border-bottom: solid 2px #038788;
|
||||
width: 100%;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
.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%;
|
||||
}
|
||||
.slick-container div.views-row article > div:first-of-type {
|
||||
width: 100%;
|
||||
height: 30vh !important;
|
||||
.slick-container div.views-row > article > div:first-of-type {
|
||||
overflow-y: hidden;
|
||||
padding: 0 !important;
|
||||
display: flex;
|
||||
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%;
|
||||
}
|
||||
.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%;
|
||||
}
|
||||
.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%;
|
||||
height: auto;
|
||||
}
|
||||
@media (min-width: 1080px) {
|
||||
.slick-container div.views-row article > div:first-of-type {
|
||||
height: 50vh !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.slick-container div.views-row article .preview_meta {
|
||||
.slick-container div.views-row > article .preview_meta {
|
||||
margin-left: 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-right: 0;
|
||||
}
|
||||
}
|
||||
.slick-container .slick-arrow {
|
||||
display: none !important;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 1.5rem;
|
||||
border: solid 1px #038788;
|
||||
top: unset;
|
||||
bottom: 5%;
|
||||
background-color: rgba(255, 255, 255, 0.4) !important;
|
||||
background-color: #038788 !important;
|
||||
transition: background-color 0.3s ease;
|
||||
top: unset !important;
|
||||
bottom: calc(-25px - 4rem);
|
||||
}
|
||||
@media (min-width: 1080px) {
|
||||
@media (min-width: 760px) {
|
||||
.slick-container .slick-arrow {
|
||||
transform: translateY(-5rem);
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
bottom: calc(-25px - 6rem);
|
||||
}
|
||||
}
|
||||
.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 {
|
||||
color: #038788;
|
||||
opacity: 1 !important;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-family: "Marianne", sans-serif;
|
||||
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 {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
margin-top: -15px;
|
||||
}
|
||||
|
|
@ -612,16 +660,11 @@ body.toolbar-fixed header[role=banner] {
|
|||
bottom: 0;
|
||||
}
|
||||
.slick-container #carousel_dots ul li.slick-active button::before {
|
||||
color: #00ff80;
|
||||
color: #038788;
|
||||
}
|
||||
.slick-container #carousel_dots ul li button::before {
|
||||
color: rgb(0.9, 0.9, 0.9);
|
||||
}
|
||||
@media (min-width: 1080px) {
|
||||
.slick-container #carousel_dots {
|
||||
margin-top: 4vh;
|
||||
}
|
||||
}
|
||||
.slick-container footer {
|
||||
text-align: center;
|
||||
margin-top: 4rem;
|
||||
|
|
@ -644,20 +687,6 @@ body.toolbar-fixed header[role=banner] {
|
|||
.slick-container footer a:hover {
|
||||
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 {
|
||||
font-family: "Marianne", sans-serif;
|
||||
|
|
@ -696,7 +725,7 @@ body.toolbar-fixed header[role=banner] {
|
|||
margin-top: -1.5rem;
|
||||
}
|
||||
.actu_full h2 + div .sous_titre > div > div {
|
||||
font-size: 1.3rem;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.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 {
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-size: 1.3rem;
|
||||
font-size: 0.9rem;
|
||||
color: #038788;
|
||||
font-weight: 800;
|
||||
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 {
|
||||
padding: 0 1.5vw;
|
||||
text-align: right;
|
||||
|
|
@ -761,59 +795,71 @@ body.toolbar-fixed header[role=banner] {
|
|||
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%;
|
||||
height: 30vh;
|
||||
aspect-ratio: 16/9;
|
||||
overflow: hidden;
|
||||
padding-left: 3vw;
|
||||
padding-right: 3vw;
|
||||
display: flex;
|
||||
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;
|
||||
width: 100%;
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.views-row article > div:first-of-type {
|
||||
height: 20vh;
|
||||
}
|
||||
.views-row article.actu-teaser > div:first-of-type a .legende {
|
||||
display: none !important;
|
||||
}
|
||||
.views-row article .preview_meta {
|
||||
.views-row article.actu-teaser .preview_meta {
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.8rem;
|
||||
width: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #038788;
|
||||
border-top: solid 1px #038788;
|
||||
margin: 0 3vw;
|
||||
margin-top: 1.3rem;
|
||||
padding-top: 0.7rem;
|
||||
}
|
||||
.views-row article .preview_meta > div:first-of-type {
|
||||
font-weight: 800;
|
||||
@media (min-width: 760px) {
|
||||
.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-size: 1.3rem;
|
||||
font-size: 0.9rem;
|
||||
padding: 5px 3vw;
|
||||
}
|
||||
@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;
|
||||
}
|
||||
}
|
||||
.views-row article h2 {
|
||||
font-family: "Barlow", sans-serif;
|
||||
font-size: 2.3rem;
|
||||
.views-row article.actu-teaser h2 {
|
||||
font-family: "Barlow Condensed", sans-serif;
|
||||
font-size: 1.2rem;
|
||||
padding: 0 3vw;
|
||||
margin-top: 1rem;
|
||||
color: #038788;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.views-row article h2 a {
|
||||
.views-row article.actu-teaser h2 a {
|
||||
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 {
|
||||
min-height: 50vh;
|
||||
|
|
@ -904,49 +950,49 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
|
|||
|
||||
/* PAGES */
|
||||
.home_introduction {
|
||||
background-color: rgb(27, 197, 112);
|
||||
position: relative;
|
||||
border-bottom: solid 2px #038788;
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
padding: 4rem 0;
|
||||
box-sizing: border-box;
|
||||
padding: 4rem 1rem;
|
||||
}
|
||||
.home_introduction h2 {
|
||||
display: none;
|
||||
}
|
||||
.home_introduction > div {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
.home_introduction > .logo {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-bottom: 3rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.home_introduction > .logo img {
|
||||
width: 35vw;
|
||||
width: 50%;
|
||||
height: auto;
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.home_introduction > .logo img {
|
||||
width: 25vw;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1080px) {
|
||||
.home_introduction > .logo img {
|
||||
width: 18vw;
|
||||
@media (min-width: 760px) {
|
||||
.home_introduction > .logo {
|
||||
width: 170%;
|
||||
margin: 0 3rem;
|
||||
}
|
||||
}
|
||||
.home_introduction article > div {
|
||||
height: unset !important;
|
||||
min-height: 100%;
|
||||
}
|
||||
.home_introduction article > div p {
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.4;
|
||||
width: 100%;
|
||||
}
|
||||
@media (min-width: 1080px) {
|
||||
@media (min-width: 760px) {
|
||||
.home_introduction article > div p {
|
||||
margin-left: 12.5vw;
|
||||
max-width: 50vw;
|
||||
padding-right: 3rem;
|
||||
}
|
||||
}
|
||||
@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 {
|
||||
background-color: #00ff80;
|
||||
}
|
||||
@media (min-width: 1080px) {
|
||||
@media (min-width: 760px) {
|
||||
.home_introduction div.more-link {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.home_introduction {
|
||||
padding-left: 12.5vw;
|
||||
padding-right: 12.5vw;
|
||||
padding: 8rem 1rem;
|
||||
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;
|
||||
}
|
||||
.home_consultation h2 {
|
||||
font-family: "Barlow", sans-serif;
|
||||
font-size: 2.3rem;
|
||||
font-family: "Barlow Condensed", sans-serif;
|
||||
font-size: 1.2rem;
|
||||
padding: 0 3vw;
|
||||
margin-top: 1rem;
|
||||
color: #038788;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
.home_consultation h2 a {
|
||||
color: #038788;
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.home_consultation h2 {
|
||||
font-size: 2.3rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.home_consultation h2 {
|
||||
padding-left: 0 !important;
|
||||
|
|
@ -1093,11 +1152,12 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
|
|||
position: relative;
|
||||
}
|
||||
.fullpage > h2 {
|
||||
font-family: "Barlow", sans-serif;
|
||||
font-size: 2.3rem;
|
||||
font-family: "Barlow Condensed", sans-serif;
|
||||
font-size: 1.2rem;
|
||||
padding: 0 3vw;
|
||||
margin-top: 1rem;
|
||||
color: #038788;
|
||||
text-transform: uppercase;
|
||||
margin-top: 5vh;
|
||||
margin-bottom: 7vh;
|
||||
background-color: #fcf9ee;
|
||||
|
|
@ -1109,6 +1169,11 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
|
|||
.fullpage > h2 a {
|
||||
color: #038788;
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.fullpage > h2 {
|
||||
font-size: 2.3rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.fullpage > h2 {
|
||||
background-color: unset;
|
||||
|
|
@ -1120,11 +1185,12 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
|
|||
color: #314e41;
|
||||
}
|
||||
.fullpage .fullpage_content > h2 {
|
||||
font-family: "Barlow", sans-serif;
|
||||
font-size: 2.3rem;
|
||||
font-family: "Barlow Condensed", sans-serif;
|
||||
font-size: 1.2rem;
|
||||
padding: 0 3vw;
|
||||
margin-top: 1rem;
|
||||
color: #038788;
|
||||
text-transform: uppercase;
|
||||
margin-top: 5vh;
|
||||
margin-bottom: 1rem;
|
||||
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 {
|
||||
color: #038788;
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.fullpage .fullpage_content > h2 {
|
||||
font-size: 2.3rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.fullpage .fullpage_content > h2 {
|
||||
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-size: 1rem;
|
||||
line-height: 1.4;
|
||||
font-size: 1.3rem;
|
||||
font-size: 1.2rem;
|
||||
padding: 0 3vw;
|
||||
}
|
||||
.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 {
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-size: 1.3rem;
|
||||
font-size: 0.9rem;
|
||||
color: #038788;
|
||||
font-weight: 800;
|
||||
margin-bottom: 1rem;
|
||||
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 {
|
||||
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(3) {
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-size: 1.3rem;
|
||||
font-size: 0.9rem;
|
||||
color: #038788;
|
||||
font-weight: 800;
|
||||
margin-bottom: 2vh;
|
||||
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) {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
|
@ -1705,17 +1787,23 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
|
|||
color: #038788;
|
||||
}
|
||||
.fullpage.meetup-offre > h2 {
|
||||
font-family: "Barlow", sans-serif;
|
||||
font-size: 2.3rem;
|
||||
font-family: "Barlow Condensed", sans-serif;
|
||||
font-size: 1.2rem;
|
||||
padding: 0 3vw;
|
||||
margin-top: 1rem;
|
||||
color: #038788;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 3vh;
|
||||
width: auto;
|
||||
}
|
||||
.fullpage.meetup-offre > h2 a {
|
||||
color: #038788;
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.fullpage.meetup-offre > h2 {
|
||||
font-size: 2.3rem;
|
||||
}
|
||||
}
|
||||
.fullpage.meetup-offre > .offre-content > div {
|
||||
border-top: solid 1px #038788;
|
||||
padding-top: 4vh;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
|
@ -16,8 +16,19 @@
|
|||
let slickEl = $('.slick-container').children().first().children().first().children().first().children().first();
|
||||
console.log(slickEl);
|
||||
$(slickEl).slick({
|
||||
centerMode: true,
|
||||
//centerPadding: '600px',
|
||||
slidesToShow: 3,
|
||||
dots: true,
|
||||
appendDots: $('#carousel_dots')
|
||||
appendDots: $('#carousel_dots'),
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 760,
|
||||
settings: {
|
||||
slidesToShow: 1
|
||||
}
|
||||
},
|
||||
],
|
||||
});
|
||||
})(jQuery, window);
|
||||
|
||||
|
|
@ -191,7 +202,7 @@
|
|||
|
||||
function showSubmenu() {
|
||||
programLink.classList.add("submenu-open");
|
||||
const rect = programLink.getBoundingClientRect();
|
||||
let rect = programLink.getBoundingClientRect();
|
||||
programSubmenu.style.top = `${rect.bottom}px`;
|
||||
programSubmenu.style.left = `${rect.left}px`;
|
||||
programSubmenu.style.display = "block";
|
||||
|
|
|
|||
|
|
@ -1,61 +1,72 @@
|
|||
.home_introduction {
|
||||
background-color: rgb(27, 197, 112); // to remove
|
||||
position: relative;
|
||||
border-bottom: solid 2px $teal;
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 4rem 1rem;
|
||||
h2 {
|
||||
display: none;
|
||||
}
|
||||
> .logo {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 4rem 0;
|
||||
h2 {
|
||||
display: none;
|
||||
}
|
||||
> div {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
> .logo {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-bottom: 3rem;
|
||||
img {
|
||||
width: 35vw;
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
width: 25vw;
|
||||
}
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
width: 18vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
article > div {
|
||||
height: unset !important;
|
||||
p {
|
||||
@include main_text_content();
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
margin-left: 12.5vw;
|
||||
max-width: 50vw;
|
||||
}
|
||||
}
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
div.more-link {
|
||||
@include fluo_button();
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
margin-bottom: 2rem;
|
||||
img {
|
||||
width: 50%;
|
||||
height: auto;
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
width: 100%;
|
||||
}
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
//width: 18vw;
|
||||
}
|
||||
}
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
padding-left: 12.5vw;
|
||||
padding-right: 12.5vw;
|
||||
width: 170%;
|
||||
margin: 0 3rem;
|
||||
}
|
||||
}
|
||||
article > div {
|
||||
height: unset !important;
|
||||
min-height: 100%;
|
||||
p {
|
||||
@include main_text_content();
|
||||
width: 100%;
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
padding-right: 3rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
div.more-link {
|
||||
@include fluo_button();
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
position: absolute;
|
||||
left:0;
|
||||
right:0;
|
||||
}
|
||||
}
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
padding: 8rem 1rem;
|
||||
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 {
|
||||
position: relative;
|
||||
@include beige_gradient();
|
||||
|
|
|
|||
|
|
@ -39,5 +39,12 @@
|
|||
src: url('../fonts/Barlow/barlow-light.woff2') format('woff2'),
|
||||
url('../fonts/Barlow/barlow_light.woff') format('woff');
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/* SIZES */
|
||||
$sm_font_size: 0.8rem;
|
||||
$m_font_size: 0.9rem;
|
||||
$l_font_size: 1.3rem;
|
||||
$l_font_size: 1.2rem;
|
||||
$xl_font_size: 1.6rem;
|
||||
$main_font_size: 1rem;
|
||||
$title_size: 2.3rem;
|
||||
|
|
@ -9,14 +9,18 @@ $title_size: 2.3rem;
|
|||
/* MIXINS */
|
||||
|
||||
@mixin main_title() {
|
||||
font-family: "Barlow", sans-serif;
|
||||
font-size: $title_size;
|
||||
font-family: "Barlow Condensed", sans-serif;
|
||||
font-size: $l_font_size;
|
||||
padding: 0 $x_margin;
|
||||
margin-top: 1rem;
|
||||
color: $teal;
|
||||
text-transform: uppercase;
|
||||
a {
|
||||
color: $teal;
|
||||
}
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
font-size: $title_size;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin main_text_content() {
|
||||
|
|
@ -27,9 +31,12 @@ $title_size: 2.3rem;
|
|||
|
||||
@mixin sous_titre() {
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-size: $l_font_size;
|
||||
font-size: $m_font_size;
|
||||
color: $teal;
|
||||
font-weight: 800;
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
font-size: $l_font_size;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sous_titre_alt() {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
.views-row {
|
||||
article {
|
||||
article.actu-teaser {
|
||||
background-color: white;
|
||||
padding: 2rem;
|
||||
box-sizing: border-box;
|
||||
> div:first-of-type {
|
||||
width: 100%;
|
||||
height: 30vh;
|
||||
aspect-ratio: 16 / 9;
|
||||
overflow: hidden;
|
||||
padding-left: $x_margin;
|
||||
padding-right: $x_margin;
|
||||
|
|
@ -13,39 +16,40 @@
|
|||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
height: 20vh;
|
||||
.legende {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview_meta {
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-size: $m_font_size;
|
||||
font-size: $sm_font_size;
|
||||
width: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: $teal;
|
||||
border-top: solid 1px $teal;
|
||||
margin: 0 $x_margin;
|
||||
margin-top: 1.3rem;
|
||||
padding-top: 0.7rem;
|
||||
> div:first-of-type {
|
||||
font-weight: 800;
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
font-size: $m_font_size;
|
||||
}
|
||||
}
|
||||
|
||||
.preview_sous_titre {
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-size: $l_font_size;
|
||||
font-size: $m_font_size;
|
||||
padding: 5px $x_margin;
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
font-size: $l_font_size;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include main_title();
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,18 @@
|
|||
.slick-container {
|
||||
@include beige_gradient();
|
||||
width: 100vw;
|
||||
border-bottom: solid 2px $teal;
|
||||
div.views-row article {
|
||||
width: 100%;
|
||||
margin-bottom: 5rem;
|
||||
@media screen and (min-width: $breakpoint_tablet) {
|
||||
width: 200vw;
|
||||
transform: translateX(-50vw);
|
||||
}
|
||||
div.views-row {
|
||||
padding: 0 3vw;
|
||||
@media screen and (min-width: $breakpoint_tablet) {
|
||||
padding: 0 6vw;
|
||||
}
|
||||
> article {
|
||||
width: 100%;
|
||||
> div:first-of-type { // container du lien image
|
||||
width: 100%;
|
||||
height: 30vh !important;
|
||||
overflow-y: hidden;
|
||||
padding: 0 !important;
|
||||
display: flex;
|
||||
|
|
@ -21,9 +27,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
height: 50vh !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
.preview_meta {
|
||||
|
|
@ -35,46 +38,73 @@
|
|||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.slick-arrow {
|
||||
display: none !important;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 1.5rem;
|
||||
border: solid 1px $teal;
|
||||
top: unset;
|
||||
bottom: 5%;
|
||||
background-color: rgba(255, 255, 255, 0.4) !important;
|
||||
background-color: $teal !important;
|
||||
transition: background-color 0.3s ease;
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
transform: translateY(-5rem);
|
||||
top: unset !important;
|
||||
bottom: calc(-25px - 4rem);
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
bottom: calc(-25px - 6rem);
|
||||
}
|
||||
&:hover {
|
||||
background-color: white !important;
|
||||
&::before {
|
||||
color: $teal;
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
opacity: 1 !important;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-family: 'Marianne', sans-serif;
|
||||
display: block;
|
||||
font-size: $sm_font_size !important;
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
font-size: $l_font_size !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.slick-arrow:hover {
|
||||
background-color: rgba(255, 255, 255, 0.8) !important;
|
||||
.slick-prev {
|
||||
left: 20vw;
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
left: calc(50vw + 35vw);
|
||||
}
|
||||
}
|
||||
.slick-arrow::before {
|
||||
color: $teal;
|
||||
font-family: 'Marianne', sans-serif;
|
||||
display: block;
|
||||
padding-bottom: 3px;
|
||||
.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 {
|
||||
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);
|
||||
}
|
||||
}
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
margin-top: 4vh;
|
||||
}
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
margin-top: -15px;
|
||||
ul {
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
li.slick-active button::before{
|
||||
color: $teal;
|
||||
}
|
||||
li button::before{
|
||||
color: rgba(0.9, 0.9, 0.9, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
footer {
|
||||
@include fluo_button();
|
||||
|
|
@ -82,16 +112,4 @@
|
|||
margin-top: 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -174,9 +174,6 @@ body.toolbar-fixed header[role="banner"] {
|
|||
padding: 0;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
@media screen and (min-width: $breakpoint_desktop) {
|
||||
padding-top: 3rem;
|
||||
}
|
||||
> li {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
@ -264,53 +261,51 @@ body.toolbar-fixed header[role="banner"] {
|
|||
}
|
||||
}
|
||||
#block-erabletheme-navigationprincipale {
|
||||
width: 100vw;
|
||||
display: none;
|
||||
position: absolute;
|
||||
padding-top: 1rem;
|
||||
// background-color: white;
|
||||
// box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
display: block;
|
||||
}
|
||||
ul {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 1rem 10vw;
|
||||
justify-content: space-around;
|
||||
// border-top: solid 1px $dark_green;
|
||||
li {
|
||||
font-family: 'Marianne', sans-serif;
|
||||
font-size: $m_font_size;
|
||||
padding: 4px 12px;
|
||||
background-color: white;
|
||||
transition: background-color 0.3s ease;
|
||||
&:first-of-type {
|
||||
display: flex;
|
||||
justify-items: center;
|
||||
&::after {
|
||||
content: url(../assets/icons/arrow-down-s-line.svg);
|
||||
display: inline-block;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
margin-left: 0.2rem;
|
||||
}
|
||||
background: linear-gradient(to bottom, white, transparent);
|
||||
width: 100vw;
|
||||
display: none;
|
||||
position: absolute;
|
||||
padding-top: 1rem;
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
display: block;
|
||||
}
|
||||
ul {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 1rem 10vw;
|
||||
justify-content: space-around;
|
||||
li {
|
||||
font-family: 'Marianne', sans-serif;
|
||||
font-size: $m_font_size;
|
||||
padding: 4px 12px;
|
||||
background-color: white;
|
||||
transition: background-color 0.3s ease;
|
||||
&:first-of-type {
|
||||
display: flex;
|
||||
justify-items: center;
|
||||
&::after {
|
||||
content: url(../assets/icons/arrow-down-s-line.svg);
|
||||
display: inline-block;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
margin-left: 0.2rem;
|
||||
}
|
||||
&:hover, &.submenu-open {
|
||||
}
|
||||
&:hover, &.submenu-open {
|
||||
background-color: $fluo_green;
|
||||
}
|
||||
a {
|
||||
font-weight: 800;
|
||||
color: black;
|
||||
&:is-active {
|
||||
background-color: $fluo_green;
|
||||
}
|
||||
a {
|
||||
font-weight: 800;
|
||||
color: black;
|
||||
&:is-active {
|
||||
background-color: $fluo_green;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#block-erabletheme-leprogramme {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
background-color: white;
|
||||
max-height: 0vh;
|
||||
overflow: hidden;
|
||||
|
|
@ -327,6 +322,9 @@ body.toolbar-fixed header[role="banner"] {
|
|||
margin: 0.5rem 0;
|
||||
a {
|
||||
color: black;
|
||||
&:hover, &.is-active {
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
* @ingroup themeable
|
||||
*/
|
||||
#}
|
||||
<article{{ attributes }}>
|
||||
<article{{ attributes.addClass('actu-teaser') }}>
|
||||
{{ content.field_image }}
|
||||
<div class="preview_infos">
|
||||
<div class="preview_meta">
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
* @ingroup themeable
|
||||
*/
|
||||
#}
|
||||
<article{{ attributes }}>
|
||||
<article{{ attributes.addClass('actu-teaser') }}>
|
||||
{{ content.field_image }}
|
||||
{{ content.field_date }}
|
||||
{{ content.field_type_d_actualite }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue