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

add taxons'

Browse source
This commit is contained in:
Julie Blanc 2026-02-11 11:27:05 +01:00
parent 96812f75df
commit d364dda00d
10 changed files with 208 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

6
assets/css/_base.scss
View file

@ -18,12 +18,16 @@ body {
print-color-adjust:exact !important; */ print-color-adjust:exact !important; */
} }
main{ main:not(#main_home){
min-height: calc(100vh - var(--header-h)); min-height: calc(100vh - var(--header-h));
max-width: 900px;
margin-inline: auto;
// margin-top: var(--header-h); // margin-top: var(--header-h);
/* padding: var(--padding-body); */ /* padding: var(--padding-body); */
} }
button{ button{
background: none; background: none;
border: none; border: none;

11
assets/css/_page-header.scss Normal file
View file

@ -0,0 +1,11 @@
.page-header{
margin-top: calc(var(--spacing)*3);
background-color: red;
margin-bottom: calc(var(--spacing)*2);
.page-title{
font-size: var(--fs-title-page);
font-family: var(--font-title);
}
}

14
assets/css/_species-list.scss Normal file
View file

@ -0,0 +1,14 @@
.species-list{
display: flex;
flex-wrap: wrap;
--gap: calc(var(--spacing)*2);
gap: var(--spacing);
.taxon{
flex: 1 1 calc(50% - var(--spacing)*1);
min-width: 250px;
}
}

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

@ -1,6 +1,7 @@
@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);
@ -10,4 +11,8 @@
@include chart-edit(40px); @include chart-edit(40px);
} }
figure, img{
width: 100%;
}
} }

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

@ -4,8 +4,11 @@
--font-title: 'Borna', Arial, sans-serif; --font-title: 'Borna', Arial, sans-serif;
--font: 'Nunito', Arial, sans-serif; --font: 'Nunito', Arial, sans-serif;
--fs-small: 11px; --fs-small: 14px;
--fs-normal: 14px; --fs-normal: 16px;
--fs-title-page: 38px;
--spacing: 20px;
font-size: 14px; font-size: 14px;
--unit: 24px; --unit: 24px;
@ -16,9 +19,6 @@
--radius-small: 3px; --radius-small: 3px;
--radius-btn: 6px; --radius-btn: 6px;
--header-h: 60px; --header-h: 60px;
--header-z: 9000; --header-z: 9000;

37
assets/style.css
View file

@ -2,8 +2,10 @@
:root { :root {
--font-title: "Borna", Arial, sans-serif; --font-title: "Borna", Arial, sans-serif;
--font: "Nunito", Arial, sans-serif; --font: "Nunito", Arial, sans-serif;
--fs-small: 11px; --fs-small: 14px;
--fs-normal: 14px; --fs-normal: 16px;
--fs-title-page: 38px;
--spacing: 20px;
font-size: 14px; font-size: 14px;
--unit: 24px; --unit: 24px;
--padding-body: 32px; --padding-body: 32px;
@ -77,8 +79,10 @@ body {
print-color-adjust:exact !important; */ print-color-adjust:exact !important; */
} }
main { main:not(#main_home) {
min-height: calc(100vh - var(--header-h)); min-height: calc(100vh - var(--header-h));
max-width: 900px;
margin-inline: auto;
/* padding: var(--padding-body); */ /* padding: var(--padding-body); */
} }
@ -557,6 +561,16 @@ span.controls::after {
height: 70px; height: 70px;
} }
.page-header {
margin-top: calc(var(--spacing) * 3);
background-color: red;
margin-bottom: calc(var(--spacing) * 2);
}
.page-header .page-title {
font-size: var(--fs-title-page);
font-family: var(--font-title);
}
.item-nav { .item-nav {
border: 1px solid var(--color-txt-light); border: 1px solid var(--color-txt-light);
border-radius: var(--radius-small); border-radius: var(--radius-small);
@ -832,6 +846,20 @@ span.controls::after {
margin-top: calc(var(--unit) * 2); margin-top: calc(var(--unit) * 2);
} }
.species-list {
display: flex;
flex-wrap: wrap;
--gap: calc(var(--spacing)*2);
gap: var(--spacing);
}
.species-list .taxon {
flex: 1 1 calc(50% - var(--spacing) * 1);
min-width: 250px;
}
.species-list .taxon {
border: 1px solid red;
}
.species-list .taxon .btn-edit { .species-list .taxon .btn-edit {
width: 20px; width: 20px;
height: 20px; height: 20px;
@ -856,4 +884,7 @@ 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 {
width: 100%;
}/*# 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

3
assets/style.scss
View file

@ -11,9 +11,12 @@
@use "css/slideshow"; @use "css/slideshow";
@use "css/logos-container"; @use "css/logos-container";
@use "css/page-header";
@use "css/home-item-nav"; @use "css/home-item-nav";
@use "css/home-highlight"; @use "css/home-highlight";
@use "css/home"; @use "css/home";
@use "css/species-list";
@use "css/taxon-card"; @use "css/taxon-card";

2
components/site-header.html
View file

@ -1,5 +1,5 @@
<header id="site-header"> <header id="site-header">
<a href="#"> <a href="/">
<h1>Botascopia</h1> <h1>Botascopia</h1>
</a> </a>

129
species-list.html
View file

@ -49,6 +49,135 @@
</section> </section>
<section 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>
</section>