add sort & view for species

This commit is contained in:
Julie Blanc 2026-02-15 23:14:52 +01:00
parent 718ca47696
commit 6fff7422e8
26 changed files with 1448 additions and 432 deletions

View file

@ -1,4 +1,5 @@
@mixin icon($size){
display: inline-block;
width: $size;
height: $size;
@ -18,15 +19,15 @@
height: 100%;
circle{
fill: #cfcfcf;
fill: #efefef;
}
.filled{
fill: lightgreen;
fill: var(--color-orange-medium);
}
.verified{
fill: green;
fill: var(--color-green);
}
}
}

View file

@ -7,7 +7,7 @@
--fs-small: 14px;
--fs-normal: 16px;
--fs-medium: 22px;
--fs-title-page: 38px;
--fs-title-page: 42px;
--spacing: 20px;
@ -21,7 +21,7 @@
--radius-btn: 6px;
--radius-img: 6px;
--header-h: 60px;
--header-h: 80px;
--header-z: 9000;
--white: white;
@ -49,19 +49,28 @@
--color-orange-light: #f3e7e0;
--color-green: #007953;
--color-green-medium: #a1ccbe;;
// --color-green-medium: #a1ccbe;
--color-green-medium: #42af8c;
--color-green-light: #d5ebe4;
--color-green-x-light: #eef7f4;
--color-green-black: #016042;
--color-txt: rgb(41, 41, 41);
--color-txt-light: #a5a9a9;
--color-light: #DCDDDD;
--color-x-light: #eaebeb;
--color-xx-light: #f4f4f4;
--color: var(--color-green);
--color-medium: var(--color-green-medium);
--color-light: var(--color-green-light);
--max-width-content: 740px;
--max-width-container: 860px;
--top-target: calc(var(--spacing)*5);
}
@ -70,28 +79,28 @@
[data-type="livrets"]{
--color: var(--color-violet);
--color-medium: var(--color-violet-medium);
--color-light: var(--color-violet-light);
--data-color: var(--color-violet);
--data-color-medium: var(--color-violet-medium);
--data-color-light: var(--color-violet-light);
}
[data-type="base-connaissance"]{
--color: var(--color-green);
--color-medium: var(--color-green-medium);
--color-light: var(--color-green-light);
--data-color: var(--color-green);
--data-color-medium: var(--color-green-medium);
--data-color-light: var(--color-green-light);
}
[data-type="animations"]{
--color: var(--color-orange);
--color-medium: var(--color-orange-medium);
--color-light: var(--color-orange-light);
--data-color: var(--color-orange);
--data-color-medium: var(--color-orange-medium);
--data-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);
--data-color: var(--color-yellow);
--data-color-medium: var(--color-yellow-medium);
--data-color-light: var(--color-yellow-light);
}