From 117904b69dc95169b3ec5edd10deee0869c7c784 Mon Sep 17 00:00:00 2001 From: Matthieu Date: Sun, 17 Jun 2018 22:07:01 +0200 Subject: [PATCH] New design improvements * Max-width to limit number of characters per line * Changed background colors (page, cards, buttons) * Reduced header size --- po/fr.po | 2 +- static/main.css | 84 +++++++++++++++++++++++-------- templates/posts/details.html.tera | 16 +++--- templates/users/dashboard.tera | 2 +- templates/users/header.tera | 2 +- 5 files changed, 74 insertions(+), 32 deletions(-) diff --git a/po/fr.po b/po/fr.po index 55a2a72..5c182ad 100644 --- a/po/fr.po +++ b/po/fr.po @@ -19,7 +19,7 @@ msgid "No posts to see here yet." msgstr "Aucun article pour le moment" msgid "New article" -msgstr "Derniers articles" +msgstr "Nouvel article" msgid "New blog" msgstr "Nouveau blog" diff --git a/static/main.css b/static/main.css index 5e81bf4..14ce4da 100644 --- a/static/main.css +++ b/static/main.css @@ -9,7 +9,7 @@ html, body { margin: 0; padding: 0; - background: #ECECEC; + background: #F4F4F4; color: #242424; font-family: "Route159", serif; } @@ -48,14 +48,14 @@ header nav a { display: block; margin: 0 2em; - font-size: 1.2em; + font-size: 1em; } header nav a.title { margin: 0 0 0 -1em; padding: 0; width: calc(20vw); - font-size: 2em; + font-size: 1.75em; border-right: solid #7765E3 0.1em; text-align: center; } @@ -77,7 +77,8 @@ main h1 } main h1.article { - margin: 1em 0 0.5em; + max-width: 40rem; + margin: 1em auto 0.5em; font-family: "Playfair Display", serif; font-size: 2.5em; font-weight: normal; @@ -98,7 +99,8 @@ main h2 main .article-info { - margin-bottom: 3em; + max-width: 40rem; + margin: 0 auto 3em; font-size: 0.95em; font-weight: 400; } @@ -111,9 +113,11 @@ main .article-info .author a main article { + max-width: 40rem; + margin: auto; font-family: "Lora", serif; font-size: 1.2em; - line-height: 1.6em; + line-height: 1.7em; text-align: justify; } @@ -135,10 +139,17 @@ main .article-meta > p /* ~ Likes ~ */ -main .article-meta .likes p +main .article-meta .likes p, +main .article-meta .reshares p { 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 { @@ -148,12 +159,23 @@ main .article-meta .likes a.button:before font-family: "Font Awesome 5 Free"; 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; } -main .article-meta .likes a.button +main .article-meta .likes a.button, +main .article-meta .reshares a.button { display: inline-block; margin: 0 1em; + padding: 0; background: none; color: #242424; 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.liked { color: #E92F2F; } +main .article-meta .reshares a.button:hover, +main .article-meta .reshares a.button.reshared +{ color: #7765E3; } /* ~ Comments ~ */ @@ -191,12 +216,12 @@ main .article-meta .comments a.button.liked:before main .article-meta .comments a.button { display: inline-block; + padding: 0; background: none; color: #242424; border: none; } -main .article-meta .comments a.button:hover, -main .article-meta .comments a.button.liked +main .article-meta .comments a.button:hover { color: #7765E3; } /* Comment button only */ @@ -208,7 +233,6 @@ main .article-meta .comments > a.button main .article-meta .comments .list { display: grid; - grid-gap: 20px; margin: 0; } @@ -216,7 +240,7 @@ main .article-meta .comments .list .comments .list .comment { - background: #DADADA; + background: #ECECEC; padding: 2em 20%; font-size: 1em; } @@ -249,7 +273,7 @@ main .article-meta .comments .list .comments .list .comment .text { - padding: 1.25em; + padding: 1.25em 0; font-family: "Lora", serif; font-size: 1.1em; line-height: 1.4em; @@ -312,8 +336,13 @@ textarea .button, input[type="submit"] { 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; border: 1px solid #7765E3; @@ -341,11 +370,14 @@ form.new-post .title } form.new-post textarea { + min-height: 8em; padding: 0; background: none; } form.new-post input[type="submit"] { + display: block; + margin: 1em auto; width: 60%; background: #DADADA; @@ -360,14 +392,24 @@ form.new-post input[type="submit"] * == User == */ +.user h1 +{ + display: flex; + flex-direction: row; + align-items: center; + margin-bottom: 0; +} .badge { - font-size: 1rem; + margin-left: 1em; + padding: 0.35em 1em; + background: #F4F4F4; color: #7765E3; border: 1px solid #7765E3; border-radius: 1em; - padding: 0.35em 1em; + + font-size: 1rem; } /* @@ -392,8 +434,10 @@ form.new-post input[type="submit"] padding: 1em; box-sizing: border-box; - background: #DADADA; + background: #E3E3E3; } +.list .card +{ min-height: 0; } /* ~ Card content ~ */ @@ -401,7 +445,7 @@ form.new-post input[type="submit"] .card h3 { - margin: 0.75em 0.5em; + margin: 0.75em 0; font-family: "Playfair Display", serif; font-size: 1.75em; font-weight: normal; diff --git a/templates/posts/details.html.tera b/templates/posts/details.html.tera index b7fd87b..097ff3a 100644 --- a/templates/posts/details.html.tera +++ b/templates/posts/details.html.tera @@ -9,7 +9,6 @@ {% endblock header %} {% block content %} -<<<<<<< HEAD

{{ post.title }}

@@ -47,17 +46,16 @@ {% else %} {{ "Add yours" | _ }} {% endif %} - + +

{{ "{{ count }} reshares" | _n(singular="One reshare", count=n_reshares) }}

- - {% if has_reshared %} - {{ "I don't want to reshare this anymore" | _ }} - {% else %} - {{ "Reshare" | _ }} - {% endif %} - + {% if has_reshared %} + {{ "I don't want to reshare this anymore" | _ }} + {% else %} + {{ "Reshare" | _ }} + {% endif %}
diff --git a/templates/users/dashboard.tera b/templates/users/dashboard.tera index 72fc568..befd609 100644 --- a/templates/users/dashboard.tera +++ b/templates/users/dashboard.tera @@ -13,7 +13,7 @@ {% if blogs | length < 1 %}

{{ "You don't have any blog yet. Create your own, or ask to join one." | _ }}

{% endif %} - {{ "Start a new blog" | _ }} + {{ "Start a new blog" | _ }}
{% for blog in blogs %}
diff --git a/templates/users/header.tera b/templates/users/header.tera index dc69599..4ace87f 100644 --- a/templates/users/header.tera +++ b/templates/users/header.tera @@ -1,4 +1,4 @@ -
+

{{ name }} {% if user.is_admin %}