page species single

assets/css/_page-header.scss

@@ -56,4 +56,16 @@
         }
 
     }
+
+
+    .btn-action{
+        // background-color: var(--data-color-light);
+        border-color: var(--data-color-medium);
+        color: var(--data-color);
+        a{ color: var(--data-color); }
+        svg{ fill: var(--data-color); }
+        &:hover{
+            border-color: var(--data-color);
+        }
+    }
 }

assets/css/abstracts/_mixins.scss

@@ -34,14 +34,12 @@
 
 @mixin fig-ratio($ratio){
     width: 100%;
-    aspect-ratio: $ratio;
     overflow: hidden;
-    flex-shrink: 0;
-
     img{
+        aspect-ratio: $ratio;
         width: 100%;
-        height: 100%;
         object-fit: cover;
+         border-radius: var(--radius-img);
     }
 }
 
@@ -52,4 +50,16 @@
         display: none;             
     }
 
-}
+}
+
+
+   @mixin title-bg($color){
+            border-radius: var(--radius-small);
+            background-color: var(--color-#{$color}-light);
+            color: var(--color-#{$color});
+            border: var(--w-border) solid var(--color-#{$color});
+            padding: 5px 1.5ch;
+            // font-family: var(--font-title);
+            font-size: var(--fs-medium);
+            font-weight: 700;
+    }

assets/css/components/_buttons.scss

@@ -49,6 +49,7 @@
         @include icon(20px);
        
     }
+ 
     .text{
         font-size: var(--fs-small);
         font-weight: 500;
@@ -59,6 +60,10 @@
   
 }  
 
+.btn-download .icon{
+    @include icon(16px); 
+}
+
 label.btn-action{
     display: inline-flex;
     align-items: center;

assets/css/components/_calendar.scss

@@ -0,0 +1,276 @@
+.calendar-svg{
+    --svg-color: var(--color-green);
+    transform: rotate(-90deg);
+
+
+    .mois{
+        --svg-color: var(--color-light);
+    }
+    .saison{
+        --svg-color: var(--white);
+    }
+    .background{
+        --svg-color: var(--color-x-light);
+
+    }
+    .both{
+        --svg-color: var(--color-green);
+        display: none;
+    }
+    .fleurs{
+        --svg-color: var(--color-green);
+        display: none;
+    }
+
+    .fruits{
+        --svg-color: var(--color-orange);
+        display: none;
+    }
+    .none{
+        --svg-color: var(--color-x-light);
+    }
+
+  
+}
+
+
+.calendrier +  .group-caption{
+
+    .caption{
+        font-size: var(--fs-small);
+        margin: 0;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        gap: 1ch;
+        padding-bottom: calc(var(--spacing)*0.25);
+        &::before{
+            content: "";
+            display: block;
+            width: 16px;
+            height: 16px;
+            background-color: var(--color-green);
+            border-radius: var(--radius-small);
+
+        }
+        &.caption-fructification::before{
+            background-color: var(--color-orange);
+        }
+    }
+
+        
+}
+
+
+
+.calendar-svg[data-fleurs*=jan] .jan .fleurs{ display: block; }
+.calendar-svg[data-fleurs*=feb] .fev .fleurs{ display: block; }
+.calendar-svg[data-fleurs*=mar] .mar .fleurs{ display: block; }
+.calendar-svg[data-fleurs*=apr] .avr .fleurs{ display: block; }
+.calendar-svg[data-fleurs*=may] .mai .fleurs{ display: block; }
+.calendar-svg[data-fleurs*=jun] .jun .fleurs{ display: block; }
+.calendar-svg[data-fleurs*=jul] .jul .fleurs{ display: block; }
+.calendar-svg[data-fleurs*=aug] .aou .fleurs{ display: block; }
+.calendar-svg[data-fleurs*=sep] .sep .fleurs{ display: block; }
+.calendar-svg[data-fleurs*=oct] .oct .fleurs{ display: block; }
+.calendar-svg[data-fleurs*=nov] .nov .fleurs{ display: block; }
+.calendar-svg[data-fleurs*=dec] .dec .fleurs{ display: block; }
+
+.calendar-svg[data-fruits*=jan] .jan .fruits{ display: block; }
+.calendar-svg[data-fruits*=feb] .fev .fruits{ display: block; }
+.calendar-svg[data-fruits*=mar] .mar .fruits{ display: block; }
+.calendar-svg[data-fruits*=apr] .avr .fruits{ display: block; }
+.calendar-svg[data-fruits*=may] .mai .fruits{ display: block; }
+.calendar-svg[data-fruits*=jun] .jun .fruits{ display: block; }
+.calendar-svg[data-fruits*=jul] .jul .fruits{ display: block; }
+.calendar-svg[data-fruits*=aug] .aou .fruits{ display: block; }
+.calendar-svg[data-fruits*=sep] .sep .fruits{ display: block; }
+.calendar-svg[data-fruits*=oct] .oct .fruits{ display: block; }
+.calendar-svg[data-fruits*=nov] .nov .fruits{ display: block; }
+.calendar-svg[data-fruits*=dec] .dec .fruits{ display: block; }
+
+
+.calendar-svg[data-fruits*=jan][data-fleurs*=jan] .jan .fleurs{ display: none; }
+.calendar-svg[data-fruits*=jan][data-fleurs*=jan] .jan .both{ display: block; }
+.calendar-svg[data-fruits*=feb][data-fleurs*=feb] .fev .fleurs{ display: none; }
+.calendar-svg[data-fruits*=feb][data-fleurs*=feb] .fev .both{ display: block; }
+.calendar-svg[data-fruits*=mar][data-fleurs*=mar] .mar .fleurs{ display: none; }
+.calendar-svg[data-fruits*=mar][data-fleurs*=mar] .mar .both{ display: block; }
+.calendar-svg[data-fruits*=apr][data-fleurs*=apr] .avr .fleurs{ display: none; }
+.calendar-svg[data-fruits*=apr][data-fleurs*=apr] .avr .both{ display: block; }
+.calendar-svg[data-fruits*=may][data-fleurs*=may] .mai .fleurs{ display: none; }
+.calendar-svg[data-fruits*=may][data-fleurs*=may] .mai .both{ display: block; }
+.calendar-svg[data-fruits*=jun][data-fleurs*=jun] .jun .fleurs{ display: none; }
+.calendar-svg[data-fruits*=jun][data-fleurs*=jun] .jun .both{ display: block; }
+.calendar-svg[data-fruits*=jul][data-fleurs*=jul] .jul .fleurs{ display: none; }
+.calendar-svg[data-fruits*=jul][data-fleurs*=jul] .jul .both{ display: block; }
+.calendar-svg[data-fruits*=aug][data-fleurs*=aug] .aou .fleurs{ display: none; }
+.calendar-svg[data-fruits*=aug][data-fleurs*=aug] .aou .both{ display: block; }
+.calendar-svg[data-fruits*=sep][data-fleurs*=sep] .sep .fleurs{ display: none; }
+.calendar-svg[data-fruits*=sep][data-fleurs*=sep] .sep .both{ display: block; }
+.calendar-svg[data-fruits*=oct][data-fleurs*=oct] .oct .fleurs{ display: none; }
+.calendar-svg[data-fruits*=oct][data-fleurs*=oct] .oct .both{ display: block; }
+.calendar-svg[data-fruits*=nov][data-fleurs*=nov] .nov .fleurs{ display: none; }
+.calendar-svg[data-fruits*=nov][data-fleurs*=nov] .nov .both{ display: block; }
+.calendar-svg[data-fruits*=dec][data-fleurs*=dec] .dec .fleurs{ display: none; }
+.calendar-svg[data-fruits*=dec][data-fleurs*=dec] .dec .both{ display: block; }
+
+
+/* Don’t display ".none" when fruits or fleurs */
+
+.calendar-svg[data-fleurs*=jan] .jan .none{ display: none; }
+.calendar-svg[data-fleurs*=feb] .fev .none{ display: none; }
+.calendar-svg[data-fleurs*=mar] .mar .none{ display: none; }
+.calendar-svg[data-fleurs*=avr] .avr .none{ display: none; }
+.calendar-svg[data-fleurs*=may] .mai .none{ display: none; }
+.calendar-svg[data-fleurs*=jun] .jun .none{ display: none; }
+.calendar-svg[data-fleurs*=jul] .jul .none{ display: none; }
+.calendar-svg[data-fleurs*=aug] .aou .none{ display: none; }
+.calendar-svg[data-fleurs*=sep] .sep .none{ display: none; }
+.calendar-svg[data-fleurs*=oct] .oct .none{ display: none; }
+.calendar-svg[data-fleurs*=nov] .nov .none{ display: none; }
+.calendar-svg[data-fleurs*=dec] .dec .none{ display: none; }
+
+.calendar-svg[data-fruits*=jan] .jan .none{ display: none; }
+.calendar-svg[data-fruits*=feb] .fev .none{ display: none; }
+.calendar-svg[data-fruits*=mar] .mar .none{ display: none; }
+.calendar-svg[data-fruits*=apr] .avr .none{ display: none; }
+.calendar-svg[data-fruits*=may] .mai .none{ display: none; }
+.calendar-svg[data-fruits*=jun] .jun .none{ display: none; }
+.calendar-svg[data-fruits*=jul] .jul .none{ display: none; }
+.calendar-svg[data-fruits*=aug] .aou .none{ display: none; }
+.calendar-svg[data-fruits*=sep] .sep .none{ display: none; }
+.calendar-svg[data-fruits*=oct] .oct .none{ display: none; }
+.calendar-svg[data-fruits*=nov] .nov .none{ display: none; }
+.calendar-svg[data-fruits*=dec] .dec .none{ display: none; }
+
+
+/* Display mounth when something */
+
+
+.calendar-svg[data-fleurs*=jan] .jan .mois{  --svg-color: var(--color-txt); }
+.calendar-svg[data-fleurs*=feb] .fev .mois{  --svg-color: var(--color-txt); }
+.calendar-svg[data-fleurs*=mar] .mar .mois{  --svg-color: var(--color-txt); }
+.calendar-svg[data-fleurs*=apr] .avr .mois{  --svg-color: var(--color-txt); }
+.calendar-svg[data-fleurs*=may] .mai .mois{  --svg-color: var(--color-txt); }
+.calendar-svg[data-fleurs*=jun] .jun .mois{  --svg-color: var(--color-txt); }
+.calendar-svg[data-fleurs*=jul] .jul .mois{  --svg-color: var(--color-txt); }
+.calendar-svg[data-fleurs*=aug] .aou .mois{  --svg-color: var(--color-txt); }
+.calendar-svg[data-fleurs*=sep] .sep .mois{  --svg-color: var(--color-txt); }
+.calendar-svg[data-fleurs*=oct] .oct .mois{  --svg-color: var(--color-txt); }
+.calendar-svg[data-fleurs*=nov] .nov .mois{  --svg-color: var(--color-txt); }
+.calendar-svg[data-fleurs*=dec] .dec .mois{  --svg-color: var(--color-txt); }
+
+.calendar-svg[data-fruits*=jan] .jan .mois{  --svg-color: var(--color-txt); }
+.calendar-svg[data-fruits*=feb] .fev .mois{  --svg-color: var(--color-txt); }
+.calendar-svg[data-fruits*=mar] .mar .mois{  --svg-color: var(--color-txt); }
+.calendar-svg[data-fruits*=apr] .avr .mois{  --svg-color: var(--color-txt); }
+.calendar-svg[data-fruits*=may] .mai .mois{  --svg-color: var(--color-txt); }
+.calendar-svg[data-fruits*=jun] .jun .mois{  --svg-color: var(--color-txt); }
+.calendar-svg[data-fruits*=jul] .jul .mois{  --svg-color: var(--color-txt); }
+.calendar-svg[data-fruits*=aug] .aou .mois{  --svg-color: var(--color-txt); }
+.calendar-svg[data-fruits*=sep] .sep .mois{  --svg-color: var(--color-txt); }
+.calendar-svg[data-fruits*=oct] .oct .mois{  --svg-color: var(--color-txt); }
+.calendar-svg[data-fruits*=nov] .nov .mois{  --svg-color: var(--color-txt); }
+.calendar-svg[data-fruits*=dec] .dec .mois{  --svg-color: var(--color-txt); }
+
+
+
+/* SAISONS */
+
+.calendar-svg[data-fleurs*=mar] .printemps .saison,
+.calendar-svg[data-fruits*=mar] .printemps .saison{
+    --svg-color: var(--white);
+}
+.calendar-svg[data-fleurs*=mar] .printemps .background,
+.calendar-svg[data-fruits*=mar] .printemps .background{
+    --svg-color: var(--color-txt);
+}
+.calendar-svg[data-fleurs*=apr] .printemps .saison,
+.calendar-svg[data-fruits*=apr] .printemps .saison{
+    --svg-color: var(--white);
+}
+.calendar-svg[data-fleurs*=apr] .printemps .background,
+.calendar-svg[data-fruits*=apr] .printemps .background{
+    --svg-color: var(--color-txt);
+}
+.calendar-svg[data-fleurs*=may] .printemps .saison,
+.calendar-svg[data-fruits*=may] .printemps .saison{
+    --svg-color: var(--white);
+}
+.calendar-svg[data-fleurs*=may] .printemps .background,
+.calendar-svg[data-fruits*=may] .printemps .background{
+    --svg-color: var(--color-txt);
+}
+.calendar-svg[data-fleurs*=jun] .ete .saison,
+.calendar-svg[data-fruits*=jun] .ete .saison{
+    --svg-color: var(--white);
+}
+.calendar-svg[data-fleurs*=jun] .ete .background,
+.calendar-svg[data-fruits*=jun] .ete .background{
+    --svg-color: var(--color-txt);
+}
+.calendar-svg[data-fleurs*=jul] .ete .saison,
+.calendar-svg[data-fruits*=jul] .ete .saison{
+    --svg-color: var(--white);
+}
+.calendar-svg[data-fleurs*=jul] .ete .background,
+.calendar-svg[data-fruits*=jul] .ete .background{
+    --svg-color: var(--color-txt);
+}
+.calendar-svg[data-fleurs*=aug] .ete .saison,
+.calendar-svg[data-fruits*=aug] .ete .saison{
+    --svg-color: var(--white);
+}
+.calendar-svg[data-fleurs*=aug] .ete .background,
+.calendar-svg[data-fruits*=aug] .ete .background{
+    --svg-color: var(--color-txt);
+}
+.calendar-svg[data-fleurs*=sep] .automne .saison,
+.calendar-svg[data-fruits*=sep] .automne .saison{
+    --svg-color: var(--white);
+}
+.calendar-svg[data-fleurs*=sep] .automne .background,
+.calendar-svg[data-fruits*=sep] .automne .background{
+    --svg-color: var(--color-txt);
+}
+.calendar-svg[data-fleurs*=oct] .automne .saison,
+.calendar-svg[data-fruits*=oct] .automne .saison{
+    --svg-color: var(--white);
+}
+.calendar-svg[data-fleurs*=oct] .automne .background,
+.calendar-svg[data-fruits*=oct] .automne .background{
+    --svg-color: var(--color-txt);
+}
+.calendar-svg[data-fleurs*=nov] .automne .saison,
+.calendar-svg[data-fruits*=nov] .automne .saison{
+    --svg-color: var(--white);
+}
+.calendar-svg[data-fleurs*=nov] .automne .background,
+.calendar-svg[data-fruits*=nov] .automne .background{
+    --svg-color: var(--color-txt);
+}
+.calendar-svg[data-fleurs*=dec] .hiver .saison,
+.calendar-svg[data-fruits*=dec] .hiver .saison{
+    --svg-color: var(--white);
+}
+.calendar-svg[data-fleurs*=dec] .hiver .background,
+.calendar-svg[data-fruits*=dec] .hiver .background{
+    --svg-color: var(--color-txt);
+}
+.calendar-svg[data-fleurs*=jan] .hiver .saison,
+.calendar-svg[data-fruits*=jan] .hiver .saison{
+    --svg-color: var(--white);
+}
+.calendar-svg[data-fleurs*=jan] .hiver .background,
+.calendar-svg[data-fruits*=jan] .hiver .background{
+    --svg-color: var(--color-txt);
+}
+.calendar-svg[data-fleurs*=fev] .hiver .saison,
+.calendar-svg[data-fruits*=fev] .hiver .saison{
+    --svg-color: var(--white);
+}
+.calendar-svg[data-fleurs*=fev] .hiver .background,
+.calendar-svg[data-fruits*=fev] .hiver .background{
+    --svg-color: var(--color-txt);
+}

assets/css/components/_species-list.scss

@@ -1,30 +0,0 @@
-
-.family{
-    margin-bottom: calc(var(--spacing)*4);
-    &:target{
-        padding-top: var(--top-target);
-    }
-    .family__header{
-      
-     
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 5px 2ch;
-        margin-bottom: calc(var(--spacing)*1.5);
-
-        border-radius: var(--radius-small);
-        background-color: var(--color-violet-light);
-        color: var(--color-violet);
-        border: var(--w-border) solid var(--color-violet);
-
-        .title{
-            font-size: var(--fs-medium);
-        }
-
-        .nbr-species{
-            font-weight: 500;
-        }
-      
-    }
-}

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

@@ -1,7 +1,7 @@
-#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 {
+#view-edit:checked ~ .page-species-list .family .species-list,
+#view-edit:checked ~ .page-species-list .species-list,
+#view-list:checked ~ .page-species-list .family .species-list,
+#view-list:checked ~ .page-species-list .species-list {
     display: block;
     
 
@@ -90,8 +90,8 @@
 }
 
 
-#view-edit:checked ~ .page-species .family .species-list,
-#view-edit:checked ~ .page-species .species-list{
+#view-edit:checked ~ .page-species-list .family .species-list,
+#view-edit:checked ~ .page-species-list .species-list{
     .taxon .btn-edit{
             display: block!important;
             z-index: 30;

assets/css/pages/_species-list.scss

@@ -1,5 +1,8 @@
-[data-page="species-by-families"],
-[data-page="species"]{
+@use "../abstracts/mixins.scss" as *;
+
+
+[data-page="species-list-by-families"],
+[data-page="species-list"]{
 
     .group-sort-view{
         display: flex;
@@ -21,7 +24,7 @@
         z-index: 50;
     }
 
-    .page-species{
+    .page-species-list{
         margin-bottom: 30vh;
     }
 
@@ -31,7 +34,7 @@
 }
 
 
-[data-page="species-by-families"]{
+[data-page="species-list-by-families"]{
   .species-list{
          align-items: center;
 
@@ -45,6 +48,37 @@
         }
 
     }
+
+
+
+ 
+
+.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);
+            }
+        
+        }
+    }
 }
 
 
@@ -54,9 +88,9 @@
 
 
 
-[data-page="species"]{
+[data-page="species-list"]{
 
-    .page-species{
+    .page-species-list{
         grid-column: span 2;
         width: 100%;
         max-width: 100%;

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;
+        }
+    }
+
+
+
+}