Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions components/com_content/tmpl/category/blog.php
Original file line number Diff line number Diff line change
Expand Up @@ -76,12 +76,10 @@
<?php foreach ($this->lead_items as &$item) : ?>
<div class="com-content-category-blog__item blog-item"
itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
<div class="blog-item-content"><!-- Double divs required for IE11 grid fallback -->
<?php
$this->item = & $item;
echo $this->loadTemplate('item');
?>
</div>
</div>
<?php $leadingcount++; ?>
<?php endforeach; ?>
Expand Down
85 changes: 41 additions & 44 deletions templates/cassiopeia/scss/blocks/_modifiers.scss
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,47 @@

.blog-item {
padding: 0 ($cassiopeia-grid-gutter / 2) $cassiopeia-grid-gutter ($cassiopeia-grid-gutter / 2);
display: flex;
flex-direction: column;
.boxed & {
background-color: #fff;
box-shadow: 0 0 2px rgba(52, 58, 67, 0.1), 0 2px 5px rgba(52, 58, 67, 0.08), 0 5px 15px rgba(52, 58, 67, 0.08), inset 0 3px 0 $cassiopeia-template-color;
.item-content {
padding: 25px;
}
}
.image-left &, .image-right & {
flex-direction: row;
}
.item-image {
margin-top: 3px;
margin-bottom: 15px;
overflow: hidden;
.boxed & {
margin-bottom: 0;
}
.image-right & {
order: 1;
}
.image-bottom & {
order: 1;
margin-top: -15px;
}
}
.item-content {
.image-left & {
padding-left: 25px;
}
.image-right & {
padding-right: 25px;
}
}
.image-left &, .image-right & {
flex-direction: row;
@include media-breakpoint-down(sm) {
flex-direction: column;
}
}
}

@supports (display: grid) {
Expand Down Expand Up @@ -153,50 +194,6 @@
}
}

.blog-item-content {
display: flex;
flex-direction: column;
.boxed & {
background-color: #fff;
box-shadow: 0 0 2px rgba(52, 58, 67, 0.1), 0 2px 5px rgba(52, 58, 67, 0.08), 0 5px 15px rgba(52, 58, 67, 0.08), inset 0 3px 0 $cassiopeia-template-color;
.item-content {
padding: 25px;
}
}
.image-left &, .image-right & {
flex-direction: row;
}
.item-image {
margin-top: 3px;
margin-bottom: 15px;
overflow: hidden;
.boxed & {
margin-bottom: 0;
}
.image-right & {
order: 1;
}
.image-bottom & {
order: 1;
margin-top: -15px;
}
}
.item-content {
.image-left & {
padding-left: 25px;
}
.image-right & {
padding-right: 25px;
}
}
.image-left &, .image-right & {
flex-direction: row;
@include media-breakpoint-down(sm) {
flex-direction: column;
}
}
}

.image-alternate {
.blog-item:nth-of-type(2n+1) {
.item-image {
Expand Down