website/assets/_default/single.scss

109 lines
2 KiB
SCSS
Raw Normal View History

2020-11-03 20:22:08 +01:00
@import '../import/colors.scss';
@import '../import/syntax.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
.section-article {
article {
2020-11-12 16:31:56 +01:00
margin: 0 auto;
max-width: 720px;
2020-09-14 16:24:02 +02:00
.meta {
2020-11-03 20:33:16 +01:00
color: $white-dark;
2020-09-14 16:24:02 +02:00
}
.title {
font-size: 2em;
margin-top: 20px;
}
img {
2020-11-03 20:33:16 +01:00
border: 1px solid $bg60;
border-radius: 5px;
margin-bottom: 15px;
max-width: 100%;
2020-09-14 16:24:02 +02:00
}
2020-11-09 16:12:02 +01:00
@include a-underlined;
2020-10-05 09:57:10 +02:00
h2 {
font-size: .6em;
}
2020-09-17 21:51:17 +02:00
aside {
margin-top: 80px;
.tags {
display: flex;
list-style: none;
2020-10-05 09:57:10 +02:00
margin-left: -15px;
2020-09-17 21:51:17 +02:00
padding: 0;
li {
a {
2020-11-03 20:33:16 +01:00
background: $bg60;
2020-10-05 09:57:10 +02:00
border: 0;
border-radius: 5px;
2020-11-03 20:33:16 +01:00
color: $white-dark;
2020-10-05 09:57:10 +02:00
margin-left: 15px;
padding: 10px;
&:hover {
2020-11-03 20:33:16 +01:00
background: $bg50;
color: $white-light;
}
2020-09-17 21:51:17 +02:00
}
}
}
}
2020-09-14 16:24:02 +02:00
}
}
.section-articles {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1rem;
2020-10-05 09:57:10 +02:00
margin: 20px auto 0 auto;
2020-09-21 10:59:52 +02:00
max-width: 720px;
2020-10-05 09:57:10 +02:00
white-space: nowrap;
&::after {
2020-11-03 20:33:16 +01:00
background: $bg50;
content: '';
2020-10-05 09:57:10 +02:00
height: 200px;
left: 0;
position: absolute;
width: 100vw;
z-index: -10;
}
2020-09-14 16:24:02 +02:00
article {
display: flex;
flex-flow: column;
height: max-content;
margin: 20px 0;
2020-09-14 16:24:02 +02:00
a {
2020-10-05 09:57:10 +02:00
border-bottom: 1px solid transparent;
2020-11-03 20:33:16 +01:00
color: $white-dark;
2020-10-05 09:57:10 +02:00
transition: border .2s, color .2s;
&:hover {
2020-10-05 09:57:10 +02:00
border-bottom: 1px solid;
2020-11-03 20:33:16 +01:00
color: $red;
2020-10-05 09:57:10 +02:00
text-decoration: none;
}
2020-09-14 16:24:02 +02:00
}
}
2020-10-05 09:57:10 +02:00
.next-article {
margin-right: auto;
}
.previous-article {
2020-10-05 09:57:10 +02:00
margin-left: auto;
}
}
@media (max-width: 400px) {
.section-articles {
grid-template-columns: repeat(1, 1fr);
&::after {
height: 250px;
}
.next-article {
margin: 20px auto 0 auto;
}
.previous-article {
margin: 0 auto;
}
2020-09-14 16:24:02 +02:00
}
}