front page styling update

froide_govplan/templates/froide_govplan/base.html

@@ -5,6 +5,46 @@
 {% load static %}
 {% block body %}
 
+<style>
+    /* Featurettes
+------------------------- */
+
+.featurette-divider {
+  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
+}
+
+/* Thin out the marketing headings */
+/* rtl:begin:remove */
+.featurette-heading {
+  letter-spacing: -.05rem;
+}
+
+/* rtl:end:remove */
+
+/* RESPONSIVE CSS
+-------------------------------------------------- */
+
+@media (min-width: 40em) {
+  /* Bump up size of carousel content */
+  .carousel-caption p {
+    margin-bottom: 1.25rem;
+    font-size: 1.25rem;
+    line-height: 1.4;
+  }
+
+  .featurette-heading {
+    font-size: 50px;
+  }
+}
+
+@media (min-width: 62em) {
+  .featurette-heading {
+    margin-top: 7rem;
+  }
+}
+
+</style>
+
 <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
     <symbol id="check2" viewBox="0 0 16 16">
         <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" />
@@ -132,6 +172,39 @@
         {% block app_body %}
           {% placeholder "content" %}
         {% endblock app_body %}
+
+        {% if request.path == '/' %}
+
+        <hr class="featurette-divider">
+        <div class="row featurette">
+            <div class="col-md-7">
+                <h2 class="featurette-heading fw-normal lh-1">We’re watching you! <span class="text-body-secondary">Karlsruhe.</span></h2>
+                <p class="lead">
+                    Wir haben die Verwaltungsvorhaben der Stadt Karlsruhe genau unter die Lupe genommen und rund 250 überprüfbare Projekte identifiziert, die die Stadtverwaltung plant: Es geht um Klimaschutz und Digitalisierung, um Vorhaben im Bereich Wohnen und Mobilität, um moderne Verwaltungsprozesse und Maßnahmen zur Gleichstellung.
+                </p>
+                <p>
+                    Mit unserem Verwaltungstracker machen wir öffentlich, wie es um den Fortschritt dieser Projekte steht. Wir zeigen, welche Vorhaben derzeit bearbeitet werden, welche bereits umgesetzt sind und welche ins Stocken geraten sind. Vergleichbare Transparenzprojekte gibt es auf Landes- und Bundesebene – zum Beispiel von der Süddeutschen Zeitung oder Spiegel Online. Mit dem Verwaltungstracker übertragen wir dieses Prinzip auf die kommunale Ebene in Karlsruhe.
+                </p>
+                <p>
+                    <b>
+                        Partner:innen aus der Zivilgesellschaft
+                    </b>
+                </p>
+                <p>
+                    Ergänzend bieten wir auch qualitative Einschätzungen zu einzelnen Vorhaben: Expert:innen aus zivilgesellschaftlichen Organisationen beobachten bestimmte Themenfelder, ordnen Entwicklungen ein und bewerten den Fortschritt.
+                </p>
+            </div>
+            <div class="col-md-5">
+                <svg aria-label="Placeholder: 500x500" class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" height="500" preserveAspectRatio="xMidYMid slice" role="img" width="500" xmlns="http://www.w3.org/2000/svg">
+                    <title>Placeholder</title>
+                    <rect width="100%" height="100%" fill="var(--bs-secondary-bg)"></rect>
+                    <text x="50%" y="50%" fill="var(--bs-secondary-color)" dy=".3em">500x500</text>
+                </svg>
+            </div>
+        </div>
+
+        {% endif %}
+
         {% static_alias "govplan_footer" %}
 
     </main>
@@ -139,14 +212,14 @@
     <footer class="pt-5 my-5 text-body-secondary border-top">
 
         <div class="row">
-            <div class="col-12 col-md">
+            <div class="col-12 col-md-8">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mb-2" role="img" viewBox="0 0 24 24">
+                <a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none text-reset mb-3">
-                    <title>Product</title>
+                    <img src="{% static 'froide_govplan/images/apple-touch-icon.png' %}" class="bi me-2" height="35">
-                    <circle cx="12" cy="12" r="10" />
+                    <span class="fs-6">VerwaltungsTracker</span>
-                    <path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94" />
+                </a>
-                </svg>
+                <p style="max-width: 300px;">
-                <br>
                     Folge uns auf Mastodon für neue Entwicklungen in Verwaltungsvorhaben:
+                </p>
                 <div class="mt-3 mb-4">
                     <a href="https://social.project-insanity.org/@verwaltungstracker" target="_blank" class="inline-flex items-center px-3 py-2 text-sm font-medium bg-gray-700 shadow-sm rounded-md text-gray-50 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500">
                     <img src="{% static 'froide_govplan/images/mastodon-footer.svg' %}" widith="20" height="20" class="me-2">
@@ -154,10 +227,6 @@
                     </a>
                 </div>
             </div>
-            <div class="col-6 col-md">
-            </div>
-            <div class="col-6 col-md">
-            </div>
             <div class="col-6 col-md">
                 <h5>Über uns</h5>
                 <ul class="list-unstyled text-small">