organisation css

assets/css/_buttons.scss

@@ -1,4 +1,5 @@
 
+
 .btn--solid{
     font-weight: 600;
     font-size: 1.2rem;
@@ -25,3 +26,5 @@
         height: 100%;
     }
 }
+
+

assets/css/_home.scss

@@ -29,7 +29,6 @@
     section{
         padding: calc(var(--unit)*3) var(--padding-body);
         position: relative;
-           z-index: 1000;
         .section--inner{
             max-width: 1100px;
             margin: 0 auto;

assets/css/_site-header.scss

@@ -9,7 +9,7 @@
     padding: 0 var(--padding-body);
     gap: calc(var(--unit)*2);
     position: relative;
-    z-index: 10000;
+    z-index: var(--header-z);
 
     a{ text-decoration: none; }
 

assets/css/_site-nav.scss

@@ -1,6 +1,6 @@
 
 #site-nav{
-    z-index: 10000;
+    z-index: var(--header-z);
 }
 
 
@@ -73,6 +73,8 @@
     box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
     margin-top: var(--padding-inner); 
     min-width: 24ch;
+    z-index: var(--header-z);
+    background-color: white;
 
 }
 
@@ -81,6 +83,7 @@
     visibility: visible;
     opacity: 1;
     display: block;
+    z-index: var(--header-z);
 }
 .nav-level-2_li{
     width: 100%;

assets/css/_taxon-card.scss

@@ -0,0 +1,13 @@
+@use "abstracts/mixins.scss" as *;
+
+.species-list .taxon{
+
+    .btn-edit {
+        @include icon(20px);
+    }
+
+    .chart-edit{
+        @include chart-edit(40px);
+    }
+
+}

assets/css/abstracts/_mixins.scss

@@ -0,0 +1,32 @@
+@mixin icon($size){
+    width: $size;
+    height: $size;
+
+    svg {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+
+@mixin chart-edit($size){
+    width: $size;
+    height: $size;
+
+    svg {
+        width: 100%;
+        height: 100%;
+
+        circle{
+            fill: #cfcfcf;
+        }
+
+        .filled{
+            fill: lightgreen;
+        }
+
+        .verified{
+            fill: green;
+        }
+    }
+}

assets/css/abstracts/_var.scss

@@ -20,6 +20,7 @@
 
 
     --header-h: 60px;
+    --header-z: 9000;
 
     --white: white;
     --color-bg: white;

assets/style.css

@@ -11,6 +11,7 @@
   --radius-small: 3px;
   --radius-btn: 6px;
   --header-h: 60px;
+  --header-z: 9000;
   --white: white;
   --color-bg: white;
   --color-violet: #6e62a4;
@@ -96,7 +97,7 @@ button {
   padding: 0 var(--padding-body);
   gap: calc(var(--unit) * 2);
   position: relative;
-  z-index: 10000;
+  z-index: var(--header-z);
 }
 #site-header a {
   text-decoration: none;
@@ -180,7 +181,7 @@ button {
 }
 
 #site-nav {
-  z-index: 10000;
+  z-index: var(--header-z);
 }
 
 #site-nav a {
@@ -244,6 +245,8 @@ button {
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
   margin-top: var(--padding-inner);
   min-width: 24ch;
+  z-index: var(--header-z);
+  background-color: white;
 }
 
 .nav-level-1_ul li:hover > .nav-level-2_ul,
@@ -251,6 +254,7 @@ button {
   visibility: visible;
   opacity: 1;
   display: block;
+  z-index: var(--header-z);
 }
 
 .nav-level-2_li {
@@ -679,7 +683,6 @@ span.controls::after {
 #main_home section {
   padding: calc(var(--unit) * 3) var(--padding-body);
   position: relative;
-  z-index: 1000;
 }
 #main_home section .section--inner {
   max-width: 1100px;
@@ -827,4 +830,30 @@ span.controls::after {
 }
 #home__a-propos .btn--solid {
   margin-top: calc(var(--unit) * 2);
+}
+
+.species-list .taxon .btn-edit {
+  width: 20px;
+  height: 20px;
+}
+.species-list .taxon .btn-edit svg {
+  width: 100%;
+  height: 100%;
+}
+.species-list .taxon .chart-edit {
+  width: 40px;
+  height: 40px;
+}
+.species-list .taxon .chart-edit svg {
+  width: 100%;
+  height: 100%;
+}
+.species-list .taxon .chart-edit svg circle {
+  fill: #cfcfcf;
+}
+.species-list .taxon .chart-edit svg .filled {
+  fill: lightgreen;
+}
+.species-list .taxon .chart-edit svg .verified {
+  fill: green;
 }/*# sourceMappingURL=style.css.map */

assets/style.scss

@@ -1,5 +1,7 @@
 @charset "UTF-8";
-@use "css/var"; 
+@use "css/abstracts/var";
+@forward "css/abstracts/mixins";
+
 @use "css/base";
 @use "css/site-header";
 @use "css/site-nav";
@@ -13,4 +15,5 @@
 @use "css/home-highlight";
 @use "css/home";
 
+@use "css/taxon-card";
 

components/icons/edit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M535.6 85.7C513.7 63.8 478.3 63.8 456.4 85.7L432 110.1L529.9 208L554.3 183.6C576.2 161.7 576.2 126.3 554.3 104.4L535.6 85.7zM236.4 305.7C230.3 311.8 225.6 319.3 222.9 327.6L193.3 416.4C190.4 425 192.7 434.5 199.1 441C205.5 447.5 215 449.7 223.7 446.8L312.5 417.2C320.7 414.5 328.2 409.8 334.4 403.7L496 241.9L398.1 144L236.4 305.7zM160 128C107 128 64 171 64 224L64 480C64 533 107 576 160 576L416 576C469 576 512 533 512 480L512 384C512 366.3 497.7 352 480 352C462.3 352 448 366.3 448 384L448 480C448 497.7 433.7 512 416 512L160 512C142.3 512 128 497.7 128 480L128 224C128 206.3 142.3 192 160 192L256 192C273.7 192 288 177.7 288 160C288 142.3 273.7 128 256 128L160 128z"/></svg>

index.html

@@ -16,7 +16,7 @@
 
     <include src="/components/site-header.html"></include>
 
-<main id="main_home">
+    <main id="main_home">
 
 
 
@@ -802,16 +802,17 @@
 
   <include src="/components/site-footer.html"></include>
 
+
+
+  <!-- SCRIPT À SUPPRIMER UNE FOIS LE SITE INTEGRÉ (include des composants)-->
 <script>
-    // Fonction récursive pour traiter les inclusions imbriquées
     function processIncludes() {
         const includes = document.querySelectorAll('include[src]');
 
         if (includes.length === 0) {
-            return; // Plus d'inclusions à traiter
+            return; 
         }
 
-        // Traiter chaque inclusion
         const promises = Array.from(includes).map(el => {
             const src = el.getAttribute('src');
             return fetch(src)
@@ -827,13 +828,11 @@
                 });
         });
 
-        // Une fois toutes les inclusions traitées, vérifier s'il y en a de nouvelles
         Promise.all(promises).then(() => {
-            processIncludes(); // Récursion pour traiter les inclusions imbriquées
+            processIncludes(); 
         });
     }
 
-    // Lancer le traitement au chargement du DOM
     document.addEventListener('DOMContentLoaded', processIncludes);
 </script>
 </body>

species-list.html

@@ -0,0 +1,96 @@
+<!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 id="main_species-list">
+
+        <header class="page-header">
+            <h2 class="page-title">Liste des espèces</h2>
+
+        </header>
+
+        <nav class="sort">
+            <ul>
+                <li>Trier par familles</li>
+                <li>Trier par ordre alphabétique</li>
+            </ul>
+            <button>Vue édition</button>
+        </nav>
+
+        <section class="species-list">
+
+            <article class="taxon">
+                <figure>
+                    <img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
+                </figure>
+                <h3 class="vernacular">Acore odorant</h3>
+                <h4 class="latin">Acorus calamus L.</h4>
+
+                <div class="chart-edit"><abbr title="Rempli à 81 % (18 / 22) et vérifié à 0 % (0 / 22)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="completion" viewBox="-6 -6 110 110"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="50"></circle><path xmlns="http://www.w3.org/2000/svg" class="filled" d="M 50 0 A 50 50 0 1 1 4.5184 29.2292 L 50 50 Z"></path><path xmlns="http://www.w3.org/2000/svg" class="verified" d="M 50 0 A 50 50 0 0 1 50 0 L 50 50 Z"></path></svg></abbr></div>
+
+                <button class="btn-edit">
+                    <include src="/components/icons/edit.svg"></include>
+                </button>
+            </article>
+
+        </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>

template.html

@@ -0,0 +1,65 @@
+<!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 id="main_species-list">
+
+
+   
+
+</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>