category.php

@@ -10,5 +10,6 @@
 
 </main>
 
+<!-- Sidebar custom pour contenir la description -->
 <?php get_sidebar(); ?>
 <?php get_footer(); ?>

components/featured.php

@@ -22,7 +22,7 @@
 		    <div class="preview-overlay">
 		      <div class="preview-categories">
 		        <?php $category = get_the_category();
-              echo"<span class='badge bg-secondary'>" . $category[0]->cat_name . "</span>"; ?>
+              echo"<span class='badge bg-primary'>" . $category[0]->cat_name . "</span>"; ?>
             </div>
 		    
 		      <h2 class="preview-title"><?php the_title();/*3*/ ?></h2>

components/footer-content.php

@@ -1,4 +1,4 @@
-<footer class="bg-dark fg-light">
+<footer class="bg-dark">
   <nav class="container menu toolbar bg-light fg-dark">
   <ul class="f-end">
     <?php

components/previews.php

@@ -1,26 +1,27 @@
 <?php while(have_posts()) : the_post(); ?>
-  <a href="<?php the_permalink(); ?>" class="preview">
+  <div class="preview">
-    
     <div class="preview-thumbnail">
+      <a href="<?php the_permalink(); ?>">
         <?php the_post_thumbnail( ); ?>
+      </a>
     </div>
     <div class="preview-text">
-      <h2><?php the_title(); ?></h2>
+      <h2><a href="<?php the_permalink(); ?>" class="preview-title-link m-0 p-0"><?php the_title(); ?></a></h2>
     
       <div class="flex-that">
         <div>
           <?php
             if (!has_category('chapters')) {
               $category = get_the_category();
-              echo"<span class='badge bg-secondary small-text m-0'>" . $category[0]->cat_name . "</span>";
+              echo"<span class='badge bg-primary small-text m-0'>" . $category[0]->cat_name . "</span>";
             }
           ?>
         </div>
         <div>
-          <time><span class="badge bg-secondary small-text m-0"><?php the_time('d/m/Y') ?></span></time>
+          <time><span class="badge bg-primary small-text m-0"><?php the_time('d/m/Y') ?></span></time>
         </div>
       </div>
       <div class="preview-excerpt" aria-excerpt="true"><?php the_excerpt(); ?></div>
     </div>
-  </a>
+  </div>
 <?php endwhile; ?>

scss/components/_breadcrumb.scss

@@ -20,8 +20,6 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
         @include button($button-large);
         @include button-fullcontrol($color-background-alt, accentuate($color-background-alt), get-color("dark2"));
         margin:0 $button-group-margin 0 $button-group-margin;
-        outline-color: accentuate($color-background-alt)!important;
-        text-decoration: none;
 
         &.active {
             @include button-fullcontrol($color-secondary, $color-secondary, $color-font-light);

scss/components/_menus.scss

@@ -21,7 +21,6 @@
     margin: 0;
     justify-content: space-between;
     align-items: center;
-    text-decoration: none;
 
     word-wrap: none;
     text-overflow: ellipsis;
@@ -39,34 +38,24 @@
   .fg-light & {
     a {
       color: $color-font-light;
-      outline-color: $color-font-light;
 
       &:hover,
       &:active {
         background-color: transparentize($color-font-light, 0.7);
       }
     }
-
-    input {
-      outline-color: $color-font-light;
-    }
   }
 
   &.fg-dark,
   .fg-dark & {
     a {
       color: $color-font;
-      outline-color: $color-font;
 
       &:hover,
       &:active {
         background-color: transparentize($color-font, 0.85);
       }
     }
-
-    input {
-      outline-color: $color-font;
-    }
   }
 }
 

scss/components/_pagination.scss

@@ -10,16 +10,16 @@ nav.pagination {
       padding-right: $button_small;
       margin-right : $button_small / 8;
       margin-left: $button_small / 8;
-      text-decoration: none;
-
 
       &:not(.current) {
         @include button-color($color-background-alt);
-        outline-color: mix($color-background-alt, getTextColorFromBackground($color-background-alt), 85%);
       }
 
       &.current {
         @include background-color($color-primary);
+        &:hover {
+          @include background-color($color-primary);
+        }
       }
   }
 }

scss/components/_toasts.scss

@@ -2,6 +2,9 @@
   @include panel($card-smallpad);
   padding:$card-smallpad;
   font-size: 0.8rem;
+  a:not(:hover) {
+    background-color: rgba(0,0,0,0.2)!important;
+  }
   a {
     margin: 0;
   }

scss/core/_typography.scss

@@ -29,39 +29,24 @@ em {
   font-weight: $fontweight_base;
 }
 
-mark {
+a, a:visited, mark {
+  text-decoration: none;
   padding: 0.05rem 0.25rem;
   border-radius: 0.1rem;
 }
 
-a {
+a, a:visited {
-  color: darken($color-link, 25%);
+  @include background-color($color-link);
-  outline-color: $color-link;
+  &:hover, &:active, &:focus {
-  padding: 0.05rem;
+    color: $color-link;
-  border-radius: 0.1rem;
+    background-color: transparent;
-  text-decoration: underline dashed;
-
-  &:visited {
-    color: darken($color-link, 25%);
   }
 
-  &:hover, &:active {
+  &:focus {
-    &, &.fg-dark, .fg-light & {
+    outline-color: currentColor;
-      background-color: transparentize($color-font, 0.9);
-      text-decoration:none;
-    }
-
-    .fg-light &, &.fg-light {
-      background-color: transparentize($color-font-light, 0.8);
-      text-decoration: none;
-    }
-  }
-}
-
-a:focus-visible, input:focus-visible {
     outline-style: dashed;
     outline-width: 2px;
-  outline-offset: 1px;
+  }
 }
 
 mark {
@@ -110,9 +95,6 @@ h1, h2, h3, h4, h5, h6, h7 {
 	margin:0;
 	font-weight: $fontweight_base;
   padding-bottom: $lineheight;
-  a {
-    border: none;
-  }
 }
 
 sup, sub {

scss/custom/_featured.scss

@@ -17,7 +17,6 @@
         padding:0;
         border-radius: $card-radius;
         overflow: hidden;
-        text-decoration: none;
         .preview-item {
             width: 100%;
             height: auto;

scss/custom/_global.scss

@@ -59,8 +59,6 @@ header h1 {
 
     a, a:visited, a:hover {
       background-color:transparent;
-      outline-color:white;
-      display: block;
     }
 }
 
@@ -213,10 +211,15 @@ footer {
     padding-bottom:1.5rem;
     .columns {
       font-size:0.8rem;
-      a {
+      a,
+      a:visited {
+        &:hover,
+        &:active,
+        &:visited {
           color: $color-footer-text;
         }
       }
+    }
 }
 
 .home-toast {

scss/custom/_previews.scss

@@ -2,41 +2,37 @@
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: auto;
-    grid-gap: $lineheight / 3;
+    grid-gap: $lineheight;
-    margin: -$lineheight / 3;
     padding-bottom: $lineheight;
 
     @include md() {
         grid-template-columns: 1fr 1fr;
     }
 
-    @include lg() {
+    @include xl() {
         grid-template-columns: 1fr 1fr 1fr;
     }
 
-    @include xl() {
+    @include xxl() {
         grid-template-columns: 1fr 1fr 1fr 1fr;
     }
 }
 
 .preview-list {
-    .preview {
-        display: block;
-    }
     @include sm() {
-        .preview-thumbnail img {
+        .preview-thumbnail a {
             width: 240px;
             margin-right: $lineheight /2;
         }
     
         .preview {
             display: flex;
-            align-items: start;
+            align-items: center;
             margin-bottom: $lineheight;
         }
     }
     @include xl() {
-        .preview-thumbnail img {
+        .preview-thumbnail a {
             width: 320px;
         }
     }
@@ -44,15 +40,13 @@
 
 .preview {
     font-size: 0.8rem;
-    text-decoration: none;
-    padding: $lineheight / 3;
-    border-radius: $card-radius;
 }
 
-.preview-thumbnail {
+.preview-thumbnail a {
     display:block;
     width: 100%;
     background-color:transparent;
+    margin:auto;
     object-fit: cover;
     padding:0;
     line-height:0;
@@ -71,17 +65,12 @@
     font-family: $titlefont;
     font-weight: 800;
     height:3rem;
-    color: $color-font;
     a {
         background-color:transparent!important;
         color:$color-font;
     }
 }
 
-.preview-featured h2 {
-    color: $color-font-light;
-}
-
 .preview-excerpt {
     margin-top: $lineheight / 2;
     font-size:0.8rem;

scss/mixins/_btns.scss

@@ -19,25 +19,31 @@
 
 @mixin button-hover() {
   transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
-  &:hover, &:active {
+  &:hover, &:active, &:focus {
       background-color:transparent;
   }
+
+  &:focus {
+    outline: none;
+    box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0);
+      &:before {
+        box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
+        outline: none;
+      }
+  }
 }
 
 @mixin button-fullcontrol($background-color, $hover-color, $text-color) {
     @include colorize-shape($background-color);
-    outline-color: $background-color;
     color:$text-color;
     &:visited {
       @include colorize-shape($background-color);
       color:$text-color;
     }
     &, &:visited, &:not(.disabled):not(:disabled) {
-        &:hover, &:active {
+        &:hover, &:active, &:focus {
           @include colorize-shape($hover-color);
           color:lighten($text-color, 5%);
-          outline-color: $hover-color;
-          box-shadow:none;
         }
     }
 }

scss/utils/_colorize.scss

@@ -19,9 +19,17 @@
 @mixin bg-color($background-color) {
   @include background-color($background-color);
 
-  a {
+  &>a,
-    color:currentColor;
+  &>a:visited {
-    outline-color: currentColor;
+    color: $background-color;
+    background-color: getTextColorFromBackground($background-color);
+
+    &:hover,
+    &:active,
+    &:visited {
+      color: getTextColorFromBackground($background-color);
+      background: none;
+    }
   }
 }