From 3237b5325c130cdafeeb42b1b93ba0d650cbb3ae Mon Sep 17 00:00:00 2001
From: Kazhnuz <kazhnuz@kobold.cafe>
Date: Fri, 1 Jan 2021 00:05:33 +0100
Subject: [PATCH] fix: add breadcrumb

Fixes #5
---
 archive.php                   |  8 ++++++-
 category-blog.php             | 12 ++++++++++-
 category.php                  | 12 ++++++++++-
 scss/components/_buttons.scss |  2 +-
 single.php                    | 12 +++++++++++
 style.css                     | 39 +++++++++++++++++------------------
 tag.php                       | 11 +++++++++-
 7 files changed, 71 insertions(+), 25 deletions(-)

diff --git a/archive.php b/archive.php
index 40d6d08..f37102d 100644
--- a/archive.php
+++ b/archive.php
@@ -1,6 +1,12 @@
 <?php get_header(); ?> <!-- ouvrir header,php -->
 <main class="col-md-8">
-  <h1 class="page-title"><?php echo get_the_archive_title(); ?></h1>
+  <div class="flex-that">
+    <nav aria-label="breadcrumb">
+      <ol class="breadcrumb">
+        <li class="breadcrumb-item"><a href="<?php echo site_url(); ?>">kazhnuz.space</a></li><li class="breadcrumb-item" aria-current="page"><span class="active"><i class="fa fa-calendar"></i> <?php echo get_the_archive_title(); ?></span></li>
+      </ol>
+    </nav>
+  </div>
 
   <?php include(TEMPLATEPATH . '/components/posts-list.php'); ?>
 </main>
diff --git a/category-blog.php b/category-blog.php
index 4dfae77..950999a 100644
--- a/category-blog.php
+++ b/category-blog.php
@@ -3,6 +3,17 @@
   <?php
     $category = get_category( get_query_var( 'cat' ) );
     $cat_id = $category->cat_ID; ?>
+    <div class="flex-that">
+      <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+          <li class="breadcrumb-item"><a href="<?php echo site_url(); ?>">kazhnuz.space</a></li><li class="breadcrumb-item" aria-current="page"><span class="active"><i class="fa fa-folder-open"></i> <?php echo single_cat_title(); ?></span></li>
+        </ol>
+      </nav>
+      <div class="rss">
+        <? echo '<a href="' . get_category_link( $cat_id ) . 'feed/" title="RSS de la categorie" class="btn btn-orange" /><i class="fa fa-rss"></i></a>'; ?>
+      </div>
+
+    </div>
 
   <?php include(TEMPLATEPATH . '/components/posts-list.php'); ?>
 
@@ -14,7 +25,6 @@
     <div class="card-header"><i class="fa fa-folder-open"></i> <?php echo single_cat_title(); ?></div>
     <div class="card-body">
       <?php the_archive_description() ?>
-      <p><? echo '<a href="' . get_category_link( $cat_id ) . 'feed/" title="RSS de la categorie" />Flux RSS</a> de la categorie'; ?></p>
     </div>
   </div>
 
diff --git a/category.php b/category.php
index 3ade783..7b05327 100644
--- a/category.php
+++ b/category.php
@@ -3,6 +3,17 @@
   <?php
     $category = get_category( get_query_var( 'cat' ) );
     $cat_id = $category->cat_ID; ?>
+    <div class="flex-that">
+      <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+          <li class="breadcrumb-item"><a href="<?php echo site_url(); ?>">kazhnuz.space</a></li><li class="breadcrumb-item" aria-current="page"><span class="active"><i class="fa fa-folder-open"></i> <?php echo single_cat_title(); ?></span></li>
+        </ol>
+      </nav>
+      <div class="rss">
+        <? echo '<a href="' . get_category_link( $cat_id ) . 'feed/" title="RSS de la categorie" class="btn btn-orange" /><i class="fa fa-rss"></i></a>'; ?>
+      </div>
+
+    </div>
 
   <?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
 
@@ -14,7 +25,6 @@
     <div class="card-header"><i class="fa fa-folder-open"></i> <?php echo single_cat_title(); ?></div>
     <div class="card-body">
       <?php the_archive_description() ?>
-      <p><? echo '<a href="' . get_category_link( $cat_id ) . 'feed/" title="RSS de la categorie" />Flux RSS</a> de la categorie'; ?></p>
     </div>
   </div>
 
diff --git a/scss/components/_buttons.scss b/scss/components/_buttons.scss
index 4f7a958..c6529cc 100644
--- a/scss/components/_buttons.scss
+++ b/scss/components/_buttons.scss
@@ -139,7 +139,7 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
         display:none;
     }
 
-    a, span {
+    a, & > span {
         display:inline-block;
         @include button($button-large);
         @include button-fullcontrol($color-light2, darken($color-light2, 5%), $color-dark2);
diff --git a/single.php b/single.php
index 970215b..9e474bf 100644
--- a/single.php
+++ b/single.php
@@ -1,5 +1,17 @@
 <?php get_header(); ?> <!-- ouvrir header,php -->
 <main class="col-md-8">
+
+  <div class="flex-that">
+    <nav aria-label="breadcrumb">
+      <ol class="breadcrumb">
+        <li class='breadcrumb-item'><a href='<?php echo site_url(); ?>'>kazhnuz.space</a></li><?php $categories = get_the_category();
+          foreach( $categories as $category ) {
+            echo "<li class='breadcrumb-item'><a href='" . esc_url( get_category_link( $category->term_id ) ) . "'><i class='fa fa-folder-open'></i> " . $category->cat_name . "</a></li>";
+          } ?><li class="breadcrumb-item" aria-current="page"><span class="active"><i class="fa fa-file"></i> <?php echo the_title(); ?></span></li>
+      </ol>
+    </nav>
+  </div>
+
   <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
 
   <article class="article" id="post-<?php the_ID(); ?>">
diff --git a/style.css b/style.css
index 26648d7..ba158ac 100644
--- a/style.css
+++ b/style.css
@@ -1340,7 +1340,7 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
   padding: 0; }
   .breadcrumb li.breadcrumb-item:before {
     display: none; }
-  .breadcrumb li.breadcrumb-item a, .breadcrumb li.breadcrumb-item span {
+  .breadcrumb li.breadcrumb-item a, .breadcrumb li.breadcrumb-item > span {
     display: inline-block;
     padding: 1.5rem;
     padding-top: 0.5rem;
@@ -1359,16 +1359,16 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
     overflow: visible;
     color: #073642;
     margin: 0 0.6rem 0 0.6rem; }
-    .breadcrumb li.breadcrumb-item a:hover, .breadcrumb li.breadcrumb-item a:active, .breadcrumb li.breadcrumb-item a:focus, a:hover > .breadcrumb li.breadcrumb-item a, a:active > .breadcrumb li.breadcrumb-item a, a:focus > .breadcrumb li.breadcrumb-item a, .breadcrumb li.breadcrumb-item span:hover, .breadcrumb li.breadcrumb-item span:active, .breadcrumb li.breadcrumb-item span:focus, a:hover > .breadcrumb li.breadcrumb-item span, a:active > .breadcrumb li.breadcrumb-item span, a:focus > .breadcrumb li.breadcrumb-item span {
+    .breadcrumb li.breadcrumb-item a:hover, .breadcrumb li.breadcrumb-item a:active, .breadcrumb li.breadcrumb-item a:focus, a:hover > .breadcrumb li.breadcrumb-item a, a:active > .breadcrumb li.breadcrumb-item a, a:focus > .breadcrumb li.breadcrumb-item a, .breadcrumb li.breadcrumb-item > span:hover, .breadcrumb li.breadcrumb-item > span:active, .breadcrumb li.breadcrumb-item > span:focus, a:hover > .breadcrumb li.breadcrumb-item > span, a:active > .breadcrumb li.breadcrumb-item > span, a:focus > .breadcrumb li.breadcrumb-item > span {
       text-decoration: none;
       background-color: transparent; }
-    .breadcrumb li.breadcrumb-item a:focus, .breadcrumb li.breadcrumb-item span:focus {
+    .breadcrumb li.breadcrumb-item a:focus, .breadcrumb li.breadcrumb-item > span:focus {
       outline: none;
       box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0); }
-      .breadcrumb li.breadcrumb-item a:focus:before, .breadcrumb li.breadcrumb-item span:focus:before {
+      .breadcrumb li.breadcrumb-item a:focus:before, .breadcrumb li.breadcrumb-item > span:focus:before {
         box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
         outline: none; }
-    .breadcrumb li.breadcrumb-item a:before, .breadcrumb li.breadcrumb-item span:before {
+    .breadcrumb li.breadcrumb-item a:before, .breadcrumb li.breadcrumb-item > span:before {
       content: " ";
       position: absolute;
       top: 0;
@@ -1378,30 +1378,30 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
       z-index: -1;
       transform: skewX(-15deg);
       transition: background-color 0.3s; }
-    .breadcrumb li.breadcrumb-item a:before, .breadcrumb li.breadcrumb-item span:before {
+    .breadcrumb li.breadcrumb-item a:before, .breadcrumb li.breadcrumb-item > span:before {
       background-color: #eee8d5; }
-    .breadcrumb li.breadcrumb-item a:visited, .breadcrumb li.breadcrumb-item span:visited {
+    .breadcrumb li.breadcrumb-item a:visited, .breadcrumb li.breadcrumb-item > span:visited {
       color: #073642; }
-      .breadcrumb li.breadcrumb-item a:visited:before, .breadcrumb li.breadcrumb-item span:visited:before {
+      .breadcrumb li.breadcrumb-item a:visited:before, .breadcrumb li.breadcrumb-item > span:visited:before {
         background-color: #eee8d5; }
-    .breadcrumb li.breadcrumb-item a:hover, .breadcrumb li.breadcrumb-item a:active, .breadcrumb li.breadcrumb-item a:focus, a:hover > .breadcrumb li.breadcrumb-item a, a:active > .breadcrumb li.breadcrumb-item a, a:focus > .breadcrumb li.breadcrumb-item a, .breadcrumb li.breadcrumb-item a:visited:hover, .breadcrumb li.breadcrumb-item a:visited:active, .breadcrumb li.breadcrumb-item a:visited:focus, a:hover > .breadcrumb li.breadcrumb-item a:visited, a:active > .breadcrumb li.breadcrumb-item a:visited, a:focus > .breadcrumb li.breadcrumb-item a:visited, .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled):hover, .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled):active, .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled):focus, a:hover > .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled), a:active > .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled), a:focus > .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled), .breadcrumb li.breadcrumb-item span:hover, .breadcrumb li.breadcrumb-item span:active, .breadcrumb li.breadcrumb-item span:focus, a:hover > .breadcrumb li.breadcrumb-item span, a:active > .breadcrumb li.breadcrumb-item span, a:focus > .breadcrumb li.breadcrumb-item span, .breadcrumb li.breadcrumb-item span:visited:hover, .breadcrumb li.breadcrumb-item span:visited:active, .breadcrumb li.breadcrumb-item span:visited:focus, a:hover > .breadcrumb li.breadcrumb-item span:visited, a:active > .breadcrumb li.breadcrumb-item span:visited, a:focus > .breadcrumb li.breadcrumb-item span:visited, .breadcrumb li.breadcrumb-item span:not(.disabled):not(:disabled):hover, .breadcrumb li.breadcrumb-item span:not(.disabled):not(:disabled):active, .breadcrumb li.breadcrumb-item span:not(.disabled):not(:disabled):focus, a:hover > .breadcrumb li.breadcrumb-item span:not(.disabled):not(:disabled), a:active > .breadcrumb li.breadcrumb-item span:not(.disabled):not(:disabled), a:focus > .breadcrumb li.breadcrumb-item span:not(.disabled):not(:disabled) {
+    .breadcrumb li.breadcrumb-item a:hover, .breadcrumb li.breadcrumb-item a:active, .breadcrumb li.breadcrumb-item a:focus, a:hover > .breadcrumb li.breadcrumb-item a, a:active > .breadcrumb li.breadcrumb-item a, a:focus > .breadcrumb li.breadcrumb-item a, .breadcrumb li.breadcrumb-item a:visited:hover, .breadcrumb li.breadcrumb-item a:visited:active, .breadcrumb li.breadcrumb-item a:visited:focus, a:hover > .breadcrumb li.breadcrumb-item a:visited, a:active > .breadcrumb li.breadcrumb-item a:visited, a:focus > .breadcrumb li.breadcrumb-item a:visited, .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled):hover, .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled):active, .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled):focus, a:hover > .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled), a:active > .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled), a:focus > .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled), .breadcrumb li.breadcrumb-item > span:hover, .breadcrumb li.breadcrumb-item > span:active, .breadcrumb li.breadcrumb-item > span:focus, a:hover > .breadcrumb li.breadcrumb-item > span, a:active > .breadcrumb li.breadcrumb-item > span, a:focus > .breadcrumb li.breadcrumb-item > span, .breadcrumb li.breadcrumb-item > span:visited:hover, .breadcrumb li.breadcrumb-item > span:visited:active, .breadcrumb li.breadcrumb-item > span:visited:focus, a:hover > .breadcrumb li.breadcrumb-item > span:visited, a:active > .breadcrumb li.breadcrumb-item > span:visited, a:focus > .breadcrumb li.breadcrumb-item > span:visited, .breadcrumb li.breadcrumb-item > span:not(.disabled):not(:disabled):hover, .breadcrumb li.breadcrumb-item > span:not(.disabled):not(:disabled):active, .breadcrumb li.breadcrumb-item > span:not(.disabled):not(:disabled):focus, a:hover > .breadcrumb li.breadcrumb-item > span:not(.disabled):not(:disabled), a:active > .breadcrumb li.breadcrumb-item > span:not(.disabled):not(:disabled), a:focus > .breadcrumb li.breadcrumb-item > span:not(.disabled):not(:disabled) {
       color: #094959; }
-      .breadcrumb li.breadcrumb-item a:hover:before, .breadcrumb li.breadcrumb-item a:active:before, .breadcrumb li.breadcrumb-item a:focus:before, a:hover > .breadcrumb li.breadcrumb-item a:before, a:active > .breadcrumb li.breadcrumb-item a:before, a:focus > .breadcrumb li.breadcrumb-item a:before, .breadcrumb li.breadcrumb-item a:visited:hover:before, .breadcrumb li.breadcrumb-item a:visited:active:before, .breadcrumb li.breadcrumb-item a:visited:focus:before, a:hover > .breadcrumb li.breadcrumb-item a:visited:before, a:active > .breadcrumb li.breadcrumb-item a:visited:before, a:focus > .breadcrumb li.breadcrumb-item a:visited:before, .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled):hover:before, .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled):active:before, .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled):focus:before, a:hover > .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled):before, a:active > .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled):before, a:focus > .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled):before, .breadcrumb li.breadcrumb-item span:hover:before, .breadcrumb li.breadcrumb-item span:active:before, .breadcrumb li.breadcrumb-item span:focus:before, a:hover > .breadcrumb li.breadcrumb-item span:before, a:active > .breadcrumb li.breadcrumb-item span:before, a:focus > .breadcrumb li.breadcrumb-item span:before, .breadcrumb li.breadcrumb-item span:visited:hover:before, .breadcrumb li.breadcrumb-item span:visited:active:before, .breadcrumb li.breadcrumb-item span:visited:focus:before, a:hover > .breadcrumb li.breadcrumb-item span:visited:before, a:active > .breadcrumb li.breadcrumb-item span:visited:before, a:focus > .breadcrumb li.breadcrumb-item span:visited:before, .breadcrumb li.breadcrumb-item span:not(.disabled):not(:disabled):hover:before, .breadcrumb li.breadcrumb-item span:not(.disabled):not(:disabled):active:before, .breadcrumb li.breadcrumb-item span:not(.disabled):not(:disabled):focus:before, a:hover > .breadcrumb li.breadcrumb-item span:not(.disabled):not(:disabled):before, a:active > .breadcrumb li.breadcrumb-item span:not(.disabled):not(:disabled):before, a:focus > .breadcrumb li.breadcrumb-item span:not(.disabled):not(:disabled):before {
+      .breadcrumb li.breadcrumb-item a:hover:before, .breadcrumb li.breadcrumb-item a:active:before, .breadcrumb li.breadcrumb-item a:focus:before, a:hover > .breadcrumb li.breadcrumb-item a:before, a:active > .breadcrumb li.breadcrumb-item a:before, a:focus > .breadcrumb li.breadcrumb-item a:before, .breadcrumb li.breadcrumb-item a:visited:hover:before, .breadcrumb li.breadcrumb-item a:visited:active:before, .breadcrumb li.breadcrumb-item a:visited:focus:before, a:hover > .breadcrumb li.breadcrumb-item a:visited:before, a:active > .breadcrumb li.breadcrumb-item a:visited:before, a:focus > .breadcrumb li.breadcrumb-item a:visited:before, .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled):hover:before, .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled):active:before, .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled):focus:before, a:hover > .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled):before, a:active > .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled):before, a:focus > .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled):before, .breadcrumb li.breadcrumb-item > span:hover:before, .breadcrumb li.breadcrumb-item > span:active:before, .breadcrumb li.breadcrumb-item > span:focus:before, a:hover > .breadcrumb li.breadcrumb-item > span:before, a:active > .breadcrumb li.breadcrumb-item > span:before, a:focus > .breadcrumb li.breadcrumb-item > span:before, .breadcrumb li.breadcrumb-item > span:visited:hover:before, .breadcrumb li.breadcrumb-item > span:visited:active:before, .breadcrumb li.breadcrumb-item > span:visited:focus:before, a:hover > .breadcrumb li.breadcrumb-item > span:visited:before, a:active > .breadcrumb li.breadcrumb-item > span:visited:before, a:focus > .breadcrumb li.breadcrumb-item > span:visited:before, .breadcrumb li.breadcrumb-item > span:not(.disabled):not(:disabled):hover:before, .breadcrumb li.breadcrumb-item > span:not(.disabled):not(:disabled):active:before, .breadcrumb li.breadcrumb-item > span:not(.disabled):not(:disabled):focus:before, a:hover > .breadcrumb li.breadcrumb-item > span:not(.disabled):not(:disabled):before, a:active > .breadcrumb li.breadcrumb-item > span:not(.disabled):not(:disabled):before, a:focus > .breadcrumb li.breadcrumb-item > span:not(.disabled):not(:disabled):before {
         background-color: #e7dec3; }
-    .breadcrumb li.breadcrumb-item a:before, .breadcrumb li.breadcrumb-item span:before {
+    .breadcrumb li.breadcrumb-item a:before, .breadcrumb li.breadcrumb-item > span:before {
       content: " " !important;
       border-right: 1px solid rgba(0, 0, 0, 0.2); }
-    .breadcrumb li.breadcrumb-item a.active, .breadcrumb li.breadcrumb-item span.active {
+    .breadcrumb li.breadcrumb-item a.active, .breadcrumb li.breadcrumb-item > span.active {
       color: #fdf6e3; }
-      .breadcrumb li.breadcrumb-item a.active:before, .breadcrumb li.breadcrumb-item span.active:before {
+      .breadcrumb li.breadcrumb-item a.active:before, .breadcrumb li.breadcrumb-item > span.active:before {
         background-color: #d33682; }
-      .breadcrumb li.breadcrumb-item a.active:visited, .breadcrumb li.breadcrumb-item span.active:visited {
+      .breadcrumb li.breadcrumb-item a.active:visited, .breadcrumb li.breadcrumb-item > span.active:visited {
         color: #fdf6e3; }
-        .breadcrumb li.breadcrumb-item a.active:visited:before, .breadcrumb li.breadcrumb-item span.active:visited:before {
+        .breadcrumb li.breadcrumb-item a.active:visited:before, .breadcrumb li.breadcrumb-item > span.active:visited:before {
           background-color: #d33682; }
-      .breadcrumb li.breadcrumb-item a.active:hover, .breadcrumb li.breadcrumb-item a.active:active, .breadcrumb li.breadcrumb-item a.active:focus, a:hover > .breadcrumb li.breadcrumb-item a.active, a:active > .breadcrumb li.breadcrumb-item a.active, a:focus > .breadcrumb li.breadcrumb-item a.active, .breadcrumb li.breadcrumb-item a.active:visited:hover, .breadcrumb li.breadcrumb-item a.active:visited:active, .breadcrumb li.breadcrumb-item a.active:visited:focus, a:hover > .breadcrumb li.breadcrumb-item a.active:visited, a:active > .breadcrumb li.breadcrumb-item a.active:visited, a:focus > .breadcrumb li.breadcrumb-item a.active:visited, .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):hover, .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):active, .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):focus, a:hover > .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled), a:active > .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled), a:focus > .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled), .breadcrumb li.breadcrumb-item span.active:hover, .breadcrumb li.breadcrumb-item span.active:active, .breadcrumb li.breadcrumb-item span.active:focus, a:hover > .breadcrumb li.breadcrumb-item span.active, a:active > .breadcrumb li.breadcrumb-item span.active, a:focus > .breadcrumb li.breadcrumb-item span.active, .breadcrumb li.breadcrumb-item span.active:visited:hover, .breadcrumb li.breadcrumb-item span.active:visited:active, .breadcrumb li.breadcrumb-item span.active:visited:focus, a:hover > .breadcrumb li.breadcrumb-item span.active:visited, a:active > .breadcrumb li.breadcrumb-item span.active:visited, a:focus > .breadcrumb li.breadcrumb-item span.active:visited, .breadcrumb li.breadcrumb-item span.active:not(.disabled):not(:disabled):hover, .breadcrumb li.breadcrumb-item span.active:not(.disabled):not(:disabled):active, .breadcrumb li.breadcrumb-item span.active:not(.disabled):not(:disabled):focus, a:hover > .breadcrumb li.breadcrumb-item span.active:not(.disabled):not(:disabled), a:active > .breadcrumb li.breadcrumb-item span.active:not(.disabled):not(:disabled), a:focus > .breadcrumb li.breadcrumb-item span.active:not(.disabled):not(:disabled) {
+      .breadcrumb li.breadcrumb-item a.active:hover, .breadcrumb li.breadcrumb-item a.active:active, .breadcrumb li.breadcrumb-item a.active:focus, a:hover > .breadcrumb li.breadcrumb-item a.active, a:active > .breadcrumb li.breadcrumb-item a.active, a:focus > .breadcrumb li.breadcrumb-item a.active, .breadcrumb li.breadcrumb-item a.active:visited:hover, .breadcrumb li.breadcrumb-item a.active:visited:active, .breadcrumb li.breadcrumb-item a.active:visited:focus, a:hover > .breadcrumb li.breadcrumb-item a.active:visited, a:active > .breadcrumb li.breadcrumb-item a.active:visited, a:focus > .breadcrumb li.breadcrumb-item a.active:visited, .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):hover, .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):active, .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):focus, a:hover > .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled), a:active > .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled), a:focus > .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled), .breadcrumb li.breadcrumb-item > span.active:hover, .breadcrumb li.breadcrumb-item > span.active:active, .breadcrumb li.breadcrumb-item > span.active:focus, a:hover > .breadcrumb li.breadcrumb-item > span.active, a:active > .breadcrumb li.breadcrumb-item > span.active, a:focus > .breadcrumb li.breadcrumb-item > span.active, .breadcrumb li.breadcrumb-item > span.active:visited:hover, .breadcrumb li.breadcrumb-item > span.active:visited:active, .breadcrumb li.breadcrumb-item > span.active:visited:focus, a:hover > .breadcrumb li.breadcrumb-item > span.active:visited, a:active > .breadcrumb li.breadcrumb-item > span.active:visited, a:focus > .breadcrumb li.breadcrumb-item > span.active:visited, .breadcrumb li.breadcrumb-item > span.active:not(.disabled):not(:disabled):hover, .breadcrumb li.breadcrumb-item > span.active:not(.disabled):not(:disabled):active, .breadcrumb li.breadcrumb-item > span.active:not(.disabled):not(:disabled):focus, a:hover > .breadcrumb li.breadcrumb-item > span.active:not(.disabled):not(:disabled), a:active > .breadcrumb li.breadcrumb-item > span.active:not(.disabled):not(:disabled), a:focus > .breadcrumb li.breadcrumb-item > span.active:not(.disabled):not(:disabled) {
         color: #fffefb; }
-        .breadcrumb li.breadcrumb-item a.active:hover:before, .breadcrumb li.breadcrumb-item a.active:active:before, .breadcrumb li.breadcrumb-item a.active:focus:before, a:hover > .breadcrumb li.breadcrumb-item a.active:before, a:active > .breadcrumb li.breadcrumb-item a.active:before, a:focus > .breadcrumb li.breadcrumb-item a.active:before, .breadcrumb li.breadcrumb-item a.active:visited:hover:before, .breadcrumb li.breadcrumb-item a.active:visited:active:before, .breadcrumb li.breadcrumb-item a.active:visited:focus:before, a:hover > .breadcrumb li.breadcrumb-item a.active:visited:before, a:active > .breadcrumb li.breadcrumb-item a.active:visited:before, a:focus > .breadcrumb li.breadcrumb-item a.active:visited:before, .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):hover:before, .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):active:before, .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):focus:before, a:hover > .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):before, a:active > .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):before, a:focus > .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):before, .breadcrumb li.breadcrumb-item span.active:hover:before, .breadcrumb li.breadcrumb-item span.active:active:before, .breadcrumb li.breadcrumb-item span.active:focus:before, a:hover > .breadcrumb li.breadcrumb-item span.active:before, a:active > .breadcrumb li.breadcrumb-item span.active:before, a:focus > .breadcrumb li.breadcrumb-item span.active:before, .breadcrumb li.breadcrumb-item span.active:visited:hover:before, .breadcrumb li.breadcrumb-item span.active:visited:active:before, .breadcrumb li.breadcrumb-item span.active:visited:focus:before, a:hover > .breadcrumb li.breadcrumb-item span.active:visited:before, a:active > .breadcrumb li.breadcrumb-item span.active:visited:before, a:focus > .breadcrumb li.breadcrumb-item span.active:visited:before, .breadcrumb li.breadcrumb-item span.active:not(.disabled):not(:disabled):hover:before, .breadcrumb li.breadcrumb-item span.active:not(.disabled):not(:disabled):active:before, .breadcrumb li.breadcrumb-item span.active:not(.disabled):not(:disabled):focus:before, a:hover > .breadcrumb li.breadcrumb-item span.active:not(.disabled):not(:disabled):before, a:active > .breadcrumb li.breadcrumb-item span.active:not(.disabled):not(:disabled):before, a:focus > .breadcrumb li.breadcrumb-item span.active:not(.disabled):not(:disabled):before {
+        .breadcrumb li.breadcrumb-item a.active:hover:before, .breadcrumb li.breadcrumb-item a.active:active:before, .breadcrumb li.breadcrumb-item a.active:focus:before, a:hover > .breadcrumb li.breadcrumb-item a.active:before, a:active > .breadcrumb li.breadcrumb-item a.active:before, a:focus > .breadcrumb li.breadcrumb-item a.active:before, .breadcrumb li.breadcrumb-item a.active:visited:hover:before, .breadcrumb li.breadcrumb-item a.active:visited:active:before, .breadcrumb li.breadcrumb-item a.active:visited:focus:before, a:hover > .breadcrumb li.breadcrumb-item a.active:visited:before, a:active > .breadcrumb li.breadcrumb-item a.active:visited:before, a:focus > .breadcrumb li.breadcrumb-item a.active:visited:before, .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):hover:before, .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):active:before, .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):focus:before, a:hover > .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):before, a:active > .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):before, a:focus > .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):before, .breadcrumb li.breadcrumb-item > span.active:hover:before, .breadcrumb li.breadcrumb-item > span.active:active:before, .breadcrumb li.breadcrumb-item > span.active:focus:before, a:hover > .breadcrumb li.breadcrumb-item > span.active:before, a:active > .breadcrumb li.breadcrumb-item > span.active:before, a:focus > .breadcrumb li.breadcrumb-item > span.active:before, .breadcrumb li.breadcrumb-item > span.active:visited:hover:before, .breadcrumb li.breadcrumb-item > span.active:visited:active:before, .breadcrumb li.breadcrumb-item > span.active:visited:focus:before, a:hover > .breadcrumb li.breadcrumb-item > span.active:visited:before, a:active > .breadcrumb li.breadcrumb-item > span.active:visited:before, a:focus > .breadcrumb li.breadcrumb-item > span.active:visited:before, .breadcrumb li.breadcrumb-item > span.active:not(.disabled):not(:disabled):hover:before, .breadcrumb li.breadcrumb-item > span.active:not(.disabled):not(:disabled):active:before, .breadcrumb li.breadcrumb-item > span.active:not(.disabled):not(:disabled):focus:before, a:hover > .breadcrumb li.breadcrumb-item > span.active:not(.disabled):not(:disabled):before, a:active > .breadcrumb li.breadcrumb-item > span.active:not(.disabled):not(:disabled):before, a:focus > .breadcrumb li.breadcrumb-item > span.active:not(.disabled):not(:disabled):before {
           background-color: #d33682; }
 
 .btn-blue, a.btn-blue, .badge-blue, .chip-blue, a.chip-blue, a.badge-blue, .label-blue, a.label-blue, label.label-blue {
@@ -1951,10 +1951,9 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
     top: -240px;
     margin: auto; } }
 
-.article-meta, .article-nav {
+.flex-that {
   display: flex;
-  justify-content: space-between;
-  padding-bottom: 1.5rem; }
+  justify-content: space-between; }
 
 strong.btn-fake {
   padding: 1.5rem;
diff --git a/tag.php b/tag.php
index b2434dc..605d9cf 100644
--- a/tag.php
+++ b/tag.php
@@ -2,6 +2,16 @@
 <main class="col-md-8">
     <?php $tag = get_category( get_query_var( 'tag' ) );
     $tag_id = $tag->ID;?>
+    <div class="flex-that">
+      <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+          <li class="breadcrumb-item"><a href="<?php echo site_url(); ?>">kazhnuz.space</a></li><li class="breadcrumb-item" aria-current="page"><span class="active"><i class="fa fa-tag"></i> <?php echo single_cat_title(); ?></span></li>
+        </ol>
+      </nav>
+      <div class="rss">
+        <? echo '<a href="' . get_tag_link( $tag_id ) . 'feed/" title="RSS de la categorie" class="btn btn-orange" /><i class="fa fa-rss"></i></a>'; ?>
+      </div>
+    </div>
 
     <?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
 </main>
@@ -11,7 +21,6 @@
     <div class="card-header"><i class="fa fa-fw fa-tag"></i> <?php echo single_cat_title(); ?></div>
     <div class="card-body">
       <?php echo tag_description();?>
-      <p><? echo '<a href="' . get_tag_link( $tag_id ) . 'feed/" title="RSS du tag" />Flux RSS</a> du tag'; ?></p>
       <?php $infourl = get_term_meta(get_queried_object_id(), 'plus-dinfo', true);
       if ($infourl != null) {
         echo '<p class="align-center"><a href="' . $infourl . '" class="btn btn-readmore">Plus d\'info</a></p>';