finish page species

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

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);

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);
}

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);

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;
}
}

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);
}

View file

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

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;
}
}
}

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 */

File diff suppressed because one or more lines are too long

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";