Make the design less aggresive

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

templates/blogs/details.tera

@@ -10,7 +10,9 @@
     <p>{{ blog.summary }}</p>
 
     <h2>Latest articles</h2>
-    {% for article in recents %}
-        {{ macros::post_card(article=article) }}
-    {% endfor %}
+    <div class="cards">
+        {% for article in recents %}
+            {{ 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 %}
-        {{ macros::post_card(article=article) }}
-    {% endfor %}
+    <div class="cards">
+        {% for article in recents %}
+            {{ 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="comment" 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 class="list">
+            {% for comment in comments %}
+                <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 %}

templates/users/details.tera

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