hello
Server : Apache/2.4.52 (Ubuntu) System : Linux HAN2 5.15.0-185-generic #195-Ubuntu SMP Fri Jun 19 17:11:50 UTC 2026 x86_64 User : servadmin ( 1000) PHP Version : 8.1.2-1ubuntu2.25 Disable Function : NONE Directory : /www/docs/www.obusignal.com/www.obusignal.com/wp-content/themes/fox/css56/builder/ |
@import '../lib';
/* MASONRY
=================================================================================*/
.main-masonry {
margin: -32px -16px 0;
}
.masonry-cell {
display: block;
float: left;
padding: 32px 16px 0;
z-index: 99;
}
.masonry56--1cols {
.masonry-cell,
.grid-sizer {
width: 100%;
}
}
.masonry56--2cols {
.masonry-cell,
.grid-sizer {
width: 50%;
}
}
.masonry56--3cols {
.masonry-cell,
.grid-sizer {
width: 33.33%;
}
}
.masonry56--4cols {
.masonry-cell,
.grid-sizer {
width: 25%;
}
}
.masonry56--5cols {
.masonry-cell,
.grid-sizer {
width: 20%;
}
}
.masonry56--6cols {
.masonry-cell,
.grid-sizer {
width: 16.66%;
}
}
/* --------------- tablet */
@include media( tablet ) {
.masonry56--tablet--1cols {
.masonry-cell,
.grid-sizer {
width: 100%;
}
}
.masonry56--tablet--2cols {
.masonry-cell,
.grid-sizer {
width: 50%;
}
}
.masonry56--tablet--3cols {
.masonry-cell,
.grid-sizer {
width: 33.33%;
}
}
.masonry56--tablet--4cols {
.masonry-cell,
.grid-sizer {
width: 25%;
}
}
.masonry56--tablet--5cols {
.masonry-cell,
.grid-sizer {
width: 20%;
}
}
.masonry56--tablet--6cols {
.masonry-cell,
.grid-sizer {
width: 16.66%;
}
}
}
/* --------------- mobile */
@include media( mobile ) {
.masonry56--mobile--1cols {
.masonry-cell,
.grid-sizer {
width: 100%;
}
}
.masonry56--mobile--2cols {
.masonry-cell,
.grid-sizer {
width: 50%;
}
}
.masonry56--mobile--3cols {
.masonry-cell,
.grid-sizer {
width: 33.33%;
}
}
.masonry56--mobile--4cols {
.masonry-cell,
.grid-sizer {
width: 25%;
}
}
.masonry56--mobile--5cols {
.masonry-cell,
.grid-sizer {
width: 20%;
}
}
.masonry56--mobile--6cols {
.masonry-cell,
.grid-sizer {
width: 16.66%;
}
}
}
/* ---------------------- big first */
.masonry56--bigfirst .masonry-cell:first-child {
background: white; // to avoid sep override
}
.masonry56--bigfirst.masonry56--2cols .masonry-cell:first-child {
width: 100%;
}
.masonry56--bigfirst.masonry56--3cols .masonry-cell:first-child {
width: 66.66%;
}
.masonry56--bigfirst.masonry56--4cols .masonry-cell:first-child {
width: 50%;
}
.masonry56--bigfirst.masonry56--5cols .masonry-cell:first-child {
width: 40%;
}
.masonry56--bigfirst.masonry56--6cols .masonry-cell:first-child {
width: 33.33%;
}
@include media( tablet ) {
.masonry56--bigfirst.masonry56--tablet--2cols .masonry-cell:first-child {
width: 100%;
}
.masonry56--bigfirst.masonry56--tablet--3cols .masonry-cell:first-child {
width: 66.66%;
}
.masonry56--bigfirst.masonry56--tablet--4cols .masonry-cell:first-child {
width: 50%;
}
.masonry56--bigfirst.masonry56--tablet--5cols .masonry-cell:first-child {
width: 40%;
}
.masonry56--bigfirst.masonry56--tablet--6cols .masonry-cell:first-child {
width: 33.33%;
}
}
@include media( mobile ) {
.masonry56--bigfirst.masonry56--mobile--2cols .masonry-cell:first-child {
width: 100%;
}
.masonry56--bigfirst.masonry56--mobile--3cols .masonry-cell:first-child {
width: 66.66%;
}
.masonry56--bigfirst.masonry56--mobile--4cols .masonry-cell:first-child {
width: 50%;
}
.masonry56--bigfirst.masonry56--mobile--5cols .masonry-cell:first-child {
width: 40%;
}
.masonry56--bigfirst.masonry56--mobile--6cols .masonry-cell:first-child {
width: 33.33%;
}
}
.thumbnail56__padding {
display: block;
padding-bottom: 60%; // default value
background-color: #f0f0f0;
}
/* ---------------------- sep problem */
.blog56--masonry {
overflow: hidden; // to hide the sep
}
.blog56--masonry .blog56__sep {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
/* ---------------------- creative masonry */
.post56--portrait .thumbnail56 {
float: left;
width: 50%;
margin: 0 20px 5px 0 !important;
z-index: 999;
}
.masonry-cell {
.thumbnail56,
.post56__text {
opacity: 0;
visibility: hidden;
transform: translate(0,5px);
transition: all .3s ease-out;
transition-delay: 0.15s;
}
.post56__text {
transition-delay: 0.45s;
}
}
.masonry-cell.inview {
.thumbnail56,
.post56__text {
opacity: 1;
visibility: visible;
transform: translate(0, 0);
}
}