Give the site a warm design system with card-based content lists

Elternbeirat.Web/Features/Embeds/EventsEmbed.razor

@@ -20,6 +20,6 @@
                 </li>
             }
         </ul>
-        <p><a href="/events">Alle Termine &rarr;</a></p>
+        <p class="embed-more"><a href="/events">Alle Termine <span aria-hidden="true">&rarr;</span></a></p>
     }
 </section>

Elternbeirat.Web/Features/Embeds/EventsEmbed.razor.css

@@ -1,33 +1,5 @@
+/* Card styles for .event-list are shared with the full events page and live in the
+   global app.css. Only the embed's spacing on the home page is specific here. */
 .embed-events {
-    margin-top: 2rem;
-}
-
-.event-list {
-    list-style: none;
-    padding: 0;
-}
-
-.event-list li {
-    padding: 0.75rem 0;
-    border-bottom: 1px solid #eee;
-}
-
-.event-list time {
-    display: block;
-    color: #777;
-    font-size: 0.85rem;
-}
-
-.event-title {
-    font-size: 1.1rem;
-    font-weight: 600;
-}
-
-.event-location::before {
-    content: " · ";
-    color: #777;
-}
-
-.event-location {
-    color: #555;
+    margin-top: var(--space-5);
 }

Elternbeirat.Web/Features/Embeds/FaqsEmbed.razor

@@ -16,6 +16,6 @@
                 </div>
             </details>
         }
-        <p><a href="/faqs">Alle Fragen &rarr;</a></p>
+        <p class="embed-more"><a href="/faqs">Alle Fragen <span aria-hidden="true">&rarr;</span></a></p>
     }
 </section>

Elternbeirat.Web/Features/Embeds/FaqsEmbed.razor.css

@@ -1,18 +1,5 @@
+/* Card styles for .faq-item are shared with the full FAQ page and live in the
+   global app.css. Only the embed's spacing on the home page is specific here. */
 .embed-faqs {
-    margin-top: 2rem;
-}
-
-.faq-item {
-    border-bottom: 1px solid #eee;
-    padding: 0.5rem 0;
-}
-
-.faq-item summary {
-    cursor: pointer;
-    font-weight: 600;
-}
-
-.faq-answer {
-    padding: 0.5rem 0 0.25rem;
-    color: #333;
+    margin-top: var(--space-5);
 }

Elternbeirat.Web/Features/Embeds/PostsEmbed.razor

@@ -18,6 +18,6 @@
                 </li>
             }
         </ul>
-        <p><a href="/posts">Alle Beiträge &rarr;</a></p>
+        <p class="embed-more"><a href="/posts">Alle Beiträge <span aria-hidden="true">&rarr;</span></a></p>
     }
 </section>

Elternbeirat.Web/Features/Embeds/PostsEmbed.razor.css

@@ -1,24 +1,5 @@
+/* Card styles for .post-list are shared with the full posts page and live in the
+   global app.css. Only the embed's spacing on the home page is specific here. */
 .embed-posts {
-    margin-top: 2rem;
-}
-
-.post-list {
-    list-style: none;
-    padding: 0;
-}
-
-.post-list li {
-    padding: 0.75rem 0;
-    border-bottom: 1px solid #eee;
-}
-
-.post-list a {
-    font-size: 1.1rem;
-    text-decoration: none;
-}
-
-.post-list time {
-    display: block;
-    color: #777;
-    font-size: 0.85rem;
+    margin-top: var(--space-5);
 }