shadowfacts
/
shadowfacts.net
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
site/css/main.scss
View File

@ -42,6 +42,7 @@ body {
article { article {
margin-bottom: 75px; margin-bottom: 75px;
color: var(--content-text-color); color: var(--content-text-color);
border-bottom: 1px solid var(--accent-color);
@media (min-width: 768px) { @media (min-width: 768px) {
a::before { content: "["; } a::before { content: "["; }
@ -81,14 +82,6 @@ article {
color: var(--secondary-ui-text-color); 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 { .article-title {
margin-top: 20px; margin-top: 20px;
margin-bottom: 0; margin-bottom: 0;
@ -147,26 +140,31 @@ article {
} }
#comments-container { #comments-container {
.comments-list { border-bottom: 1px solid var(--accent-color);
margin-top: 0px; padding-bottom: 55px;
padding-left: 0px;
}
.comment-user-avatar { .comment-user-avatar {
width: 50px; width: 50px;
border-radius: 5px;
float: left; float: left;
margin-right: 10px; margin-right: 10px;
border-radius: 5px;
} }
.comment-info { @media (min-width: 768px) {
margin-top: 0px; .comments-list {
margin-bottom: 5px; margin-top: 0px;
} padding-left: 0px;
}
.comment-children { .comment-info {
margin-left: 50px; margin-top: 0px;
margin-top: 20px; margin-bottom: 5px;
}
.comment-children {
margin-left: 60px;
margin-top: 20px;
}
} }
} }
@ -399,21 +397,16 @@ figure {
// Footer // Footer
.site-footer { .site-footer {
padding-top: 20px; margin-top: 75px;
padding-bottom: 20px; margin-bottom: 20px;
background-color: var(--ui-background-color); background-color: var(--ui-background-color);
font-size: 16px; font-size: 16px;
> div { display: flex;
display: flex; flex-direction: row;
flex-direction: row; justify-content: space-between;
justify-content: space-between; align-items: flex-start;
align-items: flex-start; flex-wrap: wrap;
flex-wrap: wrap;
padding-top: 10px;
// border-top: 3px solid var(--accent-color);
}
.site-title { .site-title {
margin: 0; margin: 0;
@ -463,6 +456,10 @@ figure {
.pagination { .pagination {
text-align: center; text-align: center;
p {
margin: 0;
}
.pagination-link { .pagination-link {
color: var(--accent-color); color: var(--accent-color);

4
site/layouts/default.html.ejs
View File

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