From f422521367be66214be1694d19ab5a95976fd96f Mon Sep 17 00:00:00 2001
From: PlexSheep <software@cscherr.de>
Date: Sun, 8 Oct 2023 21:23:14 +0200
Subject: [PATCH] startpage styling

---
 gawa/start/templates/base.html        |  8 +++++++-
 gawa/start/templates/nav.html         |  2 +-
 gawa/start/templates/start/index.html | 14 ++++++++++----
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/gawa/start/templates/base.html b/gawa/start/templates/base.html
index 71129b5..22d5c67 100644
--- a/gawa/start/templates/base.html
+++ b/gawa/start/templates/base.html
@@ -38,10 +38,16 @@
         {% block nav %}
             {% include 'nav.html' %}
         {% endblock nav %}
-        <main class="m-5" style="min-height: 80vh;">
+        <main class="m-5" style="min-height: 80vh;" id="main">
             {% block main %}
             {% endblock main %}
         </main>
+        <script>
+            if (screen.width < 480) {
+                row = document.getElementById("main")
+                row.classList.remove("m-5");
+            };
+        </script>
         <footer class="text-center text-lg-start bg-dark-subtle text-muted">
             <div class="container overflow-hidden text-center">
                 <div class="row gy-5">
diff --git a/gawa/start/templates/nav.html b/gawa/start/templates/nav.html
index 3724299..1c9dd08 100644
--- a/gawa/start/templates/nav.html
+++ b/gawa/start/templates/nav.html
@@ -107,7 +107,7 @@
                             <a class="dropdown-item" href="http://localhost:8080" target="_blank">DB</a>
                         </li>
                         <li>
-                            <a class="dropdown-item" href="/translation" target="_blank">Translation</a>
+                            <a class="dropdown-item" href="/translation/" target="_blank">Translation</a>
                         </li>
                         <li>
                             <a class="dropdown-item" href="{% url 'admin:logout' %}" target="_blank">{% trans "Logout" %}</a>
diff --git a/gawa/start/templates/start/index.html b/gawa/start/templates/start/index.html
index 70e6cf1..32af7be 100644
--- a/gawa/start/templates/start/index.html
+++ b/gawa/start/templates/start/index.html
@@ -8,14 +8,14 @@
     {% translate "cscherr.de" %} - {% translate "startpage" %}
 {% endblock title %}
 {% block main %}
-    <div class="container-xl">
+    <div class="container">
         <div class="jumbotron text-center">
             {# TODO: add a fancy graphic here #}
             <h1>{% translate "cscherr.de" %}</h1>
             <p>{% trans "Personal Website" %}</p>
         </div>
-        <div class="container overflow-hidden text-center mt-5">
-            <div class="row gx-1 row-cols-2">
+        <div class="container-fluid overflow-hidden text-center mt-5 mx-0">
+            <div class="row gx-1" id="desc-rows">
                 <div class="col">
                     <div class="container overflow-hidden text-center mt-5">
                         <div class="row gy-3 row-cols-1">
@@ -89,7 +89,7 @@
                                 {% blocktranslate %}
                                 Music is amazing. I don't find a lot of time lately, but sometimes I feel like making music. Usually,
                                 I prefer calm music. Some types of music I like are:
-                                <ul class="list-group pt-3 list-group-flush w-75 mx-auto">
+                                <ul class="list-group pt-3 list-group-flush w-90 mx-auto">
                                     <li class="list-group-item">LoFi</li>
                                     <li class="list-group-item">JPop, specifically <a href="https://www.youtube.com/@Ado1024">Ado</a></li>
                                     <li class="list-group-item">Eurobeat, specifically <a href="https://www.youtube.com/@TurboA">Turbo</a></li>
@@ -120,6 +120,12 @@
                     </div>
                 </div>
             </div>
+            <script>
+                if (screen.width < 800) {
+                    row = document.getElementById("desc-rows")
+                    row.classList.add("row-cols-1");
+                };
+            </script>
         </div>
     </div>
 {% endblock main %}