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
parent
3de0ff79b5
commit
117904b69d
2
po/fr.po
2
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"
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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" | _ }}
|
||||
{% else %}
|
||||
{{ "Reshare" | _ }}
|
||||
{% endif %}
|
||||
</a>
|
||||
{% if has_reshared %}
|
||||
<a class="button reshared" href="reshare">{{ "I don't want to reshare this anymore" | _ }}</a>
|
||||
{% else %}
|
||||
<a class="button" href="reshare">{{ "Reshare" | _ }}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="comments">
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div>
|
||||
<div class="user">
|
||||
<h1>
|
||||
{{ name }}
|
||||
{% if user.is_admin %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user