search

assets/css/_page-header.scss

@@ -1,3 +1,4 @@
+@use "abstracts/mixins.scss" as *;
 
 .page-header{
     // margin-top: calc(var(--spacing)*1);

assets/css/_site-header.scss

@@ -1,3 +1,5 @@
+@use "abstracts/mixins.scss" as *;
+
 #site-header{
     height: var(--header-h);
     width: 100vw;
@@ -38,52 +40,6 @@
     list-style: none;
 }
 
-/*----------------*/
-/*   search bar   */
-/*----------------*/
-
-.search {
-    display: flex;
-    flex-direction: row-reverse;
-    height: calc(var(--unit)*1.5);
-    flex-grow: 2;
-}
-
-.search__toggle {
-    display: none;
-}
-.search__label {
-    cursor: pointer;
-    user-select: none;
-    width: calc(var(--unit)*1.5);
-    height: calc(var(--unit)*1.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-.search__input {
-    display: none;
-}
-.search__icon{
-    width: var(--unit);
-}
-
-.search__icon--open {
-    display: block;
-}
-.search__icon--close {
-    display: none;
-}
-
-.search__toggle:checked ~ .search__input {
-    display: block;
-}
-.search__toggle:checked ~ .search__label .search__icon--open {
-    display: none;
-}
-.search__toggle:checked ~ .search__label .search__icon--close {
-    display: block;
-}
 
 #btn__connexion{
     font-weight: 500;

assets/css/abstracts/_var.scss

@@ -56,6 +56,7 @@
     --color-green-black:    #016042;
 
     --color-txt:       rgb(41, 41, 41);
+    --color-txt: #0D2846;
     --color-txt-light: #a5a9a9;
     --color-light:      #DCDDDD;
     --color-x-light:    #eaebeb;

assets/css/components/_buttons.scss

@@ -11,7 +11,7 @@
     align-items: center;
     justify-content: center;
     height: calc(var(--unit)*1.5);
-
+    min-width: calc(var(--unit)*1.5);
     border-radius: var(--radius-btn);
     cursor: pointer;
 

assets/css/components/_search.scss

@@ -0,0 +1,110 @@
+@use "../abstracts/mixins.scss" as *;
+
+.search {
+    display: flex;
+    height: calc(var(--unit)*1.5);
+    flex-grow: 2;
+    flex-direction: row-reverse;
+    align-items: center;
+    gap: calc(var(--padding-inner)*0.5);
+
+    svg {
+        @include icon(18px);
+        stroke-width: 1px;
+        stroke: var(--color-txt);
+    }
+
+
+
+    .search__input-group {
+        display: grid;
+        grid-template-columns: var(--unit) 1fr;
+        width: 100%;
+        height: calc(var(--unit)*1.5);
+
+
+        input {
+            grid-column: 1/end;
+            grid-row: 1;
+            padding-left: calc(var(--padding-inner)*2.5);
+            font-family: sans-serif;
+            font-family: var(--font);
+            font-size: var(--fs-normal);
+            font-weight: 500;
+            border-radius: var(--radius-small);
+            border: 1px solid var(--color-txt-light);
+            outline: none;
+
+            &::placeholder {
+                font-family: var(--font);
+                font-size: var(--fs-normal);
+            }
+
+            &:focus {
+                outline: 1px solid var(--color-violet);
+            }
+
+        }
+
+        button {
+            grid-column: 1;
+            grid-row: 1;
+            z-index: 10;
+            align-self: center;
+            position: relative;
+            left: 10px;
+            top: 2px;
+
+        }
+    }
+
+    .search__icon {
+        width: calc(var(--unit)*1.25);
+        height: calc(var(--unit)*1.25);
+        // background-color: red;
+        border-radius: var(--radius-btn);
+        border: 1px solid var(--color-txt);
+        // background-color: var(--color-x-light);
+        cursor: pointer;
+
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+ 
+        &:hover {
+            background-color: var(--color-x-light);
+        }
+    }
+
+}
+
+
+#search-toggle {
+    display: none;
+}
+
+
+#search-toggle~[for="search-toggle"] .search__icon--open {
+    display: flex;
+}
+
+#search-toggle~[for="search-toggle"] .search__icon--close {
+    display: none;
+}
+
+#search-toggle~.search__input-group {
+    display: none;
+}
+
+#search-toggle:checked~[for="search-toggle"] .search__icon--open {
+    display: none;
+}
+
+#search-toggle:checked~[for="search-toggle"] .search__icon--close {
+    display: flex;
+}
+
+#search-toggle:checked~.search__input-group {
+    display: grid;
+}

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

@@ -31,10 +31,7 @@
         }
         &:first-of-type::before{ border-color: var(--color-green-light);}
 
-        .chart-edit {
+       
-            display: block;
-            margin-right: var(--padding-inner);
-        }
 
        
 
@@ -96,4 +93,8 @@
             display: block!important;
             z-index: 30;
     }
+     .taxon .chart-edit {
+            display: block;
+            margin-right: var(--padding-inner);
+        }
 }

assets/css/pages/_home-item-nav.scss

@@ -13,6 +13,8 @@
     display: flex;
     flex-direction: column;
 
+    text-decoration: none;
+
 
     cursor: pointer;
 

assets/css/pages/_home.scss

@@ -55,6 +55,11 @@
 
     .species-list{
         margin-bottom: calc(var(--spacing)*3);
+
+        .taxon:hover{
+            border-color: red!important;
+            
+        }
     }
 
     .species-list .title{

assets/style.css

@@ -38,6 +38,7 @@
   --color-green-x-light: #eef7f4;
   --color-green-black: #016042;
   --color-txt: rgb(41, 41, 41);
+  --color-txt: #0D2846;
   --color-txt-light: #a5a9a9;
   --color-light: #DCDDDD;
   --color-x-light: #eaebeb;
@@ -150,60 +151,6 @@ figure, picture, img {
   list-style: none;
 }
 
-/*----------------*/
-/*   search bar   */
-/*----------------*/
-.search {
-  display: flex;
-  flex-direction: row-reverse;
-  height: calc(var(--unit) * 1.5);
-  flex-grow: 2;
-}
-
-.search__toggle {
-  display: none;
-}
-
-.search__label {
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  width: calc(var(--unit) * 1.5);
-  height: calc(var(--unit) * 1.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.search__input {
-  display: none;
-}
-
-.search__icon {
-  width: var(--unit);
-}
-
-.search__icon--open {
-  display: block;
-}
-
-.search__icon--close {
-  display: none;
-}
-
-.search__toggle:checked ~ .search__input {
-  display: block;
-}
-
-.search__toggle:checked ~ .search__label .search__icon--open {
-  display: none;
-}
-
-.search__toggle:checked ~ .search__label .search__icon--close {
-  display: block;
-}
-
 #btn__connexion {
   font-weight: 500;
   font-size: 1rem;
@@ -309,6 +256,108 @@ figure, picture, img {
   padding: var(--padding-body);
 }
 
+.search {
+  display: flex;
+  height: calc(var(--unit) * 1.5);
+  flex-grow: 2;
+  flex-direction: row-reverse;
+  align-items: center;
+  gap: calc(var(--padding-inner) * 0.5);
+}
+.search svg {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+}
+.search svg svg {
+  width: 100%;
+  height: 100%;
+}
+.search svg {
+  stroke-width: 1px;
+  stroke: var(--color-txt);
+}
+.search .search__input-group {
+  display: grid;
+  grid-template-columns: var(--unit) 1fr;
+  width: 100%;
+  height: calc(var(--unit) * 1.5);
+}
+.search .search__input-group input {
+  grid-column: 1/end;
+  grid-row: 1;
+  padding-left: calc(var(--padding-inner) * 2.5);
+  font-family: sans-serif;
+  font-family: var(--font);
+  font-size: var(--fs-normal);
+  font-weight: 500;
+  border-radius: var(--radius-small);
+  border: 1px solid var(--color-txt-light);
+  outline: none;
+}
+.search .search__input-group input::-moz-placeholder {
+  font-family: var(--font);
+  font-size: var(--fs-normal);
+}
+.search .search__input-group input::placeholder {
+  font-family: var(--font);
+  font-size: var(--fs-normal);
+}
+.search .search__input-group input:focus {
+  outline: 1px solid var(--color-violet);
+}
+.search .search__input-group button {
+  grid-column: 1;
+  grid-row: 1;
+  z-index: 10;
+  align-self: center;
+  position: relative;
+  left: 10px;
+  top: 2px;
+}
+.search .search__icon {
+  width: calc(var(--unit) * 1.25);
+  height: calc(var(--unit) * 1.25);
+  border-radius: var(--radius-btn);
+  border: 1px solid var(--color-txt);
+  cursor: pointer;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.search .search__icon:hover {
+  background-color: var(--color-x-light);
+}
+
+#search-toggle {
+  display: none;
+}
+
+#search-toggle ~ [for=search-toggle] .search__icon--open {
+  display: flex;
+}
+
+#search-toggle ~ [for=search-toggle] .search__icon--close {
+  display: none;
+}
+
+#search-toggle ~ .search__input-group {
+  display: none;
+}
+
+#search-toggle:checked ~ [for=search-toggle] .search__icon--open {
+  display: none;
+}
+
+#search-toggle:checked ~ [for=search-toggle] .search__icon--close {
+  display: flex;
+}
+
+#search-toggle:checked ~ .search__input-group {
+  display: grid;
+}
+
 .btn--solid {
   font-weight: 600;
   font-size: 1.2rem;
@@ -318,6 +367,7 @@ figure, picture, img {
   align-items: center;
   justify-content: center;
   height: calc(var(--unit) * 1.5);
+  min-width: calc(var(--unit) * 1.5);
   border-radius: var(--radius-btn);
   cursor: pointer;
 }
@@ -1546,13 +1596,6 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
 #view-list:checked ~ .page-species-list .species-list .taxon:first-of-type::before {
   border-color: var(--color-green-light);
 }
-#view-edit:checked ~ .page-species-list .family .species-list .taxon .chart-edit,
-#view-edit:checked ~ .page-species-list .species-list .taxon .chart-edit,
-#view-list:checked ~ .page-species-list .family .species-list .taxon .chart-edit,
-#view-list:checked ~ .page-species-list .species-list .taxon .chart-edit {
-  display: block;
-  margin-right: var(--padding-inner);
-}
 #view-edit:checked ~ .page-species-list .family .species-list .taxon figure,
 #view-edit:checked ~ .page-species-list .species-list .taxon figure,
 #view-list:checked ~ .page-species-list .family .species-list .taxon figure,
@@ -1644,6 +1687,11 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
   display: block !important;
   z-index: 30;
 }
+#view-edit:checked ~ .page-species-list .family .species-list .taxon .chart-edit,
+#view-edit:checked ~ .page-species-list .species-list .taxon .chart-edit {
+  display: block;
+  margin-right: var(--padding-inner);
+}
 
 .item-nav {
   border: 1.5px solid var(--color-txt);
@@ -1655,6 +1703,7 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
   min-height: calc(var(--unit) * 5);
   display: flex;
   flex-direction: column;
+  text-decoration: none;
   cursor: pointer;
 }
 .item-nav .title {
@@ -1731,6 +1780,9 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
 #main_home .species-list {
   margin-bottom: calc(var(--spacing) * 3);
 }
+#main_home .species-list .taxon:hover {
+  border-color: red !important;
+}
 #main_home .species-list .title {
   grid-column: 1/end;
   font-size: var(--fs-medium);

assets/style.scss

@@ -6,6 +6,7 @@
 @use "css/site-header";
 @use "css/site-nav";
 @use "css/site-footer";
+@use "css/components/search";
 @use "css/components/buttons";
 @use "css/components/slideshow";
 @use "css/components/logos-container";

components/icons/search.svg

@@ -1,3 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
+<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m15.97 17.031c-1.479 1.238-3.384 1.985-5.461 1.985-4.697 0-8.509-3.812-8.509-8.508s3.812-8.508 8.509-8.508c4.695 0 8.508 3.812 8.508 8.508 0 2.078-.747 3.984-1.985 5.461l4.749 4.75c.146.146.219.338.219.531 0 .587-.537.75-.75.75-.192 0-.384-.073-.531-.22zm-5.461-13.53c-3.868 0-7.007 3.14-7.007 7.007s3.139 7.007 7.007 7.007c3.866 0 7.007-3.14 7.007-7.007s-3.141-7.007-7.007-7.007z" fill-rule="nonzero"/></svg>
-  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
-</svg>

components/search.html

@@ -1,8 +1,14 @@
 <div class="search">
     <input type="checkbox" id="search-toggle" class="search__toggle">
-    <label for="search-toggle" class="search__label">
+  
+    
+      <label for="search-toggle">
         <span class="search__icon search__icon--open"><include src="/components/icons/search.svg"></include></span>
         <span class="search__icon search__icon--close"><include src="/components/icons/x-lg.svg"></include></span>
-    </label>
+        </label>
-    <input type="text" class="search__input" placeholder="Recherchez une plante ou un livret">
+
+    <div class="search__input-group">
+        <button><include src="/components/icons/search.svg"></include></button>
+        <input type="text" id="search__input" placeholder="Recherchez une plante ou un livret">
+    </div>
 </div>

index.html

@@ -71,18 +71,18 @@
 
 
                     <div class="item-nav__group">
-                        <div class="item-nav">
+                        <a href="#" class="item-nav">
                             <h3 class="title">Consulter des livrets</h3>
                             <p class="description">Consultez et téléchargez librement les&nbsp;livrets existants.</p>
                             <button class="btn--go-to">→</button>
-                        </div>
+                        </a>
 
-                        <div class="item-nav">
+                        <a href="#" class="item-nav">
                             <h3 class="title">Créer un livret</h3>
                             <p class="description">À partir d’une liste d’espèces, générez un&nbsp;livret avec
                                 sa&nbsp;clé de&nbsp;détermination.</p>
                             <button class="btn--go-to">→</button>
-                        </div>
+                        </a>
                     </div>
 
                 </div>
@@ -132,19 +132,19 @@
 
                     <div class="item-nav__group">
 
-                        <div class="item-nav">
+                        <a href="#" class="item-nav">
                             <h3 class="title">Organiser une animation</h3>
                             <p class="description">Trouvez des exemples d’activités mobilisant un livret et explorer les
                                 kits pédagogiques.</p>
                             <button class="btn--go-to">→</button>
-                        </div>
+                        </a>
 
-                        <div class="item-nav">
+                        <a href="#"class="item-nav">
                             <h3 class="title">Organiser un atelier supervisé</h3>
                             <p class="description">Appuyez vos enseignements en faisant contribuer vos apprenants à la
                                 base de connaissance.</p>
                             <button class="btn--go-to">→</button>
-                        </div>
+                        </a>
                     </div>
 
 
@@ -204,18 +204,18 @@
 
                     <div class="item-nav__group">
 
-                        <div class="item-nav">
+                        <a href="/species-list.html" class="item-nav">
                             <h3 class="title">Explorer les espèces</h3>
                             <p class="description">Accé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>
+                        </a>
 
-                        <div class="item-nav">
+                         <a href="#" 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>
+                         </a>
 
                     </div>
 
@@ -230,7 +230,7 @@
                         <img src="/images/Acorus_calamus_morphology_outlook_illustration_photo.png">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Acore odorant</a></h3>
+                        <h3 class="vernacular"><a href="/species-single.html" target="_blank">Acore odorant</a></h3>
                         <p class="latin">Acorus calamus L.</p>
                     </div>
 
@@ -239,7 +239,7 @@
                     <button class="btn-edit">
                         <include src="/components/icons/edit.svg"></include>
                     </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
             
@@ -249,7 +249,7 @@
                         <img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
+                        <h3 class="vernacular"><a href="/species-single.html" target="_blank">Aulne glutineux</a></h3>
                         <p class="latin">Alnus glutinosa</p>
                     </div>
 
@@ -260,7 +260,7 @@
                     <button class="btn-edit">
                         <include src="/components/icons/edit.svg"></include>
                     </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -268,7 +268,7 @@
                         <img src="/images/Alnus_glutinosa_morphology_outlook_illustration_photo.jpeg">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Aulne glutineux</a></h3>
+                        <h3 class="vernacular"><a href="/species-single.html" target="_blank">Aulne glutineux</a></h3>
                         <p class="latin">Alnus glutinosa</p>
                     </div>
 
@@ -279,7 +279,7 @@
                     <button class="btn-edit">
                         <include src="/components/icons/edit.svg"></include>
                     </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>
 
                 <article class="taxon">
@@ -287,7 +287,7 @@
                         <img src="/images/Arum_italicum_morphology_outlook_illustration_photo.png">
                     </figure>
                     <div class="name">
-                        <h3 class="vernacular"><a href="#" target="_blank">Gouet d'Italie</a></h3>
+                        <h3 class="vernacular"><a href="/species-single.html" target="_blank">Gouet d'Italie</a></h3>
                         <p class="latin">Arum Italicum Mill.</p>
                     </div>
 
@@ -298,7 +298,7 @@
                     <button class="btn-edit">
                         <include src="/components/icons/edit.svg"></include>
                     </button>
-                    <a class="link-block" href="#" target="_blank"></a>
+                    <a class="link-block" href="/species-single.html" target="_blank"></a>
                 </article>