nouvelle home
This commit is contained in:
Julie Blanc
parent
46b251e229
commit
e390d8cd5b
7 changed files with 374 additions and 226 deletions
|
|
@ -1,17 +1,23 @@
|
|||
.item-nav{
|
||||
border: 1px solid var(--color-txt-light);
|
||||
border-radius: var(--radius-small);
|
||||
background-color: var(--white);
|
||||
border: 1.5px solid var(--color-txt);
|
||||
border-radius: var(--radius-btn);
|
||||
background-color: var(--white);
|
||||
color: var(--color-txt);
|
||||
// background-color: transparent;
|
||||
|
||||
padding: var(--padding-inner);
|
||||
padding-bottom: calc(var(--padding-inner)*0.5);
|
||||
|
||||
min-height: calc(var(--unit)*5);
|
||||
max-width: 440px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&:hover{
|
||||
background-color: var(--color-light);
|
||||
// color: white;
|
||||
}
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
.title{
|
||||
|
|
|
|||
|
|
@ -1,22 +1,24 @@
|
|||
@use "abstracts/mixins.scss" as *;
|
||||
|
||||
|
||||
|
||||
#home__livrets{
|
||||
#home__livrets {
|
||||
--color: var(--color-violet);
|
||||
--color-medium: var(--color-violet-medium);
|
||||
--color-light: var(--color-violet-light);
|
||||
background-color: var(--color-medium);
|
||||
background-color: var(--color);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
|
||||
#home__base-connaissance{
|
||||
#home__animations {
|
||||
--color: var(--color-yellow);
|
||||
--color-medium: var(--color-yellow-medium);
|
||||
--color-light: var(--color-yellow-light);
|
||||
background-color: var(--color-medium);
|
||||
}
|
||||
background-color: var(--color);
|
||||
|
||||
#home__ateliers{
|
||||
|
||||
color: var(--color-txt);
|
||||
}
|
||||
#home__base-connaissance {
|
||||
--color: var(--color-orange);
|
||||
--color-medium: var(--color-orange-medium);
|
||||
--color-light: var(--color-orange-light);
|
||||
|
|
@ -25,94 +27,87 @@
|
|||
|
||||
|
||||
|
||||
#main_home{
|
||||
section{
|
||||
|
||||
|
||||
|
||||
|
||||
#main_home {
|
||||
--max-w-home: 1100px;
|
||||
section {
|
||||
padding: calc(var(--unit)*3) var(--padding-body);
|
||||
position: relative;
|
||||
.section--inner{
|
||||
max-width: 1100px;
|
||||
|
||||
.section--inner {
|
||||
max-width: var(--max-w-home);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.item-nav__group{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--unit);
|
||||
}
|
||||
.item-nav__group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing);
|
||||
}
|
||||
|
||||
.section--header{
|
||||
margin-bottom: calc(var(--unit)*3);
|
||||
}
|
||||
.section--header {
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
|
||||
.section--title{
|
||||
display: grid;
|
||||
// grid-template-columns: 3fr 2fr;
|
||||
grid-template-columns: 1fr 440px;
|
||||
gap: calc(var(--spacing)*1);
|
||||
}
|
||||
|
||||
.section--title {
|
||||
font-size: 2.8rem;
|
||||
font-family: var(--font-title);
|
||||
margin-bottom: calc(var(--unit)*1);
|
||||
// margin-bottom: calc(var(--spacing) * 1.5);
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.baseline{
|
||||
.baseline {
|
||||
font-size: var(--fs-medium);
|
||||
max-width: 46ch;
|
||||
|
||||
max-width: 42ch;
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.slideshow{
|
||||
.slideshow {
|
||||
width: 100%;
|
||||
height: calc(var(--unit)*13);
|
||||
|
||||
figure{
|
||||
figure {
|
||||
height: calc(var(--unit)*11);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.home--section-tool .section--inner{
|
||||
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 4fr 5fr;
|
||||
column-gap: calc(var(--unit)*3);
|
||||
|
||||
.section--header{
|
||||
grid-column: 1/end;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.item-nav{
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.highlight-block, .slideshow{
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#home__hero{
|
||||
#home__hero {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: calc(var(--unit)*1.5)!important;
|
||||
padding-bottom: calc(var(--unit)*1.5) !important;
|
||||
|
||||
.section--inner{
|
||||
.section--inner {
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
|
||||
|
||||
}
|
||||
.section--title{
|
||||
|
||||
.section--title {
|
||||
font-size: 3.6em;
|
||||
|
||||
margin-bottom: calc(var(--unit)*1.5);
|
||||
|
|
@ -122,7 +117,7 @@
|
|||
}
|
||||
|
||||
/* button{ display: none;} */
|
||||
.description{
|
||||
.description {
|
||||
font-size: var(--fs-medium);
|
||||
|
||||
max-width: 48ch;
|
||||
|
|
@ -130,43 +125,46 @@
|
|||
margin-bottom: calc(var(--unit)*1.5);
|
||||
}
|
||||
|
||||
.search--container{ display: none;}
|
||||
.search--container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-hero{
|
||||
.nav-hero {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: var(--unit);
|
||||
margin-top: calc(var(--unit)*1);
|
||||
margin-bottom: calc(var(--unit)*3);
|
||||
|
||||
|
||||
li{
|
||||
|
||||
li {
|
||||
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
min-width: 12ch;
|
||||
text-align: center;
|
||||
|
||||
|
||||
|
||||
border: 1.5px solid var(--color);
|
||||
color: var(--color);
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(var(--unit)*1.5);
|
||||
padding: 0px 1.5ch;
|
||||
border-radius: var(--radius-btn);
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
background-color: var(--color-light);
|
||||
|
||||
}
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(var(--unit)*1.5);
|
||||
padding: 0px 1.5ch;
|
||||
border-radius: var(--radius-btn);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-light);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
a{
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--color);
|
||||
font-weight: bold;
|
||||
|
|
@ -176,44 +174,47 @@
|
|||
}
|
||||
}
|
||||
|
||||
.see-more{
|
||||
.see-more {
|
||||
display: block;
|
||||
// color: var(--color-txt);
|
||||
// font-weight: bold;
|
||||
padding-top: calc(var(--unit)*1.5);
|
||||
// color: var(--color-txt);
|
||||
// font-weight: bold;
|
||||
padding-top: calc(var(--unit)*1.5);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
#home__a-propos{
|
||||
p, li{
|
||||
#home__a-propos {
|
||||
|
||||
p,
|
||||
li {
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 1em;
|
||||
position: relative;
|
||||
|
||||
strong{
|
||||
strong {
|
||||
color: var(--color-green)
|
||||
}
|
||||
}
|
||||
|
||||
ol li::marker{
|
||||
ol li::marker {
|
||||
display: none;
|
||||
content: "";
|
||||
|
||||
|
||||
}
|
||||
|
||||
ol{
|
||||
ol {
|
||||
padding-left: 5ch;
|
||||
counter-reset: ol;
|
||||
li{
|
||||
|
||||
li {
|
||||
counter-increment: ol 1;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
ol li::before{
|
||||
ol li::before {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
content: counter(ol);
|
||||
|
|
@ -229,11 +230,80 @@
|
|||
position: absolute;
|
||||
left: -4ch;
|
||||
top: 4px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.btn--solid{
|
||||
.btn--solid {
|
||||
margin-top: calc(var(--unit)*2);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.slideshow-scroll{
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
left: calc((100vw - var(--max-w-home))*-0.5);
|
||||
padding-bottom: 20px;
|
||||
|
||||
overflow-y: scroll;
|
||||
@include hide-scrollbar();
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
|
||||
.slideshow-scroll__warpper{
|
||||
// padding-left: calc((100vw - var(--max-w-home))*0.5);
|
||||
padding-left: var(--padding-body);
|
||||
display: flex;
|
||||
gap: var(--padding-inner);
|
||||
|
||||
|
||||
.slideshow-item{
|
||||
flex-shrink: 0;
|
||||
figure{
|
||||
height: 420px;
|
||||
width: 100%;
|
||||
img{
|
||||
width: 100%;
|
||||
aspect-ratio: 5/3;
|
||||
}
|
||||
}
|
||||
}
|
||||
&::after{
|
||||
content: "........................................";
|
||||
display: block;
|
||||
width: calc((100vw - var(--max-w-home))*1);
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.screenshot-booklet{
|
||||
display: flex;
|
||||
--size-page: 340px;
|
||||
--gap: var(--padding-inner);
|
||||
gap: var(--gap);
|
||||
width: calc(var(--size-page)*5 + var(--gap)*2);
|
||||
|
||||
.cover, .page{
|
||||
width: 300px;
|
||||
|
||||
img{
|
||||
border: 0.5px solid var(--color-txt-light);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.double{
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
.page + .page img{
|
||||
border-left-color: transparent!important;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -42,4 +42,13 @@
|
|||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin hide-scrollbar(){
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
--fs-small: 14px;
|
||||
--fs-normal: 16px;
|
||||
--fs-medium: 24px;
|
||||
--fs-medium: 22px;
|
||||
--fs-title-page: 38px;
|
||||
|
||||
--spacing: 20px;
|
||||
|
|
@ -34,7 +34,8 @@
|
|||
--color-violet-medium: #9b92c4;
|
||||
--color-violet-light: #e1dfec;
|
||||
|
||||
--color-yellow: #c4a233;
|
||||
// --color-yellow: #c4a233;
|
||||
--color-yellow: #d4a938;
|
||||
--color-yellow-medium: #e0c46a;
|
||||
--color-yellow-light: #f5f0d5;
|
||||
--color-map: #ad8422;
|
||||
|
|
|
|||
122
assets/style.css
122
assets/style.css
|
|
@ -4,7 +4,7 @@
|
|||
--font: "Nunito", Arial, sans-serif;
|
||||
--fs-small: 14px;
|
||||
--fs-normal: 16px;
|
||||
--fs-medium: 24px;
|
||||
--fs-medium: 22px;
|
||||
--fs-title-page: 38px;
|
||||
--spacing: 20px;
|
||||
font-size: 14px;
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
--color-violet: #6e62a4;
|
||||
--color-violet-medium: #9b92c4;
|
||||
--color-violet-light: #e1dfec;
|
||||
--color-yellow: #c4a233;
|
||||
--color-yellow: #d4a938;
|
||||
--color-yellow-medium: #e0c46a;
|
||||
--color-yellow-light: #f5f0d5;
|
||||
--color-map: #ad8422;
|
||||
|
|
@ -574,17 +574,20 @@ span.controls::after {
|
|||
}
|
||||
|
||||
.item-nav {
|
||||
border: 1px solid var(--color-txt-light);
|
||||
border-radius: var(--radius-small);
|
||||
border: 1.5px solid var(--color-txt);
|
||||
border-radius: var(--radius-btn);
|
||||
background-color: var(--white);
|
||||
color: var(--color-txt);
|
||||
padding: var(--padding-inner);
|
||||
padding-bottom: calc(var(--padding-inner) * 0.5);
|
||||
min-height: calc(var(--unit) * 5);
|
||||
max-width: 440px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
}
|
||||
.item-nav:hover {
|
||||
background-color: var(--color-light);
|
||||
}
|
||||
.item-nav .title {
|
||||
font-family: var(--font-title);
|
||||
font-size: 1.4rem;
|
||||
|
|
@ -679,47 +682,56 @@ span.controls::after {
|
|||
--color: var(--color-violet);
|
||||
--color-medium: var(--color-violet-medium);
|
||||
--color-light: var(--color-violet-light);
|
||||
background-color: var(--color-medium);
|
||||
background-color: var(--color);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
#home__base-connaissance {
|
||||
#home__animations {
|
||||
--color: var(--color-yellow);
|
||||
--color-medium: var(--color-yellow-medium);
|
||||
--color-light: var(--color-yellow-light);
|
||||
background-color: var(--color-medium);
|
||||
background-color: var(--color);
|
||||
color: var(--color-txt);
|
||||
}
|
||||
|
||||
#home__ateliers {
|
||||
#home__base-connaissance {
|
||||
--color: var(--color-orange);
|
||||
--color-medium: var(--color-orange-medium);
|
||||
--color-light: var(--color-orange-light);
|
||||
background-color: var(--color);
|
||||
}
|
||||
|
||||
#main_home {
|
||||
--max-w-home: 1100px;
|
||||
}
|
||||
#main_home section {
|
||||
padding: calc(var(--unit) * 3) var(--padding-body);
|
||||
position: relative;
|
||||
}
|
||||
#main_home section .section--inner {
|
||||
max-width: 1100px;
|
||||
max-width: var(--max-w-home);
|
||||
margin: 0 auto;
|
||||
}
|
||||
#main_home .item-nav__group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--unit);
|
||||
gap: var(--spacing);
|
||||
}
|
||||
#main_home .section--header {
|
||||
margin-bottom: calc(var(--unit) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 440px;
|
||||
gap: calc(var(--spacing) * 1);
|
||||
}
|
||||
#main_home .section--title {
|
||||
font-size: 2.8rem;
|
||||
font-family: var(--font-title);
|
||||
margin-bottom: calc(var(--unit) * 1);
|
||||
grid-column: span 2;
|
||||
}
|
||||
#main_home .baseline {
|
||||
font-size: var(--fs-medium);
|
||||
max-width: 46ch;
|
||||
max-width: 42ch;
|
||||
margin-top: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
|
||||
.slideshow {
|
||||
|
|
@ -730,24 +742,6 @@ span.controls::after {
|
|||
height: calc(var(--unit) * 11);
|
||||
}
|
||||
|
||||
.home--section-tool .section--inner {
|
||||
display: grid;
|
||||
grid-template-columns: 4fr 5fr;
|
||||
-moz-column-gap: calc(var(--unit) * 3);
|
||||
column-gap: calc(var(--unit) * 3);
|
||||
}
|
||||
.home--section-tool .section--inner .section--header {
|
||||
grid-column: 1/end;
|
||||
width: 100%;
|
||||
}
|
||||
.home--section-tool .section--inner .item-nav {
|
||||
grid-column: 1;
|
||||
}
|
||||
.home--section-tool .section--inner .highlight-block, .home--section-tool .section--inner .slideshow {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
#home__hero {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: calc(var(--unit) * 1.5) !important;
|
||||
|
|
@ -812,12 +806,14 @@ span.controls::after {
|
|||
padding-top: calc(var(--unit) * 1.5);
|
||||
}
|
||||
|
||||
#home__a-propos p, #home__a-propos li {
|
||||
#home__a-propos p,
|
||||
#home__a-propos li {
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 1em;
|
||||
position: relative;
|
||||
}
|
||||
#home__a-propos p strong, #home__a-propos li strong {
|
||||
#home__a-propos p strong,
|
||||
#home__a-propos li strong {
|
||||
color: var(--color-green);
|
||||
}
|
||||
#home__a-propos ol li::marker {
|
||||
|
|
@ -853,6 +849,64 @@ span.controls::after {
|
|||
margin-top: calc(var(--unit) * 2);
|
||||
}
|
||||
|
||||
.slideshow-scroll {
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
left: calc((100vw - var(--max-w-home)) * -0.5);
|
||||
padding-bottom: 20px;
|
||||
overflow-y: scroll;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
}
|
||||
.slideshow-scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.slideshow-scroll .slideshow-scroll__warpper {
|
||||
padding-left: var(--padding-body);
|
||||
display: flex;
|
||||
gap: var(--padding-inner);
|
||||
}
|
||||
.slideshow-scroll .slideshow-scroll__warpper .slideshow-item {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.slideshow-scroll .slideshow-scroll__warpper .slideshow-item figure {
|
||||
height: 420px;
|
||||
width: 100%;
|
||||
}
|
||||
.slideshow-scroll .slideshow-scroll__warpper .slideshow-item figure img {
|
||||
width: 100%;
|
||||
aspect-ratio: 5/3;
|
||||
}
|
||||
.slideshow-scroll .slideshow-scroll__warpper::after {
|
||||
content: "........................................";
|
||||
display: block;
|
||||
width: calc((100vw - var(--max-w-home)) * 1);
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.screenshot-booklet {
|
||||
display: flex;
|
||||
--size-page: 340px;
|
||||
--gap: var(--padding-inner);
|
||||
gap: var(--gap);
|
||||
width: calc(var(--size-page) * 5 + var(--gap) * 2);
|
||||
}
|
||||
.screenshot-booklet .cover, .screenshot-booklet .page {
|
||||
width: 300px;
|
||||
}
|
||||
.screenshot-booklet .cover img, .screenshot-booklet .page img {
|
||||
border: 0.5px solid var(--color-txt-light);
|
||||
width: 100%;
|
||||
}
|
||||
.screenshot-booklet .double {
|
||||
display: flex;
|
||||
}
|
||||
.screenshot-booklet .page + .page img {
|
||||
border-left-color: transparent !important;
|
||||
}
|
||||
|
||||
.species-list {
|
||||
display: grid;
|
||||
display: flex;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue