nouvelle home
This commit is contained in:
Julie Blanc
parent
46b251e229
commit
e390d8cd5b
7 changed files with 374 additions and 226 deletions
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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue