add sort & view for species
This commit is contained in:
Julie Blanc
parent
718ca47696
commit
6fff7422e8
26 changed files with 1448 additions and 432 deletions
|
|
@ -16,44 +16,70 @@
|
|||
|
||||
<include src="/components/site-header.html"></include>
|
||||
|
||||
<main class="has-toc">
|
||||
<main>
|
||||
|
||||
<header class="page-header">
|
||||
<div class="page-header__inner">
|
||||
|
||||
<h2 class="page-title">Le projet botascopia</h2>
|
||||
<h2 class="page-title">À propos du projet</h2>
|
||||
|
||||
<p class="description">Botascopia est un projet inter- et transdisciplinaire de recherche-action mêlant
|
||||
<strong>botanique, informatique et sciences sociales</strong>. Le développement de nos outils se fait en lien avec les
|
||||
communautés concernées. Nous cherchons également à évaluer leur appropriation et leurs impacts sur ces
|
||||
communautés. Le projet interroge le rôle des outils de reconnaissance de plantes dans le partage des
|
||||
connaissances botaniques et la perception du vivant. </p>
|
||||
|
||||
<div class="details">
|
||||
<div class="details__item">
|
||||
<p class="nbr">53</p>
|
||||
<p class="text">contributeur·ices</p>
|
||||
<button class="link-with-arrow"><a href="#">Voir la communuauté</a></button>
|
||||
</div>
|
||||
<div class="details__item">
|
||||
<p class="nbr">876</p>
|
||||
<p class="text">espèces répertoriées</p>
|
||||
<button class="link-with-arrow"><a href="#">Voir la base de connaissance</a></button>
|
||||
</div>
|
||||
<div class="details__item">
|
||||
<p class="nbr">89</p>
|
||||
<p class="text">animations</p>
|
||||
<button class="link-with-arrow"><a href="#">Organiser une animation</a></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
<nav class="page-toc">
|
||||
<ul>
|
||||
|
||||
<div class="page-grid">
|
||||
|
||||
<nav class="page-nav">
|
||||
<ul class="toc">
|
||||
<li><a href="#demarche-botascopia">La démarche</a></li>
|
||||
<li><a href="#equipe">L’équipe</a></li>
|
||||
<li><a href="#soutien-financier"> Soutien Financier</a></li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
|
||||
<section class="page-content">
|
||||
|
||||
|
||||
<h3 id="demarche-botascopia">La démarche botascopia</h3>
|
||||
|
||||
<p>Botascopia est un projet inter- et transdisciplinaire de recherche-action mêlant botanique, informatique et sciences sociales. Le développement de nos outils se fait en lien avec les communautés concernées. Nous cherchons également à évaluer leur appropriation et leurs impacts sur ces communautés. Le projet interroge le rôle des outils de reconnaissance de plantes dans le partage des connaissances botaniques et la perception du vivant. </p>
|
||||
|
||||
|
||||
<p>Le projet de recherche Botascopia s’adresse à toutes celles et ceux qui souhaitent
|
||||
<strong>identifier, connaître ou faire connaître les plantes autour d’eux</strong>. Il s’adresse
|
||||
<strong>identifier, connaître ou faire connaître les plantes autour d’eux</strong>. Il s’adresse
|
||||
aussi aux botanistes chevronnés à la recherche d’informations fiables et détaillées sur les espèces
|
||||
de plantes à fleurs. Il poursuit quatre objectifs :</p>
|
||||
de plantes à fleurs. Il poursuit quatre objectifs :
|
||||
</p>
|
||||
<ol>
|
||||
<li><strong>Constituer une base de connaissances sur les plantes à fleurs</strong> permettant de
|
||||
décrire finement leur morphologie ainsi que d’autres caractéristiques (écologie, distribution,
|
||||
propriétés)</li>
|
||||
<li><strong>Développer des outils informatiques</strong> permettant de produire automatiquement des
|
||||
clés de détermination et des fiches descriptives à partir d’une collection d’espèces</li>
|
||||
clés de détermination et des fiches descriptives à partir d’une collection d’espèces</li>
|
||||
<li>Mettre à disposition l’ensemble (base de connaissances, clés, fiches) <strong>pour un public le
|
||||
plus large possible</strong> : amateurs, professionnels, académiques</li>
|
||||
<li>Interroger le rôle des outils de reconnaissance de plantes dans le <strong>partage des
|
||||
|
|
@ -69,70 +95,96 @@
|
|||
<div class="team">
|
||||
<div class="member">
|
||||
<img src="/images/simon.jpg">
|
||||
<div class="text">
|
||||
<div class="name">Simon Castellan</div>
|
||||
<div class="details">(Inria Rennes)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member">
|
||||
<img src="/images/sophie.jpg">
|
||||
<div class="text">
|
||||
<div class="name">Sophie Nadot</div>
|
||||
<div class="details">(Univ. Paris-Saclay)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member">
|
||||
<img src="/images/xavier.jpg">
|
||||
<div class="text">
|
||||
<div class="name">Xavier Aubriot</div>
|
||||
<div class="details">(Univ. Paris-Saclay)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member">
|
||||
<img src="/images/eric.jpg">
|
||||
<div class="text">
|
||||
<div class="name">Eric Tannier</div>
|
||||
<div class="details">(Inria Lyon)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member">
|
||||
<img src="/images/agnes.jpg">
|
||||
<div class="text">
|
||||
<div class="name">Agnès Schermann</div>
|
||||
<div class="details">(Univ. Rennes)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member">
|
||||
<img src="/images/jos.jpg">
|
||||
<div class="text">
|
||||
<div class="name">Jos Käfer</div>
|
||||
<div class="details">(CNRS)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member">
|
||||
<img src="/images/aurore.jpg">
|
||||
<div class="text">
|
||||
<div class="name">Aurore Alcolei</div>
|
||||
<div class="details">(UPEC)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member">
|
||||
<img src="/images/laetitia.jpg">
|
||||
<div class="text">
|
||||
<div class="name">Laetitia Carrive</div>
|
||||
<div class="details">(Univ. Rennes)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member">
|
||||
<img src="/images/gurvan.jpg">
|
||||
<div class="text">
|
||||
<div class="name">Gurvan Cabon</div>
|
||||
<div class="details">(Inria)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member">
|
||||
<img src="/images/mathurin.jpg">
|
||||
<div class="text">
|
||||
<div class="name">Mathurin Bellot</div>
|
||||
<div class="details">(Tela-Botanica)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member">
|
||||
<img src="/images/marie-charlotte.jpg">
|
||||
<div class="text">
|
||||
<div class="name">Marie-Charlotte Allam</div>
|
||||
<div class="details">(Univ. Rennes)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member">
|
||||
<img src="/images/jeremy.jpg">
|
||||
<div class="text">
|
||||
<div class="name">Jérémy Omer</div>
|
||||
<div class="details">(INSA Rennes)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member">
|
||||
<img src="/images/marine.jpg">
|
||||
<div class="text">
|
||||
<div class="name">Marine Fauché</div>
|
||||
<div class="details">(Univ. Paris-Saclay)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Alumni</h4>
|
||||
|
||||
|
|
@ -151,9 +203,9 @@
|
|||
<li>Isabella Gargiulo Gutierrez</li>
|
||||
<li>Nolwenn Emonet</li>
|
||||
<li>Baptiste Izquierdo Rey</li>
|
||||
<li>Amélie Sagliet</li><li>
|
||||
</li><li>Capucine Tesson</li><li>
|
||||
</li></ul>
|
||||
<li>Amélie Sagliet</li>
|
||||
<li>Capucine Tesson</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="soutien-financer">Soutien Financier</h3>
|
||||
|
||||
|
|
@ -169,6 +221,8 @@
|
|||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -18,13 +18,6 @@ body {
|
|||
print-color-adjust:exact !important; */
|
||||
}
|
||||
|
||||
main:not(#main_home){
|
||||
min-height: calc(100vh - var(--header-h));
|
||||
max-width: 900px;
|
||||
margin-inline: auto;
|
||||
// margin-top: var(--header-h);
|
||||
/* padding: var(--padding-body); */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
|
||||
.home--section-tool{
|
||||
background-color: var(--color);
|
||||
background-color: var(--data-color);
|
||||
&[data-type="base-connaissance"],
|
||||
&[data-type="livrets"]{
|
||||
color: var(--white);
|
||||
|
|
@ -10,14 +10,6 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#main_home {
|
||||
--max-w-home: 1100px;
|
||||
section {
|
||||
|
|
@ -39,9 +31,7 @@
|
|||
|
||||
.section--header {
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
|
||||
display: grid;
|
||||
// grid-template-columns: 3fr 2fr;
|
||||
grid-template-columns: 1fr 440px;
|
||||
gap: calc(var(--spacing)*1);
|
||||
}
|
||||
|
|
@ -49,7 +39,6 @@
|
|||
.section--title {
|
||||
font-size: 2.8rem;
|
||||
font-family: var(--font-title);
|
||||
// margin-bottom: calc(var(--spacing) * 1.5);
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
|
|
@ -90,8 +79,6 @@
|
|||
text-align: center;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.section--title {
|
||||
|
|
@ -132,9 +119,8 @@
|
|||
min-width: 12ch;
|
||||
text-align: center;
|
||||
|
||||
|
||||
border: 1.5px solid var(--color);
|
||||
color: var(--color);
|
||||
border: 1.5px solid var(--data-color);
|
||||
color: var(--data-color);
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -145,7 +131,7 @@
|
|||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-light);
|
||||
background-color: var(--data-color-light);
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -153,20 +139,12 @@
|
|||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--color);
|
||||
color: var(--data-color);
|
||||
font-weight: bold;
|
||||
/* &::after{
|
||||
content: " ↓"
|
||||
} */
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.see-more {
|
||||
display: block;
|
||||
// color: var(--color-txt);
|
||||
// font-weight: bold;
|
||||
padding-top: calc(var(--unit)*1.5);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,59 @@
|
|||
.page-content{
|
||||
font-size: var(--fs-medium);
|
||||
line-height: 1.4;
|
||||
|
||||
max-width: var(--max-width-content);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--padding-body);
|
||||
margin-bottom: 30vh;
|
||||
|
||||
p {
|
||||
margin: var(--spacing) 0;
|
||||
}
|
||||
|
||||
ol, ul{
|
||||
margin-left: calc(var(--spacing)*2);
|
||||
}
|
||||
|
||||
li{
|
||||
margin: calc(var(--spacing)*0.5) 0;
|
||||
}
|
||||
|
||||
h3{
|
||||
font-size: 1.8em;
|
||||
line-height: 1.1;
|
||||
font-weight: bold;
|
||||
color: var(--color-green);
|
||||
padding-top: var(--top-target);
|
||||
margin-bottom: calc(var(--spacing)*1.5);
|
||||
}
|
||||
|
||||
h4{
|
||||
font-size: 1.2em;
|
||||
color: var(--color-green);
|
||||
font-weight: bold;
|
||||
// text-decoration: 2px underline currentColor;
|
||||
margin-top: calc(var(--spacing)*3.5);
|
||||
margin-bottom: calc(var(--spacing)*1.5);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Specific for target with toc
|
||||
.page-nav + .page-content > :first-child {
|
||||
padding-top: 0px;
|
||||
&:target{
|
||||
padding-top: var(--top-target);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// main:not(#main_home){
|
||||
// min-height: calc(100vh - var(--header-h));
|
||||
// max-width: 900px;
|
||||
// margin-inline: auto;
|
||||
|
||||
// }
|
||||
|
|
|
|||
21
assets/css/_page-grid.scss
Normal file
21
assets/css/_page-grid.scss
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
.page-grid{
|
||||
|
||||
|
||||
max-width: calc(var(--max-width-content)*1.3 + var(--padding-inner)*2 + var(--padding-body)*2);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr var(--max-width-content);
|
||||
// gap: calc(var(--padding-inner)*2);
|
||||
margin-inline: auto;
|
||||
margin-top: calc(var(--spacing)*5);
|
||||
padding-inline: var(--padding-body);
|
||||
|
||||
.page-nav{
|
||||
align-self: start;
|
||||
position: sticky;
|
||||
top: var(--top-target);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,10 +1,60 @@
|
|||
|
||||
.page-header{
|
||||
margin-top: calc(var(--spacing)*3);
|
||||
margin-bottom: calc(var(--spacing)*2);
|
||||
// margin-top: calc(var(--spacing)*1);
|
||||
// margin-bottom: calc(var(--spacing)*2);
|
||||
|
||||
color: var(--color-green);
|
||||
background-color: var(--color-green-light);
|
||||
|
||||
padding: calc(var(--spacing)*3) var(--padding-body);
|
||||
|
||||
.page-header__inner{
|
||||
max-width: var(--max-width-container);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.page-title{
|
||||
font-size: var(--fs-title-page);
|
||||
font-family: var(--font-title);
|
||||
// color: var(--color-green);
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
}
|
||||
|
||||
.description{
|
||||
font-size: var(--fs-medium);
|
||||
line-height: 1.2;
|
||||
margin: calc(var(--spacing)*1) 0;
|
||||
// max-width: var(--max-width-content);
|
||||
}
|
||||
|
||||
.details{
|
||||
display: flex;
|
||||
gap: calc(var(--padding-inner)*5);
|
||||
margin-top: calc(var(--spacing)*3);
|
||||
|
||||
}
|
||||
|
||||
.details__item{
|
||||
|
||||
.nbr{
|
||||
font-size: var(--fs-title-page);
|
||||
font-family: var(--font-title);
|
||||
}
|
||||
|
||||
.text{
|
||||
font-size: var(--fs-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button{
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
a{
|
||||
color: var(--color-green);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
30
assets/css/_page-nav.scss
Normal file
30
assets/css/_page-nav.scss
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
.page-nav{
|
||||
|
||||
|
||||
.toc{
|
||||
list-style: none;
|
||||
|
||||
li{
|
||||
font-size: var(--fs-normal);
|
||||
line-height: 1.2;
|
||||
font-weight: bold;
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
|
||||
a{
|
||||
color: currentColor;
|
||||
text-decoration: none;
|
||||
&:hover{
|
||||
text-decoration: 1px underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
@mixin icon($size){
|
||||
display: inline-block;
|
||||
width: $size;
|
||||
height: $size;
|
||||
|
||||
|
|
@ -18,15 +19,15 @@
|
|||
height: 100%;
|
||||
|
||||
circle{
|
||||
fill: #cfcfcf;
|
||||
fill: #efefef;
|
||||
}
|
||||
|
||||
.filled{
|
||||
fill: lightgreen;
|
||||
fill: var(--color-orange-medium);
|
||||
}
|
||||
|
||||
.verified{
|
||||
fill: green;
|
||||
fill: var(--color-green);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
--fs-small: 14px;
|
||||
--fs-normal: 16px;
|
||||
--fs-medium: 22px;
|
||||
--fs-title-page: 38px;
|
||||
--fs-title-page: 42px;
|
||||
|
||||
--spacing: 20px;
|
||||
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
--radius-btn: 6px;
|
||||
--radius-img: 6px;
|
||||
|
||||
--header-h: 60px;
|
||||
--header-h: 80px;
|
||||
--header-z: 9000;
|
||||
|
||||
--white: white;
|
||||
|
|
@ -49,19 +49,28 @@
|
|||
--color-orange-light: #f3e7e0;
|
||||
|
||||
--color-green: #007953;
|
||||
--color-green-medium: #a1ccbe;;
|
||||
// --color-green-medium: #a1ccbe;
|
||||
--color-green-medium: #42af8c;
|
||||
--color-green-light: #d5ebe4;
|
||||
--color-green-x-light: #eef7f4;
|
||||
--color-green-black: #016042;
|
||||
|
||||
--color-txt: rgb(41, 41, 41);
|
||||
--color-txt-light: #a5a9a9;
|
||||
--color-light: #DCDDDD;
|
||||
--color-x-light: #eaebeb;
|
||||
--color-xx-light: #f4f4f4;
|
||||
|
||||
|
||||
|
||||
--color: var(--color-green);
|
||||
--color-medium: var(--color-green-medium);
|
||||
--color-light: var(--color-green-light);
|
||||
|
||||
|
||||
--max-width-content: 740px;
|
||||
--max-width-container: 860px;
|
||||
--top-target: calc(var(--spacing)*5);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -70,28 +79,28 @@
|
|||
|
||||
|
||||
[data-type="livrets"]{
|
||||
--color: var(--color-violet);
|
||||
--color-medium: var(--color-violet-medium);
|
||||
--color-light: var(--color-violet-light);
|
||||
--data-color: var(--color-violet);
|
||||
--data-color-medium: var(--color-violet-medium);
|
||||
--data-color-light: var(--color-violet-light);
|
||||
}
|
||||
|
||||
|
||||
[data-type="base-connaissance"]{
|
||||
--color: var(--color-green);
|
||||
--color-medium: var(--color-green-medium);
|
||||
--color-light: var(--color-green-light);
|
||||
--data-color: var(--color-green);
|
||||
--data-color-medium: var(--color-green-medium);
|
||||
--data-color-light: var(--color-green-light);
|
||||
|
||||
}
|
||||
|
||||
[data-type="animations"]{
|
||||
--color: var(--color-orange);
|
||||
--color-medium: var(--color-orange-medium);
|
||||
--color-light: var(--color-orange-light);
|
||||
--data-color: var(--color-orange);
|
||||
--data-color-medium: var(--color-orange-medium);
|
||||
--data-color-light: var(--color-orange-light);
|
||||
}
|
||||
|
||||
[data-type="methodologie"]{
|
||||
|
||||
--color: var(--color-yellow);
|
||||
--color-medium: var(--color-yellow-medium);
|
||||
--color-light: var(--color-yellow-light);
|
||||
--data-color: var(--color-yellow);
|
||||
--data-color-medium: var(--color-yellow-medium);
|
||||
--data-color-light: var(--color-yellow-light);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -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
32
assets/css/components/_sort.scss
Normal 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);
|
||||
|
||||
}
|
||||
|
|
@ -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
99
assets/css/components/_taxon-card-inline.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -2,14 +2,12 @@
|
|||
|
||||
.species-list .taxon{
|
||||
|
||||
.btn-edit {
|
||||
@include icon(20px);
|
||||
}
|
||||
|
||||
.chart-edit{
|
||||
@include chart-edit(40px);
|
||||
}
|
||||
|
||||
|
||||
.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{
|
||||
|
|
|
|||
|
|
@ -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
40
assets/css/components/_view-toggle.scss
Normal 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);
|
||||
}
|
||||
|
||||
}
|
||||
495
assets/style.css
495
assets/style.css
|
|
@ -5,7 +5,7 @@
|
|||
--fs-small: 14px;
|
||||
--fs-normal: 16px;
|
||||
--fs-medium: 22px;
|
||||
--fs-title-page: 38px;
|
||||
--fs-title-page: 42px;
|
||||
--spacing: 20px;
|
||||
font-size: 14px;
|
||||
--unit: 24px;
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
--radius-small: 3px;
|
||||
--radius-btn: 6px;
|
||||
--radius-img: 6px;
|
||||
--header-h: 60px;
|
||||
--header-h: 80px;
|
||||
--header-z: 9000;
|
||||
--white: white;
|
||||
--color-bg: white;
|
||||
|
|
@ -33,40 +33,45 @@
|
|||
--color-orange-medium: #f3a066;
|
||||
--color-orange-light: #f3e7e0;
|
||||
--color-green: #007953;
|
||||
--color-green-medium: #a1ccbe;
|
||||
--color-green-medium: #42af8c;
|
||||
--color-green-light: #d5ebe4;
|
||||
--color-green-x-light: #eef7f4;
|
||||
--color-green-black: #016042;
|
||||
--color-txt: rgb(41, 41, 41);
|
||||
--color-txt-light: #a5a9a9;
|
||||
--color-light: #DCDDDD;
|
||||
--color-x-light: #eaebeb;
|
||||
--color-xx-light: #f4f4f4;
|
||||
--color: var(--color-green);
|
||||
--color-medium: var(--color-green-medium);
|
||||
--color-light: var(--color-green-light);
|
||||
--max-width-content: 740px;
|
||||
--max-width-container: 860px;
|
||||
--top-target: calc(var(--spacing)*5);
|
||||
}
|
||||
|
||||
[data-type=livrets] {
|
||||
--color: var(--color-violet);
|
||||
--color-medium: var(--color-violet-medium);
|
||||
--color-light: var(--color-violet-light);
|
||||
--data-color: var(--color-violet);
|
||||
--data-color-medium: var(--color-violet-medium);
|
||||
--data-color-light: var(--color-violet-light);
|
||||
}
|
||||
|
||||
[data-type=base-connaissance] {
|
||||
--color: var(--color-green);
|
||||
--color-medium: var(--color-green-medium);
|
||||
--color-light: var(--color-green-light);
|
||||
--data-color: var(--color-green);
|
||||
--data-color-medium: var(--color-green-medium);
|
||||
--data-color-light: var(--color-green-light);
|
||||
}
|
||||
|
||||
[data-type=animations] {
|
||||
--color: var(--color-orange);
|
||||
--color-medium: var(--color-orange-medium);
|
||||
--color-light: var(--color-orange-light);
|
||||
--data-color: var(--color-orange);
|
||||
--data-color-medium: var(--color-orange-medium);
|
||||
--data-color-light: var(--color-orange-light);
|
||||
}
|
||||
|
||||
[data-type=methodologie] {
|
||||
--color: var(--color-yellow);
|
||||
--color-medium: var(--color-yellow-medium);
|
||||
--color-light: var(--color-yellow-light);
|
||||
--data-color: var(--color-yellow);
|
||||
--data-color-medium: var(--color-yellow-medium);
|
||||
--data-color-light: var(--color-yellow-light);
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -88,13 +93,6 @@ body {
|
|||
print-color-adjust:exact !important; */
|
||||
}
|
||||
|
||||
main:not(#main_home) {
|
||||
min-height: calc(100vh - var(--header-h));
|
||||
max-width: 900px;
|
||||
margin-inline: auto;
|
||||
/* padding: var(--padding-body); */
|
||||
}
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
|
|
@ -322,31 +320,70 @@ figure, picture, img {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.see-more {
|
||||
--hover-bg: var(--color-bg);
|
||||
font-weight: 500;
|
||||
color: var(--color-txt);
|
||||
color: currentColor;
|
||||
.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;
|
||||
}
|
||||
.btn-action a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1ch;
|
||||
text-decoration: none;
|
||||
color: var(--color-txt);
|
||||
padding: 0 1ch;
|
||||
}
|
||||
.see-more span {
|
||||
display: none;
|
||||
}
|
||||
.see-more::after {
|
||||
content: "→";
|
||||
position: relative;
|
||||
.btn-action .icon {
|
||||
display: inline-block;
|
||||
padding-left: 0.75ch;
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.btn-action .icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.btn-action .text {
|
||||
font-size: var(--fs-small);
|
||||
font-weight: 500;
|
||||
}
|
||||
.btn-action: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;
|
||||
}
|
||||
label.btn-action .text {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.link-with-arrow a {
|
||||
text-decoration: none;
|
||||
color: var(--color-txt);
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
.link-with-arrow a::after {
|
||||
content: "→";
|
||||
font-family: var(--font-title);
|
||||
font-size: 0.9em;
|
||||
position: relative;
|
||||
left: 1.5ch;
|
||||
transition: left 0.4s ease-in-out;
|
||||
-webkit-text-decoration: 1px underline transparent;
|
||||
text-decoration: 1px underline transparent;
|
||||
}
|
||||
.see-more:hover {
|
||||
text-decoration: underline;
|
||||
.link-with-arrow:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.see-more:hover::after {
|
||||
left: 0.5ch;
|
||||
-webkit-text-decoration: underline var(--hover-bg);
|
||||
text-decoration: underline var(--hover-bg);
|
||||
.link-with-arrow:hover a::after {
|
||||
left: 2.5ch;
|
||||
}
|
||||
|
||||
.slideshow {
|
||||
|
|
@ -584,24 +621,209 @@ span.controls::after {
|
|||
height: 70px;
|
||||
}
|
||||
|
||||
.team {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2ch;
|
||||
}
|
||||
.team .member {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2ch;
|
||||
width: calc(50% - 2ch);
|
||||
}
|
||||
.team .member .name {
|
||||
font-weight: bold;
|
||||
}
|
||||
.team .member .details {
|
||||
font-size: var(--fs-normal);
|
||||
margin-top: calc(var(--spacing) * 0.25);
|
||||
}
|
||||
.team .member img {
|
||||
width: 60px;
|
||||
width: 100px;
|
||||
aspect-ratio: 1/1;
|
||||
background-color: #cfcfcf;
|
||||
border-radius: var(--radius-img);
|
||||
float: left;
|
||||
}
|
||||
|
||||
.sort {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: calc(var(--padding-inner) * 0.5);
|
||||
}
|
||||
.sort p {
|
||||
font-weight: 500;
|
||||
padding-right: 1ch;
|
||||
}
|
||||
.sort .is-selected {
|
||||
background-color: var(--color-txt);
|
||||
color: var(--white);
|
||||
}
|
||||
.sort .is-selected a {
|
||||
color: var(--white);
|
||||
}
|
||||
.sort .is-selected 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);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
.view-toggle p {
|
||||
font-weight: 500;
|
||||
padding-right: 1.5ch;
|
||||
}
|
||||
.view-toggle 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);
|
||||
}
|
||||
input#view-edit:checked ~ .group-sort-view .view-toggle label[for=view-edit] svg,
|
||||
input#view-list:checked ~ .group-sort-view .view-toggle label[for=view-list] svg,
|
||||
input#view-grid:checked ~ .group-sort-view .view-toggle label[for=view-grid] svg,
|
||||
input#view-edit:checked ~ .view-toggle label[for=view-edit] svg,
|
||||
input#view-list:checked ~ .view-toggle label[for=view-list] svg,
|
||||
input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
|
||||
fill: var(--white);
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
color: var(--color-green);
|
||||
background-color: var(--color-green-light);
|
||||
padding: calc(var(--spacing) * 3) var(--padding-body);
|
||||
}
|
||||
.page-header .page-header__inner {
|
||||
max-width: var(--max-width-container);
|
||||
margin-inline: auto;
|
||||
}
|
||||
.page-header .page-title {
|
||||
font-size: var(--fs-title-page);
|
||||
font-family: var(--font-title);
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
.page-header .description {
|
||||
font-size: var(--fs-medium);
|
||||
line-height: 1.2;
|
||||
margin: calc(var(--spacing) * 1) 0;
|
||||
}
|
||||
.page-header .details {
|
||||
display: flex;
|
||||
gap: calc(var(--padding-inner) * 5);
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
}
|
||||
.page-header .details__item .nbr {
|
||||
font-size: var(--fs-title-page);
|
||||
font-family: var(--font-title);
|
||||
}
|
||||
.page-header .details__item .text {
|
||||
font-size: var(--fs-medium);
|
||||
font-weight: bold;
|
||||
}
|
||||
.page-header .details__item button {
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
}
|
||||
.page-header .details__item button a {
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
.page-grid {
|
||||
max-width: calc(var(--max-width-content) * 1.3 + var(--padding-inner) * 2 + var(--padding-body) * 2);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr var(--max-width-content);
|
||||
margin-inline: auto;
|
||||
margin-top: calc(var(--spacing) * 5);
|
||||
padding-inline: var(--padding-body);
|
||||
}
|
||||
.page-grid .page-nav {
|
||||
align-self: start;
|
||||
position: sticky;
|
||||
top: var(--top-target);
|
||||
}
|
||||
|
||||
.page-nav .toc {
|
||||
list-style: none;
|
||||
}
|
||||
.page-nav .toc li {
|
||||
font-size: var(--fs-normal);
|
||||
line-height: 1.2;
|
||||
font-weight: bold;
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
.page-nav .toc li a {
|
||||
color: currentColor;
|
||||
text-decoration: none;
|
||||
}
|
||||
.page-nav .toc li a:hover {
|
||||
-webkit-text-decoration: 1px underline;
|
||||
text-decoration: 1px underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
font-size: var(--fs-medium);
|
||||
line-height: 1.4;
|
||||
max-width: var(--max-width-content);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--padding-body);
|
||||
margin-bottom: 30vh;
|
||||
}
|
||||
.page-content p {
|
||||
margin: var(--spacing) 0;
|
||||
}
|
||||
.page-content ol, .page-content ul {
|
||||
margin-left: calc(var(--spacing) * 2);
|
||||
}
|
||||
.page-content li {
|
||||
margin: calc(var(--spacing) * 0.5) 0;
|
||||
}
|
||||
.page-content h3 {
|
||||
font-size: 1.8em;
|
||||
line-height: 1.1;
|
||||
font-weight: bold;
|
||||
color: var(--color-green);
|
||||
padding-top: var(--top-target);
|
||||
margin-bottom: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
.page-content h4 {
|
||||
font-size: 1.2em;
|
||||
color: var(--color-green);
|
||||
font-weight: bold;
|
||||
margin-top: calc(var(--spacing) * 3.5);
|
||||
margin-bottom: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
|
||||
.page-nav + .page-content > :first-child {
|
||||
padding-top: 0px;
|
||||
}
|
||||
.page-nav + .page-content > :first-child:target {
|
||||
padding-top: var(--top-target);
|
||||
}
|
||||
|
||||
.item-nav {
|
||||
|
|
@ -651,7 +873,7 @@ span.controls::after {
|
|||
}
|
||||
|
||||
.home--section-tool {
|
||||
background-color: var(--color);
|
||||
background-color: var(--data-color);
|
||||
}
|
||||
.home--section-tool[data-type=base-connaissance], .home--section-tool[data-type=livrets] {
|
||||
color: var(--white);
|
||||
|
|
@ -738,8 +960,8 @@ span.controls::after {
|
|||
font-size: 1rem;
|
||||
min-width: 12ch;
|
||||
text-align: center;
|
||||
border: 1.5px solid var(--color);
|
||||
color: var(--color);
|
||||
border: 1.5px solid var(--data-color);
|
||||
color: var(--data-color);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -749,19 +971,12 @@ span.controls::after {
|
|||
cursor: pointer;
|
||||
}
|
||||
#home__hero .nav-hero li:hover {
|
||||
background-color: var(--color-light);
|
||||
background-color: var(--data-color-light);
|
||||
}
|
||||
#home__hero .nav-hero a {
|
||||
text-decoration: none;
|
||||
color: var(--color);
|
||||
color: var(--data-color);
|
||||
font-weight: bold;
|
||||
/* &::after{
|
||||
content: " ↓"
|
||||
} */
|
||||
}
|
||||
#home__hero .see-more {
|
||||
display: block;
|
||||
padding-top: calc(var(--unit) * 1.5);
|
||||
}
|
||||
|
||||
#home__a-propos p,
|
||||
|
|
@ -868,12 +1083,10 @@ span.controls::after {
|
|||
}
|
||||
|
||||
.species-list {
|
||||
display: grid;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: calc(var(--spacing) * 1);
|
||||
gap: calc(var(--spacing) * 1.5);
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
.species-list .taxon {
|
||||
|
|
@ -883,6 +1096,9 @@ span.controls::after {
|
|||
.family {
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
}
|
||||
.family:target {
|
||||
padding-top: var(--top-target);
|
||||
}
|
||||
.family .family__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -901,14 +1117,6 @@ span.controls::after {
|
|||
font-weight: 500;
|
||||
}
|
||||
|
||||
.species-list .taxon .btn-edit {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.species-list .taxon .btn-edit svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.species-list .taxon .chart-edit {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
|
@ -918,13 +1126,13 @@ span.controls::after {
|
|||
height: 100%;
|
||||
}
|
||||
.species-list .taxon .chart-edit svg circle {
|
||||
fill: #cfcfcf;
|
||||
fill: #efefef;
|
||||
}
|
||||
.species-list .taxon .chart-edit svg .filled {
|
||||
fill: lightgreen;
|
||||
fill: var(--color-orange-medium);
|
||||
}
|
||||
.species-list .taxon .chart-edit svg .verified {
|
||||
fill: green;
|
||||
fill: var(--color-green);
|
||||
}
|
||||
.species-list .taxon .chart-edit, .species-list .taxon .btn-edit {
|
||||
display: none;
|
||||
|
|
@ -934,16 +1142,13 @@ span.controls::after {
|
|||
flex-direction: column;
|
||||
position: relative;
|
||||
background-color: var(--color-green-light);
|
||||
padding: 20px;
|
||||
padding: calc(var(--padding-inner) * 0.75);
|
||||
}
|
||||
.species-list .taxon .vernacular {
|
||||
.species-list .taxon .name {
|
||||
order: 1;
|
||||
}
|
||||
.species-list .taxon .latin {
|
||||
order: 2;
|
||||
}
|
||||
.species-list .taxon figure {
|
||||
order: 3;
|
||||
order: 2;
|
||||
}
|
||||
.species-list .taxon figure {
|
||||
width: 100%;
|
||||
|
|
@ -967,6 +1172,8 @@ span.controls::after {
|
|||
border-radius: var(--radius-small);
|
||||
padding: 4px 1ch;
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
font-size: var(--fs-normal);
|
||||
line-height: 1.1;
|
||||
}
|
||||
.species-list .taxon .vernacular a {
|
||||
color: white;
|
||||
|
|
@ -978,6 +1185,7 @@ span.controls::after {
|
|||
font-style: italic;
|
||||
margin-bottom: calc(var(--spacing) * 0.75);
|
||||
color: var(--color-txt);
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
.species-list .taxon .vernacular, .species-list .taxon .latin {
|
||||
text-align: center;
|
||||
|
|
@ -985,4 +1193,141 @@ span.controls::after {
|
|||
.species-list .taxon:hover {
|
||||
outline: 2px solid var(--color-green);
|
||||
background-color: var(--color-green-medium);
|
||||
}
|
||||
|
||||
#view-edit:checked ~ .family .species-list,
|
||||
#view-edit:checked ~ .species-list,
|
||||
#view-list:checked ~ .family .species-list,
|
||||
#view-list:checked ~ .species-list {
|
||||
display: block;
|
||||
}
|
||||
#view-edit:checked ~ .family .species-list .taxon,
|
||||
#view-edit:checked ~ .species-list .taxon,
|
||||
#view-list:checked ~ .family .species-list .taxon,
|
||||
#view-list:checked ~ .species-list .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);
|
||||
}
|
||||
#view-edit:checked ~ .family .species-list .taxon::before,
|
||||
#view-edit:checked ~ .species-list .taxon::before,
|
||||
#view-list:checked ~ .family .species-list .taxon::before,
|
||||
#view-list:checked ~ .species-list .taxon::before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
border-top: 1px solid transparent;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
}
|
||||
#view-edit:checked ~ .family .species-list .taxon:first-of-type::before,
|
||||
#view-edit:checked ~ .species-list .taxon:first-of-type::before,
|
||||
#view-list:checked ~ .family .species-list .taxon:first-of-type::before,
|
||||
#view-list:checked ~ .species-list .taxon:first-of-type::before {
|
||||
border-color: var(--color-green-light);
|
||||
}
|
||||
#view-edit:checked ~ .family .species-list .taxon .chart-edit,
|
||||
#view-edit:checked ~ .species-list .taxon .chart-edit,
|
||||
#view-list:checked ~ .family .species-list .taxon .chart-edit,
|
||||
#view-list:checked ~ .species-list .taxon .chart-edit {
|
||||
display: block;
|
||||
margin-right: var(--padding-inner);
|
||||
}
|
||||
#view-edit:checked ~ .family .species-list .taxon figure,
|
||||
#view-edit:checked ~ .species-list .taxon figure,
|
||||
#view-list:checked ~ .family .species-list .taxon figure,
|
||||
#view-list:checked ~ .species-list .taxon figure {
|
||||
order: 1;
|
||||
}
|
||||
#view-edit:checked ~ .family .species-list .taxon .name,
|
||||
#view-edit:checked ~ .species-list .taxon .name,
|
||||
#view-list:checked ~ .family .species-list .taxon .name,
|
||||
#view-list:checked ~ .species-list .taxon .name {
|
||||
order: 2;
|
||||
}
|
||||
#view-edit:checked ~ .family .species-list .taxon .chart-edit,
|
||||
#view-edit:checked ~ .species-list .taxon .chart-edit,
|
||||
#view-list:checked ~ .family .species-list .taxon .chart-edit,
|
||||
#view-list:checked ~ .species-list .taxon .chart-edit {
|
||||
order: 3;
|
||||
}
|
||||
#view-edit:checked ~ .family .species-list .taxon .btn-edit,
|
||||
#view-edit:checked ~ .species-list .taxon .btn-edit,
|
||||
#view-list:checked ~ .family .species-list .taxon .btn-edit,
|
||||
#view-list:checked ~ .species-list .taxon .btn-edit {
|
||||
order: 4;
|
||||
}
|
||||
#view-edit:checked ~ .family .species-list .taxon figure,
|
||||
#view-edit:checked ~ .species-list .taxon figure,
|
||||
#view-list:checked ~ .family .species-list .taxon figure,
|
||||
#view-list:checked ~ .species-list .taxon figure {
|
||||
width: 60px;
|
||||
}
|
||||
#view-edit:checked ~ .family .species-list .taxon .name,
|
||||
#view-edit:checked ~ .species-list .taxon .name,
|
||||
#view-list:checked ~ .family .species-list .taxon .name,
|
||||
#view-list:checked ~ .species-list .taxon .name {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
#view-edit:checked ~ .family .species-list .taxon .name .vernacular, #view-edit:checked ~ .family .species-list .taxon .name .latin,
|
||||
#view-edit:checked ~ .species-list .taxon .name .vernacular,
|
||||
#view-edit:checked ~ .species-list .taxon .name .latin,
|
||||
#view-list:checked ~ .family .species-list .taxon .name .vernacular,
|
||||
#view-list:checked ~ .family .species-list .taxon .name .latin,
|
||||
#view-list:checked ~ .species-list .taxon .name .vernacular,
|
||||
#view-list:checked ~ .species-list .taxon .name .latin {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
#view-edit:checked ~ .family .species-list .taxon .name .vernacular,
|
||||
#view-edit:checked ~ .species-list .taxon .name .vernacular,
|
||||
#view-list:checked ~ .family .species-list .taxon .name .vernacular,
|
||||
#view-list:checked ~ .species-list .taxon .name .vernacular {
|
||||
background-color: transparent;
|
||||
color: var(--color-green);
|
||||
font-size: var(--fs-medium);
|
||||
}
|
||||
#view-edit:checked ~ .family .species-list .taxon .name .vernacular a,
|
||||
#view-edit:checked ~ .species-list .taxon .name .vernacular a,
|
||||
#view-list:checked ~ .family .species-list .taxon .name .vernacular a,
|
||||
#view-list:checked ~ .species-list .taxon .name .vernacular a {
|
||||
color: var(--color-green);
|
||||
}
|
||||
#view-edit:checked ~ .family .species-list .taxon .name .latin,
|
||||
#view-edit:checked ~ .species-list .taxon .name .latin,
|
||||
#view-list:checked ~ .family .species-list .taxon .name .latin,
|
||||
#view-list:checked ~ .species-list .taxon .name .latin {
|
||||
text-align: left;
|
||||
padding-bottom: calc(var(--spacing) * 0.25);
|
||||
}
|
||||
#view-edit:checked ~ .family .species-list .taxon:hover,
|
||||
#view-edit:checked ~ .species-list .taxon:hover,
|
||||
#view-list:checked ~ .family .species-list .taxon:hover,
|
||||
#view-list:checked ~ .species-list .taxon:hover {
|
||||
outline: none;
|
||||
background-color: var(--color-green-x-light);
|
||||
border-color: var(--color-green);
|
||||
}
|
||||
#view-edit:checked ~ .family .species-list .taxon:hover::before,
|
||||
#view-edit:checked ~ .species-list .taxon:hover::before,
|
||||
#view-list:checked ~ .family .species-list .taxon:hover::before,
|
||||
#view-list:checked ~ .species-list .taxon:hover::before {
|
||||
border-color: var(--color-green);
|
||||
}
|
||||
|
||||
#view-edit:checked ~ .family .species-list .taxon .btn-edit,
|
||||
#view-edit:checked ~ .species-list .taxon .btn-edit {
|
||||
display: block !important;
|
||||
z-index: 100;
|
||||
}/*# sourceMappingURL=style.css.map */
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -7,18 +7,23 @@
|
|||
@use "css/site-nav";
|
||||
@use "css/site-footer";
|
||||
@use "css/components/buttons";
|
||||
@use "css/components/see-more";
|
||||
@use "css/components/slideshow";
|
||||
@use "css/components/logos-container";
|
||||
@use "css/components/team";
|
||||
@use "css/components/sort";
|
||||
@use "css/components/view-toggle";
|
||||
|
||||
|
||||
@use "css/page-header";
|
||||
@use "css/page-grid";
|
||||
@use "css/page-nav";
|
||||
@use "css/page-content";
|
||||
|
||||
|
||||
@use "css/home-item-nav";
|
||||
@use "css/home";
|
||||
|
||||
@use "css/components/species-list";
|
||||
@use "css/components/taxon-card";
|
||||
@use "css/components/taxon-card-inline";
|
||||
|
||||
|
|
|
|||
76
cgu.html
Normal file
76
cgu.html
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Botascopia</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/assets/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="/assets/fonts/borna/stylesheet.css">
|
||||
<link rel="stylesheet" type="text/css" href="/assets/fonts/nunita/stylesheet.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<include src="/components/site-header.html"></include>
|
||||
|
||||
<main>
|
||||
|
||||
<section class="page-content">
|
||||
<h3>Conditions Générales d'Utilisation de Botascopia</h3>
|
||||
<p> Ces conditions concernent le site internet, le code et les données. Elles en établissent les conditions d'usage (consultation, moissonnage, exécution des logiciels, consultation ou minage des données, réutilisation, diffusion, dépôts de collections, édition des fiches). </p><p>
|
||||
</p><p> Les collections et les données entrées sur le site par les utilisateurs sont sourcées et référencées, c'est à dire que l'auteur de la collection ou de la valeur est enregistré et sa contribution sera reconnue sur le site. Sur demande ces données peuvent être effacées à tout moment. </p><p>
|
||||
</p><p> La génération de clefs et de fiches et la consultation des données sont des usages du site qui sont soumis à la propriété intellectuelle, et les grands principes des droits et devoirs des utilisatrices et utilisateurs sont ceux de la licence <a href="https://opendatacommons.org/licenses/odbl/">open data common licence</a> OCBL-BY-SA-CU (compatible with creative commons CC), c'est à dire que la consulation est offerte, la réutilisation est soumise à la citation (BY) et le partage selon les mêmes principes (SA), et l'usage est contrôlé (CU) par une clause morale, conformément au principe <a href="https://pbil.univ-lyon1.fr/members/tannier/usageright/accueil_en.html">usageright</a>. Voici notre clause: </p>
|
||||
<p> The use, redistribution, harvesting or mining of data on the site and its contents, data and codes, by manual or automatic collection devices, is subject to the commitment to exploit neither humans nor natural resources (refering to human rights and planetary boundaries). In particular, automated harvesting for the purpose of automatic learning of generative models is excluded. </p>
|
||||
<p> Le collectif Botascopia s’oppose de surcroît à toutes opérations de moissonnage et de fouille de textes et de données au
|
||||
sens de l’article L. 122-5-3 du code de la propriété intellectuelle.
|
||||
Cette opposition couvre l’ensemble du Site et des Contenus auxquels il donne accès.</p>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<include src="/components/site-footer.html"></include>
|
||||
|
||||
|
||||
|
||||
<!-- SCRIPT À SUPPRIMER UNE FOIS LE SITE INTEGRÉ (include des composants)-->
|
||||
<script>
|
||||
function processIncludes() {
|
||||
const includes = document.querySelectorAll('include[src]');
|
||||
|
||||
if (includes.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const promises = Array.from(includes).map(el => {
|
||||
const src = el.getAttribute('src');
|
||||
return fetch(src)
|
||||
.then(r => {
|
||||
if (!r.ok) throw new Error(`Erreur ${r.status}: ${src}`);
|
||||
return r.text();
|
||||
})
|
||||
.then(html => {
|
||||
el.outerHTML = html;
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Erreur de chargement:', err);
|
||||
});
|
||||
});
|
||||
|
||||
Promise.all(promises).then(() => {
|
||||
processIncludes();
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', processIncludes);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1
components/icons/view-grid.svg
Normal file
1
components/icons/view-grid.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="32" height="32" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m21 4c0-.478-.379-1-1-1h-16c-.62 0-1 .519-1 1v16c0 .621.52 1 1 1h16c.478 0 1-.379 1-1zm-12.5 15.5h-4v-4h4zm1.5-4h4v4h-4zm9.5 0v4h-4v-4zm-15-5.5h4v4h-4zm5.5 0h4v4h-4zm5.5 0h4v4h-4zm-11-5.5h4v4h-4zm5.5 0h4v4h-4zm5.5 0h4v4h-4z" fill-rule="nonzero"/></svg>
|
||||
|
After Width: | Height: | Size: 430 B |
1
components/icons/view-list.svg
Normal file
1
components/icons/view-list.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="32" height="32" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3.3 15.4c.717 0 1.3.583 1.3 1.3s-.583 1.3-1.3 1.3-1.3-.583-1.3-1.3.583-1.3 1.3-1.3zm2.7 1.85c0-.414.336-.75.75-.75h14.5c.414 0 .75.336.75.75s-.336.75-.75.75h-14.5c-.414 0-.75-.336-.75-.75zm-2.7-6.55c.717 0 1.3.583 1.3 1.3s-.583 1.3-1.3 1.3-1.3-.583-1.3-1.3.583-1.3 1.3-1.3zm2.7 1.3c0-.414.336-.75.75-.75h14.5c.414 0 .75.336.75.75s-.336.75-.75.75h-14.5c-.414 0-.75-.336-.75-.75zm-2.7-6c.717 0 1.3.583 1.3 1.3s-.583 1.3-1.3 1.3-1.3-.583-1.3-1.3.583-1.3 1.3-1.3zm2.7.75c0-.414.336-.75.75-.75h14.5c.414 0 .75.336.75.75s-.336.75-.75.75h-14.5c-.414 0-.75-.336-.75-.75z" fill-rule="nonzero"/></svg>
|
||||
|
After Width: | Height: | Size: 770 B |
|
|
@ -10,14 +10,14 @@
|
|||
<li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Publications</a></li>
|
||||
<li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Crédits et partenaires</a></li>
|
||||
<li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Contact</a></li>
|
||||
<li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Mentions légales</a></li>
|
||||
<li class="nav-level-2_li"><a class="nav-level-2_link" href="/cgu.html">Mentions légales</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<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>
|
||||
<ul class="nav-level-2_ul">
|
||||
<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="/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>
|
||||
</ul>
|
||||
</li>
|
||||
|
|
|
|||
35
index.html
35
index.html
|
|
@ -47,9 +47,7 @@
|
|||
<li data-type="methodologie"><a href="#home__methodologie">Méthodologie</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<a class="see-more" href="#">À propos du projet</a>
|
||||
|
||||
<button class="link-with-arrow"><a href="/a-propos.html">En savoir plus sur le projet</a></button>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -229,8 +227,10 @@
|
|||
<figure>
|
||||
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
|
||||
</figure>
|
||||
<h3 class="vernacular">Acore odorant</h3>
|
||||
<div class="name">
|
||||
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
|
||||
<p class="latin">Acorus calamus L.</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
|
|
@ -244,8 +244,29 @@
|
|||
<figure>
|
||||
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
|
||||
</figure>
|
||||
<h3 class="vernacular">Aulne glutineux</h3>
|
||||
<div class="name">
|
||||
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
|
||||
<p class="latin">Alnus glutinosa</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</article>
|
||||
|
||||
<article class="taxon">
|
||||
<figure>
|
||||
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
|
||||
</figure>
|
||||
<div class="name">
|
||||
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
|
||||
<p class="latin">Alnus glutinosa</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
|
@ -261,8 +282,10 @@
|
|||
<figure>
|
||||
<img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
|
||||
</figure>
|
||||
<h3 class="vernacular">Gouet d’Italie</h3>
|
||||
<div class="name">
|
||||
<h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
|
||||
<p class="latin">Arum Italicum Mill.</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -19,20 +19,89 @@
|
|||
<main id="main_species-list">
|
||||
|
||||
<header class="page-header">
|
||||
<div class="page-header__inner">
|
||||
|
||||
<h2 class="page-title">Liste des espèces</h2>
|
||||
|
||||
<p class="description">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio quasi facilis, explicabo similique molestiae dolorem consequuntur fugiat itaque iure fuga.
|
||||
</p>
|
||||
|
||||
<div class="details">
|
||||
|
||||
<div class="details__item">
|
||||
<p class="nbr">876</p>
|
||||
<p class="text">espèces répertoriées</p>
|
||||
</div>
|
||||
<div class="details__item">
|
||||
<p class="nbr">53</p>
|
||||
<p class="text">contributeur·ices</p>
|
||||
<button class="link-with-arrow"><a href="#">Voir la communuauté</a></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<nav class="sort">
|
||||
<ul>
|
||||
<li>Trier par familles</li>
|
||||
<li>Trier par ordre alphabétique</li>
|
||||
|
||||
|
||||
<div class="page-grid">
|
||||
|
||||
<nav class="page-nav">
|
||||
<ul class="toc">
|
||||
<li><a href="#acanthaceae">Acanthaceae (1)</a></li>
|
||||
<li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
|
||||
<li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
|
||||
<li><a href="#acanthaceae">Acanthaceae (1)</a></li>
|
||||
<li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
|
||||
<li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
|
||||
<li><a href="#acanthaceae">Acanthaceae (1)</a></li>
|
||||
<li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
|
||||
<li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
|
||||
<li><a href="#acanthaceae">Acanthaceae (1)</a></li>
|
||||
<li><a href="#amaranthaceae">Amaranthaceae(7)</a></li>
|
||||
<li><a href="#acanthaceae">Amaryllidaceae (14)</a></li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
<button>Vue édition</button>
|
||||
</nav>
|
||||
|
||||
<section class="page-species">
|
||||
|
||||
<section class="family">
|
||||
<input type="radio" id="view-grid" name="view" value="grid" checked />
|
||||
<input type="radio" id="view-list" name="view" value="list"/>
|
||||
<input type="radio" id="view-edit" name="view" value="edit" />
|
||||
|
||||
|
||||
|
||||
<div class="group-sort-view">
|
||||
|
||||
<div class="sort">
|
||||
<p>Trier par</p>
|
||||
<button class="btn-action">
|
||||
<a class="text" href="#">Nom</a>
|
||||
</button>
|
||||
<button class="btn-action is-selected">
|
||||
<a class="text" href="#">Familles d’espèces</a>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="view-toggle">
|
||||
<p>Vue</p>
|
||||
<label for="view-grid" class="btn-action"><span class="icon"><include src="/components/icons/view-grid.svg"></include></span> <span class="text">Galerie</span></label>
|
||||
<label for="view-list" class="btn-action"><span class="icon"><include src="/components/icons/view-list.svg"></include></span> <span class="text">Liste</span></label>
|
||||
<label for="view-edit" class="btn-action"><span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Édition</span></label>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="family" id="acanthaceae">
|
||||
|
||||
<div class="family__header">
|
||||
<h2 class="title">Acanthaceae</h2>
|
||||
|
|
@ -46,13 +115,19 @@
|
|||
<figure>
|
||||
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
|
||||
</figure>
|
||||
<div class="name">
|
||||
<div class="name">
|
||||
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
|
||||
<p class="latin">Acorus calamus L.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 class="btn-action btn-edit">
|
||||
<a href="#" target="_blank">
|
||||
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
|
||||
</a>
|
||||
</button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</article>
|
||||
|
|
@ -64,7 +139,7 @@
|
|||
|
||||
|
||||
|
||||
<section class="family">
|
||||
<section class="family" id="amaranthaceae">
|
||||
|
||||
<div class="family__header" >
|
||||
<h2 class="title">Amaranthaceae</h2>
|
||||
|
|
@ -78,13 +153,17 @@
|
|||
<figure>
|
||||
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
|
||||
</figure>
|
||||
<div class="name">
|
||||
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
|
||||
<p class="latin">Acorus calamus L.</p>
|
||||
</div>
|
||||
|
||||
<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 class="btn-action btn-edit">
|
||||
<a href="#" target="_blank">
|
||||
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
|
||||
</a>
|
||||
</button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</article>
|
||||
|
|
@ -93,15 +172,19 @@
|
|||
<figure>
|
||||
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
|
||||
</figure>
|
||||
<div class="name">
|
||||
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
|
||||
<p class="latin">Alnus glutinosa</p>
|
||||
</div>
|
||||
|
||||
<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 class="btn-action btn-edit">
|
||||
<a href="#" target="_blank">
|
||||
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
|
||||
</a>
|
||||
</button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</article>
|
||||
|
|
@ -110,15 +193,19 @@
|
|||
<figure>
|
||||
<img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
|
||||
</figure>
|
||||
<div class="name">
|
||||
<h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
|
||||
<p class="latin">Arum Italicum Mill.</p>
|
||||
</div>
|
||||
|
||||
<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 class="btn-action btn-edit">
|
||||
<a href="#" target="_blank">
|
||||
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
|
||||
</a>
|
||||
</button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</article>
|
||||
|
|
@ -127,15 +214,19 @@
|
|||
<figure>
|
||||
<img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
|
||||
</figure>
|
||||
<h3 class="vernacular">Charme commun</h3>
|
||||
<div class="name">
|
||||
<h3 class="vernacular"><a href="#" target="_blank">Charme commun</a></h3>
|
||||
<p class="latin">Carpinus betulus L.</p>
|
||||
</div>
|
||||
|
||||
<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 class="btn-action btn-edit">
|
||||
<a href="#" target="_blank">
|
||||
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
|
||||
</a>
|
||||
</button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</article>
|
||||
|
|
@ -144,13 +235,17 @@
|
|||
<figure>
|
||||
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
|
||||
</figure>
|
||||
<div class="name">
|
||||
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
|
||||
<p class="latin">Acorus calamus L.</p>
|
||||
</div>
|
||||
|
||||
<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 class="btn-action btn-edit">
|
||||
<a href="#" target="_blank">
|
||||
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
|
||||
</a>
|
||||
</button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</article>
|
||||
|
|
@ -159,15 +254,19 @@
|
|||
<figure>
|
||||
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
|
||||
</figure>
|
||||
<div class="name">
|
||||
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
|
||||
<p class="latin">Alnus glutinosa</p>
|
||||
</div>
|
||||
|
||||
<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 class="btn-action btn-edit">
|
||||
<a href="#" target="_blank">
|
||||
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
|
||||
</a>
|
||||
</button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</article>
|
||||
|
|
@ -176,15 +275,19 @@
|
|||
<figure>
|
||||
<img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
|
||||
</figure>
|
||||
<div class="name">
|
||||
<h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
|
||||
<p class="latin">Arum Italicum Mill.</p>
|
||||
</div>
|
||||
|
||||
<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 class="btn-action btn-edit">
|
||||
<a href="#" target="_blank">
|
||||
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
|
||||
</a>
|
||||
</button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</article>
|
||||
|
|
@ -193,15 +296,19 @@
|
|||
<figure>
|
||||
<img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
|
||||
</figure>
|
||||
<h3 class="vernacular">Charme commun</h3>
|
||||
<div class="name">
|
||||
<h3 class="vernacular"><a href="#" target="_blank">Charme commun</a></h3>
|
||||
<p class="latin">Carpinus betulus L.</p>
|
||||
</div>
|
||||
|
||||
<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 class="btn-action btn-edit">
|
||||
<a href="#" target="_blank">
|
||||
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
|
||||
</a>
|
||||
</button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</article>
|
||||
|
|
@ -212,7 +319,7 @@
|
|||
</section>
|
||||
|
||||
|
||||
<section class="family">
|
||||
<section class="family" id="amaryllidaceae">
|
||||
|
||||
<div class="family__header">
|
||||
<h2 class="title">Amaryllidaceae</h2>
|
||||
|
|
@ -226,13 +333,17 @@
|
|||
<figure>
|
||||
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
|
||||
</figure>
|
||||
<div class="name">
|
||||
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
|
||||
<p class="latin">Acorus calamus L.</p>
|
||||
</div>
|
||||
|
||||
<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 class="btn-action btn-edit">
|
||||
<a href="#" target="_blank">
|
||||
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
|
||||
</a>
|
||||
</button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</article>
|
||||
|
|
@ -241,15 +352,19 @@
|
|||
<figure>
|
||||
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
|
||||
</figure>
|
||||
<div class="name">
|
||||
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
|
||||
<p class="latin">Alnus glutinosa</p>
|
||||
</div>
|
||||
|
||||
<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 class="btn-action btn-edit">
|
||||
<a href="#" target="_blank">
|
||||
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
|
||||
</a>
|
||||
</button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</article>
|
||||
|
|
@ -258,15 +373,19 @@
|
|||
<figure>
|
||||
<img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
|
||||
</figure>
|
||||
<div class="name">
|
||||
<h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
|
||||
<p class="latin">Arum Italicum Mill.</p>
|
||||
</div>
|
||||
|
||||
<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 class="btn-action btn-edit">
|
||||
<a href="#" target="_blank">
|
||||
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
|
||||
</a>
|
||||
</button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</article>
|
||||
|
|
@ -275,15 +394,19 @@
|
|||
<figure>
|
||||
<img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
|
||||
</figure>
|
||||
<h3 class="vernacular">Charme commun</h3>
|
||||
<div class="name">
|
||||
<h3 class="vernacular"><a href="#" target="_blank">Charme commun</a></h3>
|
||||
<p class="latin">Carpinus betulus L.</p>
|
||||
</div>
|
||||
|
||||
<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 class="btn-action btn-edit">
|
||||
<a href="#" target="_blank">
|
||||
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
|
||||
</a>
|
||||
</button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</article>
|
||||
|
|
@ -292,13 +415,17 @@
|
|||
<figure>
|
||||
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
|
||||
</figure>
|
||||
<div class="name">
|
||||
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
|
||||
<p class="latin">Acorus calamus L.</p>
|
||||
</div>
|
||||
|
||||
<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 class="btn-action btn-edit">
|
||||
<a href="#" target="_blank">
|
||||
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
|
||||
</a>
|
||||
</button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</article>
|
||||
|
|
@ -307,15 +434,19 @@
|
|||
<figure>
|
||||
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
|
||||
</figure>
|
||||
<div class="name">
|
||||
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
|
||||
<p class="latin">Alnus glutinosa</p>
|
||||
</div>
|
||||
|
||||
<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 class="btn-action btn-edit">
|
||||
<a href="#" target="_blank">
|
||||
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
|
||||
</a>
|
||||
</button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</article>
|
||||
|
|
@ -324,15 +455,19 @@
|
|||
<figure>
|
||||
<img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
|
||||
</figure>
|
||||
<h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
|
||||
<p class="latin">Arum Italicum Mill.</p>
|
||||
<div class="name">
|
||||
<h3 class="vernacular"><a href="#" target="_blank">Gléchome lierre terrestre</a></h3>
|
||||
<p class="latin">Glechoma hederacea</p>
|
||||
</div>
|
||||
|
||||
<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 class="btn-action btn-edit">
|
||||
<a href="#" target="_blank">
|
||||
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
|
||||
</a>
|
||||
</button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</article>
|
||||
|
|
@ -341,15 +476,19 @@
|
|||
<figure>
|
||||
<img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
|
||||
</figure>
|
||||
<h3 class="vernacular">Charme commun</h3>
|
||||
<div class="name">
|
||||
<h3 class="vernacular"><a href="#" target="_blank">Charme commun</a></h3>
|
||||
<p class="latin">Carpinus betulus L.</p>
|
||||
</div>
|
||||
|
||||
<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 class="btn-action btn-edit">
|
||||
<a href="#" target="_blank">
|
||||
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
|
||||
</a>
|
||||
</button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</article>
|
||||
|
|
@ -359,6 +498,11 @@
|
|||
|
||||
</section>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue