studio-variable/botascopia-webiste-static
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

finish page species

Browse source
This commit is contained in:
Julie Blanc 2026-02-15 23:56:23 +01:00
parent 6fff7422e8
commit a1a98d67b5
13 changed files with 1127 additions and 512 deletions
Download patch file Download diff file Expand all files Collapse all files

6
assets/css/_page-nav.scss
View file

@ -1,8 +1,14 @@
@use "abstracts/mixins.scss" as *;
.page-nav{
.toc{
list-style: none;
max-height: calc(100vh - var(--top-target) - 10px);
overflow: scroll;
@include hide-scrollbar();
padding-bottom: 10vh;
li{
font-size: var(--fs-normal);

9
assets/css/components/_sort.scss
View file

@ -9,7 +9,9 @@
}
.is-selected{
background-color: var(--color-txt);
border-color: var(--color-txt);
color: var(--white);
cursor: auto;
a{
color: var(--white);
}
@ -22,11 +24,4 @@
}
.group-sort-view{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin-bottom: calc(var(--spacing)*1.5);
}

14
assets/css/components/_species-list.scss
View file

@ -1,17 +1,3 @@
.species-list{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: calc(var(--spacing)*1);
margin-bottom: calc(var(--spacing)*3);
.taxon{
width: calc(100%/3 - var(--spacing)*3/3);
}
}
.family{
margin-bottom: calc(var(--spacing)*4);

16
assets/css/components/_taxon-card-inline.scss
View file

@ -1,7 +1,7 @@
#view-edit:checked ~ .family .species-list,
#view-edit:checked ~ .species-list,
#view-list:checked ~ .family .species-list,
#view-list:checked ~ .species-list {
#view-edit:checked ~ .page-species .family .species-list,
#view-edit:checked ~ .page-species .species-list,
#view-list:checked ~ .page-species .family .species-list,
#view-list:checked ~ .page-species .species-list {
display: block;
@ -90,10 +90,10 @@
}
#view-edit:checked ~ .family .species-list,
#view-edit:checked ~ .species-list{
#view-edit:checked ~ .page-species .family .species-list,
#view-edit:checked ~ .page-species .species-list{
.taxon .btn-edit{
display: block!important;
z-index: 100;
}
z-index: 30;
}
}

1
assets/css/components/_view-toggle.scss
View file

@ -33,6 +33,7 @@ input#view-list:checked ~ .view-toggle label[for="view-list"],
input#view-grid:checked ~ .view-toggle label[for="view-grid"]{
background-color: var(--color-txt);
color: var(--white);
border-color: var(--color-txt);
svg {
fill: var(--white);
}

0
assets/css/_home-item-nav.scss → assets/css/pages/_home-item-nav.scss
View file

2
assets/css/_home.scss → assets/css/pages/_home.scss
View file

@ -1,4 +1,4 @@
@use "abstracts/mixins.scss" as *;
@use "../abstracts/mixins.scss" as *;
.home--section-tool{

77
assets/css/pages/_species.scss Normal file
View file

@ -0,0 +1,77 @@
[data-page="species-by-families"],
[data-page="species"]{
.group-sort-view{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
grid-column: span 2;
width: 100%;
max-width: 100%;
border-bottom: 1px solid var(--color-x-light);
padding-top: calc(var(--spacing)*1);
padding-bottom: calc(var(--spacing)*0.5);
margin-bottom: calc(var(--spacing)*1.5);
position: sticky;
top: 0;
background-color: var(--white);
z-index: 50;
}
.page-species{
margin-bottom: 30vh;
}
}
[data-page="species-by-families"]{
.species-list{
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: calc(var(--spacing)*1);
margin-bottom: calc(var(--spacing)*3);
.taxon{
width: calc(100%/3 - var(--spacing)*2/3);
}
}
}
[data-page="species"]{
.page-species{
grid-column: span 2;
width: 100%;
max-width: 100%;
}
.species-list{
display: grid;
grid-gap: calc(var(--spacing)*1);
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
.taxon{
align-self: start;
}
}
}

532
assets/style.css
View file

@ -659,7 +659,9 @@ span.controls::after {
}
.sort .is-selected {
background-color: var(--color-txt);
border-color: var(--color-txt);
color: var(--white);
cursor: auto;
}
.sort .is-selected a {
color: var(--white);
@ -668,14 +670,6 @@ span.controls::after {
fill: var(--white);
}
.group-sort-view {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin-bottom: calc(var(--spacing) * 1.5);
}
input#view-edit,
input#view-grid,
input#view-list {
@ -704,6 +698,7 @@ input#view-list:checked ~ .view-toggle label[for=view-list],
input#view-grid:checked ~ .view-toggle label[for=view-grid] {
background-color: var(--color-txt);
color: var(--white);
border-color: var(--color-txt);
}
input#view-edit:checked ~ .group-sort-view .view-toggle label[for=view-edit] svg,
input#view-list:checked ~ .group-sort-view .view-toggle label[for=view-list] svg,
@ -769,6 +764,16 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
.page-nav .toc {
list-style: none;
max-height: calc(100vh - var(--top-target) - 10px);
overflow: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}
.page-nav .toc::-webkit-scrollbar {
display: none;
}
.page-nav .toc {
padding-bottom: 10vh;
}
.page-nav .toc li {
font-size: var(--fs-normal);
@ -826,6 +831,245 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
padding-top: var(--top-target);
}
.family {
margin-bottom: calc(var(--spacing) * 4);
}
.family:target {
padding-top: var(--top-target);
}
.family .family__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 2ch;
margin-bottom: calc(var(--spacing) * 1.5);
border-radius: var(--radius-small);
background-color: var(--color-violet-light);
color: var(--color-violet);
border: var(--w-border) solid var(--color-violet);
}
.family .family__header .title {
font-size: var(--fs-medium);
}
.family .family__header .nbr-species {
font-weight: 500;
}
.species-list .taxon .chart-edit {
width: 40px;
height: 40px;
}
.species-list .taxon .chart-edit svg {
width: 100%;
height: 100%;
}
.species-list .taxon .chart-edit svg circle {
fill: #efefef;
}
.species-list .taxon .chart-edit svg .filled {
fill: var(--color-orange-medium);
}
.species-list .taxon .chart-edit svg .verified {
fill: var(--color-green);
}
.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: calc(var(--padding-inner) * 0.75);
}
.species-list .taxon .name {
order: 1;
}
.species-list .taxon figure {
order: 2;
}
.species-list .taxon figure {
width: 100%;
aspect-ratio: 1;
overflow: hidden;
flex-shrink: 0;
}
.species-list .taxon figure img {
width: 100%;
height: 100%;
-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;
border-radius: var(--radius-small);
padding: 4px 1ch;
margin-bottom: calc(var(--spacing) * 0.25);
font-size: var(--fs-normal);
line-height: 1.1;
}
.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);
font-size: var(--fs-small);
}
.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);
}
#view-edit:checked ~ .page-species .family .species-list,
#view-edit:checked ~ .page-species .species-list,
#view-list:checked ~ .page-species .family .species-list,
#view-list:checked ~ .page-species .species-list {
display: block;
}
#view-edit:checked ~ .page-species .family .species-list .taxon,
#view-edit:checked ~ .page-species .species-list .taxon,
#view-list:checked ~ .page-species .family .species-list .taxon,
#view-list:checked ~ .page-species .species-list .taxon {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
background-color: transparent;
padding-inline: 0;
gap: calc(var(--padding-inner) * 1);
outline: none;
border-bottom: 1px solid var(--color-green-light);
padding-top: calc(var(--padding-inner) * 0.5);
padding-bottom: calc(var(--padding-inner) * 0.5);
}
#view-edit:checked ~ .page-species .family .species-list .taxon::before,
#view-edit:checked ~ .page-species .species-list .taxon::before,
#view-list:checked ~ .page-species .family .species-list .taxon::before,
#view-list:checked ~ .page-species .species-list .taxon::before {
content: "";
width: 100%;
border-top: 1px solid transparent;
position: absolute;
top: -1px;
}
#view-edit:checked ~ .page-species .family .species-list .taxon:first-of-type::before,
#view-edit:checked ~ .page-species .species-list .taxon:first-of-type::before,
#view-list:checked ~ .page-species .family .species-list .taxon:first-of-type::before,
#view-list:checked ~ .page-species .species-list .taxon:first-of-type::before {
border-color: var(--color-green-light);
}
#view-edit:checked ~ .page-species .family .species-list .taxon .chart-edit,
#view-edit:checked ~ .page-species .species-list .taxon .chart-edit,
#view-list:checked ~ .page-species .family .species-list .taxon .chart-edit,
#view-list:checked ~ .page-species .species-list .taxon .chart-edit {
display: block;
margin-right: var(--padding-inner);
}
#view-edit:checked ~ .page-species .family .species-list .taxon figure,
#view-edit:checked ~ .page-species .species-list .taxon figure,
#view-list:checked ~ .page-species .family .species-list .taxon figure,
#view-list:checked ~ .page-species .species-list .taxon figure {
order: 1;
}
#view-edit:checked ~ .page-species .family .species-list .taxon .name,
#view-edit:checked ~ .page-species .species-list .taxon .name,
#view-list:checked ~ .page-species .family .species-list .taxon .name,
#view-list:checked ~ .page-species .species-list .taxon .name {
order: 2;
}
#view-edit:checked ~ .page-species .family .species-list .taxon .chart-edit,
#view-edit:checked ~ .page-species .species-list .taxon .chart-edit,
#view-list:checked ~ .page-species .family .species-list .taxon .chart-edit,
#view-list:checked ~ .page-species .species-list .taxon .chart-edit {
order: 3;
}
#view-edit:checked ~ .page-species .family .species-list .taxon .btn-edit,
#view-edit:checked ~ .page-species .species-list .taxon .btn-edit,
#view-list:checked ~ .page-species .family .species-list .taxon .btn-edit,
#view-list:checked ~ .page-species .species-list .taxon .btn-edit {
order: 4;
}
#view-edit:checked ~ .page-species .family .species-list .taxon figure,
#view-edit:checked ~ .page-species .species-list .taxon figure,
#view-list:checked ~ .page-species .family .species-list .taxon figure,
#view-list:checked ~ .page-species .species-list .taxon figure {
width: 60px;
}
#view-edit:checked ~ .page-species .family .species-list .taxon .name,
#view-edit:checked ~ .page-species .species-list .taxon .name,
#view-list:checked ~ .page-species .family .species-list .taxon .name,
#view-list:checked ~ .page-species .species-list .taxon .name {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
#view-edit:checked ~ .page-species .family .species-list .taxon .name .vernacular, #view-edit:checked ~ .page-species .family .species-list .taxon .name .latin,
#view-edit:checked ~ .page-species .species-list .taxon .name .vernacular,
#view-edit:checked ~ .page-species .species-list .taxon .name .latin,
#view-list:checked ~ .page-species .family .species-list .taxon .name .vernacular,
#view-list:checked ~ .page-species .family .species-list .taxon .name .latin,
#view-list:checked ~ .page-species .species-list .taxon .name .vernacular,
#view-list:checked ~ .page-species .species-list .taxon .name .latin {
padding: 0;
margin: 0;
text-align: left;
}
#view-edit:checked ~ .page-species .family .species-list .taxon .name .vernacular,
#view-edit:checked ~ .page-species .species-list .taxon .name .vernacular,
#view-list:checked ~ .page-species .family .species-list .taxon .name .vernacular,
#view-list:checked ~ .page-species .species-list .taxon .name .vernacular {
background-color: transparent;
color: var(--color-green);
font-size: var(--fs-medium);
}
#view-edit:checked ~ .page-species .family .species-list .taxon .name .vernacular a,
#view-edit:checked ~ .page-species .species-list .taxon .name .vernacular a,
#view-list:checked ~ .page-species .family .species-list .taxon .name .vernacular a,
#view-list:checked ~ .page-species .species-list .taxon .name .vernacular a {
color: var(--color-green);
}
#view-edit:checked ~ .page-species .family .species-list .taxon .name .latin,
#view-edit:checked ~ .page-species .species-list .taxon .name .latin,
#view-list:checked ~ .page-species .family .species-list .taxon .name .latin,
#view-list:checked ~ .page-species .species-list .taxon .name .latin {
text-align: left;
padding-bottom: calc(var(--spacing) * 0.25);
}
#view-edit:checked ~ .page-species .family .species-list .taxon:hover,
#view-edit:checked ~ .page-species .species-list .taxon:hover,
#view-list:checked ~ .page-species .family .species-list .taxon:hover,
#view-list:checked ~ .page-species .species-list .taxon:hover {
outline: none;
background-color: var(--color-green-x-light);
border-color: var(--color-green);
}
#view-edit:checked ~ .page-species .family .species-list .taxon:hover::before,
#view-edit:checked ~ .page-species .species-list .taxon:hover::before,
#view-list:checked ~ .page-species .family .species-list .taxon:hover::before,
#view-list:checked ~ .page-species .species-list .taxon:hover::before {
border-color: var(--color-green);
}
#view-edit:checked ~ .page-species .family .species-list .taxon .btn-edit,
#view-edit:checked ~ .page-species .species-list .taxon .btn-edit {
display: block !important;
z-index: 30;
}
.item-nav {
border: 1.5px solid var(--color-txt);
border-radius: var(--radius-btn);
@ -1082,252 +1326,50 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
border-left-color: transparent !important;
}
.species-list {
[data-page=species-by-families] .group-sort-view,
[data-page=species] .group-sort-view {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
grid-column: span 2;
width: 100%;
max-width: 100%;
border-bottom: 1px solid var(--color-x-light);
padding-top: calc(var(--spacing) * 1);
padding-bottom: calc(var(--spacing) * 0.5);
margin-bottom: calc(var(--spacing) * 1.5);
position: sticky;
top: 0;
background-color: var(--white);
z-index: 50;
}
[data-page=species-by-families] .page-species,
[data-page=species] .page-species {
margin-bottom: 30vh;
}
[data-page=species-by-families] .species-list {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: calc(var(--spacing) * 1);
margin-bottom: calc(var(--spacing) * 3);
}
.species-list .taxon {
width: calc(33.3333333333% - var(--spacing) * 3 / 3);
[data-page=species-by-families] .species-list .taxon {
width: calc(33.3333333333% - var(--spacing) * 2 / 3);
}
.family {
margin-bottom: calc(var(--spacing) * 4);
}
.family:target {
padding-top: var(--top-target);
}
.family .family__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 2ch;
margin-bottom: calc(var(--spacing) * 1.5);
border-radius: var(--radius-small);
background-color: var(--color-violet-light);
color: var(--color-violet);
border: var(--w-border) solid var(--color-violet);
}
.family .family__header .title {
font-size: var(--fs-medium);
}
.family .family__header .nbr-species {
font-weight: 500;
}
.species-list .taxon .chart-edit {
width: 40px;
height: 40px;
}
.species-list .taxon .chart-edit svg {
[data-page=species] .page-species {
grid-column: span 2;
width: 100%;
height: 100%;
max-width: 100%;
}
.species-list .taxon .chart-edit svg circle {
fill: #efefef;
[data-page=species] .species-list {
display: grid;
grid-gap: calc(var(--spacing) * 1);
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.species-list .taxon .chart-edit svg .filled {
fill: var(--color-orange-medium);
}
.species-list .taxon .chart-edit svg .verified {
fill: var(--color-green);
}
.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: calc(var(--padding-inner) * 0.75);
}
.species-list .taxon .name {
order: 1;
}
.species-list .taxon figure {
order: 2;
}
.species-list .taxon figure {
width: 100%;
aspect-ratio: 1;
overflow: hidden;
flex-shrink: 0;
}
.species-list .taxon figure img {
width: 100%;
height: 100%;
-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;
border-radius: var(--radius-small);
padding: 4px 1ch;
margin-bottom: calc(var(--spacing) * 0.25);
font-size: var(--fs-normal);
line-height: 1.1;
}
.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);
font-size: var(--fs-small);
}
.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);
}
#view-edit:checked ~ .family .species-list,
#view-edit:checked ~ .species-list,
#view-list:checked ~ .family .species-list,
#view-list:checked ~ .species-list {
display: block;
}
#view-edit:checked ~ .family .species-list .taxon,
#view-edit:checked ~ .species-list .taxon,
#view-list:checked ~ .family .species-list .taxon,
#view-list:checked ~ .species-list .taxon {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
background-color: transparent;
padding-inline: 0;
gap: calc(var(--padding-inner) * 1);
outline: none;
border-bottom: 1px solid var(--color-green-light);
padding-top: calc(var(--padding-inner) * 0.5);
padding-bottom: calc(var(--padding-inner) * 0.5);
}
#view-edit:checked ~ .family .species-list .taxon::before,
#view-edit:checked ~ .species-list .taxon::before,
#view-list:checked ~ .family .species-list .taxon::before,
#view-list:checked ~ .species-list .taxon::before {
content: "";
width: 100%;
border-top: 1px solid transparent;
position: absolute;
top: -1px;
}
#view-edit:checked ~ .family .species-list .taxon:first-of-type::before,
#view-edit:checked ~ .species-list .taxon:first-of-type::before,
#view-list:checked ~ .family .species-list .taxon:first-of-type::before,
#view-list:checked ~ .species-list .taxon:first-of-type::before {
border-color: var(--color-green-light);
}
#view-edit:checked ~ .family .species-list .taxon .chart-edit,
#view-edit:checked ~ .species-list .taxon .chart-edit,
#view-list:checked ~ .family .species-list .taxon .chart-edit,
#view-list:checked ~ .species-list .taxon .chart-edit {
display: block;
margin-right: var(--padding-inner);
}
#view-edit:checked ~ .family .species-list .taxon figure,
#view-edit:checked ~ .species-list .taxon figure,
#view-list:checked ~ .family .species-list .taxon figure,
#view-list:checked ~ .species-list .taxon figure {
order: 1;
}
#view-edit:checked ~ .family .species-list .taxon .name,
#view-edit:checked ~ .species-list .taxon .name,
#view-list:checked ~ .family .species-list .taxon .name,
#view-list:checked ~ .species-list .taxon .name {
order: 2;
}
#view-edit:checked ~ .family .species-list .taxon .chart-edit,
#view-edit:checked ~ .species-list .taxon .chart-edit,
#view-list:checked ~ .family .species-list .taxon .chart-edit,
#view-list:checked ~ .species-list .taxon .chart-edit {
order: 3;
}
#view-edit:checked ~ .family .species-list .taxon .btn-edit,
#view-edit:checked ~ .species-list .taxon .btn-edit,
#view-list:checked ~ .family .species-list .taxon .btn-edit,
#view-list:checked ~ .species-list .taxon .btn-edit {
order: 4;
}
#view-edit:checked ~ .family .species-list .taxon figure,
#view-edit:checked ~ .species-list .taxon figure,
#view-list:checked ~ .family .species-list .taxon figure,
#view-list:checked ~ .species-list .taxon figure {
width: 60px;
}
#view-edit:checked ~ .family .species-list .taxon .name,
#view-edit:checked ~ .species-list .taxon .name,
#view-list:checked ~ .family .species-list .taxon .name,
#view-list:checked ~ .species-list .taxon .name {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
#view-edit:checked ~ .family .species-list .taxon .name .vernacular, #view-edit:checked ~ .family .species-list .taxon .name .latin,
#view-edit:checked ~ .species-list .taxon .name .vernacular,
#view-edit:checked ~ .species-list .taxon .name .latin,
#view-list:checked ~ .family .species-list .taxon .name .vernacular,
#view-list:checked ~ .family .species-list .taxon .name .latin,
#view-list:checked ~ .species-list .taxon .name .vernacular,
#view-list:checked ~ .species-list .taxon .name .latin {
padding: 0;
margin: 0;
text-align: left;
}
#view-edit:checked ~ .family .species-list .taxon .name .vernacular,
#view-edit:checked ~ .species-list .taxon .name .vernacular,
#view-list:checked ~ .family .species-list .taxon .name .vernacular,
#view-list:checked ~ .species-list .taxon .name .vernacular {
background-color: transparent;
color: var(--color-green);
font-size: var(--fs-medium);
}
#view-edit:checked ~ .family .species-list .taxon .name .vernacular a,
#view-edit:checked ~ .species-list .taxon .name .vernacular a,
#view-list:checked ~ .family .species-list .taxon .name .vernacular a,
#view-list:checked ~ .species-list .taxon .name .vernacular a {
color: var(--color-green);
}
#view-edit:checked ~ .family .species-list .taxon .name .latin,
#view-edit:checked ~ .species-list .taxon .name .latin,
#view-list:checked ~ .family .species-list .taxon .name .latin,
#view-list:checked ~ .species-list .taxon .name .latin {
text-align: left;
padding-bottom: calc(var(--spacing) * 0.25);
}
#view-edit:checked ~ .family .species-list .taxon:hover,
#view-edit:checked ~ .species-list .taxon:hover,
#view-list:checked ~ .family .species-list .taxon:hover,
#view-list:checked ~ .species-list .taxon:hover {
outline: none;
background-color: var(--color-green-x-light);
border-color: var(--color-green);
}
#view-edit:checked ~ .family .species-list .taxon:hover::before,
#view-edit:checked ~ .species-list .taxon:hover::before,
#view-list:checked ~ .family .species-list .taxon:hover::before,
#view-list:checked ~ .species-list .taxon:hover::before {
border-color: var(--color-green);
}
#view-edit:checked ~ .family .species-list .taxon .btn-edit,
#view-edit:checked ~ .species-list .taxon .btn-edit {
display: block !important;
z-index: 100;
[data-page=species] .species-list .taxon {
align-self: start;
}/*# sourceMappingURL=style.css.map */

2
assets/style.css.map
View file

File diff suppressed because one or more lines are too long

8
assets/style.scss
View file

@ -20,10 +20,12 @@
@use "css/page-content";
@use "css/home-item-nav";
@use "css/home";
@use "css/components/species-list";
@use "css/components/taxon-card";
@use "css/components/taxon-card-inline";
@use "css/pages/home-item-nav";
@use "css/pages/home";
@use "css/pages/species";

561
species-list-by-families.html Normal file
View file

@ -0,0 +1,561 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Botascopia</title>
<link rel="stylesheet" type="text/css" href="/assets/style.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/borna/stylesheet.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/nunita/stylesheet.css">
</head>
<body>
<include src="/components/site-header.html"></include>
<main data-page="species-by-families">
<header class="page-header">
<div class="page-header__inner">
<h2 class="page-title">Liste des espèces</h2>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio quasi facilis, explicabo similique molestiae dolorem consequuntur fugiat itaque iure fuga.
</p>
<div class="details">
<div class="details__item">
<p class="nbr">876</p>
<p class="text">espèces répertoriées</p>
</div>
<div class="details__item">
<p class="nbr">53</p>
<p class="text">contributeur·ices</p>
<button class="link-with-arrow"><a href="#">Voir la communuauté</a></button>
</div>
</div>
</div>
</header>
<div class="page-grid">
<input type="radio" id="view-grid" name="view" value="grid" checked />
<input type="radio" id="view-list" name="view" value="list"/>
<input type="radio" id="view-edit" name="view" value="edit" />
<div class="group-sort-view">
<div class="sort">
<p>Trier par</p>
<button class="btn-action">
<a class="text" href="/species-list.html">Nom</a>
</button>
<button class="btn-action is-selected">
<a class="text" href="#">Familles d’espèces</a>
</button>
</div>
<div class="view-toggle">
<p>Vue</p>
<label for="view-grid" class="btn-action"><span class="icon"><include src="/components/icons/view-grid.svg"></include></span> <span class="text">Galerie</span></label>
<label for="view-list" class="btn-action"><span class="icon"><include src="/components/icons/view-list.svg"></include></span> <span class="text">Liste</span></label>
<label for="view-edit" class="btn-action"><span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Édition</span></label>
</div>
</div>
<nav class="page-nav">
<ul class="toc">
<li><a href="#acanthaceae">Acanthaceae (1)</a></li>
<li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
<li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
<li><a href="#acanthaceae">Acanthaceae (1)</a></li>
<li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
<li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
<li><a href="#acanthaceae">Acanthaceae (1)</a></li>
<li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
<li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
<li><a href="#acanthaceae">Acanthaceae (1)</a></li>
<li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
<li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
<li><a href="#acanthaceae">Acanthaceae (1)</a></li>
<li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
<li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
<li><a href="#acanthaceae">Acanthaceae (1)</a></li>
<li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
<li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
<li><a href="#acanthaceae">Acanthaceae (1)</a></li>
<li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
<li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
</ul>
</nav>
<section class="page-species">
<section class="family" id="acanthaceae">
<div class="family__header">
<h2 class="title">Acanthaceae</h2>
<p class="nbr-species">1 espèce</p>
</div>
<div class="species-list">
<article class="taxon">
<figure>
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
</figure>
<div class="name">
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
<p class="latin">Acorus calamus L.</p>
</div>
</div>
<div class="chart-edit"><abbr title="Rempli à 81 % (18 / 22) et vérifié à 0 % (0 / 22)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 4.5184 29.2292 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr></div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
</div>
</section>
<section class="family" id="amaranthaceae">
<div class="family__header" >
<h2 class="title">Amaranthaceae</h2>
<p class="nbr-species">7 espèces</p>
</div>
<div class="species-list">
<article class="taxon">
<figure>
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
<p class="latin">Acorus calamus L.</p>
</div>
<div class="chart-edit"><abbr title="Rempli à 81 % (18 / 22) et vérifié à 0 % (0 / 22)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 4.5184 29.2292 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr></div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
<article class="taxon">
<figure>
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
<p class="latin">Alnus glutinosa</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 100 % (21 / 21) et vérifié à 90 % (19 / 21)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 0 50 100 A 50 50 0 0 0 50 0"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 21.834 8.68806 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
<article class="taxon">
<figure>
<img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
<p class="latin">Arum Italicum Mill.</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 95 % (22 / 23) et vérifié à 82 % (19 / 23)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 36.5102 1.85414 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 5.60574 26.9967 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
<article class="taxon">
<figure>
<img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Charme commun</a></h3>
<p class="latin">Carpinus betulus L.</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 0 % (0 / 5) et vérifié à 0 % (0 / 5)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
<article class="taxon">
<figure>
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
<p class="latin">Acorus calamus L.</p>
</div>
<div class="chart-edit"><abbr title="Rempli à 81 % (18 / 22) et vérifié à 0 % (0 / 22)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 4.5184 29.2292 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr></div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
<article class="taxon">
<figure>
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
<p class="latin">Alnus glutinosa</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 100 % (21 / 21) et vérifié à 90 % (19 / 21)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 0 50 100 A 50 50 0 0 0 50 0"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 21.834 8.68806 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
<article class="taxon">
<figure>
<img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
<p class="latin">Arum Italicum Mill.</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 95 % (22 / 23) et vérifié à 82 % (19 / 23)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 36.5102 1.85414 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 5.60574 26.9967 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
<article class="taxon">
<figure>
<img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Charme commun</a></h3>
<p class="latin">Carpinus betulus L.</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 0 % (0 / 5) et vérifié à 0 % (0 / 5)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
</div>
</section>
<section class="family" id="amaryllidaceae">
<div class="family__header">
<h2 class="title">Amaryllidaceae</h2>
<p class="nbr-species">14 espèces</p>
</div>
<div class="species-list">
<article class="taxon">
<figure>
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
<p class="latin">Acorus calamus L.</p>
</div>
<div class="chart-edit"><abbr title="Rempli à 81 % (18 / 22) et vérifié à 0 % (0 / 22)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 4.5184 29.2292 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr></div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
<article class="taxon">
<figure>
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
<p class="latin">Alnus glutinosa</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 100 % (21 / 21) et vérifié à 90 % (19 / 21)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 0 50 100 A 50 50 0 0 0 50 0"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 21.834 8.68806 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
<article class="taxon">
<figure>
<img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
<p class="latin">Arum Italicum Mill.</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 95 % (22 / 23) et vérifié à 82 % (19 / 23)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 36.5102 1.85414 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 5.60574 26.9967 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
<article class="taxon">
<figure>
<img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Charme commun</a></h3>
<p class="latin">Carpinus betulus L.</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 0 % (0 / 5) et vérifié à 0 % (0 / 5)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
<article class="taxon">
<figure>
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
<p class="latin">Acorus calamus L.</p>
</div>
<div class="chart-edit"><abbr title="Rempli à 81 % (18 / 22) et vérifié à 0 % (0 / 22)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 4.5184 29.2292 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr></div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
<article class="taxon">
<figure>
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
<p class="latin">Alnus glutinosa</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 100 % (21 / 21) et vérifié à 90 % (19 / 21)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 0 50 100 A 50 50 0 0 0 50 0"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 21.834 8.68806 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
<article class="taxon">
<figure>
<img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Gléchome lierre terrestre</a></h3>
<p class="latin">Glechoma hederacea</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 95 % (22 / 23) et vérifié à 82 % (19 / 23)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 36.5102 1.85414 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 5.60574 26.9967 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
<article class="taxon">
<figure>
<img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Charme commun</a></h3>
<p class="latin">Carpinus betulus L.</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 0 % (0 / 5) et vérifié à 0 % (0 / 5)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
</div>
</section>
</section>
</div>
</main>
<include src="/components/site-footer.html"></include>
<!-- SCRIPT À SUPPRIMER UNE FOIS LE SITE INTEGRÉ (include des composants)-->
<script>
function processIncludes() {
const includes = document.querySelectorAll('include[src]');
if (includes.length === 0) {
return;
}
const promises = Array.from(includes).map(el => {
const src = el.getAttribute('src');
return fetch(src)
.then(r => {
if (!r.ok) throw new Error(`Erreur ${r.status}: ${src}`);
return r.text();
})
.then(html => {
el.outerHTML = html;
})
.catch(err => {
console.error('Erreur de chargement:', err);
});
});
Promise.all(promises).then(() => {
processIncludes();
});
}
document.addEventListener('DOMContentLoaded', processIncludes);
</script>
</body>
</html>

411
species-list.html
View file

@ -16,7 +16,7 @@
<include src="/components/site-header.html"></include>
<main id="main_species-list">
<main data-page="species">
<header class="page-header">
<div class="page-header__inner">
@ -47,51 +47,26 @@
<div class="page-grid">
<nav class="page-nav">
<ul class="toc">
<li><a href="#acanthaceae">Acanthaceae (1)</a></li>
<li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
<li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
<li><a href="#acanthaceae">Acanthaceae (1)</a></li>
<li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
<li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
<li><a href="#acanthaceae">Acanthaceae (1)</a></li>
<li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
<li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
<li><a href="#acanthaceae">Acanthaceae (1)</a></li>
<li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
<li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
</ul>
</nav>
<section class="page-species">
<input type="radio" id="view-grid" name="view" value="grid" checked />
<input type="radio" id="view-list" name="view" value="list"/>
<input type="radio" id="view-edit" name="view" value="edit" />
<div class="group-sort-view">
<div class="sort">
<p>Trier par</p>
<button class="btn-action">
<button class="btn-action is-selected">
<a class="text" href="#">Nom</a>
</button>
<button class="btn-action is-selected">
<a class="text" href="#">Familles d’espèces</a>
<button class="btn-action">
<a class="text" href="/species-list-by-families.html">Familles d’espèces</a>
</button>
</div>
<div class="view-toggle">
<div class="view-toggle">
<p>Vue</p>
<label for="view-grid" class="btn-action"><span class="icon"><include src="/components/icons/view-grid.svg"></include></span> <span class="text">Galerie</span></label>
<label for="view-list" class="btn-action"><span class="icon"><include src="/components/icons/view-list.svg"></include></span> <span class="text">Liste</span></label>
@ -99,17 +74,14 @@
</div>
</div>
</div>
<section class="family" id="acanthaceae">
<div class="family__header">
<h2 class="title">Acanthaceae</h2>
<p class="nbr-species">1 espèce</p>
</div>
<section class="page-species">
<div class="species-list">
<div class="species-list">
<article class="taxon">
<figure>
@ -132,203 +104,179 @@
<a class="link-block" href="#" target="_blank"></a>
</article>
</div>
</section>
<article class="taxon">
<figure>
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
<p class="latin">Acorus calamus L.</p>
</div>
<div class="chart-edit"><abbr title="Rempli à 81 % (18 / 22) et vérifié à 0 % (0 / 22)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 4.5184 29.2292 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr></div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
<article class="taxon">
<figure>
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
<p class="latin">Alnus glutinosa</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 100 % (21 / 21) et vérifié à 90 % (19 / 21)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 0 50 100 A 50 50 0 0 0 50 0"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 21.834 8.68806 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
<article class="taxon">
<figure>
<img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
<p class="latin">Arum Italicum Mill.</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 95 % (22 / 23) et vérifié à 82 % (19 / 23)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 36.5102 1.85414 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 5.60574 26.9967 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
<article class="taxon">
<figure>
<img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Charme commun</a></h3>
<p class="latin">Carpinus betulus L.</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 0 % (0 / 5) et vérifié à 0 % (0 / 5)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
<article class="taxon">
<figure>
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
<p class="latin">Acorus calamus L.</p>
</div>
<div class="chart-edit"><abbr title="Rempli à 81 % (18 / 22) et vérifié à 0 % (0 / 22)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 4.5184 29.2292 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr></div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
<article class="taxon">
<figure>
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
<p class="latin">Alnus glutinosa</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 100 % (21 / 21) et vérifié à 90 % (19 / 21)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 0 50 100 A 50 50 0 0 0 50 0"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 21.834 8.68806 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
<article class="taxon">
<figure>
<img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
<p class="latin">Arum Italicum Mill.</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 95 % (22 / 23) et vérifié à 82 % (19 / 23)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 36.5102 1.85414 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 5.60574 26.9967 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
<article class="taxon">
<figure>
<img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Charme commun</a></h3>
<p class="latin">Carpinus betulus L.</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 0 % (0 / 5) et vérifié à 0 % (0 / 5)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
<section class="family" id="amaranthaceae">
<div class="family__header" >
<h2 class="title">Amaranthaceae</h2>
<p class="nbr-species">7 espèces</p>
</div>
<div class="species-list">
<article class="taxon">
<figure>
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
<p class="latin">Acorus calamus L.</p>
</div>
<div class="chart-edit"><abbr title="Rempli à 81 % (18 / 22) et vérifié à 0 % (0 / 22)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 4.5184 29.2292 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr></div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
<article class="taxon">
<figure>
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
<p class="latin">Alnus glutinosa</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 100 % (21 / 21) et vérifié à 90 % (19 / 21)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 0 50 100 A 50 50 0 0 0 50 0"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 21.834 8.68806 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
<article class="taxon">
<figure>
<img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
<p class="latin">Arum Italicum Mill.</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 95 % (22 / 23) et vérifié à 82 % (19 / 23)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 36.5102 1.85414 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 5.60574 26.9967 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
<article class="taxon">
<figure>
<img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Charme commun</a></h3>
<p class="latin">Carpinus betulus L.</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 0 % (0 / 5) et vérifié à 0 % (0 / 5)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
<article class="taxon">
<figure>
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
<p class="latin">Acorus calamus L.</p>
</div>
<div class="chart-edit"><abbr title="Rempli à 81 % (18 / 22) et vérifié à 0 % (0 / 22)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 4.5184 29.2292 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr></div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
<article class="taxon">
<figure>
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
<p class="latin">Alnus glutinosa</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 100 % (21 / 21) et vérifié à 90 % (19 / 21)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 0 50 100 A 50 50 0 0 0 50 0"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 21.834 8.68806 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
<article class="taxon">
<figure>
<img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
<p class="latin">Arum Italicum Mill.</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 95 % (22 / 23) et vérifié à 82 % (19 / 23)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 36.5102 1.85414 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 5.60574 26.9967 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
<article class="taxon">
<figure>
<img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
</figure>
<div class="name">
<h3 class="vernacular"><a href="#" target="_blank">Charme commun</a></h3>
<p class="latin">Carpinus betulus L.</p>
</div>
<div class="chart-edit">
<abbr title="Rempli à 0 % (0 / 5) et vérifié à 0 % (0 / 5)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-action btn-edit">
<a href="#" target="_blank">
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
</a>
</button>
<a class="link-block" href="#" target="_blank"></a>
</article>
</div>
</section>
<section class="family" id="amaryllidaceae">
<div class="family__header">
<h2 class="title">Amaryllidaceae</h2>
<p class="nbr-species">14 espèces</p>
</div>
<div class="species-list">
<article class="taxon">
<figure>
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
@ -494,9 +442,6 @@
</article>
</div>
</section>
</section>