finish page species

assets/css/_page-nav.scss

@@ -1,8 +1,14 @@
+@use "abstracts/mixins.scss" as *;
+
 .page-nav{
 
 
     .toc{
         list-style: none;
+        max-height: calc(100vh - var(--top-target) - 10px);
+        overflow: scroll;
+        @include hide-scrollbar();
+        padding-bottom: 10vh;
 
         li{
                 font-size: var(--fs-normal);

assets/css/components/_sort.scss

@@ -9,7 +9,9 @@
     }
     .is-selected{
            background-color: var(--color-txt);
+           border-color: var(--color-txt);
             color: var(--white);
+            cursor: auto;
             a{
               color: var(--white);  
             }
@@ -22,11 +24,4 @@
 }
 
 
-.group-sort-view{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-        margin-bottom: calc(var(--spacing)*1.5);
 
-}

assets/css/components/_species-list.scss

@@ -1,17 +1,3 @@
-.species-list{
-
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: calc(var(--spacing)*1);
-    margin-bottom: calc(var(--spacing)*3);
-
-    .taxon{
-          width: calc(100%/3 - var(--spacing)*3/3);
-    }
-
-    
-}
 
 .family{
     margin-bottom: calc(var(--spacing)*4);

assets/css/components/_taxon-card-inline.scss

@@ -1,7 +1,7 @@
-#view-edit:checked ~ .family .species-list,
-#view-edit:checked ~ .species-list,
-#view-list:checked ~ .family .species-list,
-#view-list:checked ~ .species-list {
+#view-edit:checked ~ .page-species .family .species-list,
+#view-edit:checked ~ .page-species .species-list,
+#view-list:checked ~ .page-species .family .species-list,
+#view-list:checked ~ .page-species .species-list {
     display: block;
     
 
@@ -90,10 +90,10 @@
 }
 
 
-#view-edit:checked ~ .family .species-list,
-#view-edit:checked ~ .species-list{
+#view-edit:checked ~ .page-species .family .species-list,
+#view-edit:checked ~ .page-species .species-list{
     .taxon .btn-edit{
             display: block!important;
-            z-index: 100;
-        }
+            z-index: 30;
+    }
 }

assets/css/components/_view-toggle.scss

@@ -33,6 +33,7 @@ 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);
+    border-color: var(--color-txt);
     svg {
         fill: var(--white);
     }

assets/css/pages/_home.scss

@@ -1,4 +1,4 @@
-@use "abstracts/mixins.scss" as *;
+@use "../abstracts/mixins.scss" as *;
 
 
 .home--section-tool{

assets/css/pages/_species.scss

@@ -0,0 +1,77 @@
+[data-page="species-by-families"],
+[data-page="species"]{
+
+    .group-sort-view{
+        display: flex;
+        justify-content: space-between;
+   
+        flex-wrap: wrap;
+
+        grid-column: span 2;
+        width: 100%;
+         max-width: 100%;
+        border-bottom: 1px solid var(--color-x-light);
+        padding-top: calc(var(--spacing)*1);
+        padding-bottom: calc(var(--spacing)*0.5);
+        margin-bottom: calc(var(--spacing)*1.5);
+
+        position: sticky;
+        top: 0;
+        background-color: var(--white);
+        z-index: 50;
+    }
+
+    .page-species{
+        margin-bottom: 30vh;
+    }
+
+
+
+
+}
+
+
+[data-page="species-by-families"]{
+  .species-list{
+         align-items: center;
+
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: calc(var(--spacing)*1);
+        margin-bottom: calc(var(--spacing)*3);
+         .taxon{
+            width: calc(100%/3 - var(--spacing)*2/3);
+        }
+
+    }
+}
+
+
+
+
+
+
+
+
+[data-page="species"]{
+
+    .page-species{
+        grid-column: span 2;
+        width: 100%;
+        max-width: 100%;
+    }
+
+
+    .species-list{
+         display: grid;
+         grid-gap: calc(var(--spacing)*1);
+        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
+
+        .taxon{
+            align-self: start;
+        }
+
+    }
+
+}