Make the design less aggresive

- Softer violet
- Add borders to delimit cards
- Bolder titles
- Bigger inputs
This commit is contained in:
Bat 2018-05-13 21:33:21 +01:00
parent 9c9799eee2
commit 1870f52332
8 changed files with 78 additions and 45 deletions

View File

@ -6,11 +6,11 @@ html, body {
}
h1, h2, h3, h4, h5, h6 {
font-weight: 200;
font-weight: bolder;
}
a, a:visited {
color: #7a28cb;
color: #7765e3;
text-decoration: none;
}
@ -29,7 +29,7 @@ header nav a {
margin: 0px 20px;
}
main > * {
body > main > * {
padding: 20px 20%;
}
@ -45,42 +45,36 @@ main article {
.button, input[type="submit"] {
background: white;
color: #7a28cb;
border: 1px solid #7a28cb;
color: #7765e3;
border: 1px solid #7765e3;
border-radius: 3px;
padding: 5px 10px;
margin: 0px 20px;
cursor: pointer;
transition: ease-in 0.2s all;
}
.button:hover, input[type="submit"]:hover {
background: #7765e399;
color: white;
}
input[type="submit"] {
margin: 10px 0px;
margin: 40px 0px;
}
.article-meta {
background: #F9F9F9;
}
.comment {
background: white;
border-radius: 3px;
padding: 20px;
margin: 10px 0px;
box-shadow: 0px 0px 5px #7a28cb1a;
margin-bottom: 20px;
}
.comment a {
margin-top: 10px;
display: block;
}
.inline-block {
display: inline-block;
margin: 0px;
margin: 20px 0px;
}
label {
display: block;
margin-top: 20px;
}
input {
@ -88,19 +82,23 @@ input {
border-bottom: 1px solid #DADADA;
display: block;
margin: 10px 0px;
padding: 5px;
width: 50%;
}
textarea {
width: 100%;
min-height: 200px;
resize: vertical;
font-family: 'Utopia';
padding: 5px;
}
.badge {
font-size: 12pt;
background: white;
color: #7a28cb;
border: 1px solid #7a28cb;
color: #7765e3;
border: 1px solid #7765e3;
border-radius: 3px;
padding: 5px 10px;
margin: 0px 10px;
@ -134,3 +132,28 @@ textarea {
width: 100%;
}
}
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
grid-gap: 20px;
}
.card {
background: white;
border: 1px solid #d0ccd0;
border-radius: 3px;
padding: 20px;
display: flex;
flex-direction: column;
}
.card main {
flex: 1;
}
.list {
display: grid;
grid-gap: 20px;
}

View File

@ -10,7 +10,9 @@
<p>{{ blog.summary }}</p>
<h2>Latest articles</h2>
<div class="cards">
{% for article in recents %}
{{ macros::post_card(article=article) }}
{% endfor %}
</div>
{% endblock content %}

View File

@ -9,7 +9,9 @@
<h1>Welcome on {{ instance.name }}</h1>
<h2>Latest articles</h2>
<div class="cards">
{% for article in recents %}
{{ macros::post_card(article=article) }}
{% endfor %}
</div>
{% endblock content %}

View File

@ -1,7 +1,7 @@
{% macro post_card(article) %}
<div>
<div class="card">
<h3><a href="{{ article.url }}">{{ article.post.title }}</a></h3>
<p>{{ article.post.content | escape | truncate(length=200) }}…</p>
<main><p>{{ article.post.content | escape | truncate(length=200) }}…</p></main>
<p>By <a href="/@/{{ article.author.fqn }}/">{{ article.author.display_name }}</a> ⋅ {{ article.date | date(format="%B %e") }}</p>
</div>
{% endmacro post_card %}

View File

@ -6,9 +6,9 @@ Notifications
{% block content %}
<h1>Notifications</h1>
<div>
<div class="list">
{% for notification in notifications %}
<div>
<div class="card">
<h3><a href="{% if notification.link %}{{ notification.link }}{% else %}#{% endif %}">{{ notification.title }}</h3>
{% if notification.content %}
<p>{{ notification.content }}</p>

View File

@ -31,13 +31,15 @@
</div>
<h2>Comments</h2>
<div class="list">
{% for comment in comments %}
<div class="comment" id="comment-{{ comment.id }}">
<div class="card" id="comment-{{ comment.id }}">
<b>{{ comment.author.display_name }}</b>
<div>{{ comment.content | safe }}</div>
<a href="comment?responding_to={{ comment.id }}">Respond</a>
</div>
{% endfor %}
</div>
<a class="button inline-block" href="comment?">Comment</a>
</div>
{% endblock content %}

View File

@ -32,7 +32,9 @@
</div>
<h2>Latest articles</h2>
<div class="cards">
{% for article in recents %}
{{ macros::post_card(article=article) }}
{% endfor %}
</div>
{% endblock content %}

View File

@ -19,10 +19,12 @@
</div>
<h2>Followers</h2>
<div class="cards">
{% for follower in followers %}
<div>
<div class="card">
<h3><a href="{{ follower.ap_url }}">{{ follower.display_name }}</a> &mdash; @{{ follower.fqn }}</h3>
<p>{{ follower.summary }}</p>
<main><p>{{ follower.summary }}</p></main>
</div>
{% endfor %}
</div>
{% endblock content %}