page species single

assets/css/pages/_species-list.scss

@@ -0,0 +1,100 @@
+@use "../abstracts/mixins.scss" as *;
+
+
+[data-page="species-list-by-families"],
+[data-page="species-list"]{
+
+    .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-list{
+        margin-bottom: 30vh;
+    }
+
+
+
+
+}
+
+
+[data-page="species-list-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);
+        }
+
+    }
+
+
+
+ 
+
+.family{
+    margin-bottom: calc(var(--spacing)*4);
+    &:target{
+        padding-top: var(--top-target);
+    }
+    .family__header{
+      
+            @include title-bg(violet);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: calc(var(--spacing)*1.5);
+
+            .title{
+                   font-size: var(--fs-medium);
+                font-weight: 700;
+            }
+
+            .nbr-species{
+                 font-size: var(--fs-normal);
+                font-weight: 500;
+                font-family: var(--font);
+            }
+        
+        }
+    }
+}
+
+
+
+
+
+
+
+
+[data-page="species-list"]{
+
+    .page-species-list{
+        grid-column: span 2;
+        width: 100%;
+        max-width: 100%;
+    }
+
+
+}