From 3d93f95befc7b05e8314a43477b7707e03f5c80e Mon Sep 17 00:00:00 2001
From: Effie <euphemia@sephanoid.es>
Date: Sat, 15 Jul 2023 00:11:59 +1000
Subject: [PATCH] fixes the credit page for mobile

---
 static/style.css        | 29 ++++++++++++++++++++++++-----
 templates/credits.jinja | 25 ++++++++++++++-----------
 2 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/static/style.css b/static/style.css
index 6772481..a4eabd8 100644
--- a/static/style.css
+++ b/static/style.css
@@ -753,15 +753,17 @@ footer{
 .credit-box{
     display: flex; flex-direction: column;
     background: radial-gradient(lch(35% 90 50) 50%, lch(10% 90 50));
-    width: 48rem;
-    margin: auto;
+    max-width: 48rem;
+    margin-left: auto; margin-right: auto; margin-bottom: auto; margin-top: clamp(0rem, calc(16vw - 8rem), 2.4rem);
     border-style: outset; border-color: var(--thick-border);
+    padding-left: 1.2rem; padding-right: 1.2rem; padding-bottom: 1.2rem;
 }
 
 .credit-text{
-    margin: 1.2rem; margin-bottom: 0;
-    display: flex; justify-content: space-between;
+    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.2rem;
     color: lch(90% 25 85);
+    max-width: 100vw;
+    margin-top: 1.2rem;
 }
 
 .credit-text a{
@@ -769,8 +771,25 @@ footer{
     color: lch(90% 25 85);
 }
 
+.credit-dev{
+    min-width: fit-content;
+    flex-grow: 1;
+}
+
+.credit-dev div{
+    margin: auto;
+    max-width: fit-content;
+}
+
+.credit-pic{
+    flex-shrink: 1; flex-grow: 1;
+    flex-basis: 24rem;
+}
+
 .credit-text img{
-    height: 14.4rem;
+    display: block;
+    margin: auto;
+    max-width: 100%;
     border-style: outset; border-color: var(--thick-border); border-radius: 1.2rem; border-width: 0.3rem;
 }
 
diff --git a/templates/credits.jinja b/templates/credits.jinja
index c7bbb77..cd4ff86 100644
--- a/templates/credits.jinja
+++ b/templates/credits.jinja
@@ -6,17 +6,18 @@
 
 <div class="credit-box">
     <div class="credit-text">
-        <div>
-            <h3>Developed by Esby</h3>
-            <ul>
-                <li>Aristide Majnheld - Bismarck</li>
-                <li><a href="https://octodon.social/@esbylion">@esbylion@octodon.social</a></li>
-                <li><a href="https://etheirys.masto.host/@esbylion">@esbylion@etheirys.masto.host</a></li>
-                <li><a href="mailto:eorzeasongbook@gmail.com">eorzeasongbook@gmail.com</a></li>
-            </ul>
-            
+        <div class="credit-dev">
+            <div>
+                <h3>Developed by Esby</h3>
+                <ul>
+                    <li>Aristide Majnheld - Bismarck</li>
+                    <li><a href="https://octodon.social/@esbylion">@esbylion@octodon.social</a></li>
+                    <li><a href="https://etheirys.masto.host/@esbylion">@esbylion@etheirys.masto.host</a></li>
+                    <li><a href="mailto:eorzeasongbook@gmail.com">eorzeasongbook@gmail.com</a></li>
+                </ul>
+            </div>
         </div>
-        <div>
+        <div class="credit-pic">
             <img src="{{ url_for('static', filename='aristide.png') }}" alt="Song Index" />
         </div>
     </div>
@@ -33,4 +34,6 @@
 
 </div>
 
-{% endblock %}
\ No newline at end of file
+
+{% endblock %}
+{% block main2 %}{% endblock %}
\ No newline at end of file