dev-chiefworks
64 lines
1.4 KiB
SCSS
64 lines
1.4 KiB
SCSS
/* ------------------------------------------------------------------------------
|
|
*
|
|
* # Blog layouts
|
|
*
|
|
* Blog layouts with various blog layouts
|
|
*
|
|
* ---------------------------------------------------------------------------- */
|
|
|
|
// Check if component is enabled
|
|
@if $enable-blog {
|
|
|
|
// Horizontal layout
|
|
.blog-horizontal {
|
|
|
|
// Stick thumb to the left and give it fixed width
|
|
.card-img-actions {
|
|
width: 100%;
|
|
|
|
// Desktop size
|
|
@include media-breakpoint-up(sm) {
|
|
width: 45%;
|
|
float: left;
|
|
max-width: $blog-horizontal-img-max-width;
|
|
z-index: 10;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Media sizing
|
|
//
|
|
|
|
// Mini
|
|
.blog-horizontal-xs {
|
|
.card-img-actions {
|
|
@include media-breakpoint-up(sm) {
|
|
width: 35%;
|
|
max-width: $blog-horizontal-img-max-width-xs;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Medium
|
|
.blog-horizontal-sm {
|
|
.card-img-actions {
|
|
@include media-breakpoint-up(sm) {
|
|
width: 40%;
|
|
max-width: $blog-horizontal-img-max-width-sm;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Large
|
|
.blog-horizontal-lg {
|
|
.card-img-actions {
|
|
@include media-breakpoint-up(sm) {
|
|
width: 50%;
|
|
max-width: $blog-horizontal-img-max-width-lg;
|
|
}
|
|
}
|
|
}
|
|
}
|