nouvelle home

assets/css/_home-item-nav.scss

@@ -1,17 +1,23 @@
 .item-nav{
-    border: 1px solid var(--color-txt-light);
+    border: 1.5px solid var(--color-txt);
-    border-radius: var(--radius-small);
+    border-radius: var(--radius-btn);
         background-color: var(--white);
+        color: var(--color-txt);
+    // background-color: transparent;
 
     padding: var(--padding-inner);
     padding-bottom: calc(var(--padding-inner)*0.5);
 
     min-height: calc(var(--unit)*5);
-    max-width: 440px;
 
     display: flex;
     flex-direction: column;
 
+    &:hover{
+        background-color: var(--color-light);
+        // color: white;
+    }
+
     cursor: pointer;
 
     .title{

assets/css/_home.scss

@@ -1,22 +1,24 @@
+@use "abstracts/mixins.scss" as *;
 
-
+#home__livrets {
-
-#home__livrets{
     --color: var(--color-violet);
     --color-medium: var(--color-violet-medium);
     --color-light: var(--color-violet-light);
-    background-color: var(--color-medium);
+    background-color: var(--color);
+    color: var(--white);
 }
 
 
-#home__base-connaissance{
+#home__animations {
     --color: var(--color-yellow);
     --color-medium: var(--color-yellow-medium);
     --color-light: var(--color-yellow-light);
-    background-color: var(--color-medium);
+    background-color: var(--color);
-}
 
-#home__ateliers{
+
+      color: var(--color-txt);
+}
+#home__base-connaissance {
     --color: var(--color-orange);
     --color-medium: var(--color-orange-medium);
     --color-light: var(--color-orange-light);
@@ -25,86 +27,78 @@
 
 
 
-#main_home{
+
-    section{
+
+
+
+#main_home {
+    --max-w-home: 1100px;
+    section {
         padding: calc(var(--unit)*3) var(--padding-body);
         position: relative;
-        .section--inner{
+
-            max-width: 1100px;
+        .section--inner {
+            max-width: var(--max-w-home);
             margin: 0 auto;
+
         }
     }
 
-    .item-nav__group{
+    .item-nav__group {
         display: flex;
         flex-direction: column;
-    gap: var(--unit);
+             gap: var(--spacing);
-}
+    }
 
-.section--header{
+    .section--header {
-       margin-bottom: calc(var(--unit)*3);
+            margin-bottom: calc(var(--spacing) * 4);
-}
 
-    .section--title{
+              display: grid;
+        // grid-template-columns: 3fr 2fr;
+           grid-template-columns: 1fr 440px;
+        gap: calc(var(--spacing)*1);
+    }
+
+    .section--title {
         font-size: 2.8rem;
         font-family: var(--font-title);
-        margin-bottom: calc(var(--unit)*1);
+        // margin-bottom: calc(var(--spacing) * 1.5);
+        grid-column: span 2;
     }
 
-    .baseline{
+    .baseline {
         font-size: var(--fs-medium);
-        max-width: 46ch;
+        max-width: 42ch;
+        margin-top: calc(var(--spacing)*0.5);
 
 
     }
 
 
-    
-   
 }
 
 
 
 
-.slideshow{
+.slideshow {
     width: 100%;
     height: calc(var(--unit)*13);
 
-    figure{
+    figure {
         height: calc(var(--unit)*11);
     }
 }
 
 
 
-.home--section-tool .section--inner{
 
 
-     display: grid;
-     grid-template-columns: 4fr 5fr;
-     column-gap: calc(var(--unit)*3);
 
-    .section--header{
+#home__hero {
-        grid-column: 1/end;
-        width: 100%;
-    }
-
-    .item-nav{
-        grid-column: 1;
-    }
-
-    .highlight-block, .slideshow{
-        grid-column: 2;
-        grid-row: 2;
-    }
-}
-
-
-#home__hero{
     margin-bottom: 0;
-    padding-bottom: calc(var(--unit)*1.5)!important; 
+    padding-bottom: calc(var(--unit)*1.5) !important;
 
-    .section--inner{ 
+    .section--inner {
         display: block;
         text-align: center;
         width: 100%;
@@ -112,7 +106,8 @@
 
 
     }
-    .section--title{
+
+    .section--title {
         font-size: 3.6em;
 
         margin-bottom: calc(var(--unit)*1.5);
@@ -122,7 +117,7 @@
     }
 
     /* button{ display: none;} */
-    .description{
+    .description {
         font-size: var(--fs-medium);
 
         max-width: 48ch;
@@ -130,9 +125,11 @@
         margin-bottom: calc(var(--unit)*1.5);
     }
 
-    .search--container{ display: none;}
+    .search--container {
+        display: none;
+    }
 
-    .nav-hero{
+    .nav-hero {
         list-style: none;
         display: flex;
         justify-content: center;
@@ -141,7 +138,7 @@
         margin-bottom: calc(var(--unit)*3);
 
 
-        li{
+        li {
 
             font-weight: 500;
             font-size: 1rem;
@@ -159,14 +156,15 @@
             padding: 0px 1.5ch;
             border-radius: var(--radius-btn);
             cursor: pointer;
-                &:hover{
+
+            &:hover {
                 background-color: var(--color-light);
 
             }
 
         }
 
-        a{
+        a {
             text-decoration: none;
             color: var(--color);
             font-weight: bold;
@@ -176,7 +174,7 @@
         }
     }
 
-    .see-more{
+    .see-more {
         display: block;
         // color: var(--color-txt);
         // font-weight: bold;
@@ -187,33 +185,36 @@
 }
 
 
-#home__a-propos{
+#home__a-propos {
-    p, li{
+
+    p,
+    li {
         font-size: 1.6rem;
         margin-bottom: 1em;
         position: relative;
 
-        strong{
+        strong {
             color: var(--color-green)
         }
     }
 
-    ol li::marker{
+    ol li::marker {
         display: none;
         content: "";
 
     }
 
-    ol{
+    ol {
         padding-left: 5ch;
         counter-reset: ol;
-        li{ 
+
+        li {
             counter-increment: ol 1;
             position: relative;
         }
     }
 
-    ol li::before{
+    ol li::before {
         font-size: 1.2rem;
         font-weight: bold;
         content: counter(ol);
@@ -232,8 +233,77 @@
 
     }
 
-    .btn--solid{
+    .btn--solid {
         margin-top: calc(var(--unit)*2);
     }
 
 }
+
+
+.slideshow-scroll{
+    width: 100vw;
+    position: relative;
+    left: calc((100vw - var(--max-w-home))*-0.5);
+    padding-bottom: 20px;
+   
+    overflow-y: scroll;
+    @include hide-scrollbar();
+    margin-top: calc(var(--spacing) * 4);
+    margin-bottom: calc(var(--spacing) * 4);
+
+    .slideshow-scroll__warpper{
+        // padding-left: calc((100vw - var(--max-w-home))*0.5);
+        padding-left: var(--padding-body);
+        display: flex;
+        gap: var(--padding-inner);
+
+
+        .slideshow-item{
+            flex-shrink: 0;
+            figure{
+                height: 420px;
+                 width: 100%;
+               img{
+                width: 100%;
+                aspect-ratio: 5/3;
+                }
+            }
+        }
+        &::after{
+            content: "........................................";
+            display: block;
+            width: calc((100vw - var(--max-w-home))*1);
+            color: transparent;
+        }
+    }
+}
+
+
+
+.screenshot-booklet{
+    display: flex;
+    --size-page: 340px;
+    --gap: var(--padding-inner);
+    gap: var(--gap);
+    width: calc(var(--size-page)*5 + var(--gap)*2);
+
+    .cover, .page{
+        width: 300px;
+     
+        img{
+               border: 0.5px solid var(--color-txt-light);
+            width: 100%;
+        }
+    }
+
+    .double{
+        display: flex;
+       
+    }
+
+    .page + .page img{
+        border-left-color: transparent!important;
+        
+    }
+
+}

assets/css/abstracts/_mixins.scss

@@ -43,3 +43,12 @@
         object-fit: cover;
     }
 }
+
+@mixin hide-scrollbar(){
+    scrollbar-width: none;      
+    -ms-overflow-style: none;  
+    &::-webkit-scrollbar {
+        display: none;             
+    }
+
+}

assets/css/abstracts/_var.scss

@@ -6,7 +6,7 @@
 
     --fs-small: 14px;
     --fs-normal: 16px;
-     --fs-medium: 24px;
+     --fs-medium: 22px;
     --fs-title-page: 38px;
 
     --spacing: 20px;
@@ -34,7 +34,8 @@
     --color-violet-medium:   #9b92c4;
     --color-violet-light:    #e1dfec;
 
-    --color-yellow:          #c4a233;
+    // --color-yellow:          #c4a233;
+    --color-yellow:          #d4a938;
     --color-yellow-medium:   #e0c46a;
     --color-yellow-light:    #f5f0d5;
     --color-map:        #ad8422;

assets/style.css

@@ -4,7 +4,7 @@
   --font: "Nunito", Arial, sans-serif;
   --fs-small: 14px;
   --fs-normal: 16px;
-  --fs-medium: 24px;
+  --fs-medium: 22px;
   --fs-title-page: 38px;
   --spacing: 20px;
   font-size: 14px;
@@ -22,7 +22,7 @@
   --color-violet: #6e62a4;
   --color-violet-medium: #9b92c4;
   --color-violet-light: #e1dfec;
-  --color-yellow: #c4a233;
+  --color-yellow: #d4a938;
   --color-yellow-medium: #e0c46a;
   --color-yellow-light: #f5f0d5;
   --color-map: #ad8422;
@@ -574,17 +574,20 @@ span.controls::after {
 }
 
 .item-nav {
-  border: 1px solid var(--color-txt-light);
+  border: 1.5px solid var(--color-txt);
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-btn);
   background-color: var(--white);
+  color: var(--color-txt);
   padding: var(--padding-inner);
   padding-bottom: calc(var(--padding-inner) * 0.5);
   min-height: calc(var(--unit) * 5);
-  max-width: 440px;
   display: flex;
   flex-direction: column;
   cursor: pointer;
 }
+.item-nav:hover {
+  background-color: var(--color-light);
+}
 .item-nav .title {
   font-family: var(--font-title);
   font-size: 1.4rem;
@@ -679,47 +682,56 @@ span.controls::after {
   --color: var(--color-violet);
   --color-medium: var(--color-violet-medium);
   --color-light: var(--color-violet-light);
-  background-color: var(--color-medium);
+  background-color: var(--color);
+  color: var(--white);
 }
 
-#home__base-connaissance {
+#home__animations {
   --color: var(--color-yellow);
   --color-medium: var(--color-yellow-medium);
   --color-light: var(--color-yellow-light);
-  background-color: var(--color-medium);
+  background-color: var(--color);
+  color: var(--color-txt);
 }
 
-#home__ateliers {
+#home__base-connaissance {
   --color: var(--color-orange);
   --color-medium: var(--color-orange-medium);
   --color-light: var(--color-orange-light);
   background-color: var(--color);
 }
 
+#main_home {
+  --max-w-home: 1100px;
+}
 #main_home section {
   padding: calc(var(--unit) * 3) var(--padding-body);
   position: relative;
 }
 #main_home section .section--inner {
-  max-width: 1100px;
+  max-width: var(--max-w-home);
   margin: 0 auto;
 }
 #main_home .item-nav__group {
   display: flex;
   flex-direction: column;
-  gap: var(--unit);
+  gap: var(--spacing);
 }
 #main_home .section--header {
-  margin-bottom: calc(var(--unit) * 3);
+  margin-bottom: calc(var(--spacing) * 4);
+  display: grid;
+  grid-template-columns: 1fr 440px;
+  gap: calc(var(--spacing) * 1);
 }
 #main_home .section--title {
   font-size: 2.8rem;
   font-family: var(--font-title);
-  margin-bottom: calc(var(--unit) * 1);
+  grid-column: span 2;
 }
 #main_home .baseline {
   font-size: var(--fs-medium);
-  max-width: 46ch;
+  max-width: 42ch;
+  margin-top: calc(var(--spacing) * 0.5);
 }
 
 .slideshow {
@@ -730,24 +742,6 @@ span.controls::after {
   height: calc(var(--unit) * 11);
 }
 
-.home--section-tool .section--inner {
-  display: grid;
-  grid-template-columns: 4fr 5fr;
-  -moz-column-gap: calc(var(--unit) * 3);
-       column-gap: calc(var(--unit) * 3);
-}
-.home--section-tool .section--inner .section--header {
-  grid-column: 1/end;
-  width: 100%;
-}
-.home--section-tool .section--inner .item-nav {
-  grid-column: 1;
-}
-.home--section-tool .section--inner .highlight-block, .home--section-tool .section--inner .slideshow {
-  grid-column: 2;
-  grid-row: 2;
-}
-
 #home__hero {
   margin-bottom: 0;
   padding-bottom: calc(var(--unit) * 1.5) !important;
@@ -812,12 +806,14 @@ span.controls::after {
   padding-top: calc(var(--unit) * 1.5);
 }
 
-#home__a-propos p, #home__a-propos li {
+#home__a-propos p,
+#home__a-propos li {
   font-size: 1.6rem;
   margin-bottom: 1em;
   position: relative;
 }
-#home__a-propos p strong, #home__a-propos li strong {
+#home__a-propos p strong,
+#home__a-propos li strong {
   color: var(--color-green);
 }
 #home__a-propos ol li::marker {
@@ -853,6 +849,64 @@ span.controls::after {
   margin-top: calc(var(--unit) * 2);
 }
 
+.slideshow-scroll {
+  width: 100vw;
+  position: relative;
+  left: calc((100vw - var(--max-w-home)) * -0.5);
+  padding-bottom: 20px;
+  overflow-y: scroll;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  margin-top: calc(var(--spacing) * 4);
+  margin-bottom: calc(var(--spacing) * 4);
+}
+.slideshow-scroll::-webkit-scrollbar {
+  display: none;
+}
+.slideshow-scroll .slideshow-scroll__warpper {
+  padding-left: var(--padding-body);
+  display: flex;
+  gap: var(--padding-inner);
+}
+.slideshow-scroll .slideshow-scroll__warpper .slideshow-item {
+  flex-shrink: 0;
+}
+.slideshow-scroll .slideshow-scroll__warpper .slideshow-item figure {
+  height: 420px;
+  width: 100%;
+}
+.slideshow-scroll .slideshow-scroll__warpper .slideshow-item figure img {
+  width: 100%;
+  aspect-ratio: 5/3;
+}
+.slideshow-scroll .slideshow-scroll__warpper::after {
+  content: "........................................";
+  display: block;
+  width: calc((100vw - var(--max-w-home)) * 1);
+  color: transparent;
+}
+
+.screenshot-booklet {
+  display: flex;
+  --size-page: 340px;
+  --gap: var(--padding-inner);
+  gap: var(--gap);
+  width: calc(var(--size-page) * 5 + var(--gap) * 2);
+}
+.screenshot-booklet .cover, .screenshot-booklet .page {
+  width: 300px;
+}
+.screenshot-booklet .cover img, .screenshot-booklet .page img {
+  border: 0.5px solid var(--color-txt-light);
+  width: 100%;
+}
+.screenshot-booklet .double {
+  display: flex;
+}
+.screenshot-booklet .page + .page img {
+  border-left-color: transparent !important;
+}
+
 .species-list {
   display: grid;
   display: flex;

index.html

@@ -39,7 +39,7 @@
                 <ul class="nav-hero">
                     <li data-type="livret"><a href="#home__livrets">Livrets</a></li>
                     <li data-type="base-connaissance"><a href="#home__base-connaissance">Base de connaissance</a></li>
-                    <li data-type="atelier"><a href="#home__ateliers">Ateliers</a></li>
+                    <li data-type="atelier"><a href="#home__animations">Ateliers</a></li>
                 </ul>
 
 
@@ -57,10 +57,11 @@
     <section class="home--section-tool" id="home__livrets">
         <div class="section--inner">
 
+
             <div class="section--header">
+
                 <h2 class="section--title">Livrets</h2>
-                <p class="baseline">Grâce à Botascopia, il est facile de générer des petites flores (environ 30 à 60 espèces) sous forme de livrets imprimables A5. Les livrets se composent d'une <strong>cé de détermination</strong> pour observer et identifier les plantes inconnues, et  d'une partie « <strong>fiches-espèce</strong> » pour vérifier et en  apprendre plus.</p>
+                <p class="baseline">Grâce à Botascopia, il&nbsp;est&nbsp;facile de&nbsp;générer des &nbsp;petites flores (environ&nbsp;30&nbsp;à&nbsp;60&nbsp;espèces) sous forme de&nbsp;livrets imprimables&nbsp;A5. Les&nbsp;livrets se&nbsp;composent d'une&nbsp;<strong>clé de&nbsp;détermination</strong> pour observer et&nbsp;identifier les&nbsp;plantes inconnues, et &nbsp;d'une partie «&#8239;<strong>fiches-espèce</strong>&#8239;» pour&nbsp;vérifier et&nbsp;en &nbsp;apprendre plus.</p>
-            </div>
 
 
                <div class="item-nav__group">
@@ -77,69 +78,48 @@
                     </div>
                 </div>
 
+            </div>
 
-            <div class="highlight-block">
+
-                    <div class="content">
+                <div class="slideshow-scroll">
-                        <p class="label">Livret du mois</p>
+
-                        <h3 class="title">Apiaciée de Baumont</h3>
+                    <div class="slideshow-scroll__warpper">
-                        <p class="details">45 espèces</p>
+
-                        <a class="see-more" href="#">Voir le livret<span>→</span></a>
+                        <div class="screenshot-booklet">
+                            <div class="cover"><img src="/images/livret-1.png"></div>
+                            <div class="double">
+                                <div class="page"><img src="/images/livret-2.png"></div>
+                                <div class="page"><img src="/images/livret-3.png"></div>
                             </div>
-                    <figure><img src="https://botascopia.inria.fr/photos/Crataegus%20monogyna_morphology_vegetative_leaves_leaves_type0_illustration_photo.png"></figure>
+                            <div class="double">
+                                <div class="page"><img src="/images/livret-10.png"></div>
+                                <div class="page"><img src="/images/livret-11.png"></div>
                             </div>
+                        </div>
+
+                    </div>
+
+                </div>
+
+            
       
         </div>
     </section>
 
-     <section class="home--section-tool" id="home__base-connaissance">
-        <div class="section--inner">
 
-
+        <section class="home--section-tool" id="home__animations">
-              <div class="section--header">
-                    <h2 class="section--title">Base de connaissance</h2>
-                    <p class="baseline">Collaborative, la base de connaissance botanique est la source permettant de générer les livrets. Elle comporte actuellement xxx espèces dont xxx vérifiées.</p>
-                </div>
-
-            <div class="item-nav__group">
-
-                <div class="item-nav">
-                    <h3 class="title">Explorer les espèces</h3>
-                    <p class="description">CAccédez à l'ensemble de la base ou consultez et téléchargez les fiches des espèces vérifiées.</p>
-                    <button class="btn--go-to">→</button>
-                </div>
-
-                <div class="item-nav">
-                    <h3 class="title">Contribuer à la base de connaissance</h3>
-                    <p class="description">Enrichir ou relire, botanistes avertis, contactez-nous !   </p>
-                    <button class="btn--go-to">→</button>
-                </div>
-
-             </div>
-            
-            <div class="highlight-block">
-                    <div class="content">
-                        <p class="label">Espèce du jour</p>
-                        <h3 class="title">Charme commun</h3>
-
-                        <p class="details">Carpinus betulus L. — Betulaceae</p>
-
-                        <a class="see-more" href="#">Voir la fiche de l’espèce<span>→</span></a>
-                      </div>
-                <figure><img src="https://botascopia.inria.fr/photos/Frangula%20alnus_morphology_vegetative_type_woody_twig-type_normal_twig-illustration_photo.png"></figure>
-            </div>
-            
-        </div>
-    </section>
-
-        <section class="home--section-tool" id="home__ateliers">
         <div class="section--inner">
 
               <div class="section--header">
 
           
-            <h2 class="section--title">Ateliers</h2>
+                    <h2 class="section--title">Animations</h2>
+
+                    <p class="baseline">
+                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Suscipit aspernatur consectetur asperiores dignissimos, fuga consequatur, assumenda aliquam voluptatibus quia ratione necessitatibus, odit velit a sed culpa perferendis eum. 
+                    </p>
+
             
-                </div>
                         
                     <div class="item-nav__group">
 
@@ -158,17 +138,14 @@
 
    
 
+               </div>
 
-            <div class="slideshow" data-nbr-item="3" style="--items: 3">
-                <div class="slideshow-container">
 
-                <!-- Inputs --------------------------------------- -->
+               <div class="slideshow-scroll">
-                <input type="radio" name="slide-input" id="slide-input-1" hidden="" checked=""/>
+
-                <input type="radio" name="slide-input" id="slide-input-2" hidden=""/>
+                    <div class="slideshow-scroll__warpper">
-                <input type="radio" name="slide-input" id="slide-input-3" hidden=""/>
+
 
-                <!-- Slides + container --------------------------- -->
-                <div class="slideshow-inner">
                             <div class="slideshow-item" data-item="1">
                         <figure>
                             <img src="/content/images/atelier-2.png">
@@ -196,25 +173,55 @@
 
                  
 
-                <!-- Controls (arrows) -------------------------------- -->
-
-                <nav class="slideshow-controls" aria-hidden="true">
-                    <!-- Slide 1: prev=3, next=2 -->
-                    <label for="slide-input-3" class="slide_controls slide_controls-previous" alt="Aller à la slide 3"></label>
-                    <label for="slide-input-2" class="slide_controls slide_controls-next" alt="Aller à la slide 2"></label>
-
-                    <!-- Slide 2: prev=1, next=3 -->
-                    <label for="slide-input-1" class="slide_controls slide_controls-previous" alt="Aller à la slide 1"></label>
-                    <label for="slide-input-3" class="slide_controls slide_controls-next" alt="Aller à la slide 3"></label>
-
-                    <!-- Slide 3: prev=2, next=1 -->
-                    <label for="slide-input-2" class="slide_controls slide_controls-previous" alt="Aller à la slide 2"></label>
-                    <label for="slide-input-1" class="slide_controls slide_controls-next" alt="Aller à la slide 1"></label>
-
-                    <span class="controls" aria-hidden="true"></span>
-                </nav>
 
                 </div>
+
+
+
+
+
+         
+            
+        </div>
+    </section>
+
+     <section class="home--section-tool" id="home__base-connaissance">
+        <div class="section--inner">
+
+
+              <div class="section--header">
+                    <h2 class="section--title">Base de connaissance</h2>
+                    <p class="baseline">Collaborative, la base de connaissance botanique est la source permettant de générer les livrets. Elle comporte actuellement xxx&nbsp;espèces dont xxx&nbsp;vérifiées.</p>
+             
+
+            <div class="item-nav__group">
+
+                <div class="item-nav">
+                    <h3 class="title">Explorer les espèces</h3>
+                    <p class="description">CAccédez à l'ensemble de la base ou consultez et téléchargez les fiches des espèces vérifiées.</p>
+                    <button class="btn--go-to">→</button>
+                </div>
+
+                <div class="item-nav">
+                    <h3 class="title">Contribuer à la base de connaissance</h3>
+                    <p class="description">Enrichir ou relire, botanistes avertis, contactez-nous !   </p>
+                    <button class="btn--go-to">→</button>
+                </div>
+
+             </div>
+
+                </div>
+            
+            <div class="highlight-block">
+                    <div class="content">
+                        <p class="label">Espèce du jour</p>
+                        <h3 class="title">Charme commun</h3>
+
+                        <p class="details">Carpinus betulus L. — Betulaceae</p>
+
+                        <a class="see-more" href="#">Voir la fiche de l’espèce<span>→</span></a>
+                      </div>
+                <figure><img src="https://botascopia.inria.fr/photos/Frangula%20alnus_morphology_vegetative_type_woody_twig-type_normal_twig-illustration_photo.png"></figure>
             </div>
             
         </div>
@@ -222,6 +229,7 @@
 
 
 
+
     <section id="home__a-propos">
             <div class="section--inner">
                 <h2 class="section--title">Apprendre à connaître <br>et&nbsp;reconnaître les&nbsp;plantes</h2>