packaged theme

dist/assets/js/app.js.LICENSE.txt

@@ -1,6 +0,0 @@
-/**
- * what-input - A global utility for tracking the current input method (mouse, keyboard or touch).
- * @version v4.3.1
- * @link https://github.com/ten1seven/what-input
- * @license MIT
- */

page-templates/homepage2021.php

@@ -0,0 +1,49 @@
+<?php
+/*
+*/
+/**
+* Template Name: Home page 2021 
+* The template for displaying text on the left side 
+* and an image gallery on the right side
+*
+* @package Biofriction
+* @since Biofriction 1.0.0
+*/
+
+get_header(); ?>
+
+<div class="main-container homepage-2021">
+	<div class="main-grid">
+		<main class="main-content">
+    <?php if ( have_posts() ) : ?>
+
+      <?php /* Start the Loop */ ?>
+      <?php while ( have_posts() ) : the_post(); ?>
+        <?php //get_template_part( 'template-parts/content', get_post_format() ); ?>
+        <?php //begin part homepage-2021 ?>
+        
+        <article id="content-homepage-2021 post-<?php the_ID(); ?>" <?php post_class(); ?>>
+          <header>
+            <h1 class="entry-title"><?php //the_title(); ?></h1>
+          </header>
+          <div class="entry-content">
+            <?php the_content(); ?>
+          </div>
+          <footer>
+            <?php get_template_part( 'template-parts/navigation', 'prevnext' ); ?>
+            <?php $tag = get_the_tags(); if ( $tag ) { ?><p><?php the_tags(); ?></p><?php } ?>
+          </footer>
+        </article>
+        
+        <?php //end part homepage-2021 ?>
+      <?php endwhile; ?>
+
+      <?php else : ?>
+        <?php get_template_part( 'template-parts/content', 'none' ); ?>
+
+      <?php endif; // End have_posts() check. ?>
+		</main>
+	</div>
+</div>
+
+<?php get_footer();

src/assets/scss/templates/_bfrtemplates.scss

@@ -33,8 +33,8 @@ $grid-column-width:$grid-row-width/$grid-column-count;
 // aside sigle post format
 .format-aside{
   @include breakpoint(small) {
-    .entry-content {
+    // .entry-content {
-    }
+    // }
   }
   @include breakpoint(medium) {
     .entry-title{
@@ -52,94 +52,207 @@ $grid-column-width:$grid-row-width/$grid-column-count;
 
 // presentation as home and category archive
 .home,.archive{
-    .main-container {
+  .main-container {
-      // @include xy-grid-container(100vw,0);
+    @include xy-grid-container(100vw,$global-padding*2);
-      @include xy-grid-container(100vw,$global-padding*2);
+    overflow: hidden;
-      overflow: hidden;
+    .main-content {
-      .main-grid {
+      @include xy-cell(12,padding,0);
-        .main-content {
+      .bfr_category_archive {
-          @include xy-cell(12,padding,0);
+        @include xy-grid();
-          .bfr_category_archive {
+      }
-              @include xy-grid();
+      .bfr_post {
+        @include breakpoint(small) {
+          @include xy-cell(12);
+          margin-bottom: $global-margin;
+        }
+        @include breakpoint(medium) {
+          @include xy-cell(6);
+        }
+        @include breakpoint(large) {
+          @include xy-cell(4);
+        }
+        background-color: $light-gray;
+        padding: $global-padding * 1;
+        border-radius: $button-radius / 2;
+      }
+      .bfr_post_content {
+        .entry-title {
+          @include breakpoint(small) {
+            font-size: rem-calc(18);
+            min-height: 6rem;
           }
-          .bfr_post {
+          @include breakpoint(medium) {
-            @include breakpoint(small) {
+            font-size: rem-calc(25);
-                @include xy-cell(12);
+            min-height: 8rem;
-                margin-bottom: $global-margin;
-              }
-              @include breakpoint(medium) {
-                  @include xy-cell(6);
-              }
-              @include breakpoint(large) {
-                  @include xy-cell(4);
-              }
-              background-color: $light-gray;
-              padding: $global-padding * 1;
-              border-radius: $button-radius / 2;
           }
-          .bfr_post_content {
+          padding:$global-padding 0 0 0;
-            .entry-title {
+          width: 100%;
-              @include breakpoint(small) {
+        }
-                font-size: rem-calc(18);
+        .bfr_post_thumbnail {
-                min-height: 6rem;
+          @include breakpoint(small) {
-              }
+            float: none;
-              @include breakpoint(medium) {
+            max-width:unset;
-                font-size: rem-calc(25);
+            border-radius:$button-radius;
-                min-height: 8rem;
+          }
-              }
+          @include breakpoint(medium) {
-              padding:$global-padding 0 0 0;
+            float: right;
-              width: 100%;
+            max-width:35%;
-            }
+          }
-            .bfr_post_thumbnail {
+        }
-              @include breakpoint(small) {
+        footer{
-                float: none;
+          @include breakpoint(small) {
-                max-width:unset;
+            float: none;
-                border-radius:$button-radius;
+            max-width: unset;
-              }
+          }
-              @include breakpoint(medium) {
+          @include breakpoint(medium) {
-                float: right;
+            float: left;
-                max-width:35%;
+            max-width: 60%;
-              }
+            a.button{
-            }
+              position: absolute;
-            footer{
+              bottom: 0;
-              @include breakpoint(small) {
-                float: none;
-                max-width: unset;
-              }
-              @include breakpoint(medium) {
-                float: left;
-                max-width: 60%;
-	      }
-            }
-            .post-excerpt {
-              max-height: 14rem;
-              overflow: hidden;
-              margin-bottom: $global-margin * 1.2;
-            }
-            .button {
-              background-color:$primary-color;
-              color:$secondary-color;
-              &:hover{
-                background-color:$secondary-color;
-                color:$primary-color;
-              }
-            }
-            @include breakpoint(medium){
-              position: relative;
-              min-height: 100%;
-              .post-excerpt{
-                margin-bottom: 3.5rem;
-              }
-              footer a.button{
-                position: absolute;
-                bottom: 0;
-              }
             }
           }
         }
+        .post-excerpt {
+          @include breakpoint(small) {
+            max-height: 14rem;
+            overflow: hidden;
+            margin-bottom: $global-margin * 1.2;
+          }
+          @include breakpoint(medium) {
+            margin-bottom: 3.5rem;
+          }
+        }
+        .button {
+          @include breakpoint(small) {
+          }
+          @include breakpoint(medium) {
+          }
+          background-color:$primary-color;
+          color:$secondary-color;
+          &:hover{
+            background-color:$secondary-color;
+            color:$primary-color;
+          }
+        }
+        @include breakpoint(medium){
+          position: relative;
+          min-height: 100%;
+        }//end medium
+      }
+      .category-photos-archive,.format-gallery,.post_format-post-format-gallery {
+        .bfr_post_thumbnail {
+          float:none;
+          max-width:unset;
+          overflow:hidden;
+          @include breakpoint(small) {
+            max-height: ( 100vw / 2  );
+          }
+          @include breakpoint(medium) {
+            max-height: ( 100vw  / 3 );
+          }
+          @include breakpoint(large) {
+            max-height: ( 100vw / 5 );
+          }
+          @include breakpoint(xlarge) {
+          }
+          img {
+            width: 100%;
+          }
+        }
       }
     }
+  }
   .bfr_category_title{
     display:none;
   }
+  // homepage 2021
+  .homepage-2021 { //&.main-container
+      .entry-content {
+
+        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;
+        }
+      }
+    }
+  }
 }