fonds, ajustements carte index projets, ajustements grille index projets, hover carte leaflet projet, ajustements collectifs des projets
This commit is contained in:
@@ -8,68 +8,70 @@
|
||||
&:first-of-type {
|
||||
margin-top: 5vh;
|
||||
}
|
||||
> div:first-of-type {
|
||||
grid-row: 1 / 3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> div {
|
||||
width: 20vw;
|
||||
height: 20vw;
|
||||
position: relative;
|
||||
img {
|
||||
border-radius: 10vw;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
&::after {
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-image: url('/themes/erabletheme/assets/cercle_dessin.svg');
|
||||
background-size: cover;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
> .portrait {
|
||||
grid-row: 1 / 3;
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> div {
|
||||
width: 20vw;
|
||||
height: 20vw;
|
||||
position: relative;
|
||||
img {
|
||||
border-radius: 10vw;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
&::after {
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-image: url('/themes/erabletheme/assets/cercle_dessin.svg');
|
||||
background-size: cover;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> div:nth-of-type(2),
|
||||
> div:nth-of-type(3) {
|
||||
margin-bottom: 2vh;
|
||||
> .prenom,
|
||||
> .nom {
|
||||
align-self: flex-end;
|
||||
margin-bottom: 2vh;
|
||||
@include sous_titre();
|
||||
}
|
||||
|
||||
> div:nth-of-type(3) {
|
||||
> .nom > div {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
> div:last-of-type {
|
||||
> .texte {
|
||||
grid-column: 2 / 4;
|
||||
@include main_text_content();
|
||||
> div > p {
|
||||
p {
|
||||
margin-top: 0 !important;
|
||||
padding-left: 0;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: $breakpoint_tablet) {
|
||||
grid-template-columns: 10vw auto 1fr;
|
||||
> div:first-of-type > div {
|
||||
> .portrait > div > div {
|
||||
width: 10vw;
|
||||
height: 10vw;
|
||||
border-radius: 5vw;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
> .prenom {
|
||||
padding-left: 3vw;
|
||||
}
|
||||
|
||||
> div:last-of-type > div > p {
|
||||
padding-left: 3vw;
|
||||
> .texte p {
|
||||
padding-left: 3vw !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
@@ -67,6 +67,8 @@
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 20vh;
|
||||
margin-bottom: 20vh !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -138,6 +140,8 @@
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
margin-left: 25vw;
|
||||
width: calc(100% - 50vw);
|
||||
margin-top: 10vh;
|
||||
margin-bottom: 10vh;
|
||||
}
|
||||
> h2 {
|
||||
@include main_title();
|
||||
|
@@ -6,9 +6,12 @@
|
||||
flex-direction: row;
|
||||
}
|
||||
> header {
|
||||
margin-right: 5vw;
|
||||
//margin-right: 5vw;
|
||||
padding: 0 3vw;
|
||||
@include main_text_content();
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
max-width: 55vw;
|
||||
}
|
||||
h1, h2, h3,
|
||||
h4, h5, h6 {
|
||||
padding: 0 !important;
|
||||
@@ -24,6 +27,9 @@
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
.projets_intro {
|
||||
display: none;
|
||||
@@ -31,12 +37,17 @@
|
||||
#sites-map-container {
|
||||
width: 70%;
|
||||
padding: 0 !important;
|
||||
padding-bottom: 5vh !important;
|
||||
@media screen and (min-width: $breakpoint_tablet) {
|
||||
width: 50%;
|
||||
}
|
||||
@media (min-width: $breakpoint_desktop) {
|
||||
margin-right: 8vw !important;
|
||||
width: 85%;
|
||||
//margin-right: 8vw !important;
|
||||
margin: 0 2vw;
|
||||
margin-right: 3vw;
|
||||
margin-top: 5vh;
|
||||
padding-bottom: 0;
|
||||
//width: 85%;
|
||||
}
|
||||
#popup {
|
||||
h3 {
|
||||
@@ -67,29 +78,31 @@
|
||||
display: grid;
|
||||
grid-template-columns: 0.5fr 1fr;
|
||||
grid-template-rows: repeat(4, auto);
|
||||
grid-column-gap: 1rem;
|
||||
> .views-field-field-diaporama {
|
||||
grid-column: 1;
|
||||
grid-row: 1/5;
|
||||
grid-row: 1/4;
|
||||
align-self: start;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
> .field-content {
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
> a {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
mask-image: url('/themes/erabletheme/assets/shapes/shape_1.svg');
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 100% auto;
|
||||
mask-position: center;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
mask-image: url('/themes/erabletheme/assets/shapes/shape_1.svg');
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 100% 100%;
|
||||
mask-position: center;
|
||||
object-fit: cover;
|
||||
width: 170%;
|
||||
height: auto;
|
||||
//object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -98,6 +111,7 @@
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
margin-bottom: 1rem;
|
||||
margin-left: -1rem;
|
||||
a {
|
||||
color: $teal;
|
||||
}
|
||||
@@ -109,6 +123,7 @@
|
||||
font-size: 1.1rem !important;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.3;
|
||||
font-size: $m_font_size !important;
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
@@ -118,14 +133,16 @@
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
margin-bottom: 1rem;
|
||||
margin-left: -0.5rem;
|
||||
@include main_text_content();
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
> .views-field-field-th {
|
||||
grid-column: 2;
|
||||
grid-column: 1/3;
|
||||
grid-row: 4;
|
||||
padding-left: 1rem;
|
||||
ul {
|
||||
li {
|
||||
display: inline-block;
|
||||
@@ -192,6 +209,11 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.intro {
|
||||
> div > div:first-of-type {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.diapo {
|
||||
margin-top: 3rem;
|
||||
margin-left: calc($x_margin * 3);
|
||||
@@ -278,7 +300,8 @@
|
||||
}
|
||||
.carte {
|
||||
width: auto;
|
||||
margin: 4rem $x_margin;
|
||||
margin: 0 $x_margin;
|
||||
margin-top: 4rem;
|
||||
.leaflet-pane {
|
||||
path {
|
||||
stroke: $fluo_green;
|
||||
@@ -287,11 +310,34 @@
|
||||
fill-opacity: 0.2;
|
||||
}
|
||||
}
|
||||
#leaflet-popup {
|
||||
position: fixed;
|
||||
padding: 0.3rem 0.8rem;
|
||||
background-color: white;
|
||||
font-size: $sm_font_size !important;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
@include main_text_content();
|
||||
}
|
||||
}
|
||||
.libelles-carte {
|
||||
display: none;
|
||||
}
|
||||
.legende-carte {
|
||||
> div > div:first-of-type {
|
||||
display: none;
|
||||
}
|
||||
p {
|
||||
margin-top: 1rem !important;
|
||||
font-size: 0.8rem !important;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
.chronologie {
|
||||
display: none;
|
||||
}
|
||||
.equipe {
|
||||
margin-top: 4rem;
|
||||
> div {
|
||||
> div:first-of-type {
|
||||
margin-left: $x_margin;
|
||||
@@ -313,11 +359,11 @@
|
||||
> div {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-row-gap: 1rem;
|
||||
grid-column-gap: 4rem;
|
||||
grid-row-gap: 2rem;
|
||||
grid-column-gap: 1.5rem;
|
||||
width: 75%;
|
||||
@media screen and (min-width: $breakpoint_tablet) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
width: unset;
|
||||
}
|
||||
> div {
|
||||
@@ -332,44 +378,36 @@
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-column-gap: 0;
|
||||
flex-direction: column;
|
||||
> div:first-of-type {
|
||||
grid-column: 1 / span 2;
|
||||
grid-row: 1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
> div {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
> img {
|
||||
width: 5rem;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
> .portrait {
|
||||
display: none;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
> .nom {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-left: 0.3rem;
|
||||
color: black;
|
||||
font-size: $m_font_size;
|
||||
> div {
|
||||
padding-left: 0.2rem !important;
|
||||
}
|
||||
}
|
||||
> div:nth-of-type(3) {
|
||||
> .prenom {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: black;
|
||||
font-size: $m_font_size;
|
||||
}
|
||||
> div:nth-of-type(4) {
|
||||
> .texte {
|
||||
margin-top: 0.5rem;
|
||||
grid-column: 1 / span 2;
|
||||
grid-row: 3;
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: $m_font_size;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -391,7 +429,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#block-erabletheme-views-block-projets-block-1 {
|
||||
// display: none;
|
||||
}
|
||||
|
@@ -5,9 +5,13 @@
|
||||
margin-top: calc(10vh + 3rem);
|
||||
}
|
||||
} */
|
||||
|
||||
body {
|
||||
background-color: lightgrey;
|
||||
//background-color: lightgrey;
|
||||
> div:first-of-type {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.layout-container {
|
||||
|
67
web/themes/erabletheme/scss/partials/_background.scss
Normal file
67
web/themes/erabletheme/scss/partials/_background.scss
Normal file
@@ -0,0 +1,67 @@
|
||||
#background {
|
||||
z-index: -1;
|
||||
img {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
#bg-top {
|
||||
#bg-1 {
|
||||
top: 5vh;
|
||||
left: 0;
|
||||
}
|
||||
#bg-3 {
|
||||
top: 13vh;
|
||||
left: -10vw;
|
||||
}
|
||||
#bg-2 {
|
||||
top: 8vh;
|
||||
left: -28vw;
|
||||
}
|
||||
#bg-4 {
|
||||
top: 18vh;
|
||||
right: -45vw;
|
||||
}
|
||||
|
||||
}
|
||||
#bg-middle {
|
||||
#bg-5 {
|
||||
top: -20vh;
|
||||
right: -10vw;
|
||||
}
|
||||
#bg-6 {
|
||||
top: 5vh;
|
||||
right: -5vw;
|
||||
}
|
||||
#bg-7 {
|
||||
width: 85vw;
|
||||
top: 10vh;
|
||||
right: 0vw;
|
||||
}
|
||||
#bg-8 {
|
||||
width: 80vw;
|
||||
top: 45vh;
|
||||
left: -40vw;
|
||||
}
|
||||
#bg-12 {
|
||||
width: 105vw;
|
||||
left: -5vw;
|
||||
top: 30vh;
|
||||
}
|
||||
}
|
||||
#bg-bottom {
|
||||
#bg-11 {
|
||||
top: -70vh;
|
||||
right: -5vw;
|
||||
}
|
||||
#bg-10 {
|
||||
width: 110vw;
|
||||
top: -150vh;
|
||||
left: 5vw;
|
||||
}
|
||||
#bg-4 {
|
||||
transform: scaleX(-1);
|
||||
top: -40vh;
|
||||
left: -45vw;
|
||||
}
|
||||
}
|
||||
}
|
@@ -227,8 +227,10 @@ body.toolbar-fixed header[role="banner"] {
|
||||
opacity: 1;
|
||||
}
|
||||
> li:nth-of-type(1),
|
||||
> li:nth-of-type(2),
|
||||
> li:nth-of-type(6) {
|
||||
> li:nth-of-type(6),
|
||||
> li:nth-of-type(7),
|
||||
> li:nth-of-type(8),
|
||||
> li:nth-of-type(9) {
|
||||
border-bottom: solid 1px white;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
@@ -13,6 +13,7 @@
|
||||
@import "partials/_articles";
|
||||
@import "partials/_articles_teaser";
|
||||
@import "partials/_forms.scss";
|
||||
@import "partials/_background.scss";
|
||||
|
||||
/* PAGES */
|
||||
|
||||
|
Reference in New Issue
Block a user