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';
:root {
/* GRID */
--blog-grid-h-spacing: 20px;
--blog-grid-v-spacing: 40px;
}
/* GRID
=================================================================================*/
.blog56--grid {
display: grid;
row-gap: 32px;
column-gap: 32px;
}
.blog56--grid--1cols {
grid-template-columns: 1fr;
}
.blog56--grid--2cols {
grid-template-columns: 1fr 1fr;
}
.blog56--grid--3cols {
grid-template-columns: 1fr 1fr 1fr;
}
.blog56--grid--4cols {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.blog56--grid--5cols {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.blog56--grid--6cols {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
@include media( tablet ) {
.blog56--grid--tablet--1cols {
grid-template-columns: 1fr;
}
.blog56--grid--tablet--2cols {
grid-template-columns: 1fr 1fr;
}
.blog56--grid--tablet--3cols {
grid-template-columns: 1fr 1fr 1fr;
}
.blog56--grid--tablet--4cols {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
@include media( mobile ) {
.blog56--grid--mobile--1cols {
grid-template-columns: 1fr;
}
.blog56--grid--mobile--2cols {
grid-template-columns: 1fr 1fr;
}
}
.post56--grid {
.post56__text {
padding: 16px 0 0;
}
}
/* LIST
=================================================================================*/
.blog56--list {
display: grid;
row-gap: 32px;
column-gap: 32px;
position: relative;
}
.post56--list {
display: flex;
position: relative;
z-index: 20;
.post56__text {
width: 100%;
}
.thumbnail56 {
width: 40%;
order: 1;
padding-right: 24px;
flex: none;
margin-bottom: 0 !important;
max-width: 60%;
@include media( tablet ) {
padding-right: 14px;
}
@include media( mobile ) {
padding-right: 6px;
}
}
.thumbnail56 + .post56__text {
width: calc(100% - 40%);
order: 2;
flex: none;
min-width: 40%;
}
}
.valign-top {
align-items: stretch;
}
.valign-middle {
align-items: center;
}
.valign-bottom {
align-items: flex-end;
}
/**
* thumbnail right
*/
.post56--list--thumb-right {
.thumbnail56 {
order: 3;
padding-left: 24px;
padding-right: 0;
@include media( tablet ) {
padding-right: 0;
padding-left: 14px;
}
@include media( tablet ) {
padding-right: 0;
padding-left: 6px;
}
}
}
/* BORDER PROBLEM
=================================================================================*/
.blog56__sep {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
display: grid;
column-gap: 32px;
}
.blog56__sep__line {
display: block;
height: 100%;
border-right: 0 solid var(--border-color);
transform: translate(16px,0);
}
.blog56--grid--1cols {
.blog56__sep__line {
display: none;
}
}
.blog56--grid--2cols {
.blog56__sep {
grid-template-columns: 1fr 1fr;
}
.line--2,
.line--3,
.line--4,
.line--5 {
display: none;
}
}
.blog56--grid--3cols {
.blog56__sep {
grid-template-columns: 1fr 1fr 1fr;
}
.line--3,
.line--4,
.line--5 {
display: none;
}
}
.blog56--grid--4cols {
.blog56__sep {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.line--4,
.line--5 {
display: none;
}
}
.blog56--grid--5cols {
.blog56__sep {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.line--5 {
display: none;
}
}
.blog56--grid--6cols {
.blog56__sep {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
}
/* TABLET VERSION */
@include media( tablet ) {
.blog56--grid--tablet--1cols {
.blog56__sep__line {
display: none;
}
}
.blog56--grid--tablet--2cols {
.blog56__sep {
grid-template-columns: 1fr 1fr;
}
.line--1 {
display: block;
}
.line--2,
.line--3,
.line--4,
.line--5 {
display: none;
}
}
.blog56--grid--tablet--3cols {
.blog56__sep {
grid-template-columns: 1fr 1fr 1fr;
}
.line--1,
.line--2 {
display: block;
}
.line--3,
.line--4,
.line--5 {
display: none;
}
}
.blog56--grid--tablet--4cols {
.blog56__sep {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.line--1,
.line--2,
.line--3 {
display: block;
}
.line--4,
.line--5 {
display: none;
}
}
}
@include media( mobile ) {
.blog56--grid--mobile--1cols {
.blog56__sep__line {
display: none;
}
}
.blog56--grid--mobile--2cols {
.blog56__sep {
grid-template-columns: 1fr 1fr;
}
.line--1 {
display: block;
}
.line--2,
.line--3,
.line--4,
.line--5 {
display: none;
}
}
}
/**
* POST HORIZONTAL SEP
*/
.post56__sep__line {
position: absolute;
top: -16px;
left: 0;
right: 0;
/* no need this, it's complicated
left: -16px;
right: -16px; */
z-index: 11;
border-top: 1px solid var(--border-color);
}
.griditem56:first-child .post56__sep__line {
display: none !important; // works in all cases
}
.blog56--grid--2cols,
.blog56--grid--3cols,
.blog56--grid--4cols,
.blog56--grid--5cols,
.blog56--grid--6cols {
.griditem56:nth-child(2) .post56__sep__line {
display: none;
}
}
.blog56--grid--3cols,
.blog56--grid--4cols,
.blog56--grid--5cols,
.blog56--grid--6cols {
.griditem56:nth-child(3) .post56__sep__line {
display: none;
}
}
.blog56--grid--4cols,
.blog56--grid--5cols,
.blog56--grid--6cols {
.griditem56:nth-child(4) .post56__sep__line {
display: none;
}
}
.blog56--grid--5cols,
.blog56--grid--6cols {
.griditem56:nth-child(5) .post56__sep__line {
display: none;
}
}
.blog56--grid--6cols {
.griditem56:nth-child(6) .post56__sep__line {
display: none;
}
}
/* TABLET VERSION */
@include media( tablet ) {
// restore displaying
.blog56.blog56--grid--tablet--1cols,
.blog56.blog56--grid--tablet--2cols,
.blog56.blog56--grid--tablet--3cols,
.blog56.blog56--grid--tablet--4cols,
.blog56.blog56--grid--tablet--5cols,
.blog56.blog56--grid--tablet--6cols {
.griditem56 .post56__sep__line {
display: block;
}
}
// now start hiding again
.blog56.blog56--grid--tablet--2cols,
.blog56.blog56--grid--tablet--3cols,
.blog56.blog56--grid--tablet--4cols {
.griditem56:nth-child(2) .post56__sep__line {
display: none;
}
}
.blog56.blog56--grid--tablet--3cols,
.blog56.blog56--grid--tablet--4cols {
.griditem56:nth-child(3) .post56__sep__line {
display: none;
}
}
.blog56.blog56--grid--tablet--4cols {
.griditem56:nth-child(4) .post56__sep__line {
display: none;
}
}
}
/* MOBILE VERSION */
@include media( mobile ) {
// restore showing it
.post56__sep__line {
display: block !important;
}
// we'll hide them by another way
.griditem56:first-child .post56__sep__line {
visibility: hidden;
opacity: 0;
}
// now start hiding it
.blog56.blog56--grid--mobile--2cols {
.griditem56:nth-child(2) .post56__sep__line {
visibility: hidden;
opacity: 0;
}
}
}