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

add sort & view for species

Browse source
This commit is contained in:
Julie Blanc 2026-02-15 23:14:52 +01:00
parent 718ca47696
commit 6fff7422e8
26 changed files with 1448 additions and 432 deletions
Download patch file Download diff file Expand all files Collapse all files

73
assets/css/components/_buttons.scss
View file

@ -1,4 +1,4 @@
@use "../abstracts/mixins.scss" as *;
.btn--solid{
font-weight: 600;
@ -28,3 +28,74 @@
}
.btn-action {
border: 1px solid var(--color-txt-light);
height: calc(var(--unit)*1.25);
background-color: var(--white);
border-radius: var(--radius-btn);
cursor: pointer;
a{
display: flex;
align-items: center;
gap: 1ch;
text-decoration: none;
color: var(--color-txt);
padding: 0 1ch;
}
.icon{
@include icon(20px);
}
.text{
font-size: var(--fs-small);
font-weight: 500;
}
&:hover{
border-color: var(--color-txt);
}
}
label.btn-action{
display: inline-flex;
align-items: center;
gap: 1ch;
text-decoration: none;
color: var(--color-txt);
padding: 0 1ch;
.text{
font-weight: 700;
}
}
.link-with-arrow{
a{
text-decoration: none;
color: var(--color-txt);
font-size: var(--fs-small);
&::after{
content: "→";
font-family: var(--font-title);
font-size: 0.9em;
position: relative;
left: 1.5ch;
transition: left .4s ease-in-out;
text-decoration: 1px underline transparent;
}
}
&:hover{
opacity: 0.8;
a::after{
left: 2.5ch;
}
}
}

26
assets/css/components/_see-more.scss
View file

@ -1,26 +0,0 @@
.see-more{
--hover-bg: var(--color-bg);
font-weight: 500;
color: var(--color-txt);
color: currentColor;
text-decoration: none;
span{ display: none;}
&::after{
content: "→";
position: relative;
display: inline-block;
padding-left: 0.75ch;
left: 0;
transition: left .4s ease-in-out;
}
&:hover{
text-decoration: underline;
&::after{
left: 0.5ch;
text-decoration: underline var(--hover-bg);
}
}
}

32
assets/css/components/_sort.scss Normal file
View file

@ -0,0 +1,32 @@
.sort{
display: flex;
justify-content: flex-start;
align-items: center;
gap: calc(var(--padding-inner)*0.5);
p{
font-weight: 500;
padding-right: 1ch;
}
.is-selected{
background-color: var(--color-txt);
color: var(--white);
a{
color: var(--white);
}
svg {
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);
}

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

@ -1,29 +1,23 @@
.species-list{
display: grid;
display: flex;
flex-wrap: wrap;
justify-content: center;
// gap: calc(var(--spacing)*2);
gap: calc(var(--spacing)*1);
gap: calc(var(--spacing)*1.5);
margin-bottom: calc(var(--spacing)*3);
.taxon{
width: calc(100%/3 - var(--spacing)*3/3);
}
}
.family{
margin-bottom: calc(var(--spacing)*4);
&:target{
padding-top: var(--top-target);
}
.family__header{

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

@ -0,0 +1,99 @@
#view-edit:checked ~ .family .species-list,
#view-edit:checked ~ .species-list,
#view-list:checked ~ .family .species-list,
#view-list:checked ~ .species-list {
display: block;
.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);
&::before{
content: '';
width: 100%;
border-top: 1px solid transparent;
position: absolute;
top: -1px;
}
&:first-of-type::before{ border-color: var(--color-green-light);}
.chart-edit {
display: block;
margin-right: var(--padding-inner);
}
figure{ order: 1; }
.name{ order: 2; }
.chart-edit{ order: 3; }
.btn-edit{ order: 4; }
figure{
width: 60px;
}
.name{
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
.vernacular, .latin{
padding: 0;
margin: 0;
text-align: left;
}
.vernacular{
background-color: transparent;
color: var(--color-green);
font-size: var(--fs-medium);
a{
color: var(--color-green);
}
}
.latin{
text-align: left;
padding-bottom: calc(var(--spacing)*0.25);
}
}
&:hover{
outline: none;
background-color: var(--color-green-x-light);
border-color: var(--color-green);
&::before{ border-color: var(--color-green); }
}
}
}
#view-edit:checked ~ .family .species-list,
#view-edit:checked ~ .species-list{
.taxon .btn-edit{
display: block!important;
z-index: 100;
}
}

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

@ -2,15 +2,13 @@
.species-list .taxon{
.btn-edit {
@include icon(20px);
}
.chart-edit{
@include chart-edit(40px);
}
.chart-edit, .btn-edit{
.chart-edit, .btn-edit{
display: none;
}
@ -21,11 +19,10 @@
position: relative;
background-color: var(--color-green-light);
padding: 20px;
padding: calc(var(--padding-inner)*0.75);
.vernacular{ order: 1; }
.latin{ order: 2; }
figure{ order: 3; }
.name{ order: 1; }
figure{ order: 2; }
figure{
@include fig-ratio(1/1);
@ -41,6 +38,8 @@
border-radius: var(--radius-small);
padding: 4px 1ch;
margin-bottom: calc(var(--spacing)*0.25);
font-size: var(--fs-normal);
line-height: 1.1;
a{
color: white;
text-decoration: none;
@ -53,6 +52,7 @@
font-style: italic;
margin-bottom: calc(var(--spacing)*0.75);
color: var(--color-txt);
font-size: var(--fs-small);
}
.vernacular, .latin{

21
assets/css/components/_team.scss
View file

@ -1,10 +1,29 @@
.team{
display: flex;
flex-wrap: wrap;
gap: 2ch;
.member{
display: flex;
align-items: center;
gap: 2ch;
width: calc(50% - 2ch);
.name{
font-weight: bold;
}
.details{
font-size: var(--fs-normal);
margin-top: calc(var(--spacing)*0.25);
}
img{
width: 60px;
width: 100px;
aspect-ratio: 1/1;
background-color: #cfcfcf;
border-radius: var(--radius-img);
float: left;
}
}
}

40
assets/css/components/_view-toggle.scss Normal file
View file

@ -0,0 +1,40 @@
input#view-edit,
input#view-grid,
input#view-list{
display: none;
}
.view-toggle{
display: flex;
justify-content: flex-end;
align-items: center;
gap: calc(var(--padding-inner)*0.5);
p{
font-weight: 500;
padding-right: 1.5ch;
}
label{
.txt{
font-weight: 700!important;
}
}
}
input#view-edit:checked ~ .group-sort-view .view-toggle label[for="view-edit"],
input#view-list:checked ~ .group-sort-view .view-toggle label[for="view-list"],
input#view-grid:checked ~ .group-sort-view .view-toggle label[for="view-grid"],
input#view-edit:checked ~ .view-toggle label[for="view-edit"],
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);
svg {
fill: var(--white);
}
}