cherrykitten.dev/sass/post.scss
2023-01-28 19:40:47 +01:00

135 lines
1.8 KiB
SCSS

@import "variables";
.posts {
width: 100%;
margin: 0 auto;
}
.post {
width: 100%;
text-align: left;
margin: 20px auto;
padding: 20px 0;
@media (max-width: $tablet-max-width) {
max-width: 660px;
}
&:not(:last-of-type) {
border-bottom: 1px solid var(--border-color);
}
%meta {
font-size: 1rem;
margin-bottom: 10px;
color: var(--accent-alpha-70);
}
&-meta {
@extend %meta;
}
&-meta-inline {
@extend %meta;
display: inline;
}
&-title {
--border: 2px dashed var(--accent);
position: relative;
color: var(--accent2);
margin: 0 0 15px;
padding-bottom: 15px;
border-bottom: var(--border);
font-weight: normal;
a {
text-decoration: none;
}
}
%tags {
margin-bottom: 20px;
font-size: 1rem;
opacity: .5;
}
&-tags {
@extend %tags;
display: block;
}
&-tags-inline {
@extend %tags;
display: inline;
@media (max-width: $phone-max-width) {
display: block;
}
}
&-content {
margin-top: 30px;
}
&-cover {
border: 20px solid var(--accent);
background: transparent;
margin: 40px 0;
padding: 20px;
@media (max-width: $phone-max-width) {
padding: 10px;
border-width: 10px;
}
}
ul {
list-style: none;
li:before {
content: '';
position: absolute;
left: -20px;
color: var(--accent);
}
}
}
.post--regulation {
h1 {
justify-content: center;
}
h2 {
justify-content: center;
margin-bottom: 10px;
&+ h2 {
margin-top: -10px;
margin-bottom: 20px;
}
}
}
.post-list {
.post-date {
color: var(--accent3);
text-decoration: none;
}
a {
text-decoration: none;
}
.post-list-title {
text-decoration: underline;
}
.post-tag {
text-decoration: underline;
}
}