first step, home page contained
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 37 KiB |
Before Width: | Height: | Size: 975 KiB After Width: | Height: | Size: 975 KiB |
Before Width: | Height: | Size: 3.1 MiB After Width: | Height: | Size: 1.8 MiB |
Before Width: | Height: | Size: 3.4 MiB After Width: | Height: | Size: 3.3 MiB |
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 60 KiB |
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 5.9 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 29 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 6.9 KiB After Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 16 KiB |
|
@ -0,0 +1,6 @@
|
||||||
|
/**
|
||||||
|
* 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
|
||||||
|
*/
|
|
@ -1,266 +1,269 @@
|
||||||
// Page header
|
// new edition
|
||||||
.page-template-partner {
|
// Page header
|
||||||
@include breakpoint(small) {
|
.page-template-partner {
|
||||||
.featured-hero {
|
@include breakpoint(small) {
|
||||||
@include xy-cell(12);
|
.featured-hero {
|
||||||
background-size: contain;
|
@include xy-cell(12);
|
||||||
background-position: top;
|
background-size: contain;
|
||||||
|
background-position: top;
|
||||||
|
}
|
||||||
|
.main-content {
|
||||||
|
@include xy-cell(12);
|
||||||
|
header{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.main-content {
|
@include breakpoint(medium) {
|
||||||
@include xy-cell(12);
|
.featured-hero {
|
||||||
header{
|
@include xy-cell(3);
|
||||||
display:none;
|
}
|
||||||
|
.main-content {
|
||||||
|
@include xy-cell(9);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@include breakpoint(medium) {
|
$grid-column-width:$grid-row-width/$grid-column-count;
|
||||||
.featured-hero {
|
//_post formats
|
||||||
@include xy-cell(3);
|
// post format video
|
||||||
}
|
.single-format-video iframe {
|
||||||
.main-content {
|
width: 60vw;
|
||||||
@include xy-cell(9);
|
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
|
// aside sigle post format
|
||||||
.format-aside{
|
.format-aside{
|
||||||
@include breakpoint(small) {
|
@include breakpoint(small) {
|
||||||
// .entry-content {
|
// .entry-content {
|
||||||
// }
|
// }
|
||||||
}
|
|
||||||
@include breakpoint(medium) {
|
|
||||||
.entry-title{
|
|
||||||
padding-right: $grid-row-width / $grid-column-count * 4 ;
|
|
||||||
}
|
}
|
||||||
.entry-content {
|
@include breakpoint(medium) {
|
||||||
padding-right: $grid-row-width / $grid-column-count * 4 ;
|
.entry-title{
|
||||||
img.alignright{
|
padding-right: $grid-row-width / $grid-column-count * 4 ;
|
||||||
margin-right:- $grid-row-width / $grid-column-count * 4;
|
}
|
||||||
max-width: $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
|
// presentation as home and category archive
|
||||||
.home,.archive,.page-template-homepage2021{
|
.home,.archive{
|
||||||
.main-container {
|
.main-container {
|
||||||
@include xy-grid-container(100vw,$global-padding*2);
|
@include xy-grid-container(100vw,$global-padding*2);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
.main-content {
|
.main-content {
|
||||||
@include xy-cell(12,padding,0);
|
@include xy-cell(12,padding,0);
|
||||||
.bfr_category_archive {
|
.bfr_category_archive {
|
||||||
@include xy-grid();
|
@include xy-grid();
|
||||||
}
|
|
||||||
.bfr_post {
|
|
||||||
@include breakpoint(small) {
|
|
||||||
@include xy-cell(12);
|
|
||||||
margin-bottom: $global-margin;
|
|
||||||
}
|
}
|
||||||
@include breakpoint(medium) {
|
.bfr_post {
|
||||||
@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) {
|
@include breakpoint(small) {
|
||||||
font-size: rem-calc(18);
|
@include xy-cell(12);
|
||||||
min-height: 6rem;
|
margin-bottom: $global-margin;
|
||||||
}
|
}
|
||||||
@include breakpoint(medium) {
|
@include breakpoint(medium) {
|
||||||
font-size: rem-calc(25);
|
@include xy-cell(6);
|
||||||
min-height: 8rem;
|
|
||||||
}
|
}
|
||||||
padding:$global-padding 0 0 0;
|
@include breakpoint(large) {
|
||||||
width: 100%;
|
@include xy-cell(4);
|
||||||
|
}
|
||||||
|
background-color: $light-gray;
|
||||||
|
padding: $global-padding * 1;
|
||||||
|
border-radius: $button-radius / 2;
|
||||||
}
|
}
|
||||||
.bfr_post_thumbnail {
|
.bfr_post_content {
|
||||||
@include breakpoint(small) {
|
.entry-title {
|
||||||
float: none;
|
@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;
|
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) {
|
footer {
|
||||||
float: right;
|
@include breakpoint(small) {
|
||||||
max-width:35%;
|
padding-top: $global-padding;
|
||||||
}
|
}
|
||||||
}
|
@include breakpoint(medium) {
|
||||||
footer{
|
padding-top: $global-padding * 5;
|
||||||
@include breakpoint(small) {
|
}
|
||||||
float: none;
|
.post-excerpt {
|
||||||
max-width: unset;
|
display:none;
|
||||||
}
|
|
||||||
@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;
|
|
||||||
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{
|
// homepage 2021
|
||||||
display:none;
|
.page-template-homepage2021{
|
||||||
}
|
.homepage-2021 { //&.main-container
|
||||||
}
|
@include xy-grid-container($global-wider-width);
|
||||||
// homepage 2021
|
.entry-content { //.main-content
|
||||||
.homepage-2021 { //&.main-container
|
// background-color:rgb(250,240,250);
|
||||||
.entry-content {
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
& > * {
|
& > * {
|
||||||
|
// background-color:rgb(250,250,240);
|
||||||
float:left;
|
float:left;
|
||||||
clear:both;
|
clear:both;
|
||||||
margin-left: $global-margin;
|
margin-left: $global-margin;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.fp-gallery {
|
.fp-gallery {
|
||||||
position:absolute;
|
// background-color:rgb(250,240,240);
|
||||||
|
overflow: hidden;
|
||||||
|
position: absolute;
|
||||||
top:0;
|
top:0;
|
||||||
right: 0;
|
right: 0;
|
||||||
// .fp-gallery-item {
|
|
||||||
// }
|
|
||||||
// .fp-gallery-icon {
|
|
||||||
// }
|
|
||||||
img {
|
img {
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
object-position: center;
|
object-position: center;
|
||||||
border-radius: $button-radius;
|
border-radius: $button-radius;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@include breakpoint(small) {
|
@include breakpoint(small) {
|
||||||
$homepage2021-gallery-square-side: $global-margin*8;
|
$homepage2021-gallery-square-side: $global-margin*8;
|
||||||
$homepage2021-gallery-square-size: $homepage2021-gallery-square-side+$global-margin;
|
$homepage2021-gallery-square-size: $homepage2021-gallery-square-side+$global-margin;
|
||||||
.entry-content {
|
.entry-content {
|
||||||
height: $homepage2021-gallery-square-size*14;
|
height: $homepage2021-gallery-square-size*14;
|
||||||
& > * {
|
& > * {
|
||||||
max-width: 55%;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.fp-gallery {
|
@include breakpoint(medium) {
|
||||||
max-width: 40%;
|
$homepage2021-gallery-square-side: $global-margin*7;
|
||||||
.fp-gallery-item {
|
$homepage2021-gallery-square-size: $homepage2021-gallery-square-side+$global-margin;
|
||||||
width: $homepage2021-gallery-square-side;
|
.entry-content {
|
||||||
|
height: $homepage2021-gallery-square-size*12;
|
||||||
|
& > * {
|
||||||
|
max-width: 48%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// .fp-gallery-icon {
|
.fp-gallery {
|
||||||
// }
|
max-width: 45%;
|
||||||
img {
|
.fp-gallery-item {
|
||||||
height: $homepage2021-gallery-square-side;
|
width: $homepage2021-gallery-square-side;
|
||||||
|
}
|
||||||
|
// .fp-gallery-icon {
|
||||||
|
// }
|
||||||
|
img {
|
||||||
|
height: $homepage2021-gallery-square-side;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
@include breakpoint(xlarge) {
|
||||||
@include breakpoint(medium) {
|
$homepage2021-gallery-square-side: $global-margin*9;
|
||||||
$homepage2021-gallery-square-side: $global-margin*7;
|
$homepage2021-gallery-square-size: $homepage2021-gallery-square-side+$global-margin;
|
||||||
$homepage2021-gallery-square-size: $homepage2021-gallery-square-side+$global-margin;
|
.entry-content {
|
||||||
.entry-content {
|
height: $homepage2021-gallery-square-size*6;
|
||||||
height: $homepage2021-gallery-square-size*12;
|
& > * {
|
||||||
& > * {
|
max-width: 48%;
|
||||||
max-width: 48%;
|
}
|
||||||
}
|
}
|
||||||
}
|
.fp-gallery {
|
||||||
.fp-gallery {
|
max-width: 45%;
|
||||||
max-width: 45%;
|
.fp-gallery-item {
|
||||||
.fp-gallery-item {
|
width: $homepage2021-gallery-square-side;
|
||||||
width: $homepage2021-gallery-square-side;
|
}
|
||||||
}
|
// .fp-gallery-icon {
|
||||||
// .fp-gallery-icon {
|
// }
|
||||||
// }
|
img {
|
||||||
img {
|
height: $homepage2021-gallery-square-side;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|