hypothetical/resources/sass/pages/_blog.scss

81 lines
1.9 KiB
SCSS
Vendored

.blog-page-component {
padding: $grid-gutter-width 0px;
h1 {
margin-bottom: $grid-gutter-width;
}
.blog-entry {
border: 1px solid lighten($c-base, 75%);
border-radius: pxrem(5);
@include media-breakpoint-up(md) {
display: flex;
flex-direction: row-reverse;
}
&:not(:last-child) {
margin-bottom: $grid-gutter-width;
}
&-header-image {
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
@include media-breakpoint-down(sm) {
@include aspect-ratio(3, 1);
width: 100%;
}
@include media-breakpoint-up(md) {
width: 35%;
flex-shrink: 0;
}
}
&-content {
padding: pxrem(25);
@include media-breakpoint-up(md) {
display: flex;
flex-direction: row;
flex-grow: 1;
flex-wrap: wrap;
}
> * {
width: 100%;
}
&-title {
@include font-sans-semibold;
margin-bottom: $grid-gutter-width;
font-size: pxrem(25);
text-transform: uppercase;
}
&-info {
color: lighten($c-text, 30%);
}
&-body {
margin: ($grid-gutter-width / 2) 0px;
}
&-taglist {
width: 100%;
&-item {
margin-right: pxrem(5);
display: inline-block;
padding: pxrem(3) pxrem(8);
border-radius: pxrem(3);
background-color: $c-accent;
color: $c-text-light;
}
}
}
}
}