Tweak comment styles

This commit is contained in:
Shadowfacts 2019-06-30 15:29:54 -04:00
parent 43a3fc1a69
commit 1f28d6263c
Signed by: shadowfacts
GPG Key ID: 94A5AB95422746E5
2 changed files with 31 additions and 34 deletions

View File

@ -42,6 +42,7 @@ body {
article {
margin-bottom: 75px;
color: var(--content-text-color);
border-bottom: 1px solid var(--accent-color);
@media (min-width: 768px) {
a::before { content: "["; }
@ -81,14 +82,6 @@ article {
color: var(--secondary-ui-text-color);
}
&::after {
content: "";
width: calc(100% - 2 * 30px); // account for .container padding, don't overflow
height: 1px;
background-color: var(--accent-color);
position: absolute;
}
.article-title {
margin-top: 20px;
margin-bottom: 0;
@ -147,16 +140,20 @@ article {
}
#comments-container {
.comments-list {
margin-top: 0px;
padding-left: 0px;
}
border-bottom: 1px solid var(--accent-color);
padding-bottom: 55px;
.comment-user-avatar {
width: 50px;
border-radius: 5px;
float: left;
margin-right: 10px;
border-radius: 5px;
}
@media (min-width: 768px) {
.comments-list {
margin-top: 0px;
padding-left: 0px;
}
.comment-info {
@ -165,10 +162,11 @@ article {
}
.comment-children {
margin-left: 50px;
margin-left: 60px;
margin-top: 20px;
}
}
}
.search {
margin: 100px auto;
@ -399,22 +397,17 @@ figure {
// Footer
.site-footer {
padding-top: 20px;
padding-bottom: 20px;
margin-top: 75px;
margin-bottom: 20px;
background-color: var(--ui-background-color);
font-size: 16px;
> div {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
padding-top: 10px;
// border-top: 3px solid var(--accent-color);
}
.site-title {
margin: 0;
font-variant: small-caps;
@ -463,6 +456,10 @@ figure {
.pagination {
text-align: center;
p {
margin: 0;
}
.pagination-link {
color: var(--accent-color);

View File

@ -69,7 +69,7 @@
</div>
<footer class="site-footer container">
<div>
<!-- <div> -->
<div>
<h2 class="site-title">Shadowfacts</h2>
<p class="ui-controls">
@ -91,7 +91,7 @@
<li><%- fancyLink("Mastodon", "https://social.shadowfacts.net/users/shadowfacts", "rel=me") %></li>
</ul>
</nav>
</div>
<!-- </div> -->
<script>
(() => {