New design improvements

* Max-width to limit number of characters per line
* Changed background colors (page, cards, buttons)
* Reduced header size

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"

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:hover
-main .article-meta .comments a.button.liked
 { 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;

templates/posts/details.html.tera

@@ -9,7 +9,6 @@
 {% endblock header %}
 
 {% block content %}
-<<<<<<< HEAD
     <h1 class="article">{{ post.title }}</h1>
     <p class="article-info">
 
@@ -47,17 +46,16 @@
             {% else %}
                 <a class="button" href="like">{{ "Add yours" | _ }}</a>
             {% endif %}
-
+        </div>
+        <div class="reshares">
             <p>
                 {{ "{{ count }} reshares" | _n(singular="One reshare", count=n_reshares) }}
             </p>
-            <a class="button" href="reshare">
             {% 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 %}
-                    {{ "Reshare" | _ }}
+                <a class="button" href="reshare">{{ "Reshare" | _ }}</a>
             {% endif %}
-            </a>
         </div>
 
         <div class="comments">

templates/users/dashboard.tera

@@ -13,7 +13,7 @@
         {% if blogs | length < 1 %}
             <p>{{ "You don't have any blog yet. Create your own, or ask to join one." | _ }}</p>
         {% 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">
             {% for blog in blogs %}
                 <div class="card">

templates/users/header.tera

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