Fix #504 (#532)

- Add the `spaced` class to some article cards, to make them wider even on desktop
- Fix the CSS to always have a small margin for cards on mobile

static/css/main.scss

@@ -138,4 +138,8 @@ html {
   body > footer * { margin: 1em auto; }
 
   .flex.wrap { flex-direction: column; }
+
+  .cards {
+    margin: 1rem 0 5rem;
+  }
 }

templates/blogs/details.rs.html

@@ -74,7 +74,7 @@ <h2>
         @if posts.is_empty() {
             <p>@i18n!(ctx.1, "No posts to see here yet.")</p>
         }
-        <div class="cards">
+        <div class="cards spaced">
             @for article in posts {
                 @:post_card(ctx, article)
             }

templates/instance/federated.rs.html

@@ -24,7 +24,7 @@ <h1 "p-name">@i18n!(ctx.1, "All the articles of the Fediverse")</h1>
         ])
     }
 
-    <div class="cards">
+    <div class="cards spaced">
         @for article in articles {
             @:post_card(ctx, article)
         }

templates/instance/feed.rs.html

@@ -16,7 +16,7 @@ <h1>@i18n!(ctx.1, "Your feed")</h1>
     ])
 
     @if !articles.is_empty() {
-        <div class="cards">
+        <div class="cards spaced">
             @for article in articles {
                 @:post_card(ctx, article)
             }

templates/instance/local.rs.html

@@ -25,7 +25,7 @@ <h1 class="p-name">@i18n!(ctx.1, "Articles from {}"; instance.name)</h1>
         ])
     }
 
-    <div class="cards">
+    <div class="cards spaced">
         @for article in articles {
             @:post_card(ctx, article)
         }