New design improvements

* Max-width to limit number of characters per line
* Changed background colors (page, cards, buttons)
* Reduced header size
This commit is contained in:
Matthieu 2018-06-17 22:07:01 +02:00
parent 3de0ff79b5
commit 117904b69d
5 changed files with 74 additions and 32 deletions

View File

@ -19,7 +19,7 @@ msgid "No posts to see here yet."
msgstr "Aucun article pour le moment" msgstr "Aucun article pour le moment"
msgid "New article" msgid "New article"
msgstr "Derniers articles" msgstr "Nouvel article"
msgid "New blog" msgid "New blog"
msgstr "Nouveau blog" msgstr "Nouveau blog"

View File

@ -9,7 +9,7 @@ html, body
{ {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #ECECEC; background: #F4F4F4;
color: #242424; color: #242424;
font-family: "Route159", serif; font-family: "Route159", serif;
} }
@ -48,14 +48,14 @@ header nav a
{ {
display: block; display: block;
margin: 0 2em; margin: 0 2em;
font-size: 1.2em; font-size: 1em;
} }
header nav a.title header nav a.title
{ {
margin: 0 0 0 -1em; margin: 0 0 0 -1em;
padding: 0; padding: 0;
width: calc(20vw); width: calc(20vw);
font-size: 2em; font-size: 1.75em;
border-right: solid #7765E3 0.1em; border-right: solid #7765E3 0.1em;
text-align: center; text-align: center;
} }
@ -77,7 +77,8 @@ main h1
} }
main h1.article main h1.article
{ {
margin: 1em 0 0.5em; max-width: 40rem;
margin: 1em auto 0.5em;
font-family: "Playfair Display", serif; font-family: "Playfair Display", serif;
font-size: 2.5em; font-size: 2.5em;
font-weight: normal; font-weight: normal;
@ -98,7 +99,8 @@ main h2
main .article-info main .article-info
{ {
margin-bottom: 3em; max-width: 40rem;
margin: 0 auto 3em;
font-size: 0.95em; font-size: 0.95em;
font-weight: 400; font-weight: 400;
} }
@ -111,9 +113,11 @@ main .article-info .author a
main article main article
{ {
max-width: 40rem;
margin: auto;
font-family: "Lora", serif; font-family: "Lora", serif;
font-size: 1.2em; font-size: 1.2em;
line-height: 1.6em; line-height: 1.7em;
text-align: justify; text-align: justify;
} }
@ -135,10 +139,17 @@ main .article-meta > p
/* ~ Likes ~ */ /* ~ Likes ~ */
main .article-meta .likes p main .article-meta .likes p,
main .article-meta .reshares p
{ display: inline-block; margin: 0; } { display: inline-block; margin: 0; }
/* Like button */ /* Like / Reshare button */
main .article-meta .likes,
main .article-meta .reshares
{
padding: 0.5em 0;
}
main .article-meta .likes a.button:before main .article-meta .likes a.button:before
{ {
@ -148,12 +159,23 @@ main .article-meta .likes a.button:before
font-family: "Font Awesome 5 Free"; font-family: "Font Awesome 5 Free";
font-weight: 400; font-weight: 400;
} }
main .article-meta .likes a.button.liked:before main .article-meta .reshares a.button:before
{
content: "";
margin-right: 0.5em;
color: #7765E3;
font-family: "Font Awesome 5 Free";
font-weight: 600;
}
main .article-meta .likes a.button.liked:before,
main .article-meta .reshares a.button.reshared:before
{ font-weight: 900; } { font-weight: 900; }
main .article-meta .likes a.button main .article-meta .likes a.button,
main .article-meta .reshares a.button
{ {
display: inline-block; display: inline-block;
margin: 0 1em; margin: 0 1em;
padding: 0;
background: none; background: none;
color: #242424; color: #242424;
border: none; border: none;
@ -161,6 +183,9 @@ main .article-meta .likes a.button
main .article-meta .likes a.button:hover, main .article-meta .likes a.button:hover,
main .article-meta .likes a.button.liked main .article-meta .likes a.button.liked
{ color: #E92F2F; } { color: #E92F2F; }
main .article-meta .reshares a.button:hover,
main .article-meta .reshares a.button.reshared
{ color: #7765E3; }
/* ~ Comments ~ */ /* ~ Comments ~ */
@ -191,12 +216,12 @@ main .article-meta .comments a.button.liked:before
main .article-meta .comments a.button main .article-meta .comments a.button
{ {
display: inline-block; display: inline-block;
padding: 0;
background: none; background: none;
color: #242424; color: #242424;
border: none; border: none;
} }
main .article-meta .comments a.button:hover, main .article-meta .comments a.button:hover
main .article-meta .comments a.button.liked
{ color: #7765E3; } { color: #7765E3; }
/* Comment button only */ /* Comment button only */
@ -208,7 +233,6 @@ main .article-meta .comments > a.button
main .article-meta .comments .list main .article-meta .comments .list
{ {
display: grid; display: grid;
grid-gap: 20px;
margin: 0; margin: 0;
} }
@ -216,7 +240,7 @@ main .article-meta .comments .list
.comments .list .comment .comments .list .comment
{ {
background: #DADADA; background: #ECECEC;
padding: 2em 20%; padding: 2em 20%;
font-size: 1em; font-size: 1em;
} }
@ -249,7 +273,7 @@ main .article-meta .comments .list
.comments .list .comment .text .comments .list .comment .text
{ {
padding: 1.25em; padding: 1.25em 0;
font-family: "Lora", serif; font-family: "Lora", serif;
font-size: 1.1em; font-size: 1.1em;
line-height: 1.4em; line-height: 1.4em;
@ -312,8 +336,13 @@ textarea
.button, input[type="submit"] .button, input[type="submit"]
{ {
transition: all 0.1s ease-in; transition: all 0.1s ease-in;
display: inline-block;
background: #F4F4F4; border-radius: 0.5em;
margin: 0.5em 0;
padding: 0.75em 1em;
background: transparent;
color: #7765E3; color: #7765E3;
border: 1px solid #7765E3; border: 1px solid #7765E3;
@ -341,11 +370,14 @@ form.new-post .title
} }
form.new-post textarea form.new-post textarea
{ {
min-height: 8em;
padding: 0; padding: 0;
background: none; background: none;
} }
form.new-post input[type="submit"] form.new-post input[type="submit"]
{ {
display: block;
margin: 1em auto;
width: 60%; width: 60%;
background: #DADADA; background: #DADADA;
@ -360,14 +392,24 @@ form.new-post input[type="submit"]
* == User == * == User ==
*/ */
.user h1
{
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 0;
}
.badge .badge
{ {
font-size: 1rem; margin-left: 1em;
padding: 0.35em 1em;
background: #F4F4F4; background: #F4F4F4;
color: #7765E3; color: #7765E3;
border: 1px solid #7765E3; border: 1px solid #7765E3;
border-radius: 1em; border-radius: 1em;
padding: 0.35em 1em;
font-size: 1rem;
} }
/* /*
@ -392,8 +434,10 @@ form.new-post input[type="submit"]
padding: 1em; padding: 1em;
box-sizing: border-box; box-sizing: border-box;
background: #DADADA; background: #E3E3E3;
} }
.list .card
{ min-height: 0; }
/* ~ Card content ~ */ /* ~ Card content ~ */
@ -401,7 +445,7 @@ form.new-post input[type="submit"]
.card h3 .card h3
{ {
margin: 0.75em 0.5em; margin: 0.75em 0;
font-family: "Playfair Display", serif; font-family: "Playfair Display", serif;
font-size: 1.75em; font-size: 1.75em;
font-weight: normal; font-weight: normal;

View File

@ -9,7 +9,6 @@
{% endblock header %} {% endblock header %}
{% block content %} {% block content %}
<<<<<<< HEAD
<h1 class="article">{{ post.title }}</h1> <h1 class="article">{{ post.title }}</h1>
<p class="article-info"> <p class="article-info">
@ -47,17 +46,16 @@
{% else %} {% else %}
<a class="button" href="like">{{ "Add yours" | _ }}</a> <a class="button" href="like">{{ "Add yours" | _ }}</a>
{% endif %} {% endif %}
</div>
<div class="reshares">
<p> <p>
{{ "{{ count }} reshares" | _n(singular="One reshare", count=n_reshares) }} {{ "{{ count }} reshares" | _n(singular="One reshare", count=n_reshares) }}
</p> </p>
<a class="button" href="reshare">
{% if has_reshared %} {% if has_reshared %}
{{ "I don't want to reshare this anymore" | _ }} <a class="button reshared" href="reshare">{{ "I don't want to reshare this anymore" | _ }}</a>
{% else %} {% else %}
{{ "Reshare" | _ }} <a class="button" href="reshare">{{ "Reshare" | _ }}</a>
{% endif %} {% endif %}
</a>
</div> </div>
<div class="comments"> <div class="comments">

View File

@ -13,7 +13,7 @@
{% if blogs | length < 1 %} {% if blogs | length < 1 %}
<p>{{ "You don't have any blog yet. Create your own, or ask to join one." | _ }}</p> <p>{{ "You don't have any blog yet. Create your own, or ask to join one." | _ }}</p>
{% endif %} {% endif %}
<a class="button inline-block" href="/blogs/new">{{ "Start a new blog" | _ }}</a> <a class="button" href="/blogs/new">{{ "Start a new blog" | _ }}</a>
<div class="list"> <div class="list">
{% for blog in blogs %} {% for blog in blogs %}
<div class="card"> <div class="card">

View File

@ -1,4 +1,4 @@
<div> <div class="user">
<h1> <h1>
{{ name }} {{ name }}
{% if user.is_admin %} {% if user.is_admin %}