hypothetical/resources/assets/sass/pages/_blog.scss

82 lines
1.9 KiB
SCSS
Raw Normal View History

.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: px2rem(5px);
@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: px2rem(25px);
@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: px2rem(25px);
text-transform: uppercase;
}
&-info {
color: lighten($c-text, 30%);
}
&-body {
margin: ($grid-gutter-width / 2) 0px;
}
&-taglist {
width: 100%;
&-item {
margin-right: px2rem(5px);
display: inline-block;
padding: px2rem(3px) px2rem(8px);
border-radius: px2rem(3px);
background-color: $c-accent;
color: $c-text-light;
}
}
}
}
}