adjust news article and fact box styling

This commit is contained in:
elise
2024-08-06 20:12:35 +02:00
parent 22cc78bc99
commit 0fc56226bf
3 changed files with 20 additions and 2 deletions

View File

@ -1,13 +1,13 @@
.factBoxWrapper { .factBoxWrapper {
max-width: var(--size-width-p); max-width: var(--size-width-p);
margin: 0 auto; margin: 0 auto var(--spacing-m);
} }
.factBox { .factBox {
background: var(--color-background-secondary); background: var(--color-background-secondary);
margin: 0 calc(var(--spacing-s) * -1); margin: 0 calc(var(--spacing-s) * -1);
padding: var(--spacing-s); padding: var(--spacing-s);
font-size: var(--font-size-caption); font-size: var(--font-size-body);
&[data-background-color="betongGray"] { &[data-background-color="betongGray"] {
background-color: var(--color-betongGray); background-color: var(--color-betongGray);

View File

@ -1,6 +1,17 @@
.news-header { .news-header {
display: block; display: block;
text-align: center; text-align: center;
width: var(--size-width-lead);
max-width: 100%;
margin: 0 auto var(--spacing-m);
figure{
width: 100%;
>div, img {
width: 100%;
}
}
} }
.news-title { .news-title {
@ -18,4 +29,10 @@
a { a {
text-decoration: none; text-decoration: none;
} }
}
@media (max-width: 600px) {
.news-header {
text-align: left;
}
} }

View File

@ -60,6 +60,7 @@
// sizes // sizes
--size-width-p: 36rem; --size-width-p: 36rem;
--size-width-lead: 48rem;
--size-icon: 1em; --size-icon: 1em;
--size-icon-circle: 2.4rem; --size-icon-circle: 2.4rem;
--size-icon-large: 3.4rem; --size-icon-large: 3.4rem;