organisation css

assets/css/_buttons.scss

@@ -1,4 +1,5 @@
 
+
 .btn--solid{
     font-weight: 600;
     font-size: 1.2rem;
@@ -24,4 +25,6 @@
         width: 100%;
         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";