parallax ornements + modifs d'après kanboard
This commit is contained in:
Valentin
@@ -605,11 +605,12 @@ a {
|
||||
}
|
||||
.actu_full .retour_actus {
|
||||
padding-top: 3vh;
|
||||
padding-left: 3vw;
|
||||
}
|
||||
.actu_full .retour_actus a {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 800;
|
||||
color: #038788;
|
||||
padding-left: 3vw;
|
||||
cursor: pointer;
|
||||
}
|
||||
.actu_full .article_meta {
|
||||
padding-left: 3vw;
|
||||
@@ -756,6 +757,7 @@ a {
|
||||
right: -55vw;
|
||||
top: -5vh;
|
||||
z-index: 0;
|
||||
transition: left 0.05s ease, top 0.05s ease;
|
||||
}
|
||||
.ornements_top_over > div {
|
||||
position: absolute;
|
||||
@@ -763,6 +765,7 @@ a {
|
||||
background-size: contain;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: left 0.05s ease, top 0.05s ease;
|
||||
}
|
||||
.ornements_top_over > div:first-of-type {
|
||||
background-image: url(../assets/formes/forme_4.png);
|
||||
@@ -781,7 +784,7 @@ a {
|
||||
@media (min-width: 760px) {
|
||||
.ornements_top_over {
|
||||
left: -40vw;
|
||||
top: -10vw;
|
||||
top: -16vw;
|
||||
}
|
||||
.ornements_top_over > div {
|
||||
transform: scaleX(-1);
|
||||
@@ -802,12 +805,14 @@ a {
|
||||
}
|
||||
|
||||
.ornements_top_under {
|
||||
pointer-events: none;
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 30vh;
|
||||
left: -30vw;
|
||||
top: 0vw;
|
||||
transition: left 0.05s ease, top 0.05s ease;
|
||||
}
|
||||
.ornements_top_under > div {
|
||||
position: absolute;
|
||||
@@ -816,6 +821,7 @@ a {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: scaleX(-1);
|
||||
transition: left 0.05s ease, top 0.05s ease;
|
||||
}
|
||||
.ornements_top_under > div:first-of-type {
|
||||
background-image: url(../assets/formes/forme_4.png);
|
||||
@@ -1006,6 +1012,7 @@ a {
|
||||
}
|
||||
|
||||
.ornements_presentation_left {
|
||||
pointer-events: none;
|
||||
position: absolute !important;
|
||||
height: 20vh;
|
||||
width: 20vw;
|
||||
@@ -1055,6 +1062,7 @@ a {
|
||||
}
|
||||
|
||||
.ornements_presentation_right {
|
||||
pointer-events: none;
|
||||
position: absolute !important;
|
||||
height: 20vh;
|
||||
width: 20vw;
|
||||
@@ -1073,8 +1081,14 @@ a {
|
||||
.ornements_presentation_right > div:first-of-type {
|
||||
background-image: url(../assets/formes/forme_1.png);
|
||||
transform: rotate(-90deg);
|
||||
bottom: -3vh;
|
||||
right: -6vw;
|
||||
right: -15vw;
|
||||
bottom: -6vh;
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.ornements_presentation_right > div:first-of-type {
|
||||
bottom: -3vh;
|
||||
right: -6vw;
|
||||
}
|
||||
}
|
||||
.ornements_presentation_right > div:nth-of-type(2) {
|
||||
background-image: url(../assets/formes/forme_2.png);
|
||||
@@ -1082,6 +1096,177 @@ a {
|
||||
right: -12vw;
|
||||
}
|
||||
|
||||
.ornements_consultation_left {
|
||||
pointer-events: none;
|
||||
position: absolute !important;
|
||||
height: 20vh;
|
||||
width: 30vw;
|
||||
bottom: -8vh;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ornements_consultation_left > div {
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.ornements_consultation_left > div:first-of-type {
|
||||
background-image: url(../assets/formes/forme_4.png);
|
||||
transform: rotate(180deg);
|
||||
width: 200%;
|
||||
height: 120%;
|
||||
left: -30vw;
|
||||
bottom: -10vh;
|
||||
}
|
||||
@media (min-width: 1080px) {
|
||||
.ornements_consultation_left > div:first-of-type {
|
||||
transform: rotate(0deg);
|
||||
bottom: unset;
|
||||
top: -5vh;
|
||||
left: 0;
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
.ornements_consultation_left > div:nth-of-type(2) {
|
||||
background-image: url(../assets/formes/forme_5.png);
|
||||
transform: rotate(180deg);
|
||||
left: -12vw;
|
||||
}
|
||||
@media (min-width: 1080px) {
|
||||
.ornements_consultation_left > div:nth-of-type(2) {
|
||||
left: -20vw;
|
||||
top: -5vh;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1080px) {
|
||||
.ornements_consultation_left {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ornements_consultation_right {
|
||||
pointer-events: none;
|
||||
position: absolute !important;
|
||||
height: 20vh;
|
||||
width: 30vw;
|
||||
bottom: -8vh;
|
||||
right: 0;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ornements_consultation_right > div {
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.ornements_consultation_right > div:first-of-type {
|
||||
background-image: url(../assets/formes/forme_1.png);
|
||||
transform: rotate(-90deg);
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
right: -8vw;
|
||||
bottom: -2vh;
|
||||
}
|
||||
@media (min-width: 1080px) {
|
||||
.ornements_consultation_right > div:first-of-type {
|
||||
right: -3vw;
|
||||
bottom: 6vh;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
.ornements_consultation_right > div:nth-of-type(2) {
|
||||
background-image: url(../assets/formes/forme_3.png);
|
||||
transform: rotate(180deg);
|
||||
right: -4vw;
|
||||
width: 100%;
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.ornements_consultation_right > div:nth-of-type(2) {
|
||||
width: 30%;
|
||||
bottom: 3vh;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1080px) {
|
||||
.ornements_consultation_right > div:nth-of-type(2) {
|
||||
transform: none;
|
||||
right: -4vw;
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1080px) {
|
||||
.ornements_consultation_right {
|
||||
bottom: unset;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.login, .user {
|
||||
width: 100vw;
|
||||
height: 50vh;
|
||||
background: linear-gradient(to bottom, #fcf9ee 80%, white 100%);
|
||||
padding-top: 15vh;
|
||||
}
|
||||
.login > h2, .user > h2 {
|
||||
font-family: "Barlow", sans-serif;
|
||||
color: black;
|
||||
font-size: 1.6rem;
|
||||
text-align: center;
|
||||
}
|
||||
.login > div, .user > div {
|
||||
height: 100%;
|
||||
}
|
||||
.login > div > div:not(.hidden), .user > div > div:not(.hidden) {
|
||||
margin-top: 5vh !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.login > div > div:not(.hidden) form, .user > div > div:not(.hidden) form {
|
||||
font-family: "Marianne", sans-serif;
|
||||
}
|
||||
.login > div > div:not(.hidden) form .form-item, .user > div > div:not(.hidden) form .form-item {
|
||||
margin: 1.8rem 0;
|
||||
}
|
||||
.login > div > div:not(.hidden) form .form-item .form-checkbox, .user > div > div:not(.hidden) form .form-item .form-checkbox {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
-webkit-appearance: auto;
|
||||
}
|
||||
.login > div > div:not(.hidden) form .form-item .form-required, .user > div > div:not(.hidden) form .form-item .form-required {
|
||||
font-weight: 800;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
.login > div > div:not(.hidden) form .form-item .description, .user > div > div:not(.hidden) form .form-item .description {
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
.login > div > div:not(.hidden) form input, .user > div > div:not(.hidden) form input {
|
||||
border: solid 1px #038788;
|
||||
}
|
||||
.login > div > div:not(.hidden) form .button, .user > div > div:not(.hidden) form .button {
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-weight: 800;
|
||||
border: solid 1px #038788;
|
||||
background-color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
.login > div > div:not(.hidden) form .button:hover, .user > div > div:not(.hidden) form .button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.user .contextual-region > div {
|
||||
display: flex;
|
||||
font-family: "Marianne", sans-serif;
|
||||
}
|
||||
.user .contextual-region > div > h4 {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
/* PAGES */
|
||||
.home_introduction {
|
||||
position: relative;
|
||||
@@ -1171,6 +1356,7 @@ a {
|
||||
}
|
||||
|
||||
.home_consultation {
|
||||
position: relative;
|
||||
background: linear-gradient(to bottom, #fcf9ee 80%, white 100%);
|
||||
width: 100%;
|
||||
padding: 4rem 0;
|
||||
@@ -1197,6 +1383,13 @@ a {
|
||||
max-width: 50vw;
|
||||
}
|
||||
}
|
||||
.home_consultation h2 + div h2, .home_consultation h2 + div h3 {
|
||||
font-family: "Barlow", sans-serif;
|
||||
color: black;
|
||||
font-size: 1.6rem;
|
||||
margin-left: 12.5vw;
|
||||
max-width: 50vw;
|
||||
}
|
||||
.home_consultation article > div {
|
||||
height: unset !important;
|
||||
}
|
||||
@@ -1397,7 +1590,7 @@ a {
|
||||
.content_gouvernance .views-row article .paragraph--type--membre-equipe {
|
||||
height: auto;
|
||||
display: grid;
|
||||
grid-template-columns: 30vw 1fr;
|
||||
grid-template-columns: 30vw auto 1fr;
|
||||
grid-auto-rows: auto;
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
@@ -1416,25 +1609,27 @@ a {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.content_gouvernance .views-row article .paragraph--type--membre-equipe > div:nth-of-type(2) {
|
||||
.content_gouvernance .views-row article .paragraph--type--membre-equipe > div:nth-of-type(2),
|
||||
.content_gouvernance .views-row article .paragraph--type--membre-equipe > div:nth-of-type(3) {
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-size: 1.3rem;
|
||||
color: #038788;
|
||||
font-weight: 800;
|
||||
margin-bottom: 2vh;
|
||||
align-self: center;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.content_gouvernance .views-row article .paragraph--type--membre-equipe > div:nth-of-type(3) {
|
||||
display: none;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
.content_gouvernance .views-row article .paragraph--type--membre-equipe > div:last-of-type {
|
||||
font-family: "Marianne", sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.4;
|
||||
grid-column: 2/4;
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.content_gouvernance .views-row article .paragraph--type--membre-equipe {
|
||||
grid-template-columns: 10vw 1fr;
|
||||
grid-template-columns: 10vw auto 1fr;
|
||||
}
|
||||
.content_gouvernance .views-row article .paragraph--type--membre-equipe > div:first-of-type > div {
|
||||
width: 10vw;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -128,6 +128,117 @@
|
||||
let socialsContainer = document.createElement('li');
|
||||
socialsContainer.append(socialsClone);
|
||||
menuContainer.append(socialsContainer);
|
||||
|
||||
//
|
||||
// Effets parallax
|
||||
//
|
||||
let ornements, scrollHeight;
|
||||
function getElementsAndPositions() {
|
||||
scrollHeight = document.body.scrollHeight;
|
||||
ornements = {
|
||||
topUnderFirst : {
|
||||
el : document.querySelector('.ornements_top_under > div:first-of-type'),
|
||||
values : window.innerWidth < 1080 ? { left : -45, top : -3 } : { left : -50, top : 1 },
|
||||
mobileValues : { left : -45, top : -3 }
|
||||
},
|
||||
topUnderSecond : {
|
||||
el : document.querySelector('.ornements_top_under > div:last-of-type'),
|
||||
values : window.innerWidth < 1080 ? { left : -60, top : 0 } : { left : -56.5, top : 6 },
|
||||
mobileValues : { left : -60, top : 0 }
|
||||
},
|
||||
topOver : {
|
||||
el : document.querySelector('.ornements_top_over'),
|
||||
values : { left : -40, top : -16 },
|
||||
mobileValues : { right : -55, top : -5 }
|
||||
},
|
||||
bottomFirst : {
|
||||
el : document.querySelector('.ornements_bottom_over > div:first-of-type'),
|
||||
values : window.innerWidth < 1080 ? { left : -8, bottom : -4 } : { left : -20, bottom : 6 },
|
||||
mobileValues : { left : -8, bottom : -4 }
|
||||
},
|
||||
bottomSecond : {
|
||||
el : document.querySelector('.ornements_bottom_over > div:last-of-type'),
|
||||
values : window.innerWidth < 1080 ? { left : 18, bottom : -11 } : { left : 25, bottom : -9 },
|
||||
mobileValues : { left : -3, bottom : -15 }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function moveElementsOnScroll() {
|
||||
ornements.topOver.el.style.left = `${ornements.topOver.values.left * (window.innerWidth / 100) - window.scrollY / 4}px`;
|
||||
ornements.topOver.el.style.top = `${ornements.topOver.values.top * (window.innerHeight / 100) + window.scrollY / 1.1}px`;
|
||||
|
||||
ornements.topUnderFirst.el.style.left = `${ornements.topUnderFirst.values.left * (window.innerWidth / 100) - window.scrollY / 5}px`;
|
||||
ornements.topUnderFirst.el.style.top = `${ornements.topUnderFirst.values.top * (window.innerHeight / 100) + window.scrollY / 1.3}px`;
|
||||
|
||||
ornements.topUnderSecond.el.style.left = `${ornements.topUnderSecond.values.left * (window.innerWidth / 100) - window.scrollY / 8}px`;
|
||||
ornements.topUnderSecond.el.style.top = `${ornements.topUnderSecond.values.top * (window.innerHeight / 100) + window.scrollY / 1.2}px`;
|
||||
|
||||
ornements.bottomFirst.el.style.right = `${ornements.bottomFirst.values.left * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 5)}px`;
|
||||
|
||||
ornements.bottomSecond.el.style.top = `${ornements.bottomFirst.values.bottom * (window.innerHeight / 100) + ((scrollHeight - (window.scrollY + window.innerHeight)) / 2)}px`;
|
||||
}
|
||||
|
||||
function resetElementsPosition() {
|
||||
ornements.topUnderFirst.el.style.left = `${ornements.topUnderFirst.values.left}vw`;
|
||||
ornements.topUnderFirst.el.style.top = `${ornements.topUnderFirst.values.top}vh`;
|
||||
|
||||
ornements.topUnderSecond.el.style.left = `${ornements.topUnderSecond.values.left}vw`;
|
||||
ornements.topUnderSecond.el.style.top = `${ornements.topUnderSecond.values.top}vh`;
|
||||
|
||||
ornements.topOver.el.style.left = `${ornements.topOver.values.left}vw`;
|
||||
ornements.topOver.el.style.top = `${ornements.topOver.values.top}vh`;
|
||||
|
||||
ornements.bottomFirst.el.style.left = "unset",
|
||||
ornements.bottomFirst.el.style.right = `${ornements.bottomFirst.values.left}vw`;
|
||||
ornements.bottomFirst.el.style.bottom = `${ornements.bottomFirst.values.bottom}vh`;
|
||||
|
||||
ornements.bottomSecond.el.style.top = "unset";
|
||||
ornements.bottomSecond.el.style.left = `${ornements.bottomSecond.values.left}vw`;
|
||||
ornements.bottomSecond.el.style.bottom = `${ornements.bottomSecond.values.bottom}vh`;
|
||||
}
|
||||
|
||||
function resetMobileElementsPosition() {
|
||||
ornements.topUnderFirst.el.style.left = `${ornements.topUnderFirst.mobileValues.left}vw`;
|
||||
ornements.topUnderFirst.el.style.top = `${ornements.topUnderFirst.mobileValues.top}vh`;
|
||||
|
||||
ornements.topUnderSecond.el.style.left = `${ornements.topUnderSecond.mobileValues.left}vw`;
|
||||
ornements.topUnderSecond.el.style.top = `${ornements.topUnderSecond.mobileValues.top}vh`;
|
||||
|
||||
ornements.topOver.el.style.left = "unset";
|
||||
ornements.topOver.el.style.right = `${ornements.topOver.mobileValues.right}vw`;
|
||||
ornements.topOver.el.style.top = `${ornements.topOver.mobileValues.top}vh`;
|
||||
|
||||
ornements.bottomFirst.el.style.left = "unset",
|
||||
ornements.bottomFirst.el.style.right = `${ornements.bottomFirst.mobileValues.left}vw`;
|
||||
ornements.bottomFirst.el.style.bottom = `${ornements.bottomFirst.mobileValues.bottom}vh`;
|
||||
|
||||
ornements.bottomSecond.el.style.top = "unset";
|
||||
ornements.bottomSecond.el.style.left = `${ornements.bottomSecond.mobileValues.left}vw`;
|
||||
ornements.bottomSecond.el.style.bottom = `${ornements.bottomSecond.mobileValues.bottom}vh`;
|
||||
}
|
||||
|
||||
function setupResize() {
|
||||
getElementsAndPositions();
|
||||
resetElementsPosition();
|
||||
window.addEventListener("scroll", moveElementsOnScroll);
|
||||
}
|
||||
|
||||
if (document.querySelector('.fullpage:not(.actus)')) {
|
||||
if (window.innerWidth > 760) setupResize();
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
window.scrollTo(0, 0);
|
||||
window.removeEventListener("scroll", moveElementsOnScroll);
|
||||
if (window.innerWidth > 760) {
|
||||
setupResize();
|
||||
} else if (ornements) {
|
||||
resetMobileElementsPosition();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
.paragraph--type--membre-equipe {
|
||||
height: auto;
|
||||
display: grid;
|
||||
grid-template-columns: 30vw 1fr;
|
||||
grid-template-columns: 30vw auto 1fr;
|
||||
grid-auto-rows: auto;
|
||||
margin-bottom: 5vh;
|
||||
> div:first-of-type {
|
||||
@@ -33,21 +33,23 @@
|
||||
}
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
> div:nth-of-type(2),
|
||||
> div:nth-of-type(3) {
|
||||
@include sous_titre();
|
||||
margin-bottom: 2vh;
|
||||
align-self: center;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
> div:nth-of-type(3) {
|
||||
display: none;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
> div:last-of-type {
|
||||
@include main_text_content();
|
||||
grid-column: 2 / 4;;
|
||||
}
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
grid-template-columns: 10vw 1fr;
|
||||
grid-template-columns: 10vw auto 1fr;
|
||||
> div:first-of-type > div {
|
||||
width: 10vw;
|
||||
height: 10vw;
|
||||
|
||||
@@ -56,6 +56,7 @@
|
||||
}
|
||||
|
||||
.home_consultation {
|
||||
position: relative;
|
||||
@include beige_gradient();
|
||||
width: 100%;
|
||||
padding: 4rem 0;
|
||||
@@ -70,6 +71,13 @@
|
||||
max-width: 50vw;
|
||||
}
|
||||
}
|
||||
h2 + div {
|
||||
h2, h3 {
|
||||
@include sous_titre_alt();
|
||||
margin-left: 12.5vw;
|
||||
max-width: 50vw;
|
||||
}
|
||||
}
|
||||
article > div {
|
||||
height: unset !important;
|
||||
p {
|
||||
|
||||
@@ -4,11 +4,12 @@
|
||||
}
|
||||
.retour_actus {
|
||||
padding-top: 3vh;
|
||||
font-size: $sm_font_size;
|
||||
font-weight: 800;
|
||||
color: $teal;
|
||||
padding-left: $x_margin;
|
||||
cursor: pointer;
|
||||
a {
|
||||
font-size: $sm_font_size;
|
||||
font-weight: 800;
|
||||
color: $teal;
|
||||
}
|
||||
}
|
||||
.article_meta {
|
||||
padding-left: $x_margin;
|
||||
|
||||
61
web/themes/erabletheme/scss/partials/_login.scss
Normal file
61
web/themes/erabletheme/scss/partials/_login.scss
Normal file
@@ -0,0 +1,61 @@
|
||||
.login, .user {
|
||||
width: 100vw;
|
||||
height: 50vh;
|
||||
@include beige_gradient();
|
||||
padding-top: 15vh;
|
||||
> h2 {
|
||||
@include sous_titre_alt();
|
||||
text-align: center;
|
||||
}
|
||||
> div {
|
||||
height: 100%;
|
||||
> div:not(.hidden) {
|
||||
// height: 100%;
|
||||
margin-top: 5vh !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
form {
|
||||
font-family: 'Marianne', sans-serif;
|
||||
.form-item {
|
||||
margin: 1.8rem 0;
|
||||
.form-checkbox {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
-webkit-appearance: auto;
|
||||
}
|
||||
.form-required {
|
||||
font-weight: 800;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
.description {
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
}
|
||||
input {
|
||||
border: solid 1px $teal;
|
||||
}
|
||||
.button {
|
||||
font-family: 'Marianne', sans-serif;
|
||||
font-weight: 800;
|
||||
border: solid 1px $teal;
|
||||
background-color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
.button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user {
|
||||
.contextual-region > div {
|
||||
display: flex;
|
||||
font-family: 'Marianne', sans-serif;
|
||||
> h4 {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -6,12 +6,14 @@
|
||||
right: -55vw;
|
||||
top: -5vh;
|
||||
z-index: 0;
|
||||
transition: left 0.05s ease, top 0.05s ease;
|
||||
> div {
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: left 0.05s ease, top 0.05s ease;
|
||||
}
|
||||
> div:first-of-type {
|
||||
background-image: url(../assets/formes/forme_4.png);
|
||||
@@ -29,7 +31,7 @@
|
||||
}
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
left: -40vw;
|
||||
top: -10vw;
|
||||
top: -16vw;
|
||||
> div {
|
||||
transform: scaleX(-1);
|
||||
left: -55vw;
|
||||
@@ -50,12 +52,14 @@
|
||||
}
|
||||
|
||||
.ornements_top_under {
|
||||
pointer-events: none;
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 30vh;
|
||||
left: -30vw;
|
||||
top: 0vw;
|
||||
transition: left 0.05s ease, top 0.05s ease;
|
||||
> div {
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
@@ -63,6 +67,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: scaleX(-1);
|
||||
transition: left 0.05s ease, top 0.05s ease;
|
||||
}
|
||||
> div:first-of-type {
|
||||
background-image: url(../assets/formes/forme_4.png);
|
||||
@@ -248,10 +253,10 @@
|
||||
}
|
||||
|
||||
.ornements_presentation_left {
|
||||
pointer-events: none;
|
||||
position: absolute !important;
|
||||
height: 20vh;
|
||||
width: 20vw;
|
||||
// background-color: red;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
@@ -296,6 +301,7 @@
|
||||
}
|
||||
|
||||
.ornements_presentation_right {
|
||||
pointer-events: none;
|
||||
position: absolute !important;
|
||||
height: 20vh;
|
||||
width: 20vw;
|
||||
@@ -313,12 +319,113 @@
|
||||
> div:first-of-type {
|
||||
background-image: url(../assets/formes/forme_1.png);
|
||||
transform: rotate(-90deg);
|
||||
bottom: -3vh;
|
||||
right: -6vw;
|
||||
right: -15vw;
|
||||
bottom: -6vh;
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
bottom: -3vh;
|
||||
right: -6vw;
|
||||
}
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
background-image: url(../assets/formes/forme_2.png);
|
||||
bottom: -12vh;
|
||||
right: -12vw;
|
||||
}
|
||||
}
|
||||
|
||||
.ornements_consultation_left {
|
||||
pointer-events: none;
|
||||
position: absolute !important;
|
||||
height: 20vh;
|
||||
width: 30vw;
|
||||
bottom: -8vh;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
> div {
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
> div:first-of-type {
|
||||
background-image: url(../assets/formes/forme_4.png);
|
||||
transform: rotate(180deg);
|
||||
width: 200%;
|
||||
height: 120%;
|
||||
left: -30vw;
|
||||
bottom: -10vh;
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
transform: rotate(0deg);
|
||||
bottom: unset;
|
||||
top: -5vh;
|
||||
left: 0;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
background-image: url(../assets/formes/forme_5.png);
|
||||
transform: rotate(180deg);
|
||||
left: -12vw;
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
left: -20vw;
|
||||
top: -5vh;
|
||||
}
|
||||
}
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
top:0;
|
||||
}
|
||||
}
|
||||
|
||||
.ornements_consultation_right {
|
||||
pointer-events: none;
|
||||
position: absolute !important;
|
||||
height: 20vh;
|
||||
width: 30vw;
|
||||
bottom: -8vh;
|
||||
right: 0;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
> div {
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
> div:first-of-type {
|
||||
background-image: url(../assets/formes/forme_1.png);
|
||||
transform: rotate(-90deg);
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
right: -8vw;
|
||||
bottom: -2vh;
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
right: -3vw;
|
||||
bottom: 6vh;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
background-image: url(../assets/formes/forme_3.png);
|
||||
transform: rotate(180deg);
|
||||
right: -4vw;
|
||||
width: 100%;
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
width: 30%;
|
||||
bottom: 3vh;
|
||||
}
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
transform: none;
|
||||
right: -4vw;
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
bottom: unset;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
@@ -13,6 +13,7 @@
|
||||
@import "partials/_articles";
|
||||
@import "partials/_articles_teaser";
|
||||
@import "partials/_ornements.scss";
|
||||
@import "partials/_login.scss";
|
||||
|
||||
/* PAGES */
|
||||
|
||||
|
||||
@@ -30,6 +30,14 @@
|
||||
#}
|
||||
<div{{ attributes }}>
|
||||
<div class="home_consultation">
|
||||
<div class="ornements_consultation_left">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="ornements_consultation_right">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
{% block content %}
|
||||
{{ content }}
|
||||
{% endblock %}
|
||||
|
||||
@@ -84,7 +84,7 @@
|
||||
</div>
|
||||
|
||||
<div class="retour_actus">
|
||||
← Retour aux actualités
|
||||
<a href="/actualites">← Retour aux actualités</a>
|
||||
</div>
|
||||
|
||||
<div class="article_meta">
|
||||
|
||||
102
web/themes/erabletheme/templates/page/page--user--1.html.twig
Normal file
102
web/themes/erabletheme/templates/page/page--user--1.html.twig
Normal file
@@ -0,0 +1,102 @@
|
||||
{#
|
||||
/**
|
||||
* @file
|
||||
* Default theme implementation to display a single page.
|
||||
*
|
||||
* The doctype, html, head and body tags are not in this template. Instead they
|
||||
* can be found in the html.html.twig template in this directory.
|
||||
*
|
||||
* Available variables:
|
||||
*
|
||||
* General utility variables:
|
||||
* - base_path: The base URL path of the Drupal installation. Will usually be
|
||||
* "/" unless you have installed Drupal in a sub-directory.
|
||||
* - is_front: A flag indicating if the current page is the front page.
|
||||
* - logged_in: A flag indicating if the user is registered and signed in.
|
||||
* - is_admin: A flag indicating if the user has permission to access
|
||||
* administration pages.
|
||||
*
|
||||
* Site identity:
|
||||
* - front_page: The URL of the front page. Use this instead of base_path when
|
||||
* linking to the front page. This includes the language domain or prefix.
|
||||
*
|
||||
* Page content (in order of occurrence in the default page.html.twig):
|
||||
* - messages: Status and error messages. Should be displayed prominently.
|
||||
* - node: Fully loaded node, if there is an automatically-loaded node
|
||||
* associated with the page and the node ID is the second argument in the
|
||||
* page's path (e.g. node/12345 and node/12345/revisions, but not
|
||||
* comment/reply/12345).
|
||||
*
|
||||
* Regions:
|
||||
* - page.header: Items for the header region.
|
||||
* - page.primary_menu: Items for the primary menu region.
|
||||
* - page.secondary_menu: Items for the secondary menu region.
|
||||
* - page.highlighted: Items for the highlighted content region.
|
||||
* - page.help: Dynamic help text, mostly for admin pages.
|
||||
* - page.content: The main content of the current page.
|
||||
* - page.sidebar_first: Items for the first sidebar.
|
||||
* - page.sidebar_second: Items for the second sidebar.
|
||||
* - page.footer_top: Items for the footer region.
|
||||
* - page.footer_left: Items for the footer region.
|
||||
* - page.footer_center: Items for the footer region.
|
||||
* - page.footer_right: Items for the footer region.
|
||||
* - page.footer_bottom: Items for the footer region.
|
||||
* - page.breadcrumb: Items for the breadcrumb region.
|
||||
*
|
||||
* @see template_preprocess_page()
|
||||
* @see html.html.twig
|
||||
*
|
||||
* @ingroup themeable
|
||||
*/
|
||||
#}
|
||||
<div class="layout-container">
|
||||
|
||||
<header role="banner">
|
||||
{{ page.header }}
|
||||
</header>
|
||||
|
||||
{{ page.primary_menu }}
|
||||
{{ page.secondary_menu }}
|
||||
|
||||
{{ page.breadcrumb }}
|
||||
|
||||
{{ page.highlighted }}
|
||||
|
||||
{{ page.help }}
|
||||
|
||||
<main role="main">
|
||||
<a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
|
||||
|
||||
<div class="layout-content user">
|
||||
<h2>Connecté à l'espace d'administration</h2>
|
||||
{{ page.content }}
|
||||
</div>{# /.layout-content #}
|
||||
|
||||
{% if page.sidebar_first %}
|
||||
<aside class="layout-sidebar-first" role="complementary">
|
||||
{{ page.sidebar_first }}
|
||||
</aside>
|
||||
{% endif %}
|
||||
|
||||
{% if page.sidebar_second %}
|
||||
<aside class="layout-sidebar-second" role="complementary">
|
||||
{{ page.sidebar_second }}
|
||||
</aside>
|
||||
{% endif %}
|
||||
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo">
|
||||
<section id="footer_top">{{ page.footer_top }}</section>
|
||||
<section id="footer_middle">
|
||||
<section id="footer_left">{{ page.footer_left }}</section>
|
||||
<div id="footer_section">
|
||||
<section id="footer_center">{{ page.footer_center }}</section>
|
||||
<section id="footer_right">{{ page.footer_right }}</section>
|
||||
</div>
|
||||
</section>
|
||||
<section id="footer_bottom">{{ page.bottom }}</section>
|
||||
|
||||
</footer>
|
||||
|
||||
</div>{# /.layout-container #}
|
||||
@@ -0,0 +1,102 @@
|
||||
{#
|
||||
/**
|
||||
* @file
|
||||
* Default theme implementation to display a single page.
|
||||
*
|
||||
* The doctype, html, head and body tags are not in this template. Instead they
|
||||
* can be found in the html.html.twig template in this directory.
|
||||
*
|
||||
* Available variables:
|
||||
*
|
||||
* General utility variables:
|
||||
* - base_path: The base URL path of the Drupal installation. Will usually be
|
||||
* "/" unless you have installed Drupal in a sub-directory.
|
||||
* - is_front: A flag indicating if the current page is the front page.
|
||||
* - logged_in: A flag indicating if the user is registered and signed in.
|
||||
* - is_admin: A flag indicating if the user has permission to access
|
||||
* administration pages.
|
||||
*
|
||||
* Site identity:
|
||||
* - front_page: The URL of the front page. Use this instead of base_path when
|
||||
* linking to the front page. This includes the language domain or prefix.
|
||||
*
|
||||
* Page content (in order of occurrence in the default page.html.twig):
|
||||
* - messages: Status and error messages. Should be displayed prominently.
|
||||
* - node: Fully loaded node, if there is an automatically-loaded node
|
||||
* associated with the page and the node ID is the second argument in the
|
||||
* page's path (e.g. node/12345 and node/12345/revisions, but not
|
||||
* comment/reply/12345).
|
||||
*
|
||||
* Regions:
|
||||
* - page.header: Items for the header region.
|
||||
* - page.primary_menu: Items for the primary menu region.
|
||||
* - page.secondary_menu: Items for the secondary menu region.
|
||||
* - page.highlighted: Items for the highlighted content region.
|
||||
* - page.help: Dynamic help text, mostly for admin pages.
|
||||
* - page.content: The main content of the current page.
|
||||
* - page.sidebar_first: Items for the first sidebar.
|
||||
* - page.sidebar_second: Items for the second sidebar.
|
||||
* - page.footer_top: Items for the footer region.
|
||||
* - page.footer_left: Items for the footer region.
|
||||
* - page.footer_center: Items for the footer region.
|
||||
* - page.footer_right: Items for the footer region.
|
||||
* - page.footer_bottom: Items for the footer region.
|
||||
* - page.breadcrumb: Items for the breadcrumb region.
|
||||
*
|
||||
* @see template_preprocess_page()
|
||||
* @see html.html.twig
|
||||
*
|
||||
* @ingroup themeable
|
||||
*/
|
||||
#}
|
||||
<div class="layout-container">
|
||||
|
||||
<header role="banner">
|
||||
{{ page.header }}
|
||||
</header>
|
||||
|
||||
{{ page.primary_menu }}
|
||||
{{ page.secondary_menu }}
|
||||
|
||||
{{ page.breadcrumb }}
|
||||
|
||||
{{ page.highlighted }}
|
||||
|
||||
{{ page.help }}
|
||||
|
||||
<main role="main">
|
||||
<a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
|
||||
|
||||
<div class="layout-content login">
|
||||
<h2>Connexion à l'espace d'administration</h2>
|
||||
{{ page.content }}
|
||||
</div>{# /.layout-content #}
|
||||
|
||||
{% if page.sidebar_first %}
|
||||
<aside class="layout-sidebar-first" role="complementary">
|
||||
{{ page.sidebar_first }}
|
||||
</aside>
|
||||
{% endif %}
|
||||
|
||||
{% if page.sidebar_second %}
|
||||
<aside class="layout-sidebar-second" role="complementary">
|
||||
{{ page.sidebar_second }}
|
||||
</aside>
|
||||
{% endif %}
|
||||
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo">
|
||||
<section id="footer_top">{{ page.footer_top }}</section>
|
||||
<section id="footer_middle">
|
||||
<section id="footer_left">{{ page.footer_left }}</section>
|
||||
<div id="footer_section">
|
||||
<section id="footer_center">{{ page.footer_center }}</section>
|
||||
<section id="footer_right">{{ page.footer_right }}</section>
|
||||
</div>
|
||||
</section>
|
||||
<section id="footer_bottom">{{ page.bottom }}</section>
|
||||
|
||||
</footer>
|
||||
|
||||
</div>{# /.layout-container #}
|
||||
Reference in New Issue
Block a user