ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Make news teaser spacing more consistent

This commit is contained in:
Ramon Wenger 2020-10-07 13:48:42 +02:00
parent e94573cd09
commit 801c8a7d2e
5 changed files with 60 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
client/src/components/news/NewsTeaser.vue
View File

@ -4,10 +4,10 @@
<img <img
:src="teaser.imageUrl" :src="teaser.imageUrl"
class="news-teaser__image"> class="news-teaser__image">
<p class="news-teaser__image-source">
<a <a
:href="teaser.imageSource" :href="teaser.imageSource"
class="tiny-text">Quelle {{ teaser.imageSource }}</a></p> class="news-teaser__image-source">Quelle {{ teaser.imageSource }}</a>
<h4 class="news-teaser__title">{{ teaser.title }}</h4> <h4 class="news-teaser__title">{{ teaser.title }}</h4>
<p class="news-teaser__description">{{ teaser.description }}</p> <p class="news-teaser__description">{{ teaser.description }}</p>
<p class="news-teaser__date">{{ teaser.displayDate }}</p> <p class="news-teaser__date">{{ teaser.displayDate }}</p>
@ -35,7 +35,6 @@
.news-teaser { .news-teaser {
position: relative; position: relative;
padding-bottom: $large-spacing;
&__image { &__image {
display: block; display: block;
@ -43,25 +42,28 @@
height: auto; height: auto;
@include desktop { @include desktop {
max-width: $news_width; max-width: $news-width;
} }
} }
&__image-source { &__image-source {
line-height: 25px; line-height: 25px;
@include tiny-text;
margin-bottom: $medium-spacing;
display: block;
}
&__title {
margin-bottom: $small-spacing;
} }
&__description { &__description {
margin-bottom: $large-spacing; margin-bottom: $small-spacing;
} }
&__date { &__date {
font-family: $sans-serif-font-family; @include regular-text;
font-weight: $font-weight-regular;
color: $color-silver-dark; color: $color-silver-dark;
position: absolute;
bottom: 0;
left: 0;
} }
} }
</style> </style>

9
client/src/components/news/NewsTeasers.vue
View File

@ -35,14 +35,15 @@
display: grid; display: grid;
} }
margin-bottom: $large-spacing; margin-bottom: $large-spacing;
grid-gap: 40px; grid-gap: $large-spacing;
@include desktop { @include desktop {
grid-column-gap: 40px; grid-column-gap: $large-spacing;
grid-template-columns: repeat(auto-fit, minmax(320px, $news_width)); grid-row-gap: $section-spacing;
grid-template-columns: repeat(auto-fit, minmax(320px, $news-width));
grid-auto-rows: minmax(400px, auto); grid-auto-rows: minmax(400px, auto);
grid-template-rows: auto auto; grid-template-rows: auto auto;
-ms-grid-columns: $news_width $news_width; -ms-grid-columns: $news-width $news-width;
} }
} }
</style> </style>

10
client/src/styles/_mixins.scss
View File

@ -37,6 +37,7 @@
} }
&--blue { &--blue {
background-color: $color-accent-2; background-color: $color-accent-2;
& .widget-footer { & .widget-footer {
background-color: $color-accent-2-dark; background-color: $color-accent-2-dark;
} }
@ -44,12 +45,14 @@
} }
&--red { &--red {
background-color: $color-accent-3; background-color: $color-accent-3;
& .widget-footer { & .widget-footer {
background-color: $color-accent-3-dark; background-color: $color-accent-3-dark;
} }
} }
&--green { &--green {
background-color: $color-accent-4; background-color: $color-accent-4;
& .widget-footer { & .widget-footer {
background-color: $color-accent-4-dark; background-color: $color-accent-4-dark;
} }
@ -118,6 +121,13 @@
font-size: toRem(14px); font-size: toRem(14px);
} }
@mixin tiny-text {
font-size: toRem(11px);
font-family: $sans-serif-font-family;
font-weight: $font-weight-regular;
color: $color-silver-dark;
}
@mixin aside-text { @mixin aside-text {
@include regular-text; @include regular-text;
font-size: toRem(14px); font-size: toRem(14px);

6
client/src/styles/_typography.scss
View File

@ -82,9 +82,3 @@ input, textarea, select, button {
color: $color-brand-dark; color: $color-brand-dark;
} }
.tiny-text {
font-size: toRem(11px);
font-family: $sans-serif-font-family;
font-weight: $font-weight-regular;
color: $color-silver-dark;
}

2
client/src/styles/_variables.scss
View File

@ -78,4 +78,4 @@ $default-heading-line-height: 1.2;
$popover-default-bottom: -110px; $popover-default-bottom: -110px;
$footer-width: 800px; $footer-width: 800px;
$news_width: 550px; $news-width: 550px;