website/assets/projects/list.scss

78 lines
1.5 KiB
SCSS
Raw Normal View History

2020-09-14 16:24:02 +02:00
@import '../partials/main';
@import '../partials/nav';
.section.header {
2020-10-05 09:57:10 +02:00
align-items: center;
background: rgb(70, 70, 105);
2020-10-05 09:57:10 +02:00
display: flex;
height: 150px;
margin: 0 0 40px 0;
text-align: center;
header {
h1 {
font-size: 1.8em;
margin: auto;
}
2020-09-14 16:24:02 +02:00
}
}
.section-articles {
display: grid;
grid-gap: 1rem;
2020-10-05 09:57:10 +02:00
grid-template-columns: repeat(2, 1fr);
margin: 20px 0;
2020-09-14 16:24:02 +02:00
a {
color: rgb(255, 255, 255);
text-decoration: none;
}
article {
background: rgb(60, 60, 90);
border: 1px solid rgb(60, 60, 90);
2020-09-14 16:24:02 +02:00
border-radius: 5px;
color: rgb(255, 255, 255);
2020-09-14 16:24:02 +02:00
display: flex;
flex-flow: column;
height: max-content;
max-width: 562px;
padding: 20px;
2020-09-14 16:24:02 +02:00
transition: background .2s;
&:hover {
background: rgb(70, 70, 105);
}
2020-09-14 16:24:02 +02:00
img {
background: rgb(80, 80, 120);
border-radius: 5px 5px 0px 0px;
margin: -20px -20px 15px -20px;
2020-10-05 09:57:10 +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
}
.meta {
font-size: 14px;
2020-09-14 16:24:02 +02:00
margin: 0;
}
.status {
color: rgb(215, 215, 245);
font-style: italic;
2020-09-14 16:24:02 +02:00
}
}
}
2020-09-21 10:59:52 +02:00
@media (max-width: 900px) {
.section-articles {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.section-articles {
grid-template-columns: repeat(1, 1fr);
}
}
2020-09-14 16:24:02 +02:00
@import '../partials/footer';