website/assets/_default/list.scss

68 lines
1.3 KiB
SCSS
Raw Normal View History

2020-11-03 20:22:08 +01:00
@import '../import/colors.scss';
@import '../import/main.scss';
@import '../import/nav.scss';
@import '../import/footer.scss';
2020-11-09 16:12:02 +01:00
@import '../import/include.scss';
2020-09-14 16:24:02 +02:00
2020-11-04 18:37:31 +01:00
main {
margin: 60px 0 0 0;
2020-09-14 16:24:02 +02:00
}
.section-articles {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(2, 1fr);
margin: 20px 0;
2020-09-14 16:24:02 +02:00
a {
2020-11-03 20:33:16 +01:00
color: $white-light;
2020-09-14 16:24:02 +02:00
text-decoration: none;
}
article {
2020-11-03 20:33:16 +01:00
background: $bg60;
border: 1px solid $bg60;
2020-09-14 16:24:02 +02:00
border-radius: 5px;
2020-11-03 20:33:16 +01:00
color: $white-light;
2020-09-14 16:24:02 +02:00
display: flex;
flex-flow: column;
height: max-content;
padding: 20px;
2020-09-14 16:24:02 +02:00
transition: background .2s;
&:hover {
2020-11-03 20:33:16 +01:00
background: $bg70;
}
2020-09-14 16:24:02 +02:00
img {
2020-11-03 20:33:16 +01:00
background: $bg80;
border-radius: 5px 5px 0px 0px;
margin: -20px -20px 15px -20px;
2020-09-14 16:24:02 +02:00
max-height: 250px;
max-width: calc(100% + 40px);
object-fit: cover;
order: -1;
2020-09-14 16:24:02 +02:00
}
h1 {
font-size: 18px;
font-weight: 400;
margin: 0 0 10px 0;
2020-09-14 16:24:02 +02:00
}
a {
2020-11-03 20:33:16 +01:00
color: $white-light;
&:hover {
text-decoration: underline;
}
2020-09-14 16:24:02 +02:00
}
.meta {
font-size: 14px;
2020-09-14 16:24:02 +02:00
margin: 0;
}
.author {
2020-11-03 20:33:16 +01:00
color: $white-dark;
font-style: italic;
2020-09-14 16:24:02 +02:00
}
}
}
2020-09-21 10:59:52 +02:00
@media (max-width: 600px) {
.section-articles {
grid-template-columns: repeat(1, 1fr);
}
}