rf-web/_sass/layouts/post.scss

129 lines
1.8 KiB
SCSS
Raw Normal View History

2020-04-25 08:56:48 +00:00
.post-list {
margin: 0;
padding: 0;
margin-bottom: var(--size-128);
2020-04-25 08:56:48 +00:00
h2 {
margin-bottom: var(--size-32);
2020-04-25 08:56:48 +00:00
}
.post-item {
margin-bottom: var(--size-64);
2020-04-25 08:56:48 +00:00
.post-header {
margin-bottom: var(--size-16);
2020-04-25 08:56:48 +00:00
}
.post-content {
p {
display: inline;
}
}
}
}
.news-post {
margin-bottom: var(--size-64);
2021-05-26 18:23:16 +00:00
h3 {
margin-top: var(--size-32);
}
img {
max-width: 100%;
}
button {
padding: var(--size-16) var(--size-32);
border-radius: 0;
background: transparent;
border: 1px solid var(--colour-graphite);
width: 100%;
cursor: pointer;
&:hover {
background: var(--colour-graphite);
border: 1px solid var(--colour-graphite);
color: var(--colour-bg);
}
}
2020-04-25 08:56:48 +00:00
}
.post-item {
list-style: none;
padding: 0;
margin-bottom: var(--size-16);
2020-04-25 08:56:48 +00:00
.post-header {
display: flex;
justify-content: space-between;
margin-bottom: var(--size-32);
2020-04-25 08:56:48 +00:00
h2,
h3,
label {
display: inline-flex;
align-items: center;
@include textbox;
margin: 0;
}
a {
color: var(--colour-graphite);
2020-04-25 08:56:48 +00:00
text-decoration: none;
&:hover,
&:visited {
font-style: normal;
}
}
@include touch {
flex-wrap: wrap;
h2 {
margin-bottom: 8px;
}
}
2020-04-25 08:56:48 +00:00
}
.post-content {
@include textbox;
h1,
h2,
h3,
h4,
h5,
p,
span,
a,
li {
&:last-child {
margin-bottom: 0;
}
}
2020-04-25 08:56:48 +00:00
}
2020-09-10 20:42:40 +00:00
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;
}
2020-04-25 08:56:48 +00:00
}
.post-content {
a.button {
-webkit-appearance: none;
border: none;
box-shadow: none;
font-size: var(--size-16);
cursor: pointer;
}
}