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{
@@ -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 {
@@ -109,14 +107,27 @@ $grid-column-width:$grid-row-width/$grid-column-count;
           @include breakpoint(medium) {
             float: left;
             max-width: 60%;
+            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{
@@ -127,13 +138,26 @@ $grid-column-width:$grid-row-width/$grid-column-count;
         @include breakpoint(medium){
           position: relative;
           min-height: 100%;
-              .post-excerpt{
+        }//end medium
-                margin-bottom: 3.5rem;
       }
-              footer a.button{
+      .category-photos-archive,.format-gallery,.post_format-post-format-gallery {
-                position: absolute;
+        .bfr_post_thumbnail {
-                bottom: 0;
+          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%;
           }
         }
       }
@@ -142,4 +166,93 @@ $grid-column-width:$grid-row-width/$grid-column-count;
   .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;
+        }
+      }
+    }
+  }
 }