page species single

assets/css/pages/_species-single.scss

@@ -0,0 +1,223 @@
+@use "../abstracts/mixins.scss" as *;
+
+[data-page="species-single"]{
+    .page-header{
+        --w-fig: 320px;
+        padding-bottom: calc(var(--spacing)*0.5);
+    
+        .page-header__inner{
+            display: grid;
+            grid-template-columns: var(--w-fig) 1fr;
+            grid-gap: var(--padding-body);
+           
+        
+        }
+
+      
+        figure, picture{
+            border-radius: var(--radius-img);
+            grid-column: 1;
+            grid-row: 1/3;
+            @include fig-ratio(1/1);
+        }
+
+        .group-title{
+            grid-column: 2;
+            grid-row: 1;
+            align-self: start;
+            padding-top: calc(var(--spacing)*0.5);
+        
+        }
+
+         .saviez-vous{
+            grid-column: 2;
+            grid-row: 2;
+             align-self: start;
+        }
+
+
+
+        .page-title{
+            margin: 0; 
+        }
+
+        .latin{
+            font-size: var(--fs-medium);
+        }
+
+        .saviez-vous__title{
+            font-size: var(--fs-normal);
+            font-weight: 700;
+            margin-bottom: calc(var(--spacing)*0.5);
+        }
+
+        .saviez-vous__description{
+            font-size: var(--fs-medium);
+        }
+
+        .btn--group{
+            grid-column: span 2;
+            display: flex;
+            justify-content: right;
+            gap: var(--padding-inner);
+            position: relative;
+            top: calc(var(--spacing)*-1);
+        }
+
+
+    }
+
+    .page-content .group-section{
+        display: grid;
+        grid-gap: var(--padding-body);
+        grid-template-columns: 1fr 1fr;
+     
+    }
+
+
+
+
+}
+
+
+
+
+
+[data-page="species-single"]{
+
+
+.page-content{
+
+
+    section:not(#photos){
+        padding-top: var(--top-target);
+    }
+
+    .section-title{
+          @include title-bg(violet);
+    }
+
+    #description  .section-title{ @include title-bg(orange); }
+    #ecologie  .section-title{ @include title-bg(violet); }
+    #floraison-et-fructuation .section-title{ @include title-bg(green); }
+    #repartition .section-title{ @include title-bg(yellow); }
+
+
+
+
+    dl{
+        
+        display: grid;
+        grid-template-columns: 14ch 1fr;
+        border-bottom: 1px solid var(--color-orange-light);
+        &:first-of-type{
+            border-top: 1px solid var(--color-orange-light);
+        }
+        padding: calc(var(--spacing)*0.75);
+        
+
+        dt{
+            color: var(--color-orange);
+            text-transform: uppercase;
+            font-size: var(--fs-normal);
+            font-weight: 700;
+            letter-spacing: 0.01rem;
+            margin-bottom: calc(var(--spacing)*0.5);
+            padding-right: var(--padding-inner);
+        }
+
+    }
+
+    #ecologie dl{
+        border-color: var(--color-violet-light);
+        dt{ color: var(--color-violet) }
+    }
+
+
+    #repartition{
+        picture, figure{
+            background-color: var(--color-yellow);
+            img{
+                display: flex;
+                mix-blend-mode: screen;
+                filter: grayscale(1);
+            }
+        }
+    }
+
+
+    .statut-group{
+        .caption{
+            font-size: var(--fs-small);
+            margin: 0;
+            font-weight: 600;
+                    margin-bottom: calc(var(--spacing)*0.5);
+        }
+
+        .statut{
+            display: flex;
+            align-items: center;
+            gap: 1ch;
+            margin: 0;
+        }
+
+        .statut-signe{
+            color: var(--color-yellow);
+            border: 2px solid var(--color-yellow-medium);
+            background-color: var(--color-yellow-light);
+            display: inline;
+            margin: 0;
+            border-radius: var(--radius-btn);
+            padding: 2px 0.5ch;
+            font-weight: 800;
+            font-size: var(--fs-small);
+        
+        }
+
+    }
+
+    #credits{
+        font-size: var(--fs-normal);
+        .title{
+            font-weight: 700;
+        }
+    }
+ 
+    
+}
+
+
+
+
+
+    .section-photos{
+        display: flex;
+        // flex-wrap: wrap;
+        gap: var(--padding-inner);
+        width: 100%;
+        
+
+        figure{
+            // flex-grow: skrink;
+            min-width: 180px;
+            max-width: 280px;
+            @include fig-ratio(1/1);
+        }
+
+        figcaption{
+            font-size: var(--fs-normal);
+            font-weight: 700;
+            text-align: center;
+            margin-top: calc(var(--spacing)*0.25);
+        }
+
+      
+
+        .credits{
+            display: none;
+        }
+    }
+
+
+
+}