add taxons'

assets/css/_base.scss

@@ -18,12 +18,16 @@ body {
     print-color-adjust:exact !important; */
 }
 
-main{
+main:not(#main_home){
     min-height: calc(100vh - var(--header-h));
+    max-width: 900px;
+    margin-inline: auto;
     // margin-top: var(--header-h);
     /* padding: var(--padding-body); */
 }
 
+
+
 button{
     background: none;
     border: none;

assets/css/_page-header.scss

@@ -0,0 +1,11 @@
+
+.page-header{
+    margin-top: calc(var(--spacing)*3);
+    background-color: red;
+    margin-bottom: calc(var(--spacing)*2);
+
+    .page-title{
+        font-size: var(--fs-title-page);
+        font-family: var(--font-title);
+    }
+}

assets/css/_species-list.scss

@@ -0,0 +1,14 @@
+.species-list{
+
+    display: flex;
+    flex-wrap: wrap;
+    --gap: calc(var(--spacing)*2);
+    gap: var(--spacing);
+
+    .taxon{
+        flex: 1 1 calc(50% - var(--spacing)*1);
+        min-width: 250px;
+    }
+    
+    
+}

assets/css/_taxon-card.scss

@@ -1,6 +1,7 @@
 @use "abstracts/mixins.scss" as *;
 
 .species-list .taxon{
+    border: 1px solid red;
 
     .btn-edit {
         @include icon(20px);
@@ -10,4 +11,8 @@
         @include chart-edit(40px);
     }
 
+    figure, img{
+        width: 100%;
+    }
+
 }

assets/css/abstracts/_var.scss

@@ -4,8 +4,11 @@
     --font-title: 'Borna', Arial, sans-serif;
     --font: 'Nunito', Arial, sans-serif;
 
-    --fs-small: 11px;
-    --fs-normal: 14px;
+    --fs-small: 14px;
+    --fs-normal: 16px;
+    --fs-title-page: 38px;
+
+    --spacing: 20px;
 
     font-size: 14px;
     --unit: 24px;
@@ -16,9 +19,6 @@
     --radius-small: 3px;
     --radius-btn: 6px;
 
-
-
-
     --header-h: 60px;
     --header-z: 9000;
 

assets/style.css

@@ -2,8 +2,10 @@
 :root {
   --font-title: "Borna", Arial, sans-serif;
   --font: "Nunito", Arial, sans-serif;
-  --fs-small: 11px;
-  --fs-normal: 14px;
+  --fs-small: 14px;
+  --fs-normal: 16px;
+  --fs-title-page: 38px;
+  --spacing: 20px;
   font-size: 14px;
   --unit: 24px;
   --padding-body: 32px;
@@ -77,8 +79,10 @@ body {
   print-color-adjust:exact !important; */
 }
 
-main {
+main:not(#main_home) {
   min-height: calc(100vh - var(--header-h));
+  max-width: 900px;
+  margin-inline: auto;
   /* padding: var(--padding-body); */
 }
 
@@ -557,6 +561,16 @@ span.controls::after {
   height: 70px;
 }
 
+.page-header {
+  margin-top: calc(var(--spacing) * 3);
+  background-color: red;
+  margin-bottom: calc(var(--spacing) * 2);
+}
+.page-header .page-title {
+  font-size: var(--fs-title-page);
+  font-family: var(--font-title);
+}
+
 .item-nav {
   border: 1px solid var(--color-txt-light);
   border-radius: var(--radius-small);
@@ -832,6 +846,20 @@ span.controls::after {
   margin-top: calc(var(--unit) * 2);
 }
 
+.species-list {
+  display: flex;
+  flex-wrap: wrap;
+  --gap: calc(var(--spacing)*2);
+  gap: var(--spacing);
+}
+.species-list .taxon {
+  flex: 1 1 calc(50% - var(--spacing) * 1);
+  min-width: 250px;
+}
+
+.species-list .taxon {
+  border: 1px solid red;
+}
 .species-list .taxon .btn-edit {
   width: 20px;
   height: 20px;
@@ -856,4 +884,7 @@ span.controls::after {
 }
 .species-list .taxon .chart-edit svg .verified {
   fill: green;
+}
+.species-list .taxon figure, .species-list .taxon img {
+  width: 100%;
 }/*# sourceMappingURL=style.css.map */

assets/style.scss

@@ -11,9 +11,12 @@
 @use "css/slideshow";
 @use "css/logos-container";
 
+@use "css/page-header";
+
 @use "css/home-item-nav";
 @use "css/home-highlight";
 @use "css/home";
 
+@use "css/species-list";
 @use "css/taxon-card";