hangar-tech/biofriction-wp-theme
hangar-tech
/
biofriction-wp-theme
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added galleries width and sizes to show proper number of pictures

This commit is contained in:
jorge 2021-11-04 14:41:12 +01:00
parent d9b42246ec
commit c9490367c7
2 changed files with 76 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
dist/assets/css/app.css vendored
View File

File diff suppressed because one or more lines are too long

59
src/assets/scss/templates/_bfrtemplates.scss
View File

@ -182,21 +182,18 @@
.homepage-2021 { //&.main-container .homepage-2021 { //&.main-container
@include xy-grid-container($global-wider-width); @include xy-grid-container($global-wider-width);
.entry-content { //.main-content .entry-content { //.main-content
// background-color:rgb(250,240,250);
position: relative; position: relative;
& > * { & > * {
// background-color:rgb(250,250,240);
float:left; float:left;
clear:both; clear:both;
margin-left: $global-margin;
} }
} }
.fp-gallery { .fp-gallery {
// background-color:rgb(250,240,240);
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
top:0; top:0;
right: 0; right: 0;
justify-content: right;
img { img {
object-fit: cover; object-fit: cover;
object-position: center; object-position: center;
@ -204,19 +201,21 @@
} }
} }
@include breakpoint(small) { @include breakpoint(small) {
$homepage2021-gallery-square-side: $global-margin*8; $homepage2021-gallery-square-side: $global-margin*10;
$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;
& > * { & > * {
max-width: 55%; max-width: 58%;
margin-left: 0;
} }
} }
.fp-gallery { .fp-gallery {
height: $homepage2021-gallery-square-size*8;
max-width: 40%; max-width: 40%;
.fp-gallery-item { .fp-gallery-item {
width: $homepage2021-gallery-square-side; // width: $homepage2021-gallery-square-side;
} width:95%;
}
// .fp-gallery-icon { // .fp-gallery-icon {
// } // }
img { img {
@ -224,17 +223,18 @@
} }
} }
} }
@include breakpoint(medium) { @include breakpoint(medium) {// > 640px
$homepage2021-gallery-square-side: $global-margin*7; $homepage2021-gallery-square-side: $global-margin*12;
$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*12;
& > * { & > * {
max-width: 48%; max-width: 40%;
margin-left: $global-margin;
} }
} }
.fp-gallery { .fp-gallery {
max-width: 45%; height: $homepage2021-gallery-square-size*5;
max-width: 60%;
.fp-gallery-item { .fp-gallery-item {
width: $homepage2021-gallery-square-side; width: $homepage2021-gallery-square-side;
} }
@ -245,17 +245,38 @@
} }
} }
} }
@include breakpoint(xlarge) { @include breakpoint(large) { // > 1024px
$homepage2021-gallery-square-side: $global-margin*9; $homepage2021-gallery-square-side: $global-margin*14;
$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;
& > * { & > * {
max-width: 48%; max-width: 30%;
} }
} }
.fp-gallery { .fp-gallery {
max-width: 45%; 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;
}
}
}
@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 {
height: $homepage2021-gallery-square-size*4;
max-width: 72%;
.fp-gallery-item { .fp-gallery-item {
width: $homepage2021-gallery-square-side; width: $homepage2021-gallery-square-side;
} }