gallery in home page for media queries
This commit is contained in:
parent
c5ffdd0723
commit
8d4ca91ebe
File diff suppressed because one or more lines are too long
|
@ -1,9 +1,9 @@
|
||||||
.bfr_category_tags {
|
.bfr_category_tags {
|
||||||
font-family: $header-font-family;
|
font-family: $header-font-family;
|
||||||
position: relative;
|
// position: relative;
|
||||||
top:-1rem;
|
// top:-1rem;
|
||||||
text-align: center;
|
// text-align: center;
|
||||||
z-index: 100;
|
// z-index: 100;
|
||||||
.tag-cloud-link::before {
|
.tag-cloud-link::before {
|
||||||
content: '#';
|
content: '#';
|
||||||
// display: inline-block;
|
// display: inline-block;
|
||||||
|
@ -28,5 +28,3 @@
|
||||||
display:block;
|
display:block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -18,16 +18,14 @@
|
||||||
background-image: url('../images/biofriction-logo-moving-trans-loosy-100.gif');
|
background-image: url('../images/biofriction-logo-moving-trans-loosy-100.gif');
|
||||||
}
|
}
|
||||||
|
|
||||||
.bfr_category_tags {
|
// .bfr_category_tags {
|
||||||
// display:flex;
|
// max-width: calc(66vw - 4rem);
|
||||||
// justify-content:center;
|
// margin: 0 auto;
|
||||||
max-width: calc(66vw - 4rem);
|
// a {
|
||||||
margin: 0 auto;
|
// display:inline-block;
|
||||||
a {
|
// margin-bottom: auto;
|
||||||
display:inline-block;
|
// }
|
||||||
margin-bottom: auto;
|
// }
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -166,47 +166,92 @@ $grid-column-width:$grid-row-width/$grid-column-count;
|
||||||
.bfr_category_title{
|
.bfr_category_title{
|
||||||
display:none;
|
display:none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// homepage 2021
|
// homepage 2021
|
||||||
.homepage-2021 { //&.main-container
|
.homepage-2021 { //&.main-container
|
||||||
@include breakpoint(small) {
|
|
||||||
.entry-content {
|
.entry-content {
|
||||||
display:flex;
|
|
||||||
flex-flow: row;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
& > * {
|
& > * {
|
||||||
flex-basis: 51%;
|
float:left;
|
||||||
|
clear:both;
|
||||||
|
margin-left: $global-margin;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.fp-gallery {
|
.fp-gallery {
|
||||||
flex-basis: 45%;
|
|
||||||
max-width: 45%;
|
|
||||||
margin-left: auto;
|
|
||||||
position:absolute;
|
position:absolute;
|
||||||
top:0;
|
top:0;
|
||||||
right: $global-margin;
|
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 {
|
.fp-gallery-item {
|
||||||
display:flex;
|
width: $homepage2021-gallery-square-side;
|
||||||
align-items: center;
|
}
|
||||||
width: 100%;
|
// .fp-gallery-icon {
|
||||||
|
// }
|
||||||
|
img {
|
||||||
|
height: $homepage2021-gallery-square-side;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@include breakpoint(medium) {
|
@include breakpoint(medium) {
|
||||||
.fp-gallery {
|
$homepage2021-gallery-square-side: $global-margin*8;
|
||||||
max-height: 90vw;
|
$homepage2021-gallery-square-size: $homepage2021-gallery-square-side+$global-margin;
|
||||||
overflow: hidden;
|
.entry-content {
|
||||||
|
min-height: $homepage2021-gallery-square-size*7;
|
||||||
|
& > * {
|
||||||
|
max-width: 48%;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
.fp-gallery {
|
||||||
|
max-width: 45%;
|
||||||
.fp-gallery-item {
|
.fp-gallery-item {
|
||||||
width:40%;
|
width: $homepage2021-gallery-square-side;
|
||||||
|
}
|
||||||
|
// .fp-gallery-icon {
|
||||||
|
// }
|
||||||
|
img {
|
||||||
|
height: $homepage2021-gallery-square-side;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@include breakpoint(xlarge) {
|
@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 {
|
.fp-gallery {
|
||||||
}
|
max-width: 45%;
|
||||||
.fp-gallery-item {
|
.fp-gallery-item {
|
||||||
width:26%;
|
width: $homepage2021-gallery-square-side;
|
||||||
|
}
|
||||||
|
// .fp-gallery-icon {
|
||||||
|
// }
|
||||||
|
img {
|
||||||
|
height: $homepage2021-gallery-square-side;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue