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
344
a-propos.html
344
a-propos.html
|
|
@ -16,44 +16,70 @@
|
||||||
|
|
||||||
<include src="/components/site-header.html"></include>
|
<include src="/components/site-header.html"></include>
|
||||||
|
|
||||||
<main class="has-toc">
|
<main>
|
||||||
|
|
||||||
<header class="page-header">
|
<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>
|
</header>
|
||||||
|
|
||||||
|
|
||||||
<nav class="page-toc">
|
|
||||||
<ul>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
|
<div class="page-grid">
|
||||||
</ul>
|
|
||||||
|
<nav class="page-nav">
|
||||||
</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">
|
<section class="page-content">
|
||||||
|
|
||||||
|
<h3 id="demarche-botascopia">La démarche botascopia</h3>
|
||||||
<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
|
<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
|
||||||
aussi aux botanistes chevronnés à la recherche d’informations fiables et détaillées sur les espèces
|
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>
|
<ol>
|
||||||
<li><strong>Constituer une base de connaissances sur les plantes à fleurs</strong> permettant de
|
<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,
|
décrire finement leur morphologie ainsi que d’autres caractéristiques (écologie, distribution,
|
||||||
propriétés)</li>
|
propriétés)</li>
|
||||||
<li><strong>Développer des outils informatiques</strong> permettant de produire automatiquement des
|
<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
|
<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>
|
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
|
<li>Interroger le rôle des outils de reconnaissance de plantes dans le <strong>partage des
|
||||||
|
|
@ -62,156 +88,184 @@
|
||||||
</ol>
|
</ol>
|
||||||
|
|
||||||
|
|
||||||
<h3 id="equipe">L’équipe</h3>
|
<h3 id="equipe">L’équipe</h3>
|
||||||
|
|
||||||
<h4>Membres du projet</h4>
|
<h4>Membres du projet</h4>
|
||||||
|
|
||||||
<div class="team">
|
<div class="team">
|
||||||
<div class="member">
|
<div class="member">
|
||||||
<img src="/images/simon.jpg">
|
<img src="/images/simon.jpg">
|
||||||
<div class="name">Simon Castellan</div>
|
<div class="text">
|
||||||
<div class="details">(Inria Rennes)</div>
|
<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>
|
</div>
|
||||||
<div class="member">
|
|
||||||
<img src="/images/sophie.jpg">
|
|
||||||
<div class="name">Sophie Nadot</div>
|
|
||||||
<div class="details">(Univ. Paris-Saclay)</div>
|
|
||||||
</div>
|
|
||||||
<div class="member">
|
|
||||||
<img src="/images/xavier.jpg">
|
|
||||||
<div class="name">Xavier Aubriot</div>
|
|
||||||
<div class="details">(Univ. Paris-Saclay)</div>
|
|
||||||
</div>
|
|
||||||
<div class="member">
|
|
||||||
<img src="/images/eric.jpg">
|
|
||||||
<div class="name">Eric Tannier</div>
|
|
||||||
<div class="details">(Inria Lyon)</div>
|
|
||||||
</div>
|
|
||||||
<div class="member">
|
|
||||||
<img src="/images/agnes.jpg">
|
|
||||||
<div class="name">Agnès Schermann</div>
|
|
||||||
<div class="details">(Univ. Rennes)</div>
|
|
||||||
</div>
|
|
||||||
<div class="member">
|
|
||||||
<img src="/images/jos.jpg">
|
|
||||||
<div class="name">Jos Käfer</div>
|
|
||||||
<div class="details">(CNRS)</div>
|
|
||||||
</div>
|
|
||||||
<div class="member">
|
|
||||||
<img src="/images/aurore.jpg">
|
|
||||||
<div class="name">Aurore Alcolei</div>
|
|
||||||
<div class="details">(UPEC)</div>
|
|
||||||
</div>
|
|
||||||
<div class="member">
|
|
||||||
<img src="/images/laetitia.jpg">
|
|
||||||
<div class="name">Laetitia Carrive</div>
|
|
||||||
<div class="details">(Univ. Rennes)</div>
|
|
||||||
</div>
|
|
||||||
<div class="member">
|
|
||||||
<img src="/images/gurvan.jpg">
|
|
||||||
<div class="name">Gurvan Cabon</div>
|
|
||||||
<div class="details">(Inria)</div>
|
|
||||||
</div>
|
|
||||||
<div class="member">
|
|
||||||
<img src="/images/mathurin.jpg">
|
|
||||||
<div class="name">Mathurin Bellot</div>
|
|
||||||
<div class="details">(Tela-Botanica)</div>
|
|
||||||
</div>
|
|
||||||
<div class="member">
|
|
||||||
<img src="/images/marie-charlotte.jpg">
|
|
||||||
<div class="name">Marie-Charlotte Allam</div>
|
|
||||||
<div class="details">(Univ. Rennes)</div>
|
|
||||||
</div>
|
|
||||||
<div class="member">
|
|
||||||
<img src="/images/jeremy.jpg">
|
|
||||||
<div class="name">Jérémy Omer</div>
|
|
||||||
<div class="details">(INSA Rennes)</div>
|
|
||||||
</div>
|
|
||||||
<div class="member">
|
|
||||||
<img src="/images/marine.jpg">
|
|
||||||
<div class="name">Marine Fauché</div>
|
|
||||||
<div class="details">(Univ. Paris-Saclay)</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h4>Alumni</h4>
|
<h4>Alumni</h4>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>Lysa Dahmani</li>
|
<li>Lysa Dahmani</li>
|
||||||
<li>Virgil Marionneau</li>
|
<li>Virgil Marionneau</li>
|
||||||
<li>Charlotte Thomas</li>
|
<li>Charlotte Thomas</li>
|
||||||
<li>Louise Cranidge</li>
|
<li>Louise Cranidge</li>
|
||||||
<li>Fanny Folta-Gerij</li>
|
<li>Fanny Folta-Gerij</li>
|
||||||
<li>Constance Monnier</li>
|
<li>Constance Monnier</li>
|
||||||
<li>Zélie Rodrigues</li>
|
<li>Zélie Rodrigues</li>
|
||||||
<li>Mattéo Prieur</li>
|
<li>Mattéo Prieur</li>
|
||||||
<li>Clément Maouche</li>
|
<li>Clément Maouche</li>
|
||||||
<li>Joris Hélie</li>
|
<li>Joris Hélie</li>
|
||||||
<li>Eugénie Mousseux-Caillon</li>
|
<li>Eugénie Mousseux-Caillon</li>
|
||||||
<li>Isabella Gargiulo Gutierrez</li>
|
<li>Isabella Gargiulo Gutierrez</li>
|
||||||
<li>Nolwenn Emonet</li>
|
<li>Nolwenn Emonet</li>
|
||||||
<li>Baptiste Izquierdo Rey</li>
|
<li>Baptiste Izquierdo Rey</li>
|
||||||
<li>Amélie Sagliet</li><li>
|
<li>Amélie Sagliet</li>
|
||||||
</li><li>Capucine Tesson</li><li>
|
<li>Capucine Tesson</li>
|
||||||
</li></ul>
|
</ul>
|
||||||
|
|
||||||
<h3 id="soutien-financer">Soutien Financier</h3>
|
<h3 id="soutien-financer">Soutien Financier</h3>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>Action exploratoire Inria <i>Back to the trees</i> (2023-2025)
|
<li>Action exploratoire Inria <i>Back to the trees</i> (2023-2025)
|
||||||
</li>
|
</li>
|
||||||
<li>Innovation pédagogique OSER et Graduate School Biosphera - Université Paris-Saclay</li>
|
<li>Innovation pédagogique OSER et Graduate School Biosphera - Université Paris-Saclay</li>
|
||||||
<li>ANR Sciences avec et pour la société <i>Flores</i> (2024-2025)</li>
|
<li>ANR Sciences avec et pour la société <i>Flores</i> (2024-2025)</li>
|
||||||
<li>Ville de Paris</li>
|
<li>Ville de Paris</li>
|
||||||
<li>Pl@ntAgroEco</li>
|
<li>Pl@ntAgroEco</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<include src="/components/site-footer.html"></include>
|
<include src="/components/site-footer.html"></include>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- SCRIPT À SUPPRIMER UNE FOIS LE SITE INTEGRÉ (include des composants)-->
|
<!-- SCRIPT À SUPPRIMER UNE FOIS LE SITE INTEGRÉ (include des composants)-->
|
||||||
<script>
|
<script>
|
||||||
function processIncludes() {
|
function processIncludes() {
|
||||||
const includes = document.querySelectorAll('include[src]');
|
const includes = document.querySelectorAll('include[src]');
|
||||||
|
|
||||||
if (includes.length === 0) {
|
if (includes.length === 0) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const promises = Array.from(includes).map(el => {
|
const promises = Array.from(includes).map(el => {
|
||||||
const src = el.getAttribute('src');
|
const src = el.getAttribute('src');
|
||||||
return fetch(src)
|
return fetch(src)
|
||||||
.then(r => {
|
.then(r => {
|
||||||
if (!r.ok) throw new Error(`Erreur ${r.status}: ${src}`);
|
if (!r.ok) throw new Error(`Erreur ${r.status}: ${src}`);
|
||||||
return r.text();
|
return r.text();
|
||||||
})
|
})
|
||||||
.then(html => {
|
.then(html => {
|
||||||
el.outerHTML = html;
|
el.outerHTML = html;
|
||||||
})
|
})
|
||||||
.catch(err => {
|
.catch(err => {
|
||||||
console.error('Erreur de chargement:', err);
|
console.error('Erreur de chargement:', err);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
Promise.all(promises).then(() => {
|
Promise.all(promises).then(() => {
|
||||||
processIncludes();
|
processIncludes();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', processIncludes);
|
document.addEventListener('DOMContentLoaded', processIncludes);
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -18,13 +18,6 @@ body {
|
||||||
print-color-adjust:exact !important; */
|
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{
|
.home--section-tool{
|
||||||
background-color: var(--color);
|
background-color: var(--data-color);
|
||||||
&[data-type="base-connaissance"],
|
&[data-type="base-connaissance"],
|
||||||
&[data-type="livrets"]{
|
&[data-type="livrets"]{
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
|
|
@ -10,14 +10,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#main_home {
|
#main_home {
|
||||||
--max-w-home: 1100px;
|
--max-w-home: 1100px;
|
||||||
section {
|
section {
|
||||||
|
|
@ -38,18 +30,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.section--header {
|
.section--header {
|
||||||
margin-bottom: calc(var(--spacing) * 4);
|
margin-bottom: calc(var(--spacing) * 4);
|
||||||
|
display: grid;
|
||||||
display: grid;
|
grid-template-columns: 1fr 440px;
|
||||||
// grid-template-columns: 3fr 2fr;
|
|
||||||
grid-template-columns: 1fr 440px;
|
|
||||||
gap: calc(var(--spacing)*1);
|
gap: calc(var(--spacing)*1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.section--title {
|
.section--title {
|
||||||
font-size: 2.8rem;
|
font-size: 2.8rem;
|
||||||
font-family: var(--font-title);
|
font-family: var(--font-title);
|
||||||
// margin-bottom: calc(var(--spacing) * 1.5);
|
|
||||||
grid-column: span 2;
|
grid-column: span 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -90,8 +79,6 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.section--title {
|
.section--title {
|
||||||
|
|
@ -132,9 +119,8 @@
|
||||||
min-width: 12ch;
|
min-width: 12ch;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
|
border: 1.5px solid var(--data-color);
|
||||||
border: 1.5px solid var(--color);
|
color: var(--data-color);
|
||||||
color: var(--color);
|
|
||||||
|
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -145,7 +131,7 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--color-light);
|
background-color: var(--data-color-light);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -153,20 +139,12 @@
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: var(--color);
|
color: var(--data-color);
|
||||||
font-weight: bold;
|
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{
|
.page-content{
|
||||||
font-size: var(--fs-medium);
|
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{
|
.page-header{
|
||||||
margin-top: calc(var(--spacing)*3);
|
// margin-top: calc(var(--spacing)*1);
|
||||||
margin-bottom: calc(var(--spacing)*2);
|
// 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{
|
.page-title{
|
||||||
font-size: var(--fs-title-page);
|
font-size: var(--fs-title-page);
|
||||||
font-family: var(--font-title);
|
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){
|
@mixin icon($size){
|
||||||
|
display: inline-block;
|
||||||
width: $size;
|
width: $size;
|
||||||
height: $size;
|
height: $size;
|
||||||
|
|
||||||
|
|
@ -18,15 +19,15 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
circle{
|
circle{
|
||||||
fill: #cfcfcf;
|
fill: #efefef;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filled{
|
.filled{
|
||||||
fill: lightgreen;
|
fill: var(--color-orange-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
.verified{
|
.verified{
|
||||||
fill: green;
|
fill: var(--color-green);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
--fs-small: 14px;
|
--fs-small: 14px;
|
||||||
--fs-normal: 16px;
|
--fs-normal: 16px;
|
||||||
--fs-medium: 22px;
|
--fs-medium: 22px;
|
||||||
--fs-title-page: 38px;
|
--fs-title-page: 42px;
|
||||||
|
|
||||||
--spacing: 20px;
|
--spacing: 20px;
|
||||||
|
|
||||||
|
|
@ -21,7 +21,7 @@
|
||||||
--radius-btn: 6px;
|
--radius-btn: 6px;
|
||||||
--radius-img: 6px;
|
--radius-img: 6px;
|
||||||
|
|
||||||
--header-h: 60px;
|
--header-h: 80px;
|
||||||
--header-z: 9000;
|
--header-z: 9000;
|
||||||
|
|
||||||
--white: white;
|
--white: white;
|
||||||
|
|
@ -49,19 +49,28 @@
|
||||||
--color-orange-light: #f3e7e0;
|
--color-orange-light: #f3e7e0;
|
||||||
|
|
||||||
--color-green: #007953;
|
--color-green: #007953;
|
||||||
--color-green-medium: #a1ccbe;;
|
// --color-green-medium: #a1ccbe;
|
||||||
|
--color-green-medium: #42af8c;
|
||||||
--color-green-light: #d5ebe4;
|
--color-green-light: #d5ebe4;
|
||||||
|
--color-green-x-light: #eef7f4;
|
||||||
--color-green-black: #016042;
|
--color-green-black: #016042;
|
||||||
|
|
||||||
--color-txt: rgb(41, 41, 41);
|
--color-txt: rgb(41, 41, 41);
|
||||||
--color-txt-light: #a5a9a9;
|
--color-txt-light: #a5a9a9;
|
||||||
--color-light: #DCDDDD;
|
--color-light: #DCDDDD;
|
||||||
--color-x-light: #eaebeb;
|
--color-x-light: #eaebeb;
|
||||||
|
--color-xx-light: #f4f4f4;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
--color: var(--color-green);
|
--color: var(--color-green);
|
||||||
--color-medium: var(--color-green-medium);
|
--color-medium: var(--color-green-medium);
|
||||||
--color-light: var(--color-green-light);
|
--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"]{
|
[data-type="livrets"]{
|
||||||
--color: var(--color-violet);
|
--data-color: var(--color-violet);
|
||||||
--color-medium: var(--color-violet-medium);
|
--data-color-medium: var(--color-violet-medium);
|
||||||
--color-light: var(--color-violet-light);
|
--data-color-light: var(--color-violet-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
[data-type="base-connaissance"]{
|
[data-type="base-connaissance"]{
|
||||||
--color: var(--color-green);
|
--data-color: var(--color-green);
|
||||||
--color-medium: var(--color-green-medium);
|
--data-color-medium: var(--color-green-medium);
|
||||||
--color-light: var(--color-green-light);
|
--data-color-light: var(--color-green-light);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-type="animations"]{
|
[data-type="animations"]{
|
||||||
--color: var(--color-orange);
|
--data-color: var(--color-orange);
|
||||||
--color-medium: var(--color-orange-medium);
|
--data-color-medium: var(--color-orange-medium);
|
||||||
--color-light: var(--color-orange-light);
|
--data-color-light: var(--color-orange-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-type="methodologie"]{
|
[data-type="methodologie"]{
|
||||||
|
|
||||||
--color: var(--color-yellow);
|
--data-color: var(--color-yellow);
|
||||||
--color-medium: var(--color-yellow-medium);
|
--data-color-medium: var(--color-yellow-medium);
|
||||||
--color-light: var(--color-yellow-light);
|
--data-color-light: var(--color-yellow-light);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
|
@use "../abstracts/mixins.scss" as *;
|
||||||
|
|
||||||
.btn--solid{
|
.btn--solid{
|
||||||
font-weight: 600;
|
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{
|
.species-list{
|
||||||
|
|
||||||
display: grid;
|
|
||||||
|
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
// gap: calc(var(--spacing)*2);
|
|
||||||
gap: calc(var(--spacing)*1);
|
gap: calc(var(--spacing)*1);
|
||||||
gap: calc(var(--spacing)*1.5);
|
|
||||||
margin-bottom: calc(var(--spacing)*3);
|
margin-bottom: calc(var(--spacing)*3);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.taxon{
|
.taxon{
|
||||||
width: calc(100%/3 - var(--spacing)*3/3);
|
width: calc(100%/3 - var(--spacing)*3/3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.family{
|
.family{
|
||||||
margin-bottom: calc(var(--spacing)*4);
|
margin-bottom: calc(var(--spacing)*4);
|
||||||
|
&:target{
|
||||||
|
padding-top: var(--top-target);
|
||||||
|
}
|
||||||
.family__header{
|
.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,15 +2,13 @@
|
||||||
|
|
||||||
.species-list .taxon{
|
.species-list .taxon{
|
||||||
|
|
||||||
.btn-edit {
|
|
||||||
@include icon(20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-edit{
|
.chart-edit{
|
||||||
@include chart-edit(40px);
|
@include chart-edit(40px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-edit, .btn-edit{
|
|
||||||
|
.chart-edit, .btn-edit{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -21,11 +19,10 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
background-color: var(--color-green-light);
|
background-color: var(--color-green-light);
|
||||||
padding: 20px;
|
padding: calc(var(--padding-inner)*0.75);
|
||||||
|
|
||||||
.vernacular{ order: 1; }
|
.name{ order: 1; }
|
||||||
.latin{ order: 2; }
|
figure{ order: 2; }
|
||||||
figure{ order: 3; }
|
|
||||||
|
|
||||||
figure{
|
figure{
|
||||||
@include fig-ratio(1/1);
|
@include fig-ratio(1/1);
|
||||||
|
|
@ -41,6 +38,8 @@
|
||||||
border-radius: var(--radius-small);
|
border-radius: var(--radius-small);
|
||||||
padding: 4px 1ch;
|
padding: 4px 1ch;
|
||||||
margin-bottom: calc(var(--spacing)*0.25);
|
margin-bottom: calc(var(--spacing)*0.25);
|
||||||
|
font-size: var(--fs-normal);
|
||||||
|
line-height: 1.1;
|
||||||
a{
|
a{
|
||||||
color: white;
|
color: white;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
@ -53,6 +52,7 @@
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
margin-bottom: calc(var(--spacing)*0.75);
|
margin-bottom: calc(var(--spacing)*0.75);
|
||||||
color: var(--color-txt);
|
color: var(--color-txt);
|
||||||
|
font-size: var(--fs-small);
|
||||||
}
|
}
|
||||||
|
|
||||||
.vernacular, .latin{
|
.vernacular, .latin{
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,29 @@
|
||||||
.team{
|
.team{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 2ch;
|
||||||
.member{
|
.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{
|
img{
|
||||||
width: 60px;
|
width: 100px;
|
||||||
aspect-ratio: 1/1;
|
aspect-ratio: 1/1;
|
||||||
background-color: #cfcfcf;
|
background-color: #cfcfcf;
|
||||||
border-radius: var(--radius-img);
|
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-small: 14px;
|
||||||
--fs-normal: 16px;
|
--fs-normal: 16px;
|
||||||
--fs-medium: 22px;
|
--fs-medium: 22px;
|
||||||
--fs-title-page: 38px;
|
--fs-title-page: 42px;
|
||||||
--spacing: 20px;
|
--spacing: 20px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
--unit: 24px;
|
--unit: 24px;
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
--radius-small: 3px;
|
--radius-small: 3px;
|
||||||
--radius-btn: 6px;
|
--radius-btn: 6px;
|
||||||
--radius-img: 6px;
|
--radius-img: 6px;
|
||||||
--header-h: 60px;
|
--header-h: 80px;
|
||||||
--header-z: 9000;
|
--header-z: 9000;
|
||||||
--white: white;
|
--white: white;
|
||||||
--color-bg: white;
|
--color-bg: white;
|
||||||
|
|
@ -33,40 +33,45 @@
|
||||||
--color-orange-medium: #f3a066;
|
--color-orange-medium: #f3a066;
|
||||||
--color-orange-light: #f3e7e0;
|
--color-orange-light: #f3e7e0;
|
||||||
--color-green: #007953;
|
--color-green: #007953;
|
||||||
--color-green-medium: #a1ccbe;
|
--color-green-medium: #42af8c;
|
||||||
--color-green-light: #d5ebe4;
|
--color-green-light: #d5ebe4;
|
||||||
|
--color-green-x-light: #eef7f4;
|
||||||
--color-green-black: #016042;
|
--color-green-black: #016042;
|
||||||
--color-txt: rgb(41, 41, 41);
|
--color-txt: rgb(41, 41, 41);
|
||||||
--color-txt-light: #a5a9a9;
|
--color-txt-light: #a5a9a9;
|
||||||
--color-light: #DCDDDD;
|
--color-light: #DCDDDD;
|
||||||
--color-x-light: #eaebeb;
|
--color-x-light: #eaebeb;
|
||||||
|
--color-xx-light: #f4f4f4;
|
||||||
--color: var(--color-green);
|
--color: var(--color-green);
|
||||||
--color-medium: var(--color-green-medium);
|
--color-medium: var(--color-green-medium);
|
||||||
--color-light: var(--color-green-light);
|
--color-light: var(--color-green-light);
|
||||||
|
--max-width-content: 740px;
|
||||||
|
--max-width-container: 860px;
|
||||||
|
--top-target: calc(var(--spacing)*5);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-type=livrets] {
|
[data-type=livrets] {
|
||||||
--color: var(--color-violet);
|
--data-color: var(--color-violet);
|
||||||
--color-medium: var(--color-violet-medium);
|
--data-color-medium: var(--color-violet-medium);
|
||||||
--color-light: var(--color-violet-light);
|
--data-color-light: var(--color-violet-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-type=base-connaissance] {
|
[data-type=base-connaissance] {
|
||||||
--color: var(--color-green);
|
--data-color: var(--color-green);
|
||||||
--color-medium: var(--color-green-medium);
|
--data-color-medium: var(--color-green-medium);
|
||||||
--color-light: var(--color-green-light);
|
--data-color-light: var(--color-green-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-type=animations] {
|
[data-type=animations] {
|
||||||
--color: var(--color-orange);
|
--data-color: var(--color-orange);
|
||||||
--color-medium: var(--color-orange-medium);
|
--data-color-medium: var(--color-orange-medium);
|
||||||
--color-light: var(--color-orange-light);
|
--data-color-light: var(--color-orange-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-type=methodologie] {
|
[data-type=methodologie] {
|
||||||
--color: var(--color-yellow);
|
--data-color: var(--color-yellow);
|
||||||
--color-medium: var(--color-yellow-medium);
|
--data-color-medium: var(--color-yellow-medium);
|
||||||
--color-light: var(--color-yellow-light);
|
--data-color-light: var(--color-yellow-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
|
|
@ -88,13 +93,6 @@ body {
|
||||||
print-color-adjust:exact !important; */
|
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 {
|
button {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
|
|
@ -322,31 +320,70 @@ figure, picture, img {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.see-more {
|
.btn-action {
|
||||||
--hover-bg: var(--color-bg);
|
border: 1px solid var(--color-txt-light);
|
||||||
font-weight: 500;
|
height: calc(var(--unit) * 1.25);
|
||||||
color: var(--color-txt);
|
background-color: var(--white);
|
||||||
color: currentColor;
|
border-radius: var(--radius-btn);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.btn-action a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1ch;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
color: var(--color-txt);
|
||||||
|
padding: 0 1ch;
|
||||||
}
|
}
|
||||||
.see-more span {
|
.btn-action .icon {
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.see-more::after {
|
|
||||||
content: "→";
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding-left: 0.75ch;
|
width: 20px;
|
||||||
left: 0;
|
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;
|
transition: left 0.4s ease-in-out;
|
||||||
|
-webkit-text-decoration: 1px underline transparent;
|
||||||
|
text-decoration: 1px underline transparent;
|
||||||
}
|
}
|
||||||
.see-more:hover {
|
.link-with-arrow:hover {
|
||||||
text-decoration: underline;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
.see-more:hover::after {
|
.link-with-arrow:hover a::after {
|
||||||
left: 0.5ch;
|
left: 2.5ch;
|
||||||
-webkit-text-decoration: underline var(--hover-bg);
|
|
||||||
text-decoration: underline var(--hover-bg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.slideshow {
|
.slideshow {
|
||||||
|
|
@ -584,24 +621,209 @@ span.controls::after {
|
||||||
height: 70px;
|
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 {
|
.team .member img {
|
||||||
width: 60px;
|
width: 100px;
|
||||||
aspect-ratio: 1/1;
|
aspect-ratio: 1/1;
|
||||||
background-color: #cfcfcf;
|
background-color: #cfcfcf;
|
||||||
border-radius: var(--radius-img);
|
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 {
|
.page-header {
|
||||||
margin-top: calc(var(--spacing) * 3);
|
color: var(--color-green);
|
||||||
margin-bottom: calc(var(--spacing) * 2);
|
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 {
|
.page-header .page-title {
|
||||||
font-size: var(--fs-title-page);
|
font-size: var(--fs-title-page);
|
||||||
font-family: var(--font-title);
|
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 {
|
.page-content {
|
||||||
font-size: var(--fs-medium);
|
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 {
|
.item-nav {
|
||||||
|
|
@ -651,7 +873,7 @@ span.controls::after {
|
||||||
}
|
}
|
||||||
|
|
||||||
.home--section-tool {
|
.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] {
|
.home--section-tool[data-type=base-connaissance], .home--section-tool[data-type=livrets] {
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
|
|
@ -738,8 +960,8 @@ span.controls::after {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
min-width: 12ch;
|
min-width: 12ch;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border: 1.5px solid var(--color);
|
border: 1.5px solid var(--data-color);
|
||||||
color: var(--color);
|
color: var(--data-color);
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -749,19 +971,12 @@ span.controls::after {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
#home__hero .nav-hero li:hover {
|
#home__hero .nav-hero li:hover {
|
||||||
background-color: var(--color-light);
|
background-color: var(--data-color-light);
|
||||||
}
|
}
|
||||||
#home__hero .nav-hero a {
|
#home__hero .nav-hero a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: var(--color);
|
color: var(--data-color);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
/* &::after{
|
|
||||||
content: " ↓"
|
|
||||||
} */
|
|
||||||
}
|
|
||||||
#home__hero .see-more {
|
|
||||||
display: block;
|
|
||||||
padding-top: calc(var(--unit) * 1.5);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#home__a-propos p,
|
#home__a-propos p,
|
||||||
|
|
@ -868,12 +1083,10 @@ span.controls::after {
|
||||||
}
|
}
|
||||||
|
|
||||||
.species-list {
|
.species-list {
|
||||||
display: grid;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: calc(var(--spacing) * 1);
|
gap: calc(var(--spacing) * 1);
|
||||||
gap: calc(var(--spacing) * 1.5);
|
|
||||||
margin-bottom: calc(var(--spacing) * 3);
|
margin-bottom: calc(var(--spacing) * 3);
|
||||||
}
|
}
|
||||||
.species-list .taxon {
|
.species-list .taxon {
|
||||||
|
|
@ -883,6 +1096,9 @@ span.controls::after {
|
||||||
.family {
|
.family {
|
||||||
margin-bottom: calc(var(--spacing) * 4);
|
margin-bottom: calc(var(--spacing) * 4);
|
||||||
}
|
}
|
||||||
|
.family:target {
|
||||||
|
padding-top: var(--top-target);
|
||||||
|
}
|
||||||
.family .family__header {
|
.family .family__header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -901,14 +1117,6 @@ span.controls::after {
|
||||||
font-weight: 500;
|
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 {
|
.species-list .taxon .chart-edit {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
|
@ -918,13 +1126,13 @@ span.controls::after {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.species-list .taxon .chart-edit svg circle {
|
.species-list .taxon .chart-edit svg circle {
|
||||||
fill: #cfcfcf;
|
fill: #efefef;
|
||||||
}
|
}
|
||||||
.species-list .taxon .chart-edit svg .filled {
|
.species-list .taxon .chart-edit svg .filled {
|
||||||
fill: lightgreen;
|
fill: var(--color-orange-medium);
|
||||||
}
|
}
|
||||||
.species-list .taxon .chart-edit svg .verified {
|
.species-list .taxon .chart-edit svg .verified {
|
||||||
fill: green;
|
fill: var(--color-green);
|
||||||
}
|
}
|
||||||
.species-list .taxon .chart-edit, .species-list .taxon .btn-edit {
|
.species-list .taxon .chart-edit, .species-list .taxon .btn-edit {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
@ -934,16 +1142,13 @@ span.controls::after {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: var(--color-green-light);
|
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;
|
order: 1;
|
||||||
}
|
}
|
||||||
.species-list .taxon .latin {
|
|
||||||
order: 2;
|
|
||||||
}
|
|
||||||
.species-list .taxon figure {
|
.species-list .taxon figure {
|
||||||
order: 3;
|
order: 2;
|
||||||
}
|
}
|
||||||
.species-list .taxon figure {
|
.species-list .taxon figure {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -967,6 +1172,8 @@ span.controls::after {
|
||||||
border-radius: var(--radius-small);
|
border-radius: var(--radius-small);
|
||||||
padding: 4px 1ch;
|
padding: 4px 1ch;
|
||||||
margin-bottom: calc(var(--spacing) * 0.25);
|
margin-bottom: calc(var(--spacing) * 0.25);
|
||||||
|
font-size: var(--fs-normal);
|
||||||
|
line-height: 1.1;
|
||||||
}
|
}
|
||||||
.species-list .taxon .vernacular a {
|
.species-list .taxon .vernacular a {
|
||||||
color: white;
|
color: white;
|
||||||
|
|
@ -978,6 +1185,7 @@ span.controls::after {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
margin-bottom: calc(var(--spacing) * 0.75);
|
margin-bottom: calc(var(--spacing) * 0.75);
|
||||||
color: var(--color-txt);
|
color: var(--color-txt);
|
||||||
|
font-size: var(--fs-small);
|
||||||
}
|
}
|
||||||
.species-list .taxon .vernacular, .species-list .taxon .latin {
|
.species-list .taxon .vernacular, .species-list .taxon .latin {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -985,4 +1193,141 @@ span.controls::after {
|
||||||
.species-list .taxon:hover {
|
.species-list .taxon:hover {
|
||||||
outline: 2px solid var(--color-green);
|
outline: 2px solid var(--color-green);
|
||||||
background-color: var(--color-green-medium);
|
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 */
|
}/*# 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-nav";
|
||||||
@use "css/site-footer";
|
@use "css/site-footer";
|
||||||
@use "css/components/buttons";
|
@use "css/components/buttons";
|
||||||
@use "css/components/see-more";
|
|
||||||
@use "css/components/slideshow";
|
@use "css/components/slideshow";
|
||||||
@use "css/components/logos-container";
|
@use "css/components/logos-container";
|
||||||
@use "css/components/team";
|
@use "css/components/team";
|
||||||
|
@use "css/components/sort";
|
||||||
|
@use "css/components/view-toggle";
|
||||||
|
|
||||||
|
|
||||||
@use "css/page-header";
|
@use "css/page-header";
|
||||||
|
@use "css/page-grid";
|
||||||
|
@use "css/page-nav";
|
||||||
@use "css/page-content";
|
@use "css/page-content";
|
||||||
|
|
||||||
|
|
||||||
@use "css/home-item-nav";
|
@use "css/home-item-nav";
|
||||||
@use "css/home";
|
@use "css/home";
|
||||||
|
|
||||||
@use "css/components/species-list";
|
@use "css/components/species-list";
|
||||||
@use "css/components/taxon-card";
|
@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 |
|
|
@ -1,6 +1,6 @@
|
||||||
<nav id="site-nav">
|
<nav id="site-nav">
|
||||||
<ul class="nav-level-1_ul">
|
<ul class="nav-level-1_ul">
|
||||||
<li class="nav-level-1_li li-dropdown">
|
<li class="nav-level-1_li li-dropdown">
|
||||||
|
|
||||||
<a class="nav-level-1_link" href="#">Le projet <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></a>
|
<a class="nav-level-1_link" href="#">Le projet <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></a>
|
||||||
<ul class="nav-level-2_ul">
|
<ul class="nav-level-2_ul">
|
||||||
|
|
@ -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="#">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="#">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="#">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>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="nav-level-1_li li-dropdown">
|
<li class="nav-level-1_li li-dropdown">
|
||||||
<a class="nav-level-1_link" href="#">Base de connaissance <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></a>
|
<a class="nav-level-1_link" href="#">Base de connaissance <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></a>
|
||||||
<ul class="nav-level-2_ul">
|
<ul class="nav-level-2_ul">
|
||||||
<li class="nav-level-2_li"><a class="nav-level-2_link" href="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>
|
<li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Contribuer à la base de connaissance</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
||||||
41
index.html
41
index.html
|
|
@ -47,9 +47,7 @@
|
||||||
<li data-type="methodologie"><a href="#home__methodologie">Méthodologie</a></li>
|
<li data-type="methodologie"><a href="#home__methodologie">Méthodologie</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
<button class="link-with-arrow"><a href="/a-propos.html">En savoir plus sur le projet</a></button>
|
||||||
<a class="see-more" href="#">À propos du projet</a>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -229,8 +227,10 @@
|
||||||
<figure>
|
<figure>
|
||||||
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
|
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
|
||||||
</figure>
|
</figure>
|
||||||
<h3 class="vernacular">Acore odorant</h3>
|
<div class="name">
|
||||||
<p class="latin">Acorus calamus L.</p>
|
<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>
|
<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>
|
||||||
|
|
||||||
|
|
@ -240,12 +240,33 @@
|
||||||
<a class="link-block" href="#" target="_blank"></a>
|
<a class="link-block" href="#" target="_blank"></a>
|
||||||
</article>
|
</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>
|
||||||
|
</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">
|
<article class="taxon">
|
||||||
<figure>
|
<figure>
|
||||||
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
|
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
|
||||||
</figure>
|
</figure>
|
||||||
<h3 class="vernacular">Aulne glutineux</h3>
|
<div class="name">
|
||||||
<p class="latin">Alnus glutinosa</p>
|
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
|
||||||
|
<p class="latin">Alnus glutinosa</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="chart-edit">
|
<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>
|
<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>
|
<figure>
|
||||||
<img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
|
<img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
|
||||||
</figure>
|
</figure>
|
||||||
<h3 class="vernacular">Gouet d’Italie</h3>
|
<div class="name">
|
||||||
<p class="latin">Arum Italicum Mill.</p>
|
<h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
|
||||||
|
<p class="latin">Arum Italicum Mill.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="chart-edit">
|
<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>
|
<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">
|
<main id="main_species-list">
|
||||||
|
|
||||||
<header class="page-header">
|
<header class="page-header">
|
||||||
|
<div class="page-header__inner">
|
||||||
|
|
||||||
<h2 class="page-title">Liste des espèces</h2>
|
<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>
|
</header>
|
||||||
|
|
||||||
<nav class="sort">
|
|
||||||
<ul>
|
|
||||||
<li>Trier par familles</li>
|
<div class="page-grid">
|
||||||
<li>Trier par ordre alphabétique</li>
|
|
||||||
|
<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>
|
</ul>
|
||||||
<button>Vue édition</button>
|
</nav>
|
||||||
</nav>
|
|
||||||
|
<section class="page-species">
|
||||||
|
|
||||||
|
<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" />
|
||||||
|
|
||||||
|
|
||||||
<section class="family">
|
|
||||||
|
<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">
|
<div class="family__header">
|
||||||
<h2 class="title">Acanthaceae</h2>
|
<h2 class="title">Acanthaceae</h2>
|
||||||
|
|
@ -46,13 +115,19 @@
|
||||||
<figure>
|
<figure>
|
||||||
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
|
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
|
||||||
</figure>
|
</figure>
|
||||||
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
|
<div class="name">
|
||||||
<p class="latin">Acorus calamus L.</p>
|
<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>
|
<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">
|
<button class="btn-action btn-edit">
|
||||||
<include src="/components/icons/edit.svg"></include>
|
<a href="#" target="_blank">
|
||||||
|
<span class="icon"><include src="/components/icons/edit.svg"></include></span> <span class="text">Éditer</span>
|
||||||
|
</a>
|
||||||
</button>
|
</button>
|
||||||
<a class="link-block" href="#" target="_blank"></a>
|
<a class="link-block" href="#" target="_blank"></a>
|
||||||
</article>
|
</article>
|
||||||
|
|
@ -64,9 +139,9 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<section class="family">
|
<section class="family" id="amaranthaceae">
|
||||||
|
|
||||||
<div class="family__header">
|
<div class="family__header" >
|
||||||
<h2 class="title">Amaranthaceae</h2>
|
<h2 class="title">Amaranthaceae</h2>
|
||||||
<p class="nbr-species">7 espèces</p>
|
<p class="nbr-species">7 espèces</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -78,14 +153,18 @@
|
||||||
<figure>
|
<figure>
|
||||||
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
|
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
|
||||||
</figure>
|
</figure>
|
||||||
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
|
<div class="name">
|
||||||
<p class="latin">Acorus calamus L.</p>
|
<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>
|
<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">
|
<button class="btn-action btn-edit">
|
||||||
<include src="/components/icons/edit.svg"></include>
|
<a href="#" target="_blank">
|
||||||
</button>
|
<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>
|
<a class="link-block" href="#" target="_blank"></a>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
@ -93,16 +172,20 @@
|
||||||
<figure>
|
<figure>
|
||||||
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
|
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
|
||||||
</figure>
|
</figure>
|
||||||
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
|
<div class="name">
|
||||||
<p class="latin">Alnus glutinosa</p>
|
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
|
||||||
|
<p class="latin">Alnus glutinosa</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="chart-edit">
|
<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>
|
<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>
|
</div>
|
||||||
|
|
||||||
<button class="btn-edit">
|
<button class="btn-action btn-edit">
|
||||||
<include src="/components/icons/edit.svg"></include>
|
<a href="#" target="_blank">
|
||||||
</button>
|
<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>
|
<a class="link-block" href="#" target="_blank"></a>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
@ -110,16 +193,20 @@
|
||||||
<figure>
|
<figure>
|
||||||
<img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
|
<img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
|
||||||
</figure>
|
</figure>
|
||||||
<h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
|
<div class="name">
|
||||||
<p class="latin">Arum Italicum Mill.</p>
|
<h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
|
||||||
|
<p class="latin">Arum Italicum Mill.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="chart-edit">
|
<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>
|
<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>
|
</div>
|
||||||
|
|
||||||
<button class="btn-edit">
|
<button class="btn-action btn-edit">
|
||||||
<include src="/components/icons/edit.svg"></include>
|
<a href="#" target="_blank">
|
||||||
</button>
|
<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>
|
<a class="link-block" href="#" target="_blank"></a>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
@ -127,16 +214,20 @@
|
||||||
<figure>
|
<figure>
|
||||||
<img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
|
<img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
|
||||||
</figure>
|
</figure>
|
||||||
<h3 class="vernacular">Charme commun</h3>
|
<div class="name">
|
||||||
<p class="latin">Carpinus betulus L.</p>
|
<h3 class="vernacular"><a href="#" target="_blank">Charme commun</a></h3>
|
||||||
|
<p class="latin">Carpinus betulus L.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="chart-edit">
|
<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>
|
<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>
|
</div>
|
||||||
|
|
||||||
<button class="btn-edit">
|
<button class="btn-action btn-edit">
|
||||||
<include src="/components/icons/edit.svg"></include>
|
<a href="#" target="_blank">
|
||||||
</button>
|
<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>
|
<a class="link-block" href="#" target="_blank"></a>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
@ -144,14 +235,18 @@
|
||||||
<figure>
|
<figure>
|
||||||
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
|
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
|
||||||
</figure>
|
</figure>
|
||||||
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
|
<div class="name">
|
||||||
<p class="latin">Acorus calamus L.</p>
|
<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>
|
<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">
|
<button class="btn-action btn-edit">
|
||||||
<include src="/components/icons/edit.svg"></include>
|
<a href="#" target="_blank">
|
||||||
</button>
|
<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>
|
<a class="link-block" href="#" target="_blank"></a>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
@ -159,16 +254,20 @@
|
||||||
<figure>
|
<figure>
|
||||||
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
|
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
|
||||||
</figure>
|
</figure>
|
||||||
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
|
<div class="name">
|
||||||
<p class="latin">Alnus glutinosa</p>
|
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
|
||||||
|
<p class="latin">Alnus glutinosa</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="chart-edit">
|
<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>
|
<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>
|
</div>
|
||||||
|
|
||||||
<button class="btn-edit">
|
<button class="btn-action btn-edit">
|
||||||
<include src="/components/icons/edit.svg"></include>
|
<a href="#" target="_blank">
|
||||||
</button>
|
<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>
|
<a class="link-block" href="#" target="_blank"></a>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
@ -176,16 +275,20 @@
|
||||||
<figure>
|
<figure>
|
||||||
<img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
|
<img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
|
||||||
</figure>
|
</figure>
|
||||||
<h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
|
<div class="name">
|
||||||
<p class="latin">Arum Italicum Mill.</p>
|
<h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
|
||||||
|
<p class="latin">Arum Italicum Mill.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="chart-edit">
|
<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>
|
<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>
|
</div>
|
||||||
|
|
||||||
<button class="btn-edit">
|
<button class="btn-action btn-edit">
|
||||||
<include src="/components/icons/edit.svg"></include>
|
<a href="#" target="_blank">
|
||||||
</button>
|
<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>
|
<a class="link-block" href="#" target="_blank"></a>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
@ -193,16 +296,20 @@
|
||||||
<figure>
|
<figure>
|
||||||
<img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
|
<img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
|
||||||
</figure>
|
</figure>
|
||||||
<h3 class="vernacular">Charme commun</h3>
|
<div class="name">
|
||||||
<p class="latin">Carpinus betulus L.</p>
|
<h3 class="vernacular"><a href="#" target="_blank">Charme commun</a></h3>
|
||||||
|
<p class="latin">Carpinus betulus L.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="chart-edit">
|
<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>
|
<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>
|
</div>
|
||||||
|
|
||||||
<button class="btn-edit">
|
<button class="btn-action btn-edit">
|
||||||
<include src="/components/icons/edit.svg"></include>
|
<a href="#" target="_blank">
|
||||||
</button>
|
<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>
|
<a class="link-block" href="#" target="_blank"></a>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
@ -212,7 +319,7 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
<section class="family">
|
<section class="family" id="amaryllidaceae">
|
||||||
|
|
||||||
<div class="family__header">
|
<div class="family__header">
|
||||||
<h2 class="title">Amaryllidaceae</h2>
|
<h2 class="title">Amaryllidaceae</h2>
|
||||||
|
|
@ -226,14 +333,18 @@
|
||||||
<figure>
|
<figure>
|
||||||
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
|
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
|
||||||
</figure>
|
</figure>
|
||||||
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
|
<div class="name">
|
||||||
<p class="latin">Acorus calamus L.</p>
|
<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>
|
<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">
|
<button class="btn-action btn-edit">
|
||||||
<include src="/components/icons/edit.svg"></include>
|
<a href="#" target="_blank">
|
||||||
</button>
|
<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>
|
<a class="link-block" href="#" target="_blank"></a>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
@ -241,16 +352,20 @@
|
||||||
<figure>
|
<figure>
|
||||||
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
|
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
|
||||||
</figure>
|
</figure>
|
||||||
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
|
<div class="name">
|
||||||
<p class="latin">Alnus glutinosa</p>
|
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
|
||||||
|
<p class="latin">Alnus glutinosa</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="chart-edit">
|
<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>
|
<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>
|
</div>
|
||||||
|
|
||||||
<button class="btn-edit">
|
<button class="btn-action btn-edit">
|
||||||
<include src="/components/icons/edit.svg"></include>
|
<a href="#" target="_blank">
|
||||||
</button>
|
<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>
|
<a class="link-block" href="#" target="_blank"></a>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
@ -258,16 +373,20 @@
|
||||||
<figure>
|
<figure>
|
||||||
<img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
|
<img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
|
||||||
</figure>
|
</figure>
|
||||||
<h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
|
<div class="name">
|
||||||
<p class="latin">Arum Italicum Mill.</p>
|
<h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
|
||||||
|
<p class="latin">Arum Italicum Mill.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="chart-edit">
|
<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>
|
<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>
|
</div>
|
||||||
|
|
||||||
<button class="btn-edit">
|
<button class="btn-action btn-edit">
|
||||||
<include src="/components/icons/edit.svg"></include>
|
<a href="#" target="_blank">
|
||||||
</button>
|
<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>
|
<a class="link-block" href="#" target="_blank"></a>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
@ -275,16 +394,20 @@
|
||||||
<figure>
|
<figure>
|
||||||
<img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
|
<img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
|
||||||
</figure>
|
</figure>
|
||||||
<h3 class="vernacular">Charme commun</h3>
|
<div class="name">
|
||||||
<p class="latin">Carpinus betulus L.</p>
|
<h3 class="vernacular"><a href="#" target="_blank">Charme commun</a></h3>
|
||||||
|
<p class="latin">Carpinus betulus L.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="chart-edit">
|
<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>
|
<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>
|
</div>
|
||||||
|
|
||||||
<button class="btn-edit">
|
<button class="btn-action btn-edit">
|
||||||
<include src="/components/icons/edit.svg"></include>
|
<a href="#" target="_blank">
|
||||||
</button>
|
<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>
|
<a class="link-block" href="#" target="_blank"></a>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
@ -292,14 +415,18 @@
|
||||||
<figure>
|
<figure>
|
||||||
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
|
<img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
|
||||||
</figure>
|
</figure>
|
||||||
<h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
|
<div class="name">
|
||||||
<p class="latin">Acorus calamus L.</p>
|
<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>
|
<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">
|
<button class="btn-action btn-edit">
|
||||||
<include src="/components/icons/edit.svg"></include>
|
<a href="#" target="_blank">
|
||||||
</button>
|
<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>
|
<a class="link-block" href="#" target="_blank"></a>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
@ -307,16 +434,20 @@
|
||||||
<figure>
|
<figure>
|
||||||
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
|
<img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
|
||||||
</figure>
|
</figure>
|
||||||
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
|
<div class="name">
|
||||||
<p class="latin">Alnus glutinosa</p>
|
<h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
|
||||||
|
<p class="latin">Alnus glutinosa</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="chart-edit">
|
<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>
|
<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>
|
</div>
|
||||||
|
|
||||||
<button class="btn-edit">
|
<button class="btn-action btn-edit">
|
||||||
<include src="/components/icons/edit.svg"></include>
|
<a href="#" target="_blank">
|
||||||
</button>
|
<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>
|
<a class="link-block" href="#" target="_blank"></a>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
@ -324,16 +455,20 @@
|
||||||
<figure>
|
<figure>
|
||||||
<img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
|
<img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
|
||||||
</figure>
|
</figure>
|
||||||
<h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
|
<div class="name">
|
||||||
<p class="latin">Arum Italicum Mill.</p>
|
<h3 class="vernacular"><a href="#" target="_blank">Gléchome lierre terrestre</a></h3>
|
||||||
|
<p class="latin">Glechoma hederacea</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="chart-edit">
|
<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>
|
<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>
|
</div>
|
||||||
|
|
||||||
<button class="btn-edit">
|
<button class="btn-action btn-edit">
|
||||||
<include src="/components/icons/edit.svg"></include>
|
<a href="#" target="_blank">
|
||||||
</button>
|
<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>
|
<a class="link-block" href="#" target="_blank"></a>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
@ -341,16 +476,20 @@
|
||||||
<figure>
|
<figure>
|
||||||
<img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
|
<img src="/images/Ballota_nigra_morphology_outlook_illustration_photo.jpeg">
|
||||||
</figure>
|
</figure>
|
||||||
<h3 class="vernacular">Charme commun</h3>
|
<div class="name">
|
||||||
<p class="latin">Carpinus betulus L.</p>
|
<h3 class="vernacular"><a href="#" target="_blank">Charme commun</a></h3>
|
||||||
|
<p class="latin">Carpinus betulus L.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="chart-edit">
|
<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>
|
<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>
|
</div>
|
||||||
|
|
||||||
<button class="btn-edit">
|
<button class="btn-action btn-edit">
|
||||||
<include src="/components/icons/edit.svg"></include>
|
<a href="#" target="_blank">
|
||||||
</button>
|
<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>
|
<a class="link-block" href="#" target="_blank"></a>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
@ -359,6 +498,11 @@
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue