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

card taxon

Browse source
This commit is contained in:
Julie Blanc 2026-02-11 15:34:20 +01:00
parent d364dda00d
commit 7ea78dc8ce
9 changed files with 445 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

1
assets/css/_page-header.scss
View file

@ -1,7 +1,6 @@
.page-header{
margin-top: calc(var(--spacing)*3);
background-color: red;
margin-bottom: calc(var(--spacing)*2);
.page-title{

45
assets/css/_species-list.scss
View file

@ -1,14 +1,51 @@
.species-list{
display: grid;
display: flex;
flex-wrap: wrap;
--gap: calc(var(--spacing)*2);
gap: var(--spacing);
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{
flex: 1 1 calc(50% - var(--spacing)*1);
min-width: 250px;
// width: calc(100%/3 - var(--spacing)*4/3);
width: calc(100%/3 - var(--spacing)*3/3);
}
}
.family{
margin-bottom: calc(var(--spacing)*4);
.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);
.title{
font-size: var(--fs-medium);
}
.nbr-species{
font-weight: 500;
}
}
}

49
assets/css/_taxon-card.scss
View file

@ -1,7 +1,6 @@
@use "abstracts/mixins.scss" as *;
.species-list .taxon{
border: 1px solid red;
.btn-edit {
@include icon(20px);
@ -11,8 +10,52 @@
@include chart-edit(40px);
}
figure, img{
width: 100%;
.chart-edit, .btn-edit{
display: none;
}
display: flex;
flex-direction: column;
// margin-bottom: calc(var(--spacing)*2);
background-color: var(--color-green-light);
padding: 20px;
.vernacular{ order: 1; }
.latin{ order: 2; }
figure{ order: 3; }
figure{
@include fig-ratio(1/1);
border-radius: var(--radius-img);
overflow: hidden;
}
.vernacular{
// font-size: var(--fs-medium);
// color: var(--color-green);
background-color: var(--color-green);
color: white;
border-radius: var(--radius-small);
padding: 4px 1ch;
margin-bottom: calc(var(--spacing)*0.25);
}
.latin{
font-weight: normal;
font-weight: 500;
font-style: italic;
margin-bottom: calc(var(--spacing)*0.75);
}
.vernacular, .latin{
text-align: center;
}
}

13
assets/css/abstracts/_mixins.scss
View file

@ -29,4 +29,17 @@
fill: green;
}
}
}
@mixin fig-ratio($ratio){
width: 100%;
aspect-ratio: $ratio;
overflow: hidden;
flex-shrink: 0;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}

4
assets/css/abstracts/_var.scss
View file

@ -6,6 +6,7 @@
--fs-small: 14px;
--fs-normal: 16px;
--fs-medium: 24px;
--fs-title-page: 38px;
--spacing: 20px;
@ -18,6 +19,7 @@
--radius-small: 3px;
--radius-btn: 6px;
--radius-img: 6px;
--header-h: 60px;
--header-z: 9000;
@ -25,6 +27,8 @@
--white: white;
--color-bg: white;
--w-border: 2px;
--color-violet: #6e62a4;
--color-violet-medium: #9b92c4;

81
assets/style.css
View file

@ -4,6 +4,7 @@
--font: "Nunito", Arial, sans-serif;
--fs-small: 14px;
--fs-normal: 16px;
--fs-medium: 24px;
--fs-title-page: 38px;
--spacing: 20px;
font-size: 14px;
@ -12,10 +13,12 @@
--padding-inner: 16px;
--radius-small: 3px;
--radius-btn: 6px;
--radius-img: 6px;
--header-h: 60px;
--header-z: 9000;
--white: white;
--color-bg: white;
--w-border: 2px;
--color-violet: #6e62a4;
--color-violet-medium: #9b92c4;
--color-violet-light: #e1dfec;
@ -563,7 +566,6 @@ span.controls::after {
.page-header {
margin-top: calc(var(--spacing) * 3);
background-color: red;
margin-bottom: calc(var(--spacing) * 2);
}
.page-header .page-title {
@ -847,18 +849,44 @@ span.controls::after {
}
.species-list {
display: grid;
display: flex;
flex-wrap: wrap;
--gap: calc(var(--spacing)*2);
gap: var(--spacing);
justify-content: center;
gap: calc(var(--spacing) * 1);
gap: calc(var(--spacing) * 1.5);
margin-bottom: calc(var(--spacing) * 3);
}
.species-list .taxon {
flex: 1 1 calc(50% - var(--spacing) * 1);
min-width: 250px;
width: calc(33.3333333333% - var(--spacing) * 3 / 3);
}
.family {
margin-bottom: calc(var(--spacing) * 4);
}
.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 {
border: 1px solid red;
display: flex;
flex-direction: column;
background-color: var(--color-green-light);
padding: 20px;
}
.species-list .taxon .btn-edit {
width: 20px;
@ -885,6 +913,45 @@ span.controls::after {
.species-list .taxon .chart-edit svg .verified {
fill: green;
}
.species-list .taxon figure, .species-list .taxon img {
.species-list .taxon .chart-edit, .species-list .taxon .btn-edit {
display: none;
}
.species-list .taxon .vernacular {
order: 1;
}
.species-list .taxon .latin {
order: 2;
}
.species-list .taxon figure {
order: 3;
}
.species-list .taxon figure {
width: 100%;
aspect-ratio: 1;
overflow: hidden;
flex-shrink: 0;
border-radius: var(--radius-img);
overflow: hidden;
}
.species-list .taxon figure img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.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);
}
.species-list .taxon .latin {
font-weight: normal;
font-weight: 500;
font-style: italic;
margin-bottom: calc(var(--spacing) * 0.75);
}
.species-list .taxon .vernacular, .species-list .taxon .latin {
text-align: center;
}/*# sourceMappingURL=style.css.map */

2
assets/style.css.map
View file

File diff suppressed because one or more lines are too long