reorganisation style
This commit is contained in:
Julie Blanc
parent
e390d8cd5b
commit
718ca47696
20 changed files with 1187 additions and 821 deletions
168
assets/style.css
168
assets/style.css
|
|
@ -1,7 +1,7 @@
|
|||
@charset "UTF-8";
|
||||
:root {
|
||||
--font-title: "Borna", Arial, sans-serif;
|
||||
--font: "Nunito", Arial, sans-serif;
|
||||
--font-title: 'Borna', Arial, sans-serif;
|
||||
--font: 'Nunito', Arial, sans-serif;
|
||||
--fs-small: 14px;
|
||||
--fs-normal: 16px;
|
||||
--fs-medium: 22px;
|
||||
|
|
@ -45,24 +45,30 @@
|
|||
--color-light: var(--color-green-light);
|
||||
}
|
||||
|
||||
[data-type=livret] {
|
||||
[data-type=livrets] {
|
||||
--color: var(--color-violet);
|
||||
--color-medium: var(--color-violet-medium);
|
||||
--color-light: var(--color-violet-light);
|
||||
}
|
||||
|
||||
[data-type=base-connaissance] {
|
||||
--color: var(--color-yellow);
|
||||
--color-medium: var(--color-yellow-medium);
|
||||
--color-light: var(--color-yellow-light);
|
||||
--color: var(--color-green);
|
||||
--color-medium: var(--color-green-medium);
|
||||
--color-light: var(--color-green-light);
|
||||
}
|
||||
|
||||
[data-type=atelier] {
|
||||
[data-type=animations] {
|
||||
--color: var(--color-orange);
|
||||
--color-medium: var(--color-orange-medium);
|
||||
--color-light: var(--color-orange-light);
|
||||
}
|
||||
|
||||
[data-type=methodologie] {
|
||||
--color: var(--color-yellow);
|
||||
--color-medium: var(--color-yellow-medium);
|
||||
--color-light: var(--color-yellow-light);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -94,6 +100,20 @@ button {
|
|||
border: none;
|
||||
}
|
||||
|
||||
figure, picture, img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.link-block {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#site-header {
|
||||
height: var(--header-h);
|
||||
width: 100vw;
|
||||
|
|
@ -564,6 +584,13 @@ span.controls::after {
|
|||
height: 70px;
|
||||
}
|
||||
|
||||
.team .member img {
|
||||
width: 60px;
|
||||
aspect-ratio: 1/1;
|
||||
background-color: #cfcfcf;
|
||||
border-radius: var(--radius-img);
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
|
|
@ -573,6 +600,10 @@ span.controls::after {
|
|||
font-family: var(--font-title);
|
||||
}
|
||||
|
||||
.page-content {
|
||||
font-size: var(--fs-medium);
|
||||
}
|
||||
|
||||
.item-nav {
|
||||
border: 1.5px solid var(--color-txt);
|
||||
border-radius: var(--radius-btn);
|
||||
|
|
@ -583,11 +614,13 @@ span.controls::after {
|
|||
min-height: calc(var(--unit) * 5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
}
|
||||
.item-nav:hover {
|
||||
background-color: var(--color-light);
|
||||
}
|
||||
.item-nav {
|
||||
cursor: pointer;
|
||||
}
|
||||
.item-nav .title {
|
||||
font-family: var(--font-title);
|
||||
font-size: 1.4rem;
|
||||
|
|
@ -617,90 +650,13 @@ span.controls::after {
|
|||
left: calc(var(--unit) * 0.25);
|
||||
}
|
||||
|
||||
.highlight-block {
|
||||
.home--section-tool {
|
||||
background-color: var(--color);
|
||||
border: 1px solid var(--color-txt-light);
|
||||
border-radius: var(--radius-small);
|
||||
padding: calc(var(--padding-inner) * 1.5) var(--padding-inner);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--unit);
|
||||
}
|
||||
.highlight-block figure {
|
||||
width: 100%;
|
||||
max-width: 160px;
|
||||
aspect-ratio: 4/5;
|
||||
border: 1px solid var(--color-medium);
|
||||
border-radius: var(--radius-small);
|
||||
overflow: hidden;
|
||||
}
|
||||
.highlight-block figure img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
.highlight-block .label {
|
||||
font-weight: 600;
|
||||
margin-bottom: calc(var(--unit) * 0.5);
|
||||
/* text-decoration: 1px underline;
|
||||
text-underline-offset: 3px; */
|
||||
color: var(--color);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background-color: var(--color-light);
|
||||
height: var(--unit);
|
||||
padding: 0px 1ch;
|
||||
border-radius: var(--radius-btn);
|
||||
}
|
||||
.highlight-block .title {
|
||||
font-family: var(--font-title);
|
||||
font-size: 1.4rem;
|
||||
font-weight: normal;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.25em;
|
||||
color: var(--color-light);
|
||||
}
|
||||
.highlight-block .details {
|
||||
margin-bottom: calc(var(--unit) * 0.75);
|
||||
color: var(--color-light);
|
||||
font-weight: 500;
|
||||
}
|
||||
.highlight-block .content {
|
||||
position: relative;
|
||||
}
|
||||
.highlight-block .see-more {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
font-size: var(--fs-small);
|
||||
--hover-bg: var(--color);
|
||||
}
|
||||
|
||||
#home__livrets {
|
||||
--color: var(--color-violet);
|
||||
--color-medium: var(--color-violet-medium);
|
||||
--color-light: var(--color-violet-light);
|
||||
background-color: var(--color);
|
||||
.home--section-tool[data-type=base-connaissance], .home--section-tool[data-type=livrets] {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
#home__animations {
|
||||
--color: var(--color-yellow);
|
||||
--color-medium: var(--color-yellow-medium);
|
||||
--color-light: var(--color-yellow-light);
|
||||
background-color: var(--color);
|
||||
color: var(--color-txt);
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
|
@ -745,7 +701,6 @@ span.controls::after {
|
|||
#home__hero {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: calc(var(--unit) * 1.5) !important;
|
||||
/* button{ display: none;} */
|
||||
}
|
||||
#home__hero .section--inner {
|
||||
display: block;
|
||||
|
|
@ -758,6 +713,9 @@ span.controls::after {
|
|||
margin-bottom: calc(var(--unit) * 1.5);
|
||||
color: var(--color);
|
||||
}
|
||||
#home__hero {
|
||||
/* button{ display: none;} */
|
||||
}
|
||||
#home__hero .description {
|
||||
font-size: var(--fs-medium);
|
||||
max-width: 48ch;
|
||||
|
|
@ -857,12 +815,14 @@ span.controls::after {
|
|||
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 {
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
}
|
||||
.slideshow-scroll .slideshow-scroll__warpper {
|
||||
padding-left: var(--padding-body);
|
||||
display: flex;
|
||||
|
|
@ -941,12 +901,6 @@ span.controls::after {
|
|||
font-weight: 500;
|
||||
}
|
||||
|
||||
.species-list .taxon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-green-light);
|
||||
padding: 20px;
|
||||
}
|
||||
.species-list .taxon .btn-edit {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
|
@ -975,6 +929,13 @@ span.controls::after {
|
|||
.species-list .taxon .chart-edit, .species-list .taxon .btn-edit {
|
||||
display: none;
|
||||
}
|
||||
.species-list .taxon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
background-color: var(--color-green-light);
|
||||
padding: 20px;
|
||||
}
|
||||
.species-list .taxon .vernacular {
|
||||
order: 1;
|
||||
}
|
||||
|
|
@ -989,8 +950,6 @@ span.controls::after {
|
|||
aspect-ratio: 1;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
border-radius: var(--radius-img);
|
||||
overflow: hidden;
|
||||
}
|
||||
.species-list .taxon figure img {
|
||||
width: 100%;
|
||||
|
|
@ -998,6 +957,10 @@ span.controls::after {
|
|||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
.species-list .taxon figure {
|
||||
border-radius: var(--radius-img);
|
||||
overflow: hidden;
|
||||
}
|
||||
.species-list .taxon .vernacular {
|
||||
background-color: var(--color-green);
|
||||
color: white;
|
||||
|
|
@ -1005,12 +968,21 @@ span.controls::after {
|
|||
padding: 4px 1ch;
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
}
|
||||
.species-list .taxon .vernacular a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
.species-list .taxon .latin {
|
||||
font-weight: normal;
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
margin-bottom: calc(var(--spacing) * 0.75);
|
||||
color: var(--color-txt);
|
||||
}
|
||||
.species-list .taxon .vernacular, .species-list .taxon .latin {
|
||||
text-align: center;
|
||||
}
|
||||
.species-list .taxon:hover {
|
||||
outline: 2px solid var(--color-green);
|
||||
background-color: var(--color-green-medium);
|
||||
}/*# sourceMappingURL=style.css.map */
|
||||
Loading…
Add table
Add a link
Reference in a new issue