startpage styling

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">

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>

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>
+            <h1 class="display-1">{% translate "cscherr.de" %}</h1>
             <p>{% trans "Personal Website" %}</p>
         </div>
-        <div class="container overflow-hidden text-center mt-5">
+        <div class="container-fluid overflow-hidden text-center mt-5 mx-0">
-            <div class="row gx-1 row-cols-2">
+            <div class="row gx-5" id="desc-rows">
                 <div class="col">
                     <div class="container overflow-hidden text-center mt-5">
                         <div class="row gy-3 row-cols-1">
@@ -28,7 +28,7 @@
                             <div class="col">
                                 {% blocktranslate %}
                                 I am <em>Christoph J. Scherr</em>, studying Cybersecurity at <a href="https://mannheim.dhbw.de">
-                                <abbr title="Duale Hochschule Baden-Württemberg">DHBW</abbr>Mannheim, Germany</a> and passionate about computers.
+                                <abbr title="Duale Hochschule Baden-Württemberg">DHBW</abbr> Mannheim, Germany</a> and passionate about computers.
                                 {% endblocktranslate %}
                             </div>
                             <div class="col">
@@ -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 %}