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

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