feat: Style rules

src/fellchensammlung/static/fellchensammlung/css/styles.css

@@ -299,3 +299,26 @@ h1 {
 .inline {
     display: inline;
 }
+
+.container-list-rules {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+
+.card-rule {
+    width: 25%;
+    margin: 10px;
+    margin-bottom: 20px;
+
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding: 2%;
+    box-sizing: border-box;
+}
+
+@media (max-width: 920px) {
+    .card-rule {
+        width: 100%;
+    }
+}

src/fellchensammlung/templates/fellchensammlung/list-rules.html

@@ -1,4 +1,4 @@
-<div class="list-rules">
+<div class="container-list-rules">
 {% for rule in rules %}
     {% include "fellchensammlung/partial-rule.html" %}
 {% endfor %}

src/fellchensammlung/templates/fellchensammlung/partial-rule.html

@@ -1,3 +1,5 @@
 {% load custom_tags %}
-<h2>{{ rule.title }}</h2>
-<p>{{ rule.rule_text | render_markdown }}</p>
+<div class="card-rule">
+    <h2>{{ rule.title }}</h2>
+    <p>{{ rule.rule_text | render_markdown }}</p>
+</div>