btn home

assets/css/components/_buttons.scss

@@ -129,8 +129,7 @@ button:disabled{
     }
 }
  
-.btn--bold, 
+.btn--bold{
-.btn--bold-inline{
     display: block;
     height: calc(var(--h-block)*1);
     border: var(--border);
@@ -188,12 +187,98 @@ button:disabled{
   
 }
 
-.btn--bold-inline{
+.btn--see-more{
+
+    margin-top: calc(var(--spacing)*1);
+    margin-inline: auto;
+    
+    display: block;
+    height: calc(var(--h-block)*1);
+    border: 1px solid var(--color-txt-light);
+    border-radius: var(--radius-btn);
+    font-size: var(--fs-small);
+
+    line-height: 1;
+    overflow: hidden;
+    white-space: nowrap;
+
+    color: var(--color-txt-light);
     background-color: var(--color-bg);
-    // svg{ 
+
-    //     fill: var(--color-txt); 
+
-    //     size: 13px!important;
+    @include icon(12px);
-    // }
+    .icon{
+        position: relative; 
+        top: -2px;
+        
+    }
+    svg{
+fill: var(--color-txt-light);
+    }
+    a{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 1ch;
+        width: 100%;
+        height: 100%;
+        padding: 0 1.25ch;
+        padding-top: 4px;
+            font-size: var(--fs-small);
+    }
+
+
+
+ 
+    &:hover{
+        background-color: var(--grey-950);
+        color: var(--grey-100);
+        border-color: var(--grey-100);
+        a{
+            background-color: var(--grey-950);
+            color: var(--grey-100);
+        }
+        svg{ fill: var(--grey-100); }
+    }
+    
+}
+
+
+.btn--home{
+    
+    display: block;
+    height: calc(var(--h-block)*1);
+    border: var(--border);
+    border-radius: var(--radius-btn);
+    font-size: var(--fs-small);
+
+    line-height: 1;
+    overflow: hidden;
+    white-space: nowrap;
+
+       background-color: var(--color-bg);
+       font-weight: 500;
+
+
+    @include icon(12px);
+    .icon{
+        position: relative; 
+        top: -2px;
+    }
+    a{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 1ch;
+        width: 100%;
+        height: 100%;
+        padding: 0 1.25ch;
+        padding-top: 4px;
+    }
+
+
+
+ 
     &:hover{
         background-color: var(--grey-950);
         color: var(--grey-100);

assets/css/style.css

@@ -481,8 +481,7 @@ button:disabled {
   padding-top: 4px;
 }
 
-.btn--bold,
+.btn--bold {
-.btn--bold-inline {
   display: block;
   height: calc(var(--h-block) * 1);
   border: var(--border);
@@ -492,24 +491,20 @@ button:disabled {
   overflow: hidden;
   white-space: nowrap;
 }
-.btn--bold .icon,
+.btn--bold .icon {
-.btn--bold-inline .icon {
   display: flex;
   width: 12px;
   height: 12px;
 }
-.btn--bold .icon svg,
+.btn--bold .icon svg {
-.btn--bold-inline .icon svg {
   width: 12px;
   height: 12px;
 }
-.btn--bold svg,
+.btn--bold svg {
-.btn--bold-inline svg {
   position: relative;
   top: -1px;
 }
-.btn--bold a,
+.btn--bold a {
-.btn--bold-inline a {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -519,8 +514,7 @@ button:disabled {
   padding: 0 1.25ch;
   padding-top: 4px;
 }
-.btn--bold.no-link,
+.btn--bold.no-link {
-.btn--bold-inline.no-link {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -547,19 +541,105 @@ button:disabled {
   fill: var(--color-bg);
 }
 
-.btn--bold-inline {
+.btn--see-more {
+  margin-top: calc(var(--spacing) * 1);
+  margin-inline: auto;
+  display: block;
+  height: calc(var(--h-block) * 1);
+  border: 1px solid var(--color-txt-light);
+  border-radius: var(--radius-btn);
+  font-size: var(--fs-small);
+  line-height: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  color: var(--color-txt-light);
   background-color: var(--color-bg);
 }
-.btn--bold-inline:hover {
+.btn--see-more .icon {
+  display: flex;
+  width: 12px;
+  height: 12px;
+}
+.btn--see-more .icon svg {
+  width: 12px;
+  height: 12px;
+}
+.btn--see-more .icon {
+  position: relative;
+  top: -2px;
+}
+.btn--see-more svg {
+  fill: var(--color-txt-light);
+}
+.btn--see-more a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1ch;
+  width: 100%;
+  height: 100%;
+  padding: 0 1.25ch;
+  padding-top: 4px;
+  font-size: var(--fs-small);
+}
+.btn--see-more:hover {
   background-color: var(--grey-950);
   color: var(--grey-100);
   border-color: var(--grey-100);
 }
-.btn--bold-inline:hover a {
+.btn--see-more:hover a {
   background-color: var(--grey-950);
   color: var(--grey-100);
 }
-.btn--bold-inline:hover svg {
+.btn--see-more:hover svg {
+  fill: var(--grey-100);
+}
+
+.btn--home {
+  display: block;
+  height: calc(var(--h-block) * 1);
+  border: var(--border);
+  border-radius: var(--radius-btn);
+  font-size: var(--fs-small);
+  line-height: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  background-color: var(--color-bg);
+  font-weight: 500;
+}
+.btn--home .icon {
+  display: flex;
+  width: 12px;
+  height: 12px;
+}
+.btn--home .icon svg {
+  width: 12px;
+  height: 12px;
+}
+.btn--home .icon {
+  position: relative;
+  top: -2px;
+}
+.btn--home a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1ch;
+  width: 100%;
+  height: 100%;
+  padding: 0 1.25ch;
+  padding-top: 4px;
+}
+.btn--home:hover {
+  background-color: var(--grey-950);
+  color: var(--grey-100);
+  border-color: var(--grey-100);
+}
+.btn--home:hover a {
+  background-color: var(--grey-950);
+  color: var(--grey-100);
+}
+.btn--home:hover svg {
   fill: var(--grey-100);
 }
 
@@ -3064,19 +3144,6 @@ main .page__header ul.details li:hover {
   line-height: 1.1;
   margin-bottom: calc(var(--spacing) * 1);
 }
-.section--home .btn--bold-inline {
-  text-transform: none;
-  font-weight: 500;
-  font-size: var(--fs-small);
-}
-.section--home .btn--bold-inline .icon {
-  position: relative;
-  top: 2px;
-}
-.section--home .btn--bold-inline svg {
-  width: 13px;
-  height: 13px;
-}
 @media screen and (min-width: 1080px) {
   .section--home .section--inner {
     max-width: 1600px;

assets/css/template/_home.scss

@@ -24,19 +24,7 @@
         margin-bottom: calc(var(--spacing)*1);
     }
 
-    .btn--bold-inline{
+
-        text-transform: none;
-        font-weight: 500;
-        font-size: var(--fs-small);
-        .icon{
-            position: relative;
-            top: 2px;
-        }
-        svg{
-            width: 13px;
-            height: 13px;
-        }
-    }
 
 
     @media #{$medium-up} {

site/templates/home.php

@@ -30,7 +30,7 @@ $count = max(4, (int)$section->count()->value());
       <?php endif ?>
 
       <?php if ($section->buttonText()->isNotEmpty()): ?>
-      <button class="btn--bold-inline">
+      <button class="btn--home">
         <a href="<?= $section->buttonLink()->esc() ?>">
           <span class="text"><?= $section->buttonText()->esc() ?></span>
           <span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
@@ -298,7 +298,7 @@ $count = max(4, (int)$section->count()->value());
       <?php endif ?>
 
       <div class="see-more">
-        <button class="btn--bold-inline">
+        <button class="btn--see-more">
           <a href="<?= esc($seeMoreUrl) ?>">
             <span class="text"><?= esc($seeMoreLabel) ?></span>
             <span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>

site/templates/impact.php

@@ -71,7 +71,7 @@
         <?php endforeach ?>
 
         <div class="see-more">
-            <button class="btn--bold-inline">
+            <button class="btn--see-more">
                 <a href="/enquetes">
                     <span class="text">Voir toutes les enquêtes</span>
                     <span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>

site/templates/investigation.php

@@ -419,7 +419,7 @@ if ($package):
     <?php endforeach ?>
 
      <div class="see-more">
-        <button class="btn--bold-inline">
+        <button class="btn--see-more">
           <a href="/enquetes">
           <span class="text">Voir toutes les enquêtes</span>
           <span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>

site/templates/news-item.php

@@ -69,7 +69,7 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
         <?php endforeach ?>
 
         <div class="see-more">
-            <button class="btn--bold-inline">
+            <button class="btn--see-more">
                 <a href="/enquetes">
                     <span class="text"><?= t('investigations.see_all') ?></span>
                     <span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>

site/templates/project.php

@@ -67,7 +67,7 @@
         <?php endforeach ?>
 
         <div class="see-more">
-            <button class="btn--bold-inline">
+            <button class="btn--see-more">
                 <a href="/enquetes">
                     <span class="text"><?= t('investigations.see_all') ?></span>
                     <span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>

site/templates/resource.php

@@ -67,7 +67,7 @@
         <?php endforeach ?>
 
         <div class="see-more">
-            <button class="btn--bold-inline">
+            <button class="btn--see-more">
                 <a href="/enquetes">
                     <span class="text"><?= t('investigations.see_all') ?></span>
                     <span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>