Fix: Corrections liens

Fixes #14
Fixes #8

category.php

@@ -10,6 +10,5 @@
 
 </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-primary'>" . $category[0]->cat_name . "</span>"; ?>
+              echo"<span class='badge bg-secondary'>" . $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">
+<footer class="bg-dark fg-light">
   <nav class="container menu toolbar bg-light fg-dark">
   <ul class="f-end">
     <?php

components/previews.php

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

scss/components/_breadcrumb.scss

@@ -20,6 +20,8 @@ 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,6 +21,7 @@
     margin: 0;
     justify-content: space-between;
     align-items: center;
+    text-decoration: none;
 
     word-wrap: none;
     text-overflow: ellipsis;
@@ -38,24 +39,34 @@
   .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,9 +2,6 @@
   @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,26 +29,41 @@ em {
   font-weight: $fontweight_base;
 }
 
-a, a:visited, mark {
+mark {
-  text-decoration: none;
   padding: 0.05rem 0.25rem;
   border-radius: 0.1rem;
 }
 
-a, a:visited {
+a {
-  @include background-color($color-link);
+  color: darken($color-link, 25%);
-  &:hover, &:active, &:focus {
+  outline-color: $color-link;
-    color: $color-link;
+  padding: 0.05rem;
-    background-color: transparent;
+  border-radius: 0.1rem;
+  text-decoration: underline dashed;
+
+  &:visited {
+    color: darken($color-link, 25%);
   }
 
-  &:focus {
+  &:hover, &:active {
-    outline-color: currentColor;
+    &, &.fg-dark, .fg-light & {
-    outline-style: dashed;
+      background-color: transparentize($color-font, 0.9);
-    outline-width: 2px;
+      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 {
   background-color: lighten($color-mark, 30%);
   color: inherit;
@@ -95,6 +110,9 @@ 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,6 +17,7 @@
         padding:0;
         border-radius: $card-radius;
         overflow: hidden;
+        text-decoration: none;
         .preview-item {
             width: 100%;
             height: auto;

scss/custom/_global.scss

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

scss/custom/_previews.scss

@@ -2,37 +2,41 @@
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: auto;
-    grid-gap: $lineheight;
+    grid-gap: $lineheight / 3;
+    margin: -$lineheight / 3;
     padding-bottom: $lineheight;
 
     @include md() {
         grid-template-columns: 1fr 1fr;
     }
 
-    @include xl() {
+    @include lg() {
         grid-template-columns: 1fr 1fr 1fr;
     }
 
-    @include xxl() {
+    @include xl() {
         grid-template-columns: 1fr 1fr 1fr 1fr;
     }
 }
 
 .preview-list {
+    .preview {
+        display: block;
+    }
     @include sm() {
-        .preview-thumbnail a {
+        .preview-thumbnail img {
             width: 240px;
             margin-right: $lineheight /2;
         }
     
         .preview {
             display: flex;
-            align-items: center;
+            align-items: start;
             margin-bottom: $lineheight;
         }
     }
     @include xl() {
-        .preview-thumbnail a {
+        .preview-thumbnail img {
             width: 320px;
         }
     }
@@ -40,13 +44,15 @@
 
 .preview {
     font-size: 0.8rem;
+    text-decoration: none;
+    padding: $lineheight / 3;
+    border-radius: $card-radius;
 }
 
-.preview-thumbnail a {
+.preview-thumbnail {
     display:block;
     width: 100%;
     background-color:transparent;
-    margin:auto;
     object-fit: cover;
     padding:0;
     line-height:0;
@@ -65,12 +71,17 @@
     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,31 +19,25 @@
 
 @mixin button-hover() {
   transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
-  &:hover, &:active, &:focus {
+  &:hover, &:active {
       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, &:focus {
+        &:hover, &:active {
           @include colorize-shape($hover-color);
           color:lighten($text-color, 5%);
+          outline-color: $hover-color;
+          box-shadow:none;
         }
     }
 }

scss/utils/_colorize.scss

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