From 6b8fbca5957f91b34c6bcf64637a4ccbe45785ce Mon Sep 17 00:00:00 2001
From: Kazhnuz <kazhnuz@kobold.cafe>
Date: Sun, 18 Dec 2022 16:41:18 +0100
Subject: [PATCH] fix: responsive fixes

---
 category.php                   |  4 +--
 components/footer-content.php  |  6 ++--
 components/navbar-category.php |  2 +-
 components/navbar-pages.php    |  4 +--
 functions.php                  |  4 +--
 home.php                       | 20 ++++++++++-
 scss/custom/_global.scss       | 11 ++++--
 scss/custom/_previews.scss     |  2 +-
 scss/mixins/_responsive.scss   | 34 ++++++++++++++++++
 scss/utils/_display.scss       | 16 ++++++++-
 style.css                      | 66 ++++++++++++++++++++++++++++++----
 tag.php                        | 17 +--------
 12 files changed, 148 insertions(+), 38 deletions(-)

diff --git a/category.php b/category.php
index 98a0f38..7597d38 100644
--- a/category.php
+++ b/category.php
@@ -11,7 +11,5 @@
 </main>
 
 <!-- Sidebar custom pour contenir la description -->
-<aside class="sidebar">
-  <?php include(TEMPLATEPATH . '/components/sidebar-content.php'); ?>
-</aside>
+<?php get_sidebar(); ?>
 <?php get_footer(); ?>
diff --git a/components/footer-content.php b/components/footer-content.php
index 5ed06c5..a28223e 100644
--- a/components/footer-content.php
+++ b/components/footer-content.php
@@ -14,17 +14,17 @@
   </ul>
 </nav>
   <div class="container columns">
-    <div class="col-md-4">
+    <div class="col-12 col-md-4">
       <p>Les contenus sont diffusé sous licence Creative Common Attribution - Partage à l'Identique 4.0 - hors mention contraire.</p>
       <p>Ces licences vous autorise à partager et copier mes travaux, tant que vous me citiez en source, et que vous autorisez la même chose pour les travaux qui en seraient dérivés. N'hésitez pas à partager ! <i class="text-red fa fa-heart" aria-hidden="true"></i></p>
     </div>
 
-    <div class="col-md-4">
+    <div class="col-12 col-md-4">
       <p>Ce site est propulsé par <a href="https://wordpress.org">Wordpress</a></p>
       <p>Le <a href="https://git.kobold.cafe/quarante-douze/qdouze2-wordpress-theme">theme wordpress</a> de ce site est disponible sous licence CC BY-SA et GPL v3. Il utilise <a href="https://picturepan2.github.io/spectre/">Spectre</a> et <a href="https://forkawesome.github.io/Fork-Awesome/">Fork-Awesome</a>.</p>
     </div>
 
-    <div class="col-md-4">
+    <div class="col-12 col-md-4">
       <p>Toute critique, remarque, etc. est la bienvenue. Pour cela, vous pouvez me contacter à kazhnuz [at] kobold [point] cafe ou sur mes <a href="https://kazhnuz.space/links">réseaux sociaux</a></p>
     </div>
   </div>
diff --git a/components/navbar-category.php b/components/navbar-category.php
index 89483f2..3d5d444 100644
--- a/components/navbar-category.php
+++ b/components/navbar-category.php
@@ -1,4 +1,4 @@
-<nav class="container menu toolbar bg-light fg-dark categories">
+<nav class="container menu toolbar bg-light fg-dark categories d-none d-flex-sm">
   <ul class="f-around">
     <?php
       $categories = get_categories( array(
diff --git a/components/navbar-pages.php b/components/navbar-pages.php
index 1a28ca7..1b13239 100644
--- a/components/navbar-pages.php
+++ b/components/navbar-pages.php
@@ -1,5 +1,5 @@
 <div class="osd">
-  <nav class="container menu toolbar fg-light">
+  <nav class="container menu toolbar fg-light d-block d-flex-sm">
     <ul>
       <li>
         <a href="<?php echo site_url(); ?>" class="menu-item">
@@ -15,7 +15,7 @@
         ?>
     </ul>
 
-    <ul class="f-end">
+    <ul class="f-end d-none d-flex-sm">
       <?php
         $listmenu = get_nav_menu_locations();
         $menu = wp_get_nav_menu_items($listmenu['top-navbar-2']);
diff --git a/functions.php b/functions.php
index dca1a8c..44502f8 100644
--- a/functions.php
+++ b/functions.php
@@ -150,7 +150,7 @@ function kspace_cat_breadcrumb_nav($categoryName, $icon) {
 
 function kspace_cat_breadcrumb($categoryName, $icon) {
 ?>
-    <div class="flex-that">
+    <div class="flex-that d-none d-flex-sm">
         <?php kspace_cat_breadcrumb_nav($categoryName, $icon); ?>
     </div>
 <?php
@@ -158,7 +158,7 @@ function kspace_cat_breadcrumb($categoryName, $icon) {
 
 function kspace_cat_breadcrumb_with_rss($categoryName, $icon, $categoryType, $rssLink) {
 ?>
-    <div class="flex-that">
+    <div class="flex-that d-none d-flex-sm">
         <?php kspace_cat_breadcrumb_nav($categoryName, $icon); ?>
         <div class="rss">
             <a href="<?php echo $rssLink; ?>" class="btn btn-orange d-block m-0" /><i class="fa fa-rss" aria-hidden="true"></i><span class="sr-only">Flux RSS de <?php echo $categoryType; ?></span></a>
diff --git a/home.php b/home.php
index 9f73ff1..74b3003 100644
--- a/home.php
+++ b/home.php
@@ -18,12 +18,30 @@
 
     <?php if ( !is_paged() ) {
       ?>
-        <div class="toast mb-1 bg-blue" style="width:800px;margin:auto;"><strong class="m-0"><i class="fa fa-fw fa-info"></i> Note :</strong>  Si vous êtes intéressé pour découvrir plus
+        <div class="toast mb-1 bg-blue home-toast"><strong class="m-0"><i class="fa fa-fw fa-info"></i> Note :</strong>  Si vous êtes intéressé pour découvrir plus
         de contenus trouvé sur internet, vous pouvez aussi regarder mon <a href="http://shaarli.kazhnuz.space/">Shaarli</a>, qui sert plus à
         partager des petites découverte rigolote ou intéressantes.</div>
       <?php
     }
   ?>
 
+  <nav class="container menu bg-light fg-dark categories d-block d-none-sm">
+  <ul class="f-around">
+    <?php
+      $categories = get_categories( array(
+        'orderby' => 'name',
+        'order'   => 'ASC'
+      ) );
+
+      foreach( $categories as $category ) {?>
+        <li>
+          <a class="menu-item" href="<?php echo get_category_link($category->term_id) ?>"><span><i class="fa fa-fw fa-folder"></i> <?php echo $category->name ?></span></a>
+        </li>
+      <?php }
+    ?>
+  </ul>
+</nav>
+
+
 </main>
 <?php get_footer();  ?>
diff --git a/scss/custom/_global.scss b/scss/custom/_global.scss
index 46655f3..57c1a25 100644
--- a/scss/custom/_global.scss
+++ b/scss/custom/_global.scss
@@ -51,9 +51,10 @@ header h1 {
     text-align:center;
 
     img {
-      width: 800px;
+      max-width: 800px;
       height: auto;
       margin-top:0rem;
+      width: 100%;
     }
 
     a, a:visited, a:hover {
@@ -102,7 +103,7 @@ header h1 {
     "main"
     "side";
 
-    @include xl() {
+    @include lg() {
       grid-template-columns: auto 360px;
       grid-template-areas: "main side";
     }
@@ -220,3 +221,9 @@ footer {
       }
     }
 }
+
+.home-toast {
+  max-width:800px;
+  width:100%;
+  margin:auto;
+}
\ No newline at end of file
diff --git a/scss/custom/_previews.scss b/scss/custom/_previews.scss
index b3234eb..3bb1b58 100644
--- a/scss/custom/_previews.scss
+++ b/scss/custom/_previews.scss
@@ -31,7 +31,7 @@
             margin-bottom: $lineheight;
         }
     }
-    @include lg() {
+    @include xl() {
         .preview-thumbnail a {
             width: 320px;
         }
diff --git a/scss/mixins/_responsive.scss b/scss/mixins/_responsive.scss
index 9619add..6a6c98a 100644
--- a/scss/mixins/_responsive.scss
+++ b/scss/mixins/_responsive.scss
@@ -48,3 +48,37 @@
     max-width: $size;
     margin:auto;
 }
+
+@mixin responsive() {
+   @content;
+   
+   &-sm {
+      @include sm() {
+         @content;
+      }
+   }
+
+   &-md {
+      @include md() {
+         @content;
+      }
+   }
+
+   &-lg {
+      @include lg() {
+         @content;
+      }
+   }
+
+   &-xl {
+      @include xl() {
+         @content;
+      }
+   }
+
+   &-xxl {
+      @include xxl() {
+         @content;
+      }
+   }
+}
\ No newline at end of file
diff --git a/scss/utils/_display.scss b/scss/utils/_display.scss
index 31cdaaa..8b31a5f 100644
--- a/scss/utils/_display.scss
+++ b/scss/utils/_display.scss
@@ -1,3 +1,17 @@
 .d-block {
-    display:block;
+    @include responsive() {
+        display: block!important;
+    }
+}
+
+.d-none {
+    @include responsive() {
+        display: none!important;
+    }
+}
+
+.d-flex {
+    @include responsive() {
+        display: flex!important;
+    }
 }
\ No newline at end of file
diff --git a/style.css b/style.css
index bc246ef..e4be0f3 100644
--- a/style.css
+++ b/style.css
@@ -2550,8 +2550,56 @@ textarea {
   justify-content: space-between; }
 
 .d-block {
-  display: block; }
-
+  display: block !important; }
+  @media (min-width: 576px) {
+    .d-block-sm {
+      display: block !important; } }
+  @media (min-width: 768px) {
+    .d-block-md {
+      display: block !important; } }
+  @media (min-width: 992px) {
+    .d-block-lg {
+      display: block !important; } }
+  @media (min-width: 1200px) {
+    .d-block-xl {
+      display: block !important; } }
+  @media (min-width: 1600px) {
+    .d-block-xxl {
+      display: block !important; } }
+.d-none {
+  display: none !important; }
+  @media (min-width: 576px) {
+    .d-none-sm {
+      display: none !important; } }
+  @media (min-width: 768px) {
+    .d-none-md {
+      display: none !important; } }
+  @media (min-width: 992px) {
+    .d-none-lg {
+      display: none !important; } }
+  @media (min-width: 1200px) {
+    .d-none-xl {
+      display: none !important; } }
+  @media (min-width: 1600px) {
+    .d-none-xxl {
+      display: none !important; } }
+.d-flex {
+  display: flex !important; }
+  @media (min-width: 576px) {
+    .d-flex-sm {
+      display: flex !important; } }
+  @media (min-width: 768px) {
+    .d-flex-md {
+      display: flex !important; } }
+  @media (min-width: 992px) {
+    .d-flex-lg {
+      display: flex !important; } }
+  @media (min-width: 1200px) {
+    .d-flex-xl {
+      display: flex !important; } }
+  @media (min-width: 1600px) {
+    .d-flex-xxl {
+      display: flex !important; } }
 /* 4 - Custom styling
  * Styles that are custom to this particular theme
 **/
@@ -2591,9 +2639,10 @@ header h1 {
   margin: auto;
   text-align: center; }
   header h1 img {
-    width: 800px;
+    max-width: 800px;
     height: auto;
-    margin-top: 0rem; }
+    margin-top: 0rem;
+    width: 100%; }
   header h1 a, header h1 a:visited, header h1 a:hover {
     background-color: transparent; }
 
@@ -2635,7 +2684,7 @@ header h1 {
   row-gap: 1.6rem;
   column-gap: 3rem;
   grid-template-areas: "main" "side"; }
-  @media (min-width: 1200px) {
+  @media (min-width: 992px) {
     .container-blog {
       grid-template-columns: auto 360px;
       grid-template-areas: "main side"; } }
@@ -2734,6 +2783,11 @@ footer {
     footer .columns a:visited:visited {
       color: #fefefe; }
 
+.home-toast {
+  max-width: 800px;
+  width: 100%;
+  margin: auto; }
+
 .preview-grid {
   display: grid;
   grid-template-columns: 1fr;
@@ -2758,7 +2812,7 @@ footer {
     align-items: center;
     margin-bottom: 1.6rem; } }
 
-@media (min-width: 992px) {
+@media (min-width: 1200px) {
   .preview-list .preview-thumbnail a {
     width: 320px; } }
 
diff --git a/tag.php b/tag.php
index c746743..4aab5d9 100644
--- a/tag.php
+++ b/tag.php
@@ -5,20 +5,5 @@
     ?>
     <?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
 </main>
-<!-- Sidebar custom pour contenir la description -->
-<aside class="sidebar">
-  <div class="card head-info">
-    <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();?>
-      <?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>';
-      }
-      ?>
-    </div>
-  </div>
-
-  <?php include(TEMPLATEPATH . '/components/sidebar-content.php'); ?>
-</aside>
+<?php get_sidebar(); ?>
 <?php get_footer(); ?>