WebDev/mind-overflow-website-ghost-theme
1
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

Make info at end of post prettier

Browse Source 
This is kind of a hacky implementation.
We are using a negative margin to remove the left&right padding from the content div and expand the background color.

What we should do instead, is move the
padding: 0 60px 20px; (and following media queries)
from "mind-post_central-column" to "mind-post_content", and set the mind-post_central-column side padding to zero, if necessary.

This way, only the actual post content will be "centered" and with spacing at the sides, while other stuff (post info, comments) can have their own custom padding and spacing.

In the case of the info box, it should have zero margin (so be 100% large) with spacing (padding) inside of the box itself.
This commit is contained in:
Bea 2021-03-17 17:20:29 +01:00
parent efbc59f5d0
commit a39ed9a787
2 changed files with 22 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
assets/css/screen.css
View File

@ -841,6 +841,13 @@ img.mind-post_feature-image {
.mind-post_info { .mind-post_info {
font-size: 15px; font-size: 15px;
background-color: rgb(30, 30, 30);
margin: 20px -60px; /* hacky way to remove side padding from the content div and expand the background color, but who cares */
padding: 40px 60px;
}
.mind-post_info hr {
visibility: hidden;
} }

6
post.hbs
View File

@ -39,8 +39,9 @@
{{/if}} {{/if}}
</div> </div>
{{content}} {{content}}
</div>
<div class="mind-post_info"> <div class="mind-post_info">
<hr>
Last update: <time class="post-date" datetime="{{date updated_at format='YYYY-MM-DD'}}">{{date updated_at format="DD MMMM YYYY"}}</time> Last update: <time class="post-date" datetime="{{date updated_at format='YYYY-MM-DD'}}">{{date updated_at format="DD MMMM YYYY"}}</time>
<br /> <br />
Author: {{primary_author.name}} Author: {{primary_author.name}}
@ -52,9 +53,8 @@
<b><a href="{{url}}" title="{{name}}" class="tag tag-{{id}} {{slug}}">{{name}}</a></b>{{#unless @last}}, {{/unless}} <b><a href="{{url}}" title="{{name}}" class="tag tag-{{id}} {{slug}}">{{name}}</a></b>{{#unless @last}}, {{/unless}}
{{/foreach}} {{/foreach}}
{{/if}} {{/if}}
<hr>
</div>
</div> </div>
<h3>Comments</h3> <h3>Comments</h3>
<div id="remark42"></div> <div id="remark42"></div>
</div> </div>