mod in the tags hover

archive.php

@@ -26,6 +26,7 @@ get_header(); ?>
 					<?php echo category_description(); ?>
 				</div>
 			<?php endif; ?>
+			<?php get_template_part( 'template-parts/tag-cloud' ); ?>
 			<div class="bfr_category_archive">
 				<?php if ( have_posts() ) : ?>
 					<?php /* Start the Loop */ ?>

functions.php

@@ -58,6 +58,8 @@ require_once( 'library/gutenberg.php' );
 /** Catch post first image */
 require_once( 'library/catch-first-image.php' );
 
+/** Check if a category is subcategory */
+require_once( 'library/check-subcategory.php' );
 
 /** If your site requires protocol relative url's for theme assets, uncomment the line below */
 // require_once( 'library/class-foundationpress-protocol-relative-theme-assets.php' );

header.php

@@ -29,14 +29,5 @@
 			</nav>
 			<nav class="site-top-nav menu small-12 medium-6 large-shrink align-center"><?php foundationpress_top_bar_r(); ?></nav>
 		</content>
-
-		    <?php if (is_category('peephole') || is_tag() ) : ?>
-		<aside class="bfr_category_tags">
-			<h6 class="button primary hollow">#tags</h6>
-			<div class="bfr_all_tags bfr_toogled_tags">
-		    <?php wp_tag_cloud( 'unit=rem&smallest=1&largest=1&number=0&orderby=name' ); ?>
-      </div>
-		</aside>
-			  <?php endif; ?>
-
+		<?php //get_template_part( 'template-parts/tag-cloud' ); ?>
 	</header>

library/check-subcategory.php

@@ -0,0 +1,16 @@
+<?php
+/**
+ * Check if a category is subcategory
+ *
+ * @package Biofriction
+ * @since Biofriction 1.0.0
+ */
+
+if ( ! function_exists ( 'is_subcategory' ) ) :
+  function is_subcategory (){
+    $cat = get_query_var('cat');
+    $category = get_category($cat);
+    $category->parent;
+    return ( $category->parent == ‘0’ ) ? false : true;
+  }
+endif;

src/assets/scss/components/_tags.scss

@@ -1,16 +1,37 @@
-.bfr_category_tags {
+.bfr_tags{
   font-family: $header-font-family;
+  font-size: $global-font-size * 0.8;
+}
+.bfr_tag_active {
+  background-color: scale-color($secondary-color, $lightness: +70%);
+  &:hover {
+    background-color: $secondary-color;
+    color: $primary-color;
+  }
+  &:before{
+    content:'#';
+  }
+}
+.bfr_category_tags {
+  @include xy-grid();
+  // @include xy-gutters(0);
   position: relative;
-  top:-1rem;
-  text-align: center;
+  // top:-1rem;
   z-index: 100;
+  h6 {
+    @include breakpoint(small) {
+      @include xy-cell(shrink);
+      margin-bottom: $global-margin;
+    }
+  }
   .tag-cloud-link::before {
     content: '#';
-      // display: inline-block;
   }
   a{
     padding:0;
     margin:0 0.5rem;
+    display:inline-block;
+    margin-bottom: auto;
     &:hover {
       color:$primary-color;
       background-color:$secondary-color;
@@ -19,14 +40,26 @@
   .bfr_toogled_tags{
     display:none;
     position:absolute;
-    padding:3rem;
-    border-radius: 2rem;
-    margin-top:-1rem;
+    top: $global-padding;
+    padding:$global-padding;
+    border-radius: $button-radius/2;
     background-color: rgba(255,255,255,0.95);
   }
-  .button:hover+.bfr_toogled_tags,.bfr_toogled_tags:hover {
+  .bfr_tag_description:hover+.bfr_toogled_tags,.bfr_toogled_tags:hover {
     display:block;
   }
 }
-
-
+.bfr_post_tags {
+  ul {
+    list-style: none;
+    margin-left:0;
+    display: inline-block;
+    li {
+      float:left;
+      margin-right: $global-margin;
+      &:before {
+        content:'#';
+      }
+    }
+  }
+}

src/assets/scss/modules/_header.scss

@@ -17,17 +17,6 @@
         height: 10rem;
         background-image: url('../images/biofriction-logo-moving-trans-loosy-100.gif');
       }
-
-      .bfr_category_tags {
-        // display:flex;
-        // justify-content:center;
-        max-width: calc(66vw - 4rem);
-        margin: 0 auto;
-        a {
-          display:inline-block;
-          margin-bottom: auto;
-        }
-      }
     }
   }
 }

src/assets/scss/templates/_bfrtemplates.scss

@@ -1,3 +1,4 @@
+// new edition
   // Page header
   .page-template-partner {
     @include breakpoint(small) {
@@ -51,7 +52,7 @@ $grid-column-width:$grid-row-width/$grid-column-count;
   }
 
   // presentation as home and category archive
-.home,.archive,.page-template-homepage2021{
+  .home,.archive{
     .main-container {
       @include xy-grid-container(100vw,$global-padding*2);
       overflow: hidden;
@@ -177,24 +178,22 @@ $grid-column-width:$grid-row-width/$grid-column-count;
     }
   }
   // homepage 2021
+  .page-template-homepage2021{
     .homepage-2021 { //&.main-container
-      .entry-content {
-        overflow: hidden;
+      @include xy-grid-container($global-wider-width);
+      .entry-content { //.main-content
         position: relative;
         & > * {
           float:left;
           clear:both;
-          margin-left: $global-margin;
         }
       }
       .fp-gallery {
+        overflow: hidden;
         position: absolute;
         top:0;
         right: 0;
-        // .fp-gallery-item {
-        // }
-        // .fp-gallery-icon {
-        // }
+        justify-content: right;
         img {
           object-fit: cover;
           object-position: center;
@@ -202,18 +201,20 @@ $grid-column-width:$grid-row-width/$grid-column-count;
         }
       }
       @include breakpoint(small) {
-      $homepage2021-gallery-square-side: $global-margin*8;
+        $homepage2021-gallery-square-side: $global-margin*10;
         $homepage2021-gallery-square-size: $homepage2021-gallery-square-side+$global-margin;
         .entry-content {
-        height: $homepage2021-gallery-square-size*14;
           & > * {
-          max-width: 55%;
+            max-width: 58%;
+            margin-left: 0;
           }
         }
         .fp-gallery {
+          height: $homepage2021-gallery-square-size*8;
           max-width: 40%;
           .fp-gallery-item {
-          width: $homepage2021-gallery-square-side;
+            // width: $homepage2021-gallery-square-side;
+            width:95%;
             }
           // .fp-gallery-icon {
           // }
@@ -222,17 +223,18 @@ $grid-column-width:$grid-row-width/$grid-column-count;
           }
         }
       }
-    @include breakpoint(medium) {
-      $homepage2021-gallery-square-side: $global-margin*7;
+      @include breakpoint(medium) {// > 640px
+        $homepage2021-gallery-square-side: $global-margin*12;
         $homepage2021-gallery-square-size: $homepage2021-gallery-square-side+$global-margin;
         .entry-content {
-        height: $homepage2021-gallery-square-size*12;
           & > * {
-          max-width: 48%;
+            max-width: 40%;
+            margin-left: $global-margin;
           }
         }
         .fp-gallery {
-        max-width: 45%;
+          height: $homepage2021-gallery-square-size*5;
+          max-width: 60%;
           .fp-gallery-item {
             width: $homepage2021-gallery-square-side;
           }
@@ -243,17 +245,38 @@ $grid-column-width:$grid-row-width/$grid-column-count;
           }
         }
       }
-    @include breakpoint(xlarge) {
-      $homepage2021-gallery-square-side: $global-margin*9;
+      @include breakpoint(large) { // > 1024px
+        $homepage2021-gallery-square-side: $global-margin*14;
         $homepage2021-gallery-square-size: $homepage2021-gallery-square-side+$global-margin;
         .entry-content {
-        height: $homepage2021-gallery-square-size*6;
           & > * {
-          max-width: 48%;
+            max-width: 30%;
           }
         }
         .fp-gallery {
-        max-width: 45%;
+          height: $homepage2021-gallery-square-size*4;
+          max-width: 70%;
+          .fp-gallery-item {
+            width: $homepage2021-gallery-square-side;
+          }
+          // .fp-gallery-icon {
+          // }
+          img {
+            height: $homepage2021-gallery-square-side;
+          }
+        }
+      }
+      @include breakpoint(xlarge) { // > 1200px
+        $homepage2021-gallery-square-side: $global-margin*16;
+        $homepage2021-gallery-square-size: $homepage2021-gallery-square-side+$global-margin;
+        .entry-content {
+          & > * {
+            max-width: 30%;
+          }
+        }
+        .fp-gallery {
+          height: $homepage2021-gallery-square-size*4;
+          max-width: 72%;
           .fp-gallery-item {
             width: $homepage2021-gallery-square-side;
           }
@@ -265,3 +288,4 @@ $grid-column-width:$grid-row-width/$grid-column-count;
         }
       }
     }
+  }

style.css

@@ -1,9 +1,8 @@
 /*
 Theme Name:         Biofriction
-Theme URI:          https://biofriction.org
-Gitlab Theme URI:   https://gitlab.com/jorge-vitrubio/biofriction-theme
+Theme URI:          https://git.hangar.org/hangar-tech/biofriction-wp-theme
 Description:        Biofriction is a WordPress theme created for Hangar.org, based on FoundationPress and Foundation 6 by Zurb
-Version:            1.0.0
+Version:            1.1.0
 Author:             Jorge - vitrubio.net
 Author URI:         https://vitrubio.net/
 

template-parts/content.php

@@ -9,6 +9,7 @@
  */
 
 ?>
+<?php get_template_part( 'template-parts/tag-cloud' ); ?>
 
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 	<header>

template-parts/tag-cloud.php

@@ -0,0 +1,17 @@
+<?php //display the tag cloud ?>
+<?php //is_subcategory check the functions and library ?>
+<?php if ((is_category('peephole') || is_subcategory('peephole')  || is_tag()) && !is_single() ) { ?>
+<aside class="bfr_tags bfr_category_tags">
+  <h6 class="bfr_tag_description">
+    You are viewing <span class="bfr_tag_active"><?php single_cat_title(); ?></span>. Choose to filter content
+  </h6>
+  <div class="bfr_all_tags bfr_toogled_tags">
+    <?php wp_tag_cloud( 'unit=rem&smallest=0.8&largest=0.8&number=0&orderby=name' ); ?>
+  </div>
+</aside>
+<?php } ?>
+<?php if ( is_single() ) { ?>
+<aside class="bfr_tags bfr_post_tags">
+  <?php the_tags('<ul class=""><li class="bfr_tag_active">', '</li><li class="bfr_tag_active">','</li></ul>'); ?>
+</aside>
+<?php } ?>