v4.0: Made UI mobile responsive (even more!)

Sas2k · Dec 31, 2022 · 0cd774a · 0cd774a · vercel · Dec 31, 2022
1 parent d180c79
commit 0cd774a
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/static/css/style.css b/static/css/style.css
@@ -31,4 +31,16 @@ a {
     font-size: 1.5rem;
     font-weight: 600;
     text-align: left;
+}
+
+@media screen and (max-width: 768px) {
+    .block:not(:last-child) {
+        margin-bottom: 1rem;
+    }
+
+    .text-bar {
+        margin-bottom: 0.5rem;
+        display: flex;
+        justify-content: space-between;
+    }
 }
diff --git a/templates/index.html b/templates/index.html
@@ -43,7 +43,7 @@ <h1 class="title">{{ Title }}</h1>
                     <div class="columns">
                         <div class="column">
                             <progress id="progress"  class="progress is-primary" value="0" max="100">0%</progress>
-                            <div class="columns">
+                            <div class="columns text-bar">
                                 <div class="column">
                                     <p id="current">0:00</p>
                                 </div>

diff --git a/templates/song.html b/templates/song.html
@@ -44,7 +44,7 @@ <h1 class="title">{{ Title }}</h1>
                     <div class="columns">
                         <div class="column">
                             <progress id="progress" class="progress is-primary" value="0" max="100">0%</progress>
-                            <div class="columns">
+                            <div class="columns text-bar">
                                 <div class="column">
                                     <p id="current">0:00</p>
                                 </div>