94b6795a52
This commit changes targeted styling of `a` element to a class-based styling. This way, this is style is reusable on other elements and another `<a>` element can be used inside a `post-item`. Otherwise, if someone would need to use `<a>` element in a post item, then he would get all other styles (such as `display:flex`) on every `<a>` which is unexpected. This commit ensures that the style is abstracted from the element type itself, giving more flexibility when overriding the theme, and increases maintainability by making the intent more clear.
85 lines
1.4 KiB
SCSS
85 lines
1.4 KiB
SCSS
.posts {
|
|
width: 100%;
|
|
max-width: 800px;
|
|
text-align: left;
|
|
padding: 20px;
|
|
margin: 20px auto;
|
|
|
|
@media #{$media-size-tablet} {
|
|
max-width: 660px;
|
|
}
|
|
|
|
&:not(:last-of-type) {
|
|
// Default
|
|
border-bottom: 1px solid $light-border-color;
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
border-bottom: 1px solid $dark-border-color;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
border-bottom: 1px solid $light-border-color;
|
|
}
|
|
|
|
[data-theme=dark] & {
|
|
border-bottom: 1px solid $dark-border-color;
|
|
}
|
|
|
|
[data-theme=light] & {
|
|
border-bottom: 1px solid $light-border-color;
|
|
}
|
|
}
|
|
|
|
&-group {
|
|
display: flex;
|
|
margin-bottom: 1.9em;
|
|
line-height: normal;
|
|
|
|
@media #{$media-size-tablet} {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&-list {
|
|
flex-grow: 1;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.post {
|
|
&-title {
|
|
font-size: 1rem;
|
|
margin: 5px 0 5px 0;
|
|
}
|
|
|
|
&-year {
|
|
padding-top: 6px;
|
|
margin-right: 1.8em;
|
|
font-size: 1.6em;
|
|
@include dimmed;
|
|
|
|
@media #{$media-size-tablet} {
|
|
margin: -6px 0 4px;
|
|
}
|
|
}
|
|
|
|
&-item {
|
|
border-bottom: 1px grey dashed;
|
|
|
|
&-inner {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
padding: 12px 0;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
&-day {
|
|
flex-shrink: 0;
|
|
margin-left: 1em;
|
|
@include dimmed;
|
|
}
|
|
}
|
|
}
|