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{ .page-header{
margin-top: calc(var(--spacing)*3); margin-top: calc(var(--spacing)*3);
background-color: red;
margin-bottom: calc(var(--spacing)*2); margin-bottom: calc(var(--spacing)*2);
.page-title{ .page-title{

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

@ -1,14 +1,51 @@
.species-list{ .species-list{
display: grid;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
--gap: calc(var(--spacing)*2); justify-content: center;
gap: var(--spacing); // gap: calc(var(--spacing)*2);
gap: calc(var(--spacing)*1);
gap: calc(var(--spacing)*1.5);
margin-bottom: calc(var(--spacing)*3);
.taxon{ .taxon{
flex: 1 1 calc(50% - var(--spacing)*1); // width: calc(100%/3 - var(--spacing)*4/3);
min-width: 250px; 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 *; @use "abstracts/mixins.scss" as *;
.species-list .taxon{ .species-list .taxon{
border: 1px solid red;
.btn-edit { .btn-edit {
@include icon(20px); @include icon(20px);
@ -11,8 +10,52 @@
@include chart-edit(40px); @include chart-edit(40px);
} }
figure, img{ .chart-edit, .btn-edit{
width: 100%; 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

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

81
assets/style.css
View file

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

2
assets/style.css.map
View file

File diff suppressed because one or more lines are too long

2
components/site-nav.html
View file

@ -17,7 +17,7 @@
<li class="nav-level-1_li li-dropdown"> <li class="nav-level-1_li li-dropdown">
<a class="nav-level-1_link" href="#">Base de connaissance <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></a> <a class="nav-level-1_link" href="#">Base de connaissance <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></a>
<ul class="nav-level-2_ul"> <ul class="nav-level-2_ul">
<li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Explorer les espèces</a></li> <li class="nav-level-2_li"><a class="nav-level-2_link" href="species-list.html">Explorer les espèces</a></li>
<li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Contribuer à la base de connaissance</a></li> <li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Contribuer à la base de connaissance</a></li>
</ul> </ul>
</li> </li>

165
species-list.html
View file

@ -31,7 +31,16 @@
<button>Vue édition</button> <button>Vue édition</button>
</nav> </nav>
<section class="species-list">
<section class="family">
<div class="family__header">
<h2 class="title">Acanthaceae</h2>
<p class="nbr-species">1 espèce</p>
</div>
<div class="species-list">
<article class="taxon"> <article class="taxon">
<figure> <figure>
@ -47,9 +56,22 @@
</button> </button>
</article> </article>
</div>
</section> </section>
<section class="species-list">
<section class="family">
<div class="family__header">
<h2 class="title">Amaranthaceae</h2>
<p class="nbr-species">7 espèces</p>
</div>
<div class="species-list">
<article class="taxon"> <article class="taxon">
<figure> <figure>
@ -176,10 +198,149 @@
</article> </article>
</div>
</section> </section>
<section class="family">
<div class="family__header">
<h2 class="title">Amaryllidaceae</h2>
<p class="nbr-species">14 espèces</p>
</div>
<div class="species-list">
<article class="taxon">
<figure>
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
</figure>
<h3 class="vernacular">Acore odorant</h3>
<h4 class="latin">Acorus calamus L.</h4>
<div class="chart-edit"><abbr title="Rempli à 81 % (18 / 22) et vérifié à 0 % (0 / 22)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 4.5184 29.2292 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr></div>
<button class="btn-edit">
<include src="/components/icons/edit.svg"></include>
</button>
</article>
<article class="taxon">
<figure>
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
</figure>
<h3 class="vernacular">Aulne glutineux</h3>
<h4 class="latin">Alnus glutinosa</h4>
<div class="chart-edit">
<abbr title="Rempli à 100 % (21 / 21) et vérifié à 90 % (19 / 21)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 0 50 100 A 50 50 0 0 0 50 0"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 21.834 8.68806 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-edit">
<include src="/components/icons/edit.svg"></include>
</button>
</article>
<article class="taxon">
<figure>
<img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
</figure>
<h3 class="vernacular">Gouet d’Italie</h3>
<h4 class="latin">Arum Italicum Mill.</h4>
<div class="chart-edit">
<abbr title="Rempli à 95 % (22 / 23) et vérifié à 82 % (19 / 23)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 36.5102 1.85414 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 5.60574 26.9967 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-edit">
<include src="/components/icons/edit.svg"></include>
</button>
</article>
<article class="taxon">
<figure>
<img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
</figure>
<h3 class="vernacular">Charme commun</h3>
<h4 class="latin">Carpinus betulus L.</h4>
<div class="chart-edit">
<abbr title="Rempli à 0 % (0 / 5) et vérifié à 0 % (0 / 5)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-edit">
<include src="/components/icons/edit.svg"></include>
</button>
</article>
<article class="taxon">
<figure>
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
</figure>
<h3 class="vernacular">Acore odorant</h3>
<h4 class="latin">Acorus calamus L.</h4>
<div class="chart-edit"><abbr title="Rempli à 81 % (18 / 22) et vérifié à 0 % (0 / 22)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 4.5184 29.2292 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr></div>
<button class="btn-edit">
<include src="/components/icons/edit.svg"></include>
</button>
</article>
<article class="taxon">
<figure>
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
</figure>
<h3 class="vernacular">Aulne glutineux</h3>
<h4 class="latin">Alnus glutinosa</h4>
<div class="chart-edit">
<abbr title="Rempli à 100 % (21 / 21) et vérifié à 90 % (19 / 21)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 0 50 100 A 50 50 0 0 0 50 0"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 21.834 8.68806 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-edit">
<include src="/components/icons/edit.svg"></include>
</button>
</article>
<article class="taxon">
<figure>
<img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
</figure>
<h3 class="vernacular">Gouet d’Italie</h3>
<h4 class="latin">Arum Italicum Mill.</h4>
<div class="chart-edit">
<abbr title="Rempli à 95 % (22 / 23) et vérifié à 82 % (19 / 23)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 36.5102 1.85414 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 1 1 5.60574 26.9967 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-edit">
<include src="/components/icons/edit.svg"></include>
</button>
</article>
<article class="taxon">
<figure>
<img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
</figure>
<h3 class="vernacular">Charme commun</h3>
<h4 class="latin">Carpinus betulus L.</h4>
<div class="chart-edit">
<abbr title="Rempli à 0 % (0 / 5) et vérifié à 0 % (0 / 5)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr>
</div>
<button class="btn-edit">
<include src="/components/icons/edit.svg"></include>
</button>
</article>
</div>
</section>
</main> </main>