valentin_le_moign/figureslibres.cc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modifs couleurs etc

Browse Source
This commit is contained in:
Valentin
2024-03-25 23:22:38 +01:00
parent 6af420e9bb
commit 66bd5cb3d9
8 changed files with 733 additions and 341 deletions
Download Patch File Download Diff File Expand all files Collapse all files
user/themes/figureslibres-v2/css/theme.css
+221 -86
View File
@@ -179,6 +179,7 @@ body {
overflow-x: hidden; overflow-x: hidden;
color: #0e1229; color: #0e1229;
background-color: #f5f5f5; background-color: #f5f5f5;
transition: background-color 0.4s ease-out;
} }
body header { body header {
position: fixed; position: fixed;
@@ -189,11 +190,12 @@ body header {
} }
body header #nav-container { body header #nav-container {
height: 7vh; height: 7vh;
background-color: #f5f5f5;
padding: 0 3vw; padding: 0 3vw;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background-color: #f5f5f5;
transition: background-color 0.4s ease-out;
} }
body header #nav-container h1 { body header #nav-container h1 {
cursor: pointer; cursor: pointer;
@@ -211,7 +213,7 @@ body header nav {
display: flex; display: flex;
align-items: center; align-items: center;
opacity: 0; opacity: 0;
transition: opacity 0.4s ease-out, top 0.7s ease-out; transition: opacity 0.4s ease-out, top 0.7s ease-out, background-color 0.4s ease-out;
} }
body header nav #crossMenu { body header nav #crossMenu {
position: absolute; position: absolute;
@@ -253,6 +255,11 @@ body header:after {
width: 100%; width: 100%;
height: 4vh; height: 4vh;
background: linear-gradient(to bottom, #f5f5f5, #f5f5f500); background: linear-gradient(to bottom, #f5f5f5, #f5f5f500);
opacity: 1;
transition: opacity 0.4s ease-out;
}
body header.plain_bg:after {
opacity: 0;
} }
body main { body main {
position: relative; position: relative;
@@ -274,7 +281,7 @@ body main .content h2 a, body main .content p a, body main .content ul a {
transition: text-underline-offset 0.4s ease-out; transition: text-underline-offset 0.4s ease-out;
} }
body main .content h2 a:hover, body main .content p a:hover, body main .content ul a:hover { body main .content h2 a:hover, body main .content p a:hover, body main .content ul a:hover {
text-underline-offset: 0.15em; text-underline-offset: 0.15em !important;
} }
body main .content .projet-card { body main .content .projet-card {
cursor: pointer; cursor: pointer;
@@ -331,6 +338,9 @@ body main #index-content {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
body main #index-content .animateText {
text-decoration: underline 1px;
}
body main #index-content #loader-index { body main #index-content #loader-index {
position: absolute; position: absolute;
height: 80vh; height: 80vh;
@@ -362,14 +372,10 @@ body main #index-content #main-p-index #culturelle {
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
} }
body main #index-content #main-p-index #logicielslibres {
font-family: Rumeur, sans-serif;
font-weight: bold;
}
body main #index-content #extrait-projets > div { body main #index-content #extrait-projets > div {
max-height: 0vh; max-height: 0vh;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: repeat(2, 1fr);
gap: 0px 20px; gap: 0px 20px;
align-items: flex-start; align-items: flex-start;
} }
@@ -433,7 +439,7 @@ body main #index-content #second-p-index #projets {
body main #index-content #commanditaires-grid { body main #index-content #commanditaires-grid {
width: 85vw; width: 85vw;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: repeat(2, 1fr);
gap: 25px 40px; gap: 25px 40px;
align-items: center; align-items: center;
} }
@@ -472,28 +478,45 @@ body main #projets-index #filter-index {
text-align: center; text-align: center;
width: 100%; width: 100%;
margin-bottom: 30px; margin-bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
} }
body main #projets-index #filter-index .filter-button { body main #projets-index #filter-index .filter-button {
cursor: pointer; cursor: pointer;
filter: grayscale(1);
opacity: 0.4; opacity: 0.4;
transition: opacity 0.4s ease-out; padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.95em;
min-height: 1.25em;
display: inline-block;
transition: opacity 0.4s ease-out, filter 0.4s ease-out;
}
body main #projets-index #filter-index .filter-button:hover {
filter: grayscale(0) !important;
opacity: 1 !important;
} }
body main #projets-index #filter-index p { body main #projets-index #filter-index p {
margin-bottom: 0; margin-bottom: 1rem;
} }
body main #projets-index #filter-index #publique-filter { body main #projets-index #filter-index #publique-filter {
font-family: PlayfairDisplay, serif; font-family: PlayfairDisplay, serif;
font-style: italic; font-style: italic;
background-color: #ffaeab;
} }
body main #projets-index #filter-index #sociale-filter { body main #projets-index #filter-index #sociale-filter {
font-family: ManifontGrotesk, sans-serif; font-family: ManifontGrotesk, sans-serif;
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
background-color: #71ff94;
} }
body main #projets-index #filter-index #culturelle-filter { body main #projets-index #filter-index #culturelle-filter {
font-family: Avara, serif; font-family: Avara, serif;
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
background-color: #feff74;
} }
body main #projets-index hr { body main #projets-index hr {
width: 66%; width: 66%;
@@ -561,31 +584,18 @@ body main #reader #header-project {
position: fixed; position: fixed;
height: 6vh; height: 6vh;
width: 100%; width: 100%;
background-color: #f5f5f5; top: -4vh;
top: -9vh;
transition: top 0.4s ease-out; transition: top 0.4s ease-out;
} }
body main #reader #header-project .info-project-publique span {
font-family: PlayfairDisplay, serif;
font-style: italic;
}
body main #reader #header-project .info-project-sociale span {
font-family: ManifontGrotesk, sans-serif;
font-weight: bold;
font-style: italic;
}
body main #reader #header-project .info-project-culturelle span {
font-family: Avara, serif;
font-weight: bold;
font-style: italic;
}
body main #reader #header-project h2 { body main #reader #header-project h2 {
margin: 0;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
width: 80%; width: 100%;
height: 100%;
padding: 3px 0; padding: 3px 0;
margin-top: 1.8vh; padding-top: 1.8vh;
margin-left: 3vw; padding-left: 3vw;
font-size: 1.2em; font-size: 1.2em;
} }
body main #reader #header-project h2 span { body main #reader #header-project h2 span {
@@ -598,6 +608,29 @@ body main #reader #header-project h2 .scrollText:after {
padding-left: 20px; padding-left: 20px;
white-space: nowrap; white-space: nowrap;
} }
body main #reader #header-project h2.info-project-publique {
background: linear-gradient(to bottom, #ffaeab, #ffaeab 60%, rgba(255, 174, 171, 0));
}
body main #reader #header-project h2.info-project-publique span {
font-family: PlayfairDisplay, serif;
font-style: italic;
}
body main #reader #header-project h2.info-project-sociale {
background: linear-gradient(to bottom, #71ff94, #71ff94 60%, rgba(113, 255, 148, 0));
}
body main #reader #header-project h2.info-project-sociale span {
font-family: ManifontGrotesk, sans-serif;
font-weight: bold;
font-style: italic;
}
body main #reader #header-project h2.info-project-culturelle {
background: linear-gradient(to bottom, #feff74, #feff74 60%, rgba(254, 255, 116, 0));
}
body main #reader #header-project h2.info-project-culturelle span {
font-family: Avara, serif;
font-weight: bold;
font-style: italic;
}
body main #reader #header-project #gradient-long-title { body main #reader #header-project #gradient-long-title {
position: absolute; position: absolute;
height: 4vh; height: 4vh;
@@ -606,14 +639,6 @@ body main #reader #header-project #gradient-long-title {
right: 16.5%; right: 16.5%;
background: linear-gradient(to left, #f5f5f5, #f5f5f500); background: linear-gradient(to left, #f5f5f5, #f5f5f500);
} }
body main #reader #header-project:after {
position: absolute;
top: 6vh;
content: "";
height: 4vh;
width: 100%;
background: linear-gradient(#f5f5f5, rgba(245, 245, 245, 0));
}
body main #reader #header-project + a { body main #reader #header-project + a {
z-index: 2; z-index: 2;
} }
@@ -624,13 +649,54 @@ body main #reader #close-project {
width: calc(25px - 5px); width: calc(25px - 5px);
height: calc(23px - 5px); height: calc(23px - 5px);
} }
body main #reader #cover-image-mobile { body main #reader figure#cover-image-mobile {
margin-top: -2vh; margin-top: -2vh;
margin-bottom: 2vh; margin-bottom: 2vh;
} }
body main #reader #cover-image { body main #reader figure#cover-image {
display: none; display: none;
} }
body main #reader figure#cover-image-mobile,
body main #reader figure#cover-image {
position: relative;
margin-top: 3vh;
}
body main #reader figure#cover-image-mobile img,
body main #reader figure#cover-image img {
filter: grayscale(0);
transition: filter 0.4s ease-out;
mix-blend-mode: normal;
}
body main #reader figure#cover-image-mobile:hover img,
body main #reader figure#cover-image:hover img {
filter: grayscale(1);
mix-blend-mode: darken;
}
body main #reader figure#cover-image-mobile::before,
body main #reader figure#cover-image::before {
position: absolute;
content: "";
height: 100%;
width: 100%;
opacity: 0;
transition: opacity 0.4s ease-out;
}
body main #reader figure#cover-image-mobile:hover::before,
body main #reader figure#cover-image:hover::before {
opacity: 1;
}
body main #reader figure#cover-image-mobile.sociale:hover::before,
body main #reader figure#cover-image.sociale:hover::before {
background-color: #71ff94;
}
body main #reader figure#cover-image-mobile.culturelle:hover::before,
body main #reader figure#cover-image.culturelle:hover::before {
background-color: #feff74;
}
body main #reader figure#cover-image-mobile.publique:hover::before,
body main #reader figure#cover-image.publique:hover::before {
background-color: #ffaeab;
}
body main #reader #info-project { body main #reader #info-project {
align-self: flex-start; align-self: flex-start;
} }
@@ -664,8 +730,38 @@ body main #reader #project-description {
margin-top: 2.2vh; margin-top: 2.2vh;
} }
body main #reader #project-images-grid figure { body main #reader #project-images-grid figure {
position: relative;
margin-top: 3vh; margin-top: 3vh;
} }
body main #reader #project-images-grid figure img {
filter: grayscale(0);
transition: filter 0.4s ease-out;
mix-blend-mode: normal;
}
body main #reader #project-images-grid figure:hover img {
filter: grayscale(1);
mix-blend-mode: darken;
}
body main #reader #project-images-grid figure::before {
position: absolute;
content: "";
height: 100%;
width: 100%;
opacity: 0;
transition: opacity 0.4s ease-out;
}
body main #reader #project-images-grid figure:hover::before {
opacity: 1;
}
body main #reader #project-images-grid figure:hover.sociale::before {
background-color: #71ff94;
}
body main #reader #project-images-grid figure:hover.publique::before {
background-color: #ffaeab;
}
body main #reader #project-images-grid figure:hover.culturelle::before {
background-color: #feff74;
}
body main #reader hr { body main #reader hr {
margin-bottom: 2vh; margin-bottom: 2vh;
width: 66%; width: 66%;
@@ -688,12 +784,15 @@ body main #reader #related-pages h3 {
margin-top: 2vh; margin-top: 2vh;
} }
body main #reader #related-pages #related-grid { body main #reader #related-pages #related-grid {
margin-bottom: 5vh;
width: 80%; width: 80%;
} }
body main #reader #related-pages #related-grid .card-displayed { body main #reader #related-pages #related-grid .card-displayed {
margin-top: 1.5vh; margin-top: 1.5vh;
} }
body main #reader #related-pages p {
margin-top: 3vh;
margin-bottom: 5vh;
}
body main #reader .swiper { body main #reader .swiper {
position: fixed; position: fixed;
top: 0; top: 0;
@@ -721,8 +820,8 @@ body main #reader .swiper .swiper-wrapper .swiper-slide {
justify-content: center; justify-content: center;
} }
body main #reader .swiper .swiper-wrapper .swiper-slide img { body main #reader .swiper .swiper-wrapper .swiper-slide img {
max-height: 100%; max-height: 90%;
max-width: 100%; max-width: 90%;
object-fit: cover; object-fit: cover;
} }
body main #reader .swiper .swiper-button-next, body main #reader .swiper .swiper-button-prev { body main #reader .swiper .swiper-button-next, body main #reader .swiper .swiper-button-prev {
@@ -769,22 +868,6 @@ body footer p a {
body header nav { body header nav {
height: 100vh; height: 100vh;
} }
body .content .card-displayed figure a figcaption {
opacity: 0;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
padding: 10px;
background: #0e1229;
color: #f5f5f5;
font-size: 0.75em;
border-radius: 0 0 10px 10px;
}
body .card-displayed:hover figure a figcaption {
opacity: 1;
}
body main #index-content { body main #index-content {
min-height: 80vh; min-height: 80vh;
display: flex; display: flex;
@@ -792,12 +875,12 @@ body footer p a {
justify-content: center; justify-content: center;
} }
body main #index-content #extrait-projets > div { body main #index-content #extrait-projets > div {
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: repeat(2, 1fr);
} }
body main #index-content #extrait-projets > div div:last-of-type { body main #index-content #extrait-projets > div div:last-of-type {
overflow-x: hidden; overflow-x: hidden;
text-align: right; text-align: right;
grid-column-end: span 4; grid-column-end: span 2;
} }
body main #index-content #extrait-projets > div div:last-of-type p { body main #index-content #extrait-projets > div div:last-of-type p {
display: inline-block; display: inline-block;
@@ -811,13 +894,13 @@ body footer p a {
} }
body main #index-content #commanditaires-grid { body main #index-content #commanditaires-grid {
width: auto; width: auto;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-columns: repeat(5, 1fr);
} }
body main #projets-index { body main #projets-index {
width: auto; width: auto;
} }
body main #projets-index #filter-index { body main #projets-index #filter-index {
display: flex; justify-content: start;
flex-direction: row; flex-direction: row;
max-width: 100%; max-width: 100%;
} }
@@ -831,15 +914,13 @@ body footer p a {
body main #projets-index .projets-grid { body main #projets-index .projets-grid {
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: repeat(3, 1fr);
gap: 0 10px; gap: 0 10px;
align-items: start;
} }
body main #projets-index .projets-grid > div { body main #projets-index .projets-grid > div {
width: 100%; width: 100%;
} }
body main #reader #header-project h2 {
margin-top: 1vh;
}
body main #reader #close-project { body main #reader #close-project {
width: 12px; width: 12px;
height: 10px; height: 10px;
@@ -869,7 +950,7 @@ body footer p a {
body main #reader #project-images-grid { body main #reader #project-images-grid {
width: auto; width: auto;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: repeat(2, 1fr);
grid-gap: 1em; grid-gap: 1em;
} }
body main #reader #project-images-grid figure { body main #reader #project-images-grid figure {
@@ -885,19 +966,22 @@ body footer p a {
body main #reader #project-images-grid figure:last-child:nth-child(odd) { body main #reader #project-images-grid figure:last-child:nth-child(odd) {
grid-column: span 2; grid-column: span 2;
} }
body main #reader #related-grid { body main #reader #related-pages #related-grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: repeat(3, 1fr);
width: auto !important; width: auto !important;
grid-column-gap: 10%; grid-column-gap: 10%;
margin-bottom: 6vh !important;
} }
body main #reader #related-grid .card-displayed { body main #reader #related-pages #related-grid .card-displayed {
margin-top: 2vh !important; margin-top: 2vh !important;
width: 100%;
} }
body main #reader #related-grid .card-displayed figure { body main #reader #related-pages #related-grid .card-displayed figure {
min-height: 80px !important; min-height: 80px !important;
min-width: 15vw; }
body main #reader #related-pages p {
margin-top: 3vh;
margin-bottom: 6vh !important;
} }
body main #reader .swiper .swiper-button-next, body main #reader .swiper .swiper-button-prev { body main #reader .swiper .swiper-button-next, body main #reader .swiper .swiper-button-prev {
bottom: unset; bottom: unset;
@@ -928,11 +1012,11 @@ body footer p a {
display: none; display: none;
} }
body header nav { body header nav {
background-color: #f5f5f5;
position: relative; position: relative;
top: 0; top: 0;
opacity: 1; opacity: 1;
height: 7vh; height: 7vh;
background-color: #f5f5f5;
justify-content: center; justify-content: center;
} }
body header nav #crossMenu { body header nav #crossMenu {
@@ -989,18 +1073,52 @@ body footer p a {
justify-content: center; justify-content: center;
margin-top: calc(7vh + 2vh + 30px); margin-top: calc(7vh + 2vh + 30px);
} }
body main #index-content > #extrait-projets figure a figcaption {
background-color: #0e1229;
color: #f5f5f5;
}
body main .content { body main .content {
width: 65vw; width: 65vw;
padding: 0; padding: 0;
} }
body main .content .card-displayed figure a figcaption {
opacity: 0;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
padding: 10px;
color: #0e1229;
font-size: 0.75em;
border-radius: 0 0 10px 10px;
}
body main .content .culturelle-card figure a figcaption {
background-color: #feff74;
}
body main .content .sociale-card figure a figcaption {
background-color: #71ff94;
}
body main .content .publique-card figure a figcaption {
background-color: #ffaeab;
}
body main .card-displayed:hover figure a figcaption {
opacity: 1;
}
body main #index-content #extrait-projets > div {
grid-template-columns: repeat(4, 1fr);
}
body main #index-content #extrait-projets > div div:last-of-type {
grid-column-end: span 4;
}
body main #index-content #commanditaires-grid { body main #index-content #commanditaires-grid {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-columns: repeat(8, 1fr);
} }
body main #projets-index { body main #projets-index {
width: 65vw; width: 65vw;
} }
body main #projets-index #filter-index .filter-button:hover { body main #projets-index .projets-grid {
opacity: 1 !important; grid-template-columns: repeat(4, 1fr);
} }
body main #text-content .text-item { body main #text-content .text-item {
width: 70%; width: 70%;
@@ -1017,30 +1135,37 @@ body footer p a {
} }
body main #reader { body main #reader {
margin-top: -10vh; margin-top: -10vh;
width: 40vw; width: 60vw;
} }
body main #reader #header-project { body main #reader #header-project {
width: 100%; width: 100%;
} }
body main #reader #header-project h2 { body main #reader #header-project h2 {
width: 35vw; width: 100%;
margin-left: 29.5vw;
padding: 0; padding: 0;
} }
body main #reader #header-project h2 span { body main #reader #header-project h2 span {
padding-left: 20vw;
padding-top: 1.4vh;
height: 1.25em; height: 1.25em;
padding-top: 5px;
} }
body main #reader #header-project #gradient-long-title { body main #reader #header-project #gradient-long-title {
right: 34.2vw; right: 34.2vw;
} }
body main #reader #cover-image {
width: 66.666%;
box-sizing: border-box;
margin: 0 10vw;
}
body main #reader #info-project { body main #reader #info-project {
width: 100%; width: 100%;
box-sizing: border-box;
padding: 0 10vw;
margin-top: 2vh; margin-top: 2vh;
margin-bottom: 4vh; margin-bottom: 4vh;
} }
body main #reader #info-project h2 { body main #reader #info-project h2 {
min-width: 100%; min-width: 95%;
border-right: solid 1px rgba(0, 0, 0, 0.4); border-right: solid 1px rgba(0, 0, 0, 0.4);
margin-top: 0; margin-top: 0;
margin-bottom: 1vh; margin-bottom: 1vh;
@@ -1054,17 +1179,18 @@ body footer p a {
body main #reader #close-project { body main #reader #close-project {
width: 25px; width: 25px;
height: 23px; height: 23px;
top: 6vh; top: calc(4vh + 11.5px);
right: calc(30vw - 25px - 2vw); right: calc(30vw - 25px - 2vw);
transform: scale(1, 1); transform: scale(1, 1);
transition: top 0.4s ease-out, right 0.4s ease-out, transform 0.4s ease-out; transition: top 0.4s ease-out, right 0.4s ease-out, transform 0.4s ease-out;
} }
body main #reader .scrolled-cross { body main #reader .scrolled-cross {
top: 1.4vh !important; top: 1.4vh !important;
right: 30vw !important; right: 20vw !important;
transform: scale(0.7, 0.7) !important; transform: scale(0.7, 0.7) !important;
} }
body main #reader #project-description { body main #reader #project-description {
padding: 0 10vw;
align-self: flex-start; align-self: flex-start;
} }
body main #reader #project-images-grid { body main #reader #project-images-grid {
@@ -1081,11 +1207,15 @@ body footer p a {
margin-top: 0; margin-top: 0;
} }
body main #reader #related-pages #related-grid { body main #reader #related-pages #related-grid {
width: 100%;
grid-column-gap: 3%; grid-column-gap: 3%;
} }
body main #reader #related-pages #related-grid div figure { body main #reader #related-pages #related-grid div figure {
min-width: 10vw; min-width: 10vw;
} }
body main #reader #related-pages p {
align-self: flex-end;
}
body footer { body footer {
height: 4vh; height: 4vh;
width: auto; width: auto;
@@ -1110,7 +1240,12 @@ body footer p a {
height: 54px; height: 54px;
} }
body main #projets-index .projets-grid { body main #projets-index .projets-grid {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr; column-gap: 2em;
grid-template-columns: repeat(4, 1fr);
}
body main #reader #related-pages {
padding: 0 10vw;
box-sizing: border-box;
} }
} }
user/themes/figureslibres-v2/css/theme.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
user/themes/figureslibres-v2/js/script.js
+184 -50
View File
@@ -32,7 +32,7 @@ let isMobileNavOpen = false,
// MAIN FUNCTIONS // MAIN FUNCTIONS
function initBarba() { function initBarba() {
barba.init({ barba.init({
prefetchIgnore: true, //prefetchIgnore: true,
transitions: [{ transitions: [{
name: 'opacity-transition', name: 'opacity-transition',
leave(data) { leave(data) {
@@ -51,13 +51,12 @@ function initBarba() {
if (isMobileNavOpen) { toggleMobileNav() } if (isMobileNavOpen) { toggleMobileNav() }
if ($(data.current.container).attr('id') == 'projets-index') { resetFilters() } if ($(data.current.container).attr('id') == 'projets-index') { resetFilters() }
if ($(data.current.container).attr('id') == 'text-content' ) { hideFooter() } if ($(data.current.container).attr('id') == 'text-content' ) { hideFooter() }
setBgColor(color_bg)
}) })
barba.hooks.afterLeave((data) => { barba.hooks.afterLeave((data) => {
if ($(data.current.container).attr('id') == 'reader') { if ($(data.current.container).attr('id') == 'reader' && $(data.next.container).attr('id') != 'reader') {
if ($(data.next.container).attr('id') != 'reader') { leaveReader()
leaveReader() $('#nav-container h1').empty().append(currentPage.text())
$('#nav-container h1').empty().append(currentPage.text())
}
} }
}) })
barba.hooks.beforeEnter((data) => { barba.hooks.beforeEnter((data) => {
@@ -100,7 +99,7 @@ function initBarba() {
} }
if ($(data.next.container).attr('id') == 'reader') { if ($(data.next.container).attr('id') == 'reader') {
displayReader() displayReader()
} }
}) })
} }
@@ -163,6 +162,22 @@ function refreshUiOnResize() {
hideFooterOnResize() hideFooterOnResize()
hideMobileNavOnResize() hideMobileNavOnResize()
checkTitleAutoScroll() checkTitleAutoScroll()
function menuViewJustChanged(callback) {
let prevDeviceIsDesktop = isDesktopDevice;
setTimeout(() => callback(!(isDesktopDevice === prevDeviceIsDesktop)), 50);
}
menuViewJustChanged(result => {
if (result) {
currentColor = $('body').css('background-color')
if (isDesktopDevice) {
$('nav').css('background-color', currentColor)
$('#nav-container').css('background-color', color_bg)
} else {
$('nav').css('background-color', color_main)
$('#nav-container').css('background-color', currentColor)
}
}
})
} }
function triggerLazyLoading() { function triggerLazyLoading() {
@@ -237,32 +252,82 @@ function changeMobileTitle() {
$('#nav-container h1').empty().append(currentPage.text()) $('#nav-container h1').empty().append(currentPage.text())
} }
const color_publique = "#ffaeab";
const color_sociale = "#71ff94";
const color_culturelle = "#feff74";
const color_commanditaire = "#fabbde";
const color_figureslibres = "#82f8ee";
const color_projets = "#4bffc9";
const color_bg = "#f5f5f5";
const color_main = "#0e1229";
let isExtraitOpen = false,
isCommanditairesOpen = false,
quelExtrait
function setBgColor(color) {
$('body').css('background-color', color);
if (isDesktopDevice) {
$('nav').css('background-color', color)
} else {
$('#nav-container').css('background-color', color)
}
if (color === color_bg) {
$('header').removeClass('plain_bg');
} else {
$('header').addClass('plain_bg');
}
}
// index interaction // index interaction
function toggleIndexContent(closeEverything) { function toggleIndexContent(closeEverything) {
let isTextOpen = false, let isTextOpen = false
isCommanditairesOpen = false,
isExtraitOpen = false,
quelExtrait
if (closeEverything) { if (closeEverything) {
closeEverything() closeEverything()
} }
$('#second-p-index, #commanditaires-grid, #extrait-publique, #extrait-social, #extrait-culturelle').children().fadeOut() $('#figureslibres, #publique, #sociale, #culturelle, #commanditaires, #projets')
.on('mouseleave', () => !isExtraitOpen && !isCommanditairesOpen ? setBgColor(color_bg) : null)
$('#figureslibres')
.on('mouseenter', () => !isExtraitOpen && !isCommanditairesOpen ? setBgColor(color_figureslibres) : null)
$('#publique')
.on('mouseenter', () => !isExtraitOpen && !isCommanditairesOpen ? setBgColor(color_publique) : null)
$('#sociale')
.on('mouseenter', () => !isExtraitOpen && !isCommanditairesOpen ? setBgColor(color_sociale) : null)
$('#culturelle')
.on('mouseenter', () => !isExtraitOpen && !isCommanditairesOpen ? setBgColor(color_culturelle) : null)
$('#commanditaires')
.on('mouseenter', () => !isExtraitOpen && !isCommanditairesOpen ? setBgColor(color_commanditaire) : null)
$('#projets')
.on('mouseenter', () => !isExtraitOpen && !isCommanditairesOpen ? setBgColor(color_projets) : null)
$('#second-p-index, #commanditaires-grid, #extrait-publique, #extrait-social, #extrait-culturelle')
.children().fadeOut()
$('#arrowIndex').click( () => { $('#arrowIndex').click( () => {
if (!isTextOpen && !isExtraitOpen) { if (!isTextOpen && !isExtraitOpen) {
if (isDesktopDevice) { displayContent($('#second-p-index'), isDesktopDevice ? '70vh' : '90vh')
displayContent($('#second-p-index'), '70vh')
} else {
displayContent($('#second-p-index'), '90vh')
}
turnArrow('down') turnArrow('down')
isTextOpen = true isTextOpen = true
} else { } else {
if (isExtraitOpen) { if (isExtraitOpen) {
hideContent($('#extrait-' + quelExtrait)) hideContent($('#extrait-' + quelExtrait))
$('#' + quelExtrait).css('text-decoration', 'none') $('#' + quelExtrait).css({
'text-underline-offset': '0.1em',
'text-decoration-thickness': '1px',
})
isExtraitOpen = false isExtraitOpen = false
turnArrow('top') turnArrow('top')
} }
@@ -273,7 +338,9 @@ function toggleIndexContent(closeEverything) {
} }
if (isCommanditairesOpen) { if (isCommanditairesOpen) {
hideContent($('#commanditaires-grid')) hideContent($('#commanditaires-grid'))
$('#commanditaires').css('text-decoration', 'none') $('#commanditaires').css({
'text-underline-offset': '0.1em',
'text-decoration-thickness': '1px',})
isCommanditairesOpen = false isCommanditairesOpen = false
} }
} }
@@ -292,18 +359,20 @@ function toggleIndexContent(closeEverything) {
case 'figureslibres': case 'figureslibres':
changeMenuSelected($('nav li a[href$=collectif]').parent()) changeMenuSelected($('nav li a[href$=collectif]').parent())
break break
case 'logicielslibres': /* case 'logicielslibres':
changeMenuSelected($('nav li a[href$=logiciels-libres]').parent()) changeMenuSelected($('nav li a[href$=logiciels-libres]').parent())
break break
case 'projets': */ case 'projets':
changeMenuSelected($('nav li a[href$=projets]').parent()) changeMenuSelected($('nav li a[href$=projets]').parent())
break break
} }
setBgColor(color_bg)
} }
}) })
$('#extrait-projets .projets-link-filter').click(() => { $('#extrait-projets .projets-link-filter').click(() => {
changeMenuSelected($('nav li a[href$=projets]').parent()) changeMenuSelected($('nav li a[href$=projets]').parent())
setBgColor(color_bg)
}) })
function toggleExtrait(category) { function toggleExtrait(category) {
@@ -314,38 +383,65 @@ function toggleIndexContent(closeEverything) {
} }
if (isCommanditairesOpen) { if (isCommanditairesOpen) {
hideContent($('#commanditaires-grid')) hideContent($('#commanditaires-grid'))
$('#commanditaires').css('text-decoration', 'none') $('#commanditaires').css({
'text-underline-offset': '0.1em',
'text-decoration-thickness': '1px',
})
isCommanditairesOpen = false isCommanditairesOpen = false
} }
displayContent($('#extrait-' + category), '80vh') displayContent($('#extrait-' + category), '100vh')
turnArrow('down') turnArrow('down')
$('#' + category).css({'text-decoration': 'underline', 'text-decoration-thickness': '2px', 'text-underline-offset': '8px'}) $('#' + category).css({
'text-underline-offset': '0.3em',
'text-decoration-thickness': '2px',
})
isExtraitOpen = true isExtraitOpen = true
quelExtrait = category quelExtrait = category
} else if (isExtraitOpen && quelExtrait != category) { } else {
hideContent($('#extrait-' + quelExtrait)) if (quelExtrait != category) {
$('#' + category).css({'text-decoration': 'underline', 'text-decoration-thickness': '2px', 'text-underline-offset': '8px'}) hideContent($('#extrait-' + quelExtrait))
$('#' + quelExtrait).css('text-decoration', 'none') $('#' + category).css({
setTimeout(() => { 'text-underline-offset': '0.3em',
displayContent($('#extrait-' + category), '80vh') 'text-decoration-thickness': '2px',
quelExtrait = category })
}, 1000) $('#' + quelExtrait).css({
} else if (isExtraitOpen && quelExtrait == category) { 'text-underline-offset': '0.1em',
hideContent($('#extrait-' + category)) 'text-decoration-thickness': '1px',
turnArrow('top') })
$('#' + category).css('text-decoration', 'none') setTimeout(() => {
isExtraitOpen = false displayContent($('#extrait-' + category), '80vh')
quelExtrait = category
}, 1000)
} else {
hideContent($('#extrait-' + category))
turnArrow('top')
$('#' + category).css({
'text-underline-offset': '0.1em',
'text-decoration-thickness': '1px',
})
setBgColor(color_bg)
isExtraitOpen = false
}
} }
} }
function toggleCommanditaires() { function toggleCommanditaires() {
if (!isCommanditairesOpen) { if (!isCommanditairesOpen) {
displayContent($('#commanditaires-grid'), '150vh') displayContent($('#commanditaires-grid'), '150vh')
$('#commanditaires').css({'text-decoration': 'underline', 'text-decoration-thickness': '2px', 'text-underline-offset': '8px'}) $('#commanditaires').css({
'text-underline-offset': '0.3em',
'text-decoration-thickness': '2px',
})
setBgColor(color_commanditaire)
isCommanditairesOpen = true isCommanditairesOpen = true
} else { } else {
hideContent($('#commanditaires-grid')) hideContent($('#commanditaires-grid'))
$('#commanditaires').css('text-decoration', 'none') $('#commanditaires').css({
'text-underline-offset': '0.1em',
'text-decoration-thickness': '1px',
})
setBgColor(color_bg)
isCommanditairesOpen = false isCommanditairesOpen = false
} }
} }
@@ -357,16 +453,24 @@ function toggleIndexContent(closeEverything) {
} }
if (isExtraitOpen) { if (isExtraitOpen) {
hideContent($('#extrait-' + quelExtrait)) hideContent($('#extrait-' + quelExtrait))
$('#' + quelExtrait).css('text-decoration', 'none') $('#' + quelExtrait).css({
'text-underline-offset': '0.1em',
'text-decoration-thickness': '1px',
})
isExtraitOpen = false isExtraitOpen = false
} }
if (isCommanditairesOpen) { if (isCommanditairesOpen) {
hideContent($('#commanditaires-grid')) hideContent($('#commanditaires-grid'))
$('#commanditaires').css('text-decoration', 'none') $('#commanditaires').css({
'text-underline-offset': '0.1em',
'text-decoration-thickness': '1px',
})
isCommanditairesOpen = false isCommanditairesOpen = false
} }
turnArrow('top') turnArrow('top')
setBgColor(color_bg);
} }
} }
function turnArrow(direction) { function turnArrow(direction) {
@@ -382,10 +486,25 @@ function turnArrow(direction) {
'margin-bottom': '0vh' 'margin-bottom': '0vh'
}) })
$('#arrow-container .picto').attr('id', 'arrowIndex') $('#arrow-container .picto').attr('id', 'arrowIndex')
setBgColor(color_bg);
} }
} }
function displayContent(content, maxHeight) { function displayContent(content, maxHeight) {
switch (content[0].id) {
case 'extrait-publique':
setBgColor(color_publique)
break
case 'extrait-sociale':
setBgColor(color_sociale)
break
case 'extrait-culturelle':
setBgColor(color_culturelle)
break
default:
break
}
content.children().fadeIn() content.children().fadeIn()
setTimeout( () => { setTimeout( () => {
content.css({ content.css({
@@ -475,7 +594,10 @@ function filterCards(utilite) {
} }
}) })
$('#' + utilite + '-filter').css('opacity', 1) $('#' + utilite + '-filter').css({
'opacity': 1,
'filter': 'grayscale(0)'
})
Object.keys(filterObj).forEach(v => filterObj[v] = false) Object.keys(filterObj).forEach(v => filterObj[v] = false)
@@ -487,12 +609,18 @@ function filterCards(utilite) {
checkFilter() checkFilter()
if (filterIsOn) { if (filterIsOn) {
$('#' + utilite + '-filter').css('opacity', 0.4) $('#' + utilite + '-filter').css({
'opacity': 0.4,
'filter': 'grayscale(1)'
})
$('.projets-grid div').each(function () { // display all cards $('.projets-grid div').each(function () { // display all cards
$(this).removeClass('card-hidden').addClass('card-displayed') $(this).removeClass('card-hidden').addClass('card-displayed')
}) })
} else { } else {
$('#' + utilite + '-filter').css('opacity', 1) $('#' + utilite + '-filter').css({
'opacity': 1,
'filter': 'grayscale(0)'
})
$('.' + utilite + '-card').each(function () { // only display cards from selected category $('.' + utilite + '-card').each(function () { // only display cards from selected category
$(this).removeClass('card-hidden').addClass('card-displayed') $(this).removeClass('card-hidden').addClass('card-displayed')
}) })
@@ -504,13 +632,19 @@ function filterCards(utilite) {
checkFilter() checkFilter()
if (filterIsOn) { if (filterIsOn) {
$('#' + utilite + '-filter').css('opacity', 0.4) $('#' + utilite + '-filter').css({
'opacity': 0.4,
'filter': 'grayscale(1)'
})
$('.' + utilite + '-card').each(function () { // only display cards from selected category $('.' + utilite + '-card').each(function () { // only display cards from selected category
$(this).removeClass('card-displayed').addClass('card-hidden') $(this).removeClass('card-displayed').addClass('card-hidden')
}) })
} else { } else {
$('.filter-button').each(function() { $('.filter-button').each(function() {
$(this).css('opacity', 0.4) $(this).css({
'opacity': 0.4,
'filter': 'grayscale(1)'
})
}) })
$('.projets-grid div').each(function () { // hide all cards $('.projets-grid div').each(function () { // hide all cards
$(this).removeClass('card-hidden').addClass('card-displayed') $(this).removeClass('card-hidden').addClass('card-displayed')
@@ -565,6 +699,9 @@ function filterWhenEntering() {
// display reader // display reader
function displayReader() { function displayReader() {
$('header').fadeOut()
projectTitleIsScrolling = false
checkTitleAutoScroll()
const swiper = new Swiper('.swiper', { const swiper = new Swiper('.swiper', {
// Optional parameters // Optional parameters
loop: true, loop: true,
@@ -596,9 +733,6 @@ function displayReader() {
swiper.el.style.display = "none"; swiper.el.style.display = "none";
}, 300); }, 300);
}) })
$('header').fadeOut()
projectTitleIsScrolling = false
checkTitleAutoScroll()
@@ -612,7 +746,7 @@ function displayReader() {
} }
isProjectHeaderDisplayed = true isProjectHeaderDisplayed = true
} else if ($(window).scrollTop() < $('#main-project-title').offset().top && isProjectHeaderDisplayed) { } else if ($(window).scrollTop() < $('#main-project-title').offset().top && isProjectHeaderDisplayed) {
$('#header-project').css('top', '-9vh') $('#header-project').css('top', '-4vh')
if (isDesktopDevice) { if (isDesktopDevice) {
$('#close-project').removeClass('scrolled-cross') $('#close-project').removeClass('scrolled-cross')
} }
user/themes/figureslibres-v2/scss/configuration/_variable.scss
+7 -4
View File
@@ -22,10 +22,6 @@
font-family: Syne, sans-serif; font-family: Syne, sans-serif;
font-weight: bold; font-weight: bold;
} }
@mixin logiciels-libres-font {
font-family: Rumeur, sans-serif;
font-weight: bold;
}
@mixin commanditaires-font { @mixin commanditaires-font {
font-family: Moche, sans-serif; font-family: Moche, sans-serif;
font-weight: bold; font-weight: bold;
@@ -60,6 +56,13 @@
$mainColor: #0e1229; $mainColor: #0e1229;
$mainColorSoft: #1f2429; $mainColorSoft: #1f2429;
$bgColor: #f5f5f5; $bgColor: #f5f5f5;
$color_publique: #ffaeab;
$color_sociale: #71ff94;
$color_culturelle: #feff74;
$color_commanditaire: #fabbde;
$color_figureslibres: #82f8ee;
$color_projets: #4bffc9;
// colors - gradient // colors - gradient
$bgGradientToBottom: linear-gradient(to bottom, #{$bgColor}, #{$bgColor}00); $bgGradientToBottom: linear-gradient(to bottom, #{$bgColor}, #{$bgColor}00);
$bgGradientToLeft: linear-gradient(to left, #{$bgColor}, #{$bgColor}00); $bgGradientToLeft: linear-gradient(to left, #{$bgColor}, #{$bgColor}00);
user/themes/figureslibres-v2/scss/style.scss
+233 -101
View File
@@ -32,6 +32,7 @@
overflow-x: hidden; overflow-x: hidden;
color: $mainColor; color: $mainColor;
background-color: $bgColor; background-color: $bgColor;
@include transition-ease-out(background-color);
header { header {
position: fixed; position: fixed;
top: 0; top: 0;
@@ -40,11 +41,12 @@
box-sizing: border-box; box-sizing: border-box;
#nav-container { #nav-container {
height: $navHeight; height: $navHeight;
background-color: $bgColor;
padding: 0 $bodyMarginMobile; padding: 0 $bodyMarginMobile;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background-color: $bgColor;
@include transition-ease-out(background-color);
h1 { h1 {
cursor: pointer; cursor: pointer;
} }
@@ -62,7 +64,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
opacity: 0; opacity: 0;
@include transition-ease-out(opacity, top 0.7s); @include transition-ease-out(opacity, top 0.7s, background-color);
#crossMenu { #crossMenu {
position: absolute; position: absolute;
top: 2vh; top: 2vh;
@@ -104,7 +106,12 @@
display: block; display: block;
width: 100%; width: 100%;
height: $navGradientHeightMobile; height: $navGradientHeightMobile;
background: $bgGradientToBottom background: $bgGradientToBottom;
opacity: 1;
@include transition-ease-out(opacity);
}
header.plain_bg:after {
opacity: 0;
} }
main { main {
position: relative; position: relative;
@@ -123,7 +130,7 @@
@include transition-ease-out(text-underline-offset); @include transition-ease-out(text-underline-offset);
} }
a:hover { a:hover {
text-underline-offset: 0.15em; text-underline-offset: 0.15em !important;
} }
} }
.projet-card { .projet-card {
@@ -177,6 +184,9 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.animateText {
text-decoration: underline 1px;
}
#loader-index { #loader-index {
position: absolute; position: absolute;
height: 80vh; height: 80vh;
@@ -203,15 +213,12 @@
#culturelle { #culturelle {
@include culturelle-font; @include culturelle-font;
} }
#logicielslibres {
@include logiciels-libres-font;
}
} }
#extrait-projets { #extrait-projets {
>div { >div {
max-height: 0vh; max-height: 0vh;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: repeat(2, 1fr);
gap: 0px 20px; gap: 0px 20px;
align-items: flex-start; align-items: flex-start;
div { div {
@@ -273,7 +280,7 @@
#commanditaires-grid { #commanditaires-grid {
width: 85vw; width: 85vw;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: repeat(2, 1fr);
gap: 25px 40px; gap: 25px 40px;
align-items: center; align-items: center;
img { img {
@@ -312,22 +319,39 @@
text-align: center; text-align: center;
width: 100%; width: 100%;
margin-bottom: $sectionSpacing; margin-bottom: $sectionSpacing;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.filter-button { .filter-button {
cursor: pointer; cursor: pointer;
filter: grayscale(1);
opacity: $transparency; opacity: $transparency;
@include transition-ease-out(opacity); padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: $smallSize;
min-height: $currentLineHeight;
display: inline-block;
@include transition-ease-out(opacity, filter);
}
.filter-button:hover {
filter: grayscale(0) !important;
opacity: 1 !important;
} }
p { p {
margin-bottom: 0; margin-bottom: 1rem;
} }
#publique-filter { #publique-filter {
@include publique-font; @include publique-font;
background-color: $color_publique;
} }
#sociale-filter { #sociale-filter {
@include sociale-font; @include sociale-font;
background-color: $color_sociale;
} }
#culturelle-filter { #culturelle-filter {
@include culturelle-font; @include culturelle-font;
background-color: $color_culturelle;
} }
} }
hr { hr {
@@ -396,31 +420,18 @@
position: fixed; position: fixed;
height: 6vh; height: 6vh;
width: 100%; width: 100%;
background-color: $bgColor; // background-color: $bgColor;
top: -9vh; top: -4vh;
@include transition-ease-out(top); @include transition-ease-out(top);
.info-project-publique {
span {
@include publique-font;
}
}
.info-project-sociale {
span {
@include sociale-font;
}
}
.info-project-culturelle {
span {
@include culturelle-font;
}
}
h2 { h2 {
margin: 0;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
width: 80%; width: 100%;
height: 100%;
padding: 3px 0; padding: 3px 0;
margin-top: 1.8vh; padding-top: 1.8vh;
margin-left: $bodyMarginMobile; padding-left: $bodyMarginMobile;
font-size: $currentSize; font-size: $currentSize;
span { span {
transform: translate(0, 0); transform: translate(0, 0);
@@ -433,6 +444,24 @@
white-space: nowrap; white-space: nowrap;
} }
} }
h2.info-project-publique {
background: linear-gradient(to bottom, $color_publique, $color_publique 60%, rgba($color_publique, 0));
span {
@include publique-font;
}
}
h2.info-project-sociale {
background: linear-gradient(to bottom, $color_sociale, $color_sociale 60%, rgba($color_sociale, 0));
span {
@include sociale-font;
}
}
h2.info-project-culturelle {
background: linear-gradient(to bottom, $color_culturelle, $color_culturelle 60%, rgba($color_culturelle, 0));
span {
@include culturelle-font;
}
}
#gradient-long-title { #gradient-long-title {
position: absolute; position: absolute;
height: 4vh; height: 4vh;
@@ -442,14 +471,6 @@
background: $bgGradientToLeft; background: $bgGradientToLeft;
} }
} }
#header-project:after {
position: absolute;
top: 6vh;
content: '';
height: 4vh;
width: 100%;
background: linear-gradient($bgColor, rgba($bgColor, 0));
}
#header-project + a { #header-project + a {
z-index: 2; z-index: 2;
} }
@@ -460,13 +481,53 @@
width: calc(#{$pictoSmallWidth} - 5px); width: calc(#{$pictoSmallWidth} - 5px);
height: calc(#{$pictoSmallHeight} - 5px); height: calc(#{$pictoSmallHeight} - 5px);
} }
#cover-image-mobile { figure#cover-image-mobile {
margin-top: -2vh; margin-top: -2vh;
margin-bottom: 2vh; margin-bottom: 2vh;
} }
#cover-image { figure#cover-image {
display: none; display: none;
} }
figure#cover-image-mobile,
figure#cover-image {
position: relative;
margin-top: 3vh;
img {
filter: grayscale(0);
@include transition-ease-out(filter);
mix-blend-mode: normal;
}
}
figure#cover-image-mobile:hover img,
figure#cover-image:hover img {
filter: grayscale(1);
mix-blend-mode: darken;
}
figure#cover-image-mobile::before,
figure#cover-image::before {
position: absolute;
content: '';
height: 100%;
width: 100%;
opacity: 0;
@include transition-ease-out(opacity);
}
figure#cover-image-mobile:hover::before,
figure#cover-image:hover::before {
opacity: 1;
}
figure#cover-image-mobile.sociale:hover::before,
figure#cover-image.sociale:hover::before {
background-color: $color_sociale;
}
figure#cover-image-mobile.culturelle:hover::before,
figure#cover-image.culturelle:hover::before {
background-color: $color_culturelle;
}
figure#cover-image-mobile.publique:hover::before,
figure#cover-image.publique:hover::before {
background-color: $color_publique;
}
#info-project { #info-project {
align-self: flex-start; align-self: flex-start;
h2 { h2 {
@@ -502,7 +563,37 @@
} }
#project-images-grid { #project-images-grid {
figure { figure {
position: relative;
margin-top: 3vh; margin-top: 3vh;
img {
filter: grayscale(0);
@include transition-ease-out(filter);
mix-blend-mode: normal;
}
}
figure:hover img {
filter: grayscale(1);
mix-blend-mode: darken;
}
figure::before {
position: absolute;
content: '';
height: 100%;
width: 100%;
opacity: 0;
@include transition-ease-out(opacity);
}
figure:hover::before {
opacity: 1;
}
figure:hover.sociale::before {
background-color: $color_sociale;
}
figure:hover.publique::before {
background-color: $color_publique;
}
figure:hover.culturelle::before {
background-color: $color_culturelle;
} }
} }
hr { hr {
@@ -526,12 +617,15 @@
margin-top: 2vh; margin-top: 2vh;
} }
#related-grid { #related-grid {
margin-bottom: 5vh;
width: 80%; width: 80%;
.card-displayed { .card-displayed {
margin-top: 1.5vh; margin-top: 1.5vh;
} }
} }
p {
margin-top: 3vh;
margin-bottom: 5vh;
}
} }
.swiper { .swiper {
position: fixed; position: fixed;
@@ -557,8 +651,8 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
img { img {
max-height: 100%; max-height: 90%;
max-width: 100%; max-width: 90%;
object-fit: cover; object-fit: cover;
} }
} }
@@ -614,24 +708,6 @@
height: 100vh; height: 100vh;
} }
} }
.content {
.card-displayed figure a figcaption {
opacity: 0;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
padding: 10px;
background: $mainColor;
color: $bgColor;
font-size: $tinySize;
border-radius: 0 0 10px 10px;
}
}
.card-displayed:hover figure a figcaption {
opacity: 1;
}
main { main {
#index-content { #index-content {
min-height: 80vh; min-height: 80vh;
@@ -640,11 +716,11 @@
justify-content: center; justify-content: center;
#extrait-projets { #extrait-projets {
>div { >div {
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: repeat(2, 1fr);
div:last-of-type { div:last-of-type {
overflow-x: hidden; overflow-x: hidden;
text-align: right; text-align: right;
grid-column-end: span 4; grid-column-end: span 2;
p { p {
display: inline-block; display: inline-block;
.picto { .picto {
@@ -660,13 +736,13 @@
} }
#commanditaires-grid { #commanditaires-grid {
width: auto; width: auto;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-columns: repeat(5, 1fr);
} }
} }
#projets-index { #projets-index {
width: auto; width: auto;
#filter-index { #filter-index {
display: flex; justify-content: start;
flex-direction: row; flex-direction: row;
max-width: 100%; max-width: 100%;
p:last-of-type { p:last-of-type {
@@ -680,19 +756,15 @@
.projets-grid { .projets-grid {
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: repeat(3, 1fr);
gap: 0 10px; gap: 0 10px;
align-items: start;
>div { >div {
width: 100%; width: 100%;
} }
} }
} }
#reader { #reader {
#header-project {
h2 {
margin-top: 1vh;
}
}
#close-project { #close-project {
width: $pictoInlineWidth; width: $pictoInlineWidth;
height: $pictoInlineHeight; height: $pictoInlineHeight;
@@ -722,7 +794,7 @@
#project-images-grid { #project-images-grid {
width: auto; width: auto;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: repeat(2, 1fr);
grid-gap: 1em; grid-gap: 1em;
figure { figure {
margin-top: 0; margin-top: 0;
@@ -738,19 +810,24 @@
grid-column: span 2; grid-column: span 2;
} }
} }
#related-grid { #related-pages {
display: grid; #related-grid {
grid-template-columns: 1fr 1fr 1fr; display: grid;
width: auto !important; grid-template-columns: repeat(3, 1fr);
grid-column-gap: 10%; width: auto !important;
margin-bottom: 6vh !important; grid-column-gap: 10%;
.card-displayed { .card-displayed {
margin-top: 2vh !important; margin-top: 2vh !important;
figure { width: 100%;
min-height: 80px !important; figure {
min-width: 15vw; min-height: 80px !important;
}
} }
} }
p {
margin-top: 3vh;
margin-bottom: 6vh !important;
}
} }
.swiper { .swiper {
.swiper-button-next, .swiper-button-prev { .swiper-button-next, .swiper-button-prev {
@@ -789,11 +866,11 @@
display: none; display: none;
} }
nav { nav {
background-color: $bgColor;
position: relative; position: relative;
top: 0; top: 0;
opacity: 1; opacity: 1;
height: $navHeight; height: $navHeight;
background-color: $bgColor;
justify-content: center; justify-content: center;
#crossMenu { #crossMenu {
display: none; display: none;
@@ -850,25 +927,61 @@
header:after { header:after {
height: $navGradientHeightDesktop; height: $navGradientHeightDesktop;
} }
main { main {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: calc(#{$navHeight} + #{$navGradientHeightDesktop} + #{$sectionSpacing}); margin-top: calc(#{$navHeight} + #{$navGradientHeightDesktop} + #{$sectionSpacing});
.content {
width: $bodyWidth; #index-content > #extrait-projets figure a figcaption {
padding: 0; background-color: $mainColor;
color: $bgColor;
}
.content {
width: $bodyWidth;
padding: 0;
.card-displayed figure a figcaption {
opacity: 0;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
padding: 10px;
color: $mainColor;
font-size: $tinySize;
border-radius: 0 0 10px 10px;
} }
.culturelle-card figure a figcaption {
background-color: $color_culturelle;
}
.sociale-card figure a figcaption {
background-color: $color_sociale;
}
.publique-card figure a figcaption {
background-color: $color_publique;
}
}
.card-displayed:hover figure a figcaption {
opacity: 1;
}
#index-content { #index-content {
#extrait-projets {
>div {
grid-template-columns: repeat(4, 1fr);
div:last-of-type {
grid-column-end: span 4;
}
}
}
#commanditaires-grid { #commanditaires-grid {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-columns: repeat(8, 1fr);
} }
} }
#projets-index { #projets-index {
width: $bodyWidth; width: $bodyWidth;
#filter-index { .projets-grid {
.filter-button:hover { grid-template-columns: repeat(4, 1fr);
opacity: 1 !important;
}
} }
} }
#text-content { #text-content {
@@ -888,28 +1001,35 @@
} }
#reader { #reader {
margin-top: -10vh; margin-top: -10vh;
width: 40vw; width: 60vw;
#header-project { #header-project {
width: 100%; width: 100%;
h2 { h2 {
width: 35vw; width: 100%;
margin-left: 29.5vw;
padding: 0; padding: 0;
span { span {
padding-left: 20vw;
padding-top: 1.4vh;
height: $currentLineHeight; height: $currentLineHeight;
padding-top: 5px;
} }
} }
#gradient-long-title { #gradient-long-title {
right: 34.2vw; right: 34.2vw;
} }
} }
#cover-image {
width: 66.666%;
box-sizing: border-box;
margin: 0 10vw;
}
#info-project { #info-project {
width: 100%; width: 100%;
box-sizing: border-box;
padding: 0 10vw;
margin-top: 2vh; margin-top: 2vh;
margin-bottom: 4vh; margin-bottom: 4vh;
h2 { h2 {
min-width: 100%; min-width: 95%;
border-right: solid 1px rgba(0, 0, 0, $transparency); border-right: solid 1px rgba(0, 0, 0, $transparency);
margin-top: 0; margin-top: 0;
margin-bottom: 1vh; margin-bottom: 1vh;
@@ -926,17 +1046,18 @@
#close-project { #close-project {
width: $pictoSmallWidth; width: $pictoSmallWidth;
height: $pictoSmallHeight; height: $pictoSmallHeight;
top: 6vh; top: calc(4vh + $pictoSmallHeight / 2);
right: calc(30vw - #{$pictoSmallWidth} - 2vw); right: calc(30vw - #{$pictoSmallWidth} - 2vw);
transform: scale(1, 1); transform: scale(1, 1);
@include transition-ease-out(top, right, transform); @include transition-ease-out(top, right, transform);
} }
.scrolled-cross { .scrolled-cross {
top: 1.4vh !important; top: 1.4vh !important;
right: 30vw !important; right: 20vw !important;
transform: scale(0.7, 0.7) !important; transform: scale(0.7, 0.7) !important;
} }
#project-description { #project-description {
padding: 0 10vw;
align-self: flex-start; align-self: flex-start;
} }
#project-images-grid { #project-images-grid {
@@ -954,11 +1075,15 @@
margin-top: 0; margin-top: 0;
} }
#related-grid { #related-grid {
width: 100%;
grid-column-gap: 3%; grid-column-gap: 3%;
div figure { div figure {
min-width: 10vw; min-width: 10vw;
} }
} }
p {
align-self: flex-end;
}
} }
} }
} }
@@ -995,7 +1120,14 @@
} }
#projets-index { #projets-index {
.projets-grid { .projets-grid {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr; column-gap: 2em;
grid-template-columns: repeat(4, 1fr);
}
}
#reader {
#related-pages {
padding: 0 10vw;
box-sizing: border-box;
} }
} }
} }
user/themes/figureslibres-v2/templates/partials/relatedpages.html.twig
+43 -43
View File
@@ -1,50 +1,50 @@
{% macro recursivePages(amount, page, page1, page2) %}
{% import _self as self %}
{% set index = amount - 1 %}
{% if index >= 0 %}
{% set random_utilite = random(page.find('/projets').children) %}
{% set p = random(random_utilite.children) %}
{% if not page1 %}
{% if p == page %}
{% set index = amount + 1 %}
{{ self.recursivePages(index, page) }}
{% else %}
{% include 'partials/projet_card.html.twig' with { p } %}
{{ self.recursivePages(index, page, p) }}
{% endif %}
{% elseif not page2 %}
{% if p == page or p == page1 %}
{% set index = amount + 1 %}
{{ self.recursivePages(index, page, page1) }}
{% else %}
{% include 'partials/projet_card.html.twig' with { p } %}
{{ self.recursivePages(index, page, page1, p) }}
{% endif %}
{% elseif not page3 %}
{% if p == page or p == page1 or p == page2 %}
{% set index = amount + 1 %}
{{ self.recursivePages(index, page, page1, page2) }}
{% else %}
{% include 'partials/projet_card.html.twig' with { p } %}
{% endif %}
{% endif %}
{% endif %}
{% endmacro %}
{% import _self as self %}
<div id="related-pages"> <div id="related-pages">
<hr> <hr>
<h3>Voir aussi</h3> <h3>Voir aussi</h3>
<div id="related-grid"> <div id="related-grid">
{% set category = random(page.taxonomy.category) %} {% set relatedAmount = 3 %}
{% set p = random(taxonomy.findTaxonomy({'category': category}))%} {{ self.recursivePages(relatedAmount, page) }}
{% if p == page %}
{% set category = random(page.taxonomy.category) %}
{% set p = random(taxonomy.findTaxonomy({'category': category}))%}
{% if p == page %}
{% set category = random(page.taxonomy.category) %}
{% set p = random(taxonomy.findTaxonomy({'category': category}))%}
{% if p == page %}
{% set category = random(page.taxonomy.category) %}
{% set p = random(taxonomy.findTaxonomy({'category': category}))%}
{% endif %}
{% endif %}
{% endif %}
{% include 'partials/projet_card.html.twig' %}
{% set p = random(page.parent.children) %}
{% if p == page or p == related_category_page %}
{% set p = random(page.parent.children) %}
{% if p == page or p == related_category_page %}
{% set p = random(page.parent.children) %}
{% if p == page or p == related_category_page %}
{% set p = random(page.parent.children) %}
{% endif %}
{% endif %}
{% endif %}
{% include 'partials/projet_card.html.twig' %}
{% set random_utilite = random(page.find('/projets').children) %}
{% set p = random(random_utilite.children) %}
{% if p == page or p == related_utilite_page or p == related_category_page %}
{% set random_utilite = random(page.find('/projets').children) %}
{% set p = random(random_utilite.children) %}
{% if p == page or p == related_utilite_page or p == related_category_page %}
{% set random_utilite = random(page.find('/projets').children) %}
{% set p = random(random_utilite.children) %}
{% if p == page or p == related_utilite_page or p == related_category_page %}
{% set random_utilite = random(page.find('/projets').children) %}
{% set p = random(random_utilite.children) %}
{% endif %}
{% endif %}
{% endif %}
{% include 'partials/projet_card.html.twig' %}
</div> </div>
<p><a href="{{ page.parent.parent.url }}">Retour à la liste des projets</a></p>
</div> </div>
user/themes/figureslibres-v2/templates/projets-index.html.twig
+2 -2
View File
@@ -6,8 +6,8 @@
<div id="filter-index"> <div id="filter-index">
<p>Consulter les projets d'utilité</p> <p>Consulter les projets d'utilité</p>
<p> <p>
<span id="publique-filter" class="filter-button" onClick="filterCards('publique')">publique</span>, <span id="publique-filter" class="filter-button" onClick="filterCards('publique')">publique</span>
<span id="sociale-filter" class="filter-button" onClick="filterCards('sociale')">sociale</span>, <span id="sociale-filter" class="filter-button" onClick="filterCards('sociale')">sociale</span>
<span id="culturelle-filter" class="filter-button" onClick="filterCards('culturelle')">culturelle</span> <span id="culturelle-filter" class="filter-button" onClick="filterCards('culturelle')">culturelle</span>
</p> </p>
</div> </div>
user/themes/figureslibres-v2/templates/reader.html.twig
+42 -54
View File
@@ -1,61 +1,49 @@
{% extends 'partials/base.html.twig' %} {% extends 'partials/base.html.twig' %}
{% block content %} {% block content %}
<div id="reader" class="content" data-barba="container" data-barba-namespace="reader"> {% set class_suffix = page.parent.title|lower %}
<div id="header-project"> <div id="reader" class="content" data-barba="container" data-barba-namespace="reader">
{% switch page.parent.title %} <div id="header-project">
{% case 'Publique' %} <h2 class="info-project-{{ class_suffix }}">
<h2 class="info-project-publique"> <span data-text="{{ page.title }}">{{ page.title }}</span>
{% case 'Sociale' %} </h2>
<h2 class="info-project-sociale"> </div>
{% case 'Culturelle' %} <a href="{{ page.parent.parent.url }}"><div id="close-project" class="picto" data-src="{{ url('theme://images/pictos/cross.svg') }}" aria-hidden="true"></div></a>
<h2 class="info-project-culturelle"> <figure id="cover-image-mobile" class="{{ class_suffix }}">
{% endswitch %} <img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ page.media.images|first.url }}" alt="{{ page.title }}" class="lazy loader">
<span data-text="{{ page.title }}">{{ page.title }}</span></h2> </figure>
</div> <div id="info-project" class="info-project-{{ class_suffix }}">
<a href="{{ page.parent.parent.url }}"><div id="close-project" class="picto" data-src="{{ url('theme://images/pictos/cross.svg') }}" aria-hidden="true"></div></a> <h2 id="main-project-title">{{ page.title }}</h2>
<figure id="cover-image-mobile"> <div>
<img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ page.media.images|first.url }}" alt="{{ page.title }}" class="lazy loader"> {% for tag in page.taxonomy.tag %}
</figure> {{ tag }},
{% switch page.parent.title %} {% endfor %}
{% case 'Publique' %} {{ page.date|date("Y") }}
<div id="info-project" class="info-project-publique">
{% case 'Sociale' %}
<div id="info-project" class="info-project-sociale">
{% case 'Culturelle' %}
<div id="info-project" class="info-project-culturelle">
{% endswitch %}
<h2 id="main-project-title">{{ page.title }}</h2>
<div>
{% for tag in page.taxonomy.tag %}
{{ tag }},
{% endfor %}
{{ page.date|date("Y") }}
</div>
</div>
<figure id="cover-image">
<img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ page.media.images|first.url }}" alt="{{ page.title }}" class="lazy loader">
</figure>
<hr>
<div id="project-description">
{{ page.content|raw }}
</div> </div>
</div>
<figure id="cover-image" class="{{ class_suffix }}">
<img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ page.media.images|first.url }}" alt="{{ page.title }}" class="lazy loader">
</figure>
<hr>
<div id="project-description">
{{ page.content|raw }}
</div>
<div id="project-images-grid"> <div id="project-images-grid">
{% for image in page.media.images %} {% for image in page.media.images %}
{% if image != page.media.images | first %} {% if image != page.media.images | first %}
<figure> <figure class="{{ class_suffix }}">
<img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ image.url }}" alt="{{ page.title }}" class="lazy loader project-image"> <img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ image.url }}" alt="{{ page.title }}" class="lazy loader project-image">
</figure> </figure>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</div>
</div> {% block related_pages %}
{% block related_pages %} {% include 'partials/relatedpages.html.twig' %}
{% include 'partials/relatedpages.html.twig' %} {% endblock %}
{% endblock %} {% block carousel %}
{% block carousel %} {% include 'partials/carousel.html.twig' %}
{% include 'partials/carousel.html.twig' %} {% endblock %}
{% endblock %} </div>
</div>
{% endblock %} {% endblock %}