Make the design less aggresive
- Softer violet - Add borders to delimit cards - Bolder titles - Bigger inputs
This commit is contained in:
parent
9c9799eee2
commit
1870f52332
@ -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;
|
||||
}
|
||||
|
@ -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 %}
|
||||
|
@ -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 %}
|
||||
|
@ -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 %}
|
||||
|
@ -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>
|
||||
|
@ -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 %}
|
||||
|
@ -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 %}
|
||||
|
@ -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> — @{{ follower.fqn }}</h3>
|
||||
<p>{{ follower.summary }}</p>
|
||||
<main><p>{{ follower.summary }}</p></main>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endblock content %}
|
||||
|
Loading…
Reference in New Issue
Block a user