added galleries width and sizes to show proper number of pictures
This commit is contained in:
parent
d9b42246ec
commit
c9490367c7
File diff suppressed because one or more lines are too long
|
@ -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,18 +201,20 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@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 {
|
||||||
// }
|
// }
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue