gallery in home page for media queries

biofriction-theme/gulpfile.babel.js

@@ -84,7 +84,8 @@ function sass() {
     })
       .on('error', $.sass.logError))
     .pipe($.autoprefixer({
-      browsers: COMPATIBILITY
+      //browsers: COMPATIBILITY
+      browserlist: COMPATIBILITY
     }))
 
     .pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' })))

biofriction-theme/home.php

@@ -20,12 +20,12 @@ get_header(); ?>
 		<main class="main-content">
 			<div class="bfr_category_archive">
 					<?php // Start the Loop  ?>
-					<?php // category 12 is the "artist" category in the 2021 installation,?>
+					<?php // category 12 is the "peephole" category in the 2021 installation,?>
 					<?php // if starting from new install this might change, check the category number that you want to hide ?>
-					<?php $query = new WP_Query( 'cat=-12' ); ?>
+					<?php //$query = new WP_Query( 'cat=-12' ); ?>
-					<?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
+					<?php //if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
 					<?php // coment above, uncoment below to query all posts ?>
-					<?php // if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
+					<?php  if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 						<article id="post-<?php the_ID(); ?>" <?php post_class('bfr_post'); ?>>
 							<div class="bfr_post_content">
 								<header>

biofriction-theme/package-lock.json

@@ -2630,9 +2630,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001202",
+      "version": "1.0.30001271",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001202.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001271.tgz",
-      "integrity": "sha512-ZcijQNqrcF8JNLjzvEiXqX4JUYxoZa7Pvcsd9UD8Kz4TvhTonOSNRsK+qtvpVL4l6+T1Rh4LFtLfnNWg6BGWCQ==",
+      "integrity": "sha512-BBruZFWmt3HFdVPS8kceTBIguKxu4f99n5JNp06OlPD/luoAMIaIK5ieV5YjnBLH3Nysai9sxj9rpJj4ZisXOA==",
       "dev": true
     },
     "caseless": {

biofriction-theme/src/assets/scss/components/_tags.scss

@@ -1,9 +1,9 @@
 .bfr_category_tags {
   font-family: $header-font-family;
-  position: relative;
+  // position: relative;
-  top:-1rem;
+  // top:-1rem;
-  text-align: center;
+  // text-align: center;
-  z-index: 100;
+  // z-index: 100;
   .tag-cloud-link::before {
       content: '#';
       // display: inline-block;
@@ -28,5 +28,3 @@
     display:block;
   }
 }
-
-

biofriction-theme/src/assets/scss/modules/_header.scss

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

biofriction-theme/src/assets/scss/templates/_bfrtemplates.scss

@@ -53,10 +53,8 @@ $grid-column-width:$grid-row-width/$grid-column-count;
 // presentation as home and category archive
 .home,.archive{
   .main-container {
-    // @include xy-grid-container(100vw,0);
     @include xy-grid-container(100vw,$global-padding*2);
     overflow: hidden;
-    // .main-grid {
     .main-content {
       @include xy-cell(12,padding,0);
       .bfr_category_archive {
@@ -157,7 +155,6 @@ $grid-column-width:$grid-row-width/$grid-column-count;
             max-height: ( 100vw / 5 );
           }
           @include breakpoint(xlarge) {
-            // max-height: ( 30vw  / 4.5 ) ;
           }
           img {
             width: 100%;
@@ -165,20 +162,97 @@ $grid-column-width:$grid-row-width/$grid-column-count;
         }
       }
     }
-    // }
   }
   .bfr_category_title{
     display:none;
   }
-}
-
   // homepage 2021
-.homepage-2021 {
+  .homepage-2021 { //&.main-container
       .entry-content {
-    p {
+
-      max-width: 45%;
+        position: relative;
+        & > * {
           float:left;
           clear:both;
+          margin-left: $global-margin;
+        }
+      }
+      .fp-gallery {
+        position:absolute;
+        top:0;
+        right: 0;
+        // .fp-gallery-item {
+        // }
+        // .fp-gallery-icon {
+        // }
+        img {
+          object-fit: cover;
+          object-position: center;
+          border-radius: $button-radius;
+        }
+      }
+    @include breakpoint(small) {
+      $homepage2021-gallery-square-side: $global-margin*8;
+      $homepage2021-gallery-square-size: $homepage2021-gallery-square-side+$global-margin;
+      .entry-content {
+        min-height: $homepage2021-gallery-square-size*14;
+        & > * {
+          max-width: 55%;
+        }
+      }
+      .fp-gallery {
+        max-width: 40%;
+        .fp-gallery-item {
+          width: $homepage2021-gallery-square-side;
+        }
+        // .fp-gallery-icon {
+        // }
+        img {
+          height: $homepage2021-gallery-square-side;
+        }
+      }
+    }
+    @include breakpoint(medium) {
+      $homepage2021-gallery-square-side: $global-margin*8;
+      $homepage2021-gallery-square-size: $homepage2021-gallery-square-side+$global-margin;
+      .entry-content {
+        min-height: $homepage2021-gallery-square-size*7;
+        & > * {
+          max-width: 48%;
+        }
+      }
+      .fp-gallery {
+        max-width: 45%;
+        .fp-gallery-item {
+          width: $homepage2021-gallery-square-side;
+        }
+        // .fp-gallery-icon {
+        // }
+        img {
+          height: $homepage2021-gallery-square-side;
+        }
+      }
+    }
+    @include breakpoint(xlarge) {
+      $homepage2021-gallery-square-side: $global-margin*9;
+      $homepage2021-gallery-square-size: $homepage2021-gallery-square-side+$global-margin;
+      .entry-content {
+        min-height: $homepage2021-gallery-square-size*6;
+        & > * {
+          max-width: 48%;
+        }
+      }
+      .fp-gallery {
+        max-width: 45%;
+        .fp-gallery-item {
+          width: $homepage2021-gallery-square-side;
+        }
+        // .fp-gallery-icon {
+        // }
+        img {
+          height: $homepage2021-gallery-square-side;
+        }
+      }
     }
   }
 }