finish page species
This commit is contained in:
parent
6fff7422e8
commit
a1a98d67b5
13 changed files with 1127 additions and 512 deletions
|
|
@ -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,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);
|
||||
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
77
assets/css/pages/_species.scss
Normal 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
532
assets/style.css
|
|
@ -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
|
|
@ -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";
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue