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;