Make the design less aggresive

- Softer violet
- Add borders to delimit cards
- Bolder titles
- Bigger inputs

static/main.css

@@ -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;
+    color: #7765e3;
-    border: 1px solid #7a28cb;
+    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;
+    color: #7765e3;
-    border: 1px solid #7a28cb;
+    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;
+}

templates/blogs/details.tera

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

templates/instance/index.tera

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

templates/macros.tera

@@ -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 %}

templates/notifications/index.tera

@@ -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>

templates/posts/details.tera

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

templates/users/details.tera

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

templates/users/followers.tera

@@ -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 %}