compiled build after merge

src/assets/scss/templates/_bfrtemplates.scss

@@ -1,266 +1,290 @@
-// Page header
-.page-template-partner {
-  @include breakpoint(small) {
-    .featured-hero {
-      @include xy-cell(12);
-      background-size: contain;
-      background-position: top;
+// new edition
+  // Page header
+  .page-template-partner {
+    @include breakpoint(small) {
+      .featured-hero {
+        @include xy-cell(12);
+        background-size: contain;
+        background-position: top;
+      }
+      .main-content {
+        @include xy-cell(12);
+        header{
+          display:none;
+        }
+      }
     }
-    .main-content {
-      @include xy-cell(12);
-      header{
-        display:none;
+    @include breakpoint(medium) {
+      .featured-hero {
+        @include xy-cell(3);
+      }
+      .main-content {
+        @include xy-cell(9);
       }
     }
   }
-  @include breakpoint(medium) {
-    .featured-hero {
-      @include xy-cell(3);
-    }
-    .main-content {
-      @include xy-cell(9);
-    }
+  $grid-column-width:$grid-row-width/$grid-column-count;
+  //_post formats
+  // post format video
+  .single-format-video iframe {
+    width: 60vw;
+    height: 33.75vw;
   }
-}
-$grid-column-width:$grid-row-width/$grid-column-count;
-//_post formats
-// post format video
-.single-format-video iframe {
-  width: 60vw;
-  height: 33.75vw;
-}
 
-// aside sigle post format
-.format-aside{
-  @include breakpoint(small) {
-    // .entry-content {
-    // }
-  }
-  @include breakpoint(medium) {
-    .entry-title{
-      padding-right: $grid-row-width / $grid-column-count * 4 ;
+  // aside sigle post format
+  .format-aside{
+    @include breakpoint(small) {
+      // .entry-content {
+      // }
     }
-    .entry-content {
-      padding-right: $grid-row-width / $grid-column-count * 4 ;
-      img.alignright{
-        margin-right:- $grid-row-width / $grid-column-count * 4;
-        max-width: $grid-row-width / $grid-column-count * 4;
+    @include breakpoint(medium) {
+      .entry-title{
+        padding-right: $grid-row-width / $grid-column-count * 4 ;
+      }
+      .entry-content {
+        padding-right: $grid-row-width / $grid-column-count * 4 ;
+        img.alignright{
+          margin-right:- $grid-row-width / $grid-column-count * 4;
+          max-width: $grid-row-width / $grid-column-count * 4;
+        }
       }
     }
   }
-}
 
-// presentation as home and category archive
-.home,.archive,.page-template-homepage2021{
-  .main-container {
-    @include xy-grid-container(100vw,$global-padding*2);
-    overflow: hidden;
-    .main-content {
-      @include xy-cell(12,padding,0);
-      .bfr_category_archive {
-        @include xy-grid();
-      }
-      .bfr_post {
-        @include breakpoint(small) {
-          @include xy-cell(12);
-          margin-bottom: $global-margin;
+  // presentation as home and category archive
+  .home,.archive{
+    .main-container {
+      @include xy-grid-container(100vw,$global-padding*2);
+      overflow: hidden;
+      .main-content {
+        @include xy-cell(12,padding,0);
+        .bfr_category_archive {
+          @include xy-grid();
         }
-        @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 {
+        .bfr_post {
           @include breakpoint(small) {
-            font-size: rem-calc(18);
-            min-height: 6rem;
+            @include xy-cell(12);
+            margin-bottom: $global-margin;
           }
           @include breakpoint(medium) {
-            font-size: rem-calc(25);
-            min-height: 8rem;
+            @include xy-cell(6);
           }
-          padding:$global-padding 0 0 0;
-          width: 100%;
+          @include breakpoint(large) {
+            @include xy-cell(4);
+          }
+          background-color: $light-gray;
+          padding: $global-padding * 1;
+          border-radius: $button-radius / 2;
         }
-        .bfr_post_thumbnail {
-          @include breakpoint(small) {
-            float: none;
+        .bfr_post_content {
+          .entry-title {
+            @include breakpoint(small) {
+              font-size: rem-calc(18);
+              min-height: 6rem;
+            }
+            @include breakpoint(medium) {
+              font-size: rem-calc(25);
+              min-height: 8rem;
+            }
+            padding:$global-padding 0 0 0;
+            width: 100%;
+          }
+          .bfr_post_thumbnail {
+            @include breakpoint(small) {
+              float: none;
+              max-width:unset;
+              border-radius:$button-radius;
+            }
+            @include breakpoint(medium) {
+              float: right;
+              max-width:35%;
+            }
+          }
+          footer{
+            @include breakpoint(small) {
+              float: none;
+              max-width: unset;
+            }
+            @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{
+              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;
-            border-radius:$button-radius;
+            overflow:hidden;
+            @include breakpoint(small) {
+              max-height: ( 100vw / 2  );
+            }
+            @include breakpoint(medium) {
+              max-height: ( 100vw  / 3 );
+            }
+            @include breakpoint(large) {
+              max-height: ( 100vw / 5 );
+            }
+            img {
+              width: 100%;
+            }
           }
-          @include breakpoint(medium) {
-            float: right;
-            max-width:35%;
-          }
-        }
-        footer{
-          @include breakpoint(small) {
-            float: none;
-            max-width: unset;
-          }
-          @include breakpoint(medium) {
-            float: left;
-            max-width: 60%;
-            a.button{
-              position: absolute;
-              bottom: 0;
+          footer {
+            @include breakpoint(small) {
+              padding-top: $global-padding;
+            }
+            @include breakpoint(medium) {
+              padding-top: $global-padding * 5;
+            }
+            .post-excerpt {
+              display:none;
             }
           }
         }
-        .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 );
-          }
-          img {
-            width: 100%;
-          }
-        }
-        footer {
-          @include breakpoint(small) {
-            padding-top: $global-padding;
-          }
-          @include breakpoint(medium) {
-            padding-top: $global-padding * 5;
-          }
-          .post-excerpt {
-            display:none;
-          }
-        }
       }
     }
+    .bfr_category_title{
+      display:none;
+    }
   }
-  .bfr_category_title{
-    display:none;
-  }
-}
-// homepage 2021
-.homepage-2021 { //&.main-container
-      .entry-content {
-        overflow: hidden;
+  // homepage 2021
+  .page-template-homepage2021{
+    .homepage-2021 { //&.main-container
+      @include xy-grid-container($global-wider-width);
+      .entry-content { //.main-content
         position: relative;
         & > * {
           float:left;
           clear:both;
-          margin-left: $global-margin;
         }
       }
       .fp-gallery {
-        position:absolute;
+        overflow: hidden;
+        position: absolute;
         top:0;
         right: 0;
-        // .fp-gallery-item {
-        // }
-        // .fp-gallery-icon {
-        // }
+        justify-content: right;
         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 {
-        height: $homepage2021-gallery-square-size*14;
-        & > * {
-          max-width: 55%;
+      @include breakpoint(small) {
+        $homepage2021-gallery-square-side: $global-margin*10;
+        $homepage2021-gallery-square-size: $homepage2021-gallery-square-side+$global-margin;
+        .entry-content {
+          & > * {
+            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:95%;
+            }
+          // .fp-gallery-icon {
+          // }
+          img {
+            height: $homepage2021-gallery-square-side;
+          }
         }
       }
-      .fp-gallery {
-        max-width: 40%;
-        .fp-gallery-item {
-          width: $homepage2021-gallery-square-side;
+      @include breakpoint(medium) {// > 640px
+        $homepage2021-gallery-square-side: $global-margin*12;
+        $homepage2021-gallery-square-size: $homepage2021-gallery-square-side+$global-margin;
+        .entry-content {
+          & > * {
+            max-width: 40%;
+            margin-left: $global-margin;
+          }
         }
-        // .fp-gallery-icon {
-        // }
-        img {
-          height: $homepage2021-gallery-square-side;
+        .fp-gallery {
+          height: $homepage2021-gallery-square-size*5;
+          max-width: 60%;
+          .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*7;
-      $homepage2021-gallery-square-size: $homepage2021-gallery-square-side+$global-margin;
-      .entry-content {
-        height: $homepage2021-gallery-square-size*12;
-        & > * {
-          max-width: 48%;
+      @include breakpoint(large) { // > 1024px
+        $homepage2021-gallery-square-side: $global-margin*14;
+        $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: 70%;
+          .fp-gallery-item {
+            width: $homepage2021-gallery-square-side;
+          }
+          // .fp-gallery-icon {
+          // }
+          img {
+            height: $homepage2021-gallery-square-side;
+          }
         }
       }
-      .fp-gallery {
-        max-width: 45%;
-        .fp-gallery-item {
-          width: $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-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 {
-        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;
+        .fp-gallery {
+          height: $homepage2021-gallery-square-size*4;
+          max-width: 72%;
+          .fp-gallery-item {
+            width: $homepage2021-gallery-square-side;
+          }
+          // .fp-gallery-icon {
+          // }
+          img {
+            height: $homepage2021-gallery-square-side;
+          }
         }
       }
     }