Improve some styling

This commit is contained in:
Gabriel Augendre 2020-08-18 11:37:59 +02:00
parent 3e5967a0cb
commit e803456e90
4 changed files with 13 additions and 9 deletions

View file

@ -3,5 +3,4 @@
Simple blog management system. Simple blog management system.
## Todo ## Todo
2. Rework HTML structure to be more logical and not tied to styling.
3. Find a nice way to display metadata (author, dates, etc) 3. Find a nice way to display metadata (author, dates, etc)

View file

@ -10,7 +10,8 @@
html { html {
font-size: 110%; font-size: 110%;
max-width: calc(640px + 2em); max-width: calc(640px + 2em);
margin: 8px auto 6em; padding: 8px 0 3em;
margin: 0 auto;
} }
body { body {
@ -24,6 +25,10 @@ p {
line-height: 1.7; line-height: 1.7;
} }
li {
line-height: 1.4;
}
body img { body img {
max-width: 100%; max-width: 100%;
} }
@ -31,7 +36,7 @@ body img {
a { a {
color: var(--main); color: var(--main);
text-decoration: none; text-decoration: none;
border-bottom: 2.5px solid var(--accent); border-bottom: .3ex solid var(--accent);
} }
a:hover, a:focus { a:hover, a:focus {

View file

@ -15,7 +15,7 @@
{% empty %} {% empty %}
<p>No article here. Come back later 🙂</p> <p>No article here. Come back later 🙂</p>
{% endfor %} {% endfor %}
<div class="pagination"> <nav class="pagination">
<div class="older"> <div class="older">
{% if page_obj.has_next %} {% if page_obj.has_next %}
<a href="?page={{ page_obj.next_page_number }}">⇠ Older</a> <a href="?page={{ page_obj.next_page_number }}">⇠ Older</a>
@ -26,5 +26,5 @@
<a href="?page={{ page_obj.previous_page_number }}">Newer ⇢</a> <a href="?page={{ page_obj.previous_page_number }}">Newer ⇢</a>
{% endif %} {% endif %}
</div> </div>
</div> </nav>
{% endblock %} {% endblock %}

View file

@ -1,9 +1,9 @@
{% load i18n %}
<p class="date"> <p class="date">
{% if article.published_at %} {% if article.published_at %}
{{ article.published_at|date }} <time datetime="{{ article.published_at|date:'c' }}">{{ article.published_at|date }}</time>
{% include "articles/admin_link_snippet.html" %}
{% else %} {% else %}
{{ article.updated_at|date }} <time datetime="{{ article.updated_at|date:'c' }}">{{ article.updated_at|date }}</time>
{% include "articles/admin_link_snippet.html" %}
{% endif %} {% endif %}
{% include "articles/admin_link_snippet.html" %}
</p> </p>