reorganisation style

assets/css/components/_buttons.scss

@@ -0,0 +1,30 @@
+
+
+.btn--solid{
+    font-weight: 600;
+    font-size: 1.2rem;
+
+    background-color: var(--color);
+    color: var(--white);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: calc(var(--unit)*1.5);
+
+    border-radius: var(--radius-btn);
+    cursor: pointer;
+
+    a{
+        color: white;
+        text-decoration: none;
+        padding: 0px 1ch;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+    }
+}
+
+

assets/css/components/_logos-container.scss

@@ -0,0 +1,70 @@
+
+.container-logos{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 40px 60px;
+}
+
+.container-logos .logo{
+    width: 200px;
+    height: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.container-logos .logo > * {
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+}
+
+.container-logos .logo img,
+.container-logos .logo svg {
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+}
+
+#logo-inria{
+    width: 150px;
+}
+#logo-cnrs{
+    width: 90px;
+    height: 80px;
+}
+#logo-sorbonne{
+    height: 65px;
+    width: 160px;
+}
+#logo-saclay{
+    width: 160px;
+    transform: translateY(-10px);
+}
+#logo-rennes{
+    width: 81px;
+    height: 90px;
+}
+#logo-plantagroeco{
+    width: 220px;
+}
+#logo-SBF{
+    width: 146px;
+    height: 120px;
+}
+#logo-upec{
+    width: 161px;
+    height: 70px;
+}
+#logo-paris{
+    width: 80px;
+    height: 70px;
+}
+
+

assets/css/components/_see-more.scss

@@ -0,0 +1,26 @@
+.see-more{
+
+    --hover-bg: var(--color-bg);
+    font-weight: 500;
+    color: var(--color-txt);
+    color: currentColor;
+    text-decoration: none;
+    span{ display: none;}
+
+    &::after{ 
+        content: "→";
+        position: relative;
+        display: inline-block;
+        padding-left: 0.75ch;
+        left: 0;
+        transition: left .4s ease-in-out;
+    }
+    &:hover{
+        text-decoration: underline;
+        &::after{
+            left: 0.5ch;
+            text-decoration: underline var(--hover-bg);
+        }
+    }
+}
+

assets/css/components/_slideshow.scss

@@ -0,0 +1,154 @@
+$slideshow-items: 3;
+
+.slideshow {
+    height: 100%;
+    width: 100%;
+    margin-left: 0;
+    // overflow-y: hidden;
+    overflow: visible;
+    --arrow-space: 40px;
+    *{
+        position: relative;
+    }
+}
+            
+
+.slideshow-container{
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+}
+
+.slideshow-inner {
+    width: calc(100% * var(--items));
+    height: 100%;
+}
+
+.slideshow-item {
+    width: calc(100%/var(--items));
+    height: 100%;
+    float: left;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    figure{
+        width: calc(100% - var(--arrow-space)*2);
+        height: calc(100% - var(--unit));
+        img{
+            width: 100%;
+        height: 100%;
+        object-fit: cover; 
+        }
+    }
+
+    figcaption{
+        width: calc(100% - var(--arrow-space)*2);
+        font-size: var(--fs-small);
+        height: calc(var(--unit)*2);
+        padding-top: calc(var(--padding-inner)*0.5);
+    }
+}
+
+
+/* Display slides (input checked) 
+--------------------------------------------------------
+-------------------------------------------------------- */
+
+.slideshow-inner {
+    transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
+    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
+}
+
+.slideshow-item {
+    transition: all 0.5s ease-out;
+}
+
+
+
+
+
+    
+/* Controls (arrows) 
+--------------------------------------------------------
+-------------------------------------------------------- */
+
+.slideshow-controls {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.slide_controls {
+    width: 40px;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    cursor: pointer;
+    will-change: z-index;
+}
+.slide_controls-previous {
+    left: 0;
+}
+.slide_controls-next {
+    right: 0;
+}
+
+span.controls {
+    height: 100%;
+    position: absolute;
+    width: 100%;
+}
+
+span.controls::before,
+span.controls::after {
+    padding: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    position: absolute;
+    // background: white;
+    font-size: 20px;
+    z-index: 9;
+}
+
+.slide_controls-previous:hover ~ span.controls:before,
+.slide_controls-next:hover ~ span.controls:after {
+    // background: #bfbfbf!important;
+    opacity: 0.7;
+}
+
+span.controls::before {
+    content: "❬";
+    left: -1px;
+}
+
+span.controls::after {
+    content: "❭";
+    right: -1px;
+}
+
+/* Position slide + Control arrows display -------------------------------------------- */
+
+
+@for $i from 1 through $slideshow-items {
+    #slide-input-#{$i}:checked ~ .slideshow-inner {
+        left: #{($i - 1) * -100%};
+    }
+}
+
+
+@for $i from 1 through $slideshow-items {
+    #slide-input-#{$i}:checked ~ .slideshow-controls label {
+        z-index: -1;
+    }
+    #slide-input-#{$i}:checked ~ .slideshow-controls label:nth-of-type(#{$i * 2 - 1}),
+    #slide-input-#{$i}:checked ~ .slideshow-controls label:nth-of-type(#{$i * 2}) {
+        z-index: 11;
+    }
+}
+
+
+
+
+

assets/css/components/_species-list.scss

@@ -0,0 +1,50 @@
+.species-list{
+
+    display: grid;
+
+
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    // gap: calc(var(--spacing)*2);
+    gap: calc(var(--spacing)*1);
+    gap: calc(var(--spacing)*1.5);
+    margin-bottom: calc(var(--spacing)*3);
+
+
+
+    .taxon{
+          width: calc(100%/3 - var(--spacing)*3/3);
+    }
+
+  
+    
+    
+}
+
+.family{
+    margin-bottom: calc(var(--spacing)*4);
+    .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.scss

@@ -0,0 +1,70 @@
+@use "../abstracts/mixins.scss" as *;
+
+.species-list .taxon{
+
+    .btn-edit {
+        @include icon(20px);
+    }
+
+    .chart-edit{
+        @include chart-edit(40px);
+    }
+
+      .chart-edit, .btn-edit{
+        display: none;
+    }
+
+
+
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    background-color: var(--color-green-light);
+    padding: 20px;
+
+    .vernacular{ order: 1; }
+    .latin{ order: 2; }
+    figure{ order: 3; }
+
+    figure{
+        @include fig-ratio(1/1);
+
+        border-radius: var(--radius-img);
+        overflow: hidden;
+        
+    }
+
+    .vernacular{
+        background-color: var(--color-green);
+        color: white;
+        border-radius: var(--radius-small);
+        padding: 4px 1ch;
+        margin-bottom: calc(var(--spacing)*0.25);
+        a{
+            color: white;
+            text-decoration: none;
+        }
+    }
+
+    .latin{
+        font-weight: normal;
+        font-weight: 500;
+        font-style: italic;
+        margin-bottom: calc(var(--spacing)*0.75);
+        color: var(--color-txt);
+    }
+
+    .vernacular, .latin{
+        text-align: center;
+    }
+
+    &:hover{
+        outline: 2px solid var(--color-green);
+        background-color: var(--color-green-medium);
+
+    }
+
+  
+
+}

assets/css/components/_team.scss

@@ -0,0 +1,10 @@
+.team{
+    .member{
+        img{
+            width: 60px;
+            aspect-ratio: 1/1;
+            background-color: #cfcfcf;
+            border-radius: var(--radius-img);
+        }
+    }
+}