rf-web/_sass/layouts/post.scss
2020-09-10 22:42:40 +02:00

106 lines
1.4 KiB
SCSS

.post-list {
margin: 0;
padding: 0;
margin-bottom: var(--size-128);
h2 {
margin-bottom: var(--size-32);
}
.post-item {
margin-bottom: var(--size-64);
.post-header {
margin-bottom: var(--size-16);
}
.post-content {
p {
display: inline;
}
}
}
}
.news-post {
margin-bottom: var(--size-64);
}
.post-item {
list-style: none;
padding: 0;
margin-bottom: var(--size-16);
.post-header {
display: flex;
justify-content: space-between;
margin-bottom: var(--size-32);
h2,
h3,
label {
display: inline-flex;
align-items: center;
@include textbox;
margin: 0;
}
a {
color: var(--colour-graphite);
text-decoration: none;
&:hover,
&:visited {
font-style: normal;
}
}
@include touch {
flex-wrap: wrap;
h2 {
margin-bottom: 8px;
}
}
}
.post-content {
@include textbox;
h1,
h2,
h3,
h4,
h5,
p,
span,
a,
li {
&:last-child {
margin-bottom: 0;
}
}
}
ul {
margin-left: var(--size-16);
margin-bottom: var(--size-32);
}
h3:not(:first-of-type) {
margin-top: var(--size-32);
}
.tag {
@include textbox;
display: inline-block;
}
}
.post-content {
a.button {
-webkit-appearance: none;
border: none;
box-shadow: none;
font-size: var(--size-16);
cursor: pointer;
}
}