rejigged mobile sizing and breakpoints

koray-eren · Jeff · commit d6092222f294 · 2022-04-14T13:25:54.000-04:00
diff --git a/sogs/templates/base.html b/sogs/templates/base.html
@@ -1,6 +1,7 @@
 <html id="html" class="">
   <head>
     <title> sogs </title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
     <script src="https://cdn.tailwindcss.com"></script>
     <script>
@@ -35,25 +36,34 @@
               lightGray: '#585858',
               otherGray: '#272726'
             }
+          },
+          screens : {
+            'xs'    : '365px',
+            'sm'    : '640px',
+            'md'    : '768px',
+            'lg'    : '1024px',
+            'xl'    : '1280px',
+            '2xl'   : '1536px'
           }
         }
       }
     </script>
   </head>
   <body class="dark:bg-otherGray transition duration-500">
     <!-- header / navbar -->
-    <div class="px-5 flex justify-between items-center w-full h-32 mb-10 bg-sessionGreen dark:bg-otherGray border-b-8 border-black dark:border-sessionGreen transition duration-500">
+    <div class="px-5 flex justify-between items-center w-full h-32 mb-4 
+    bg-sessionGreen dark:bg-otherGray border-b-8 border-black dark:border-sessionGreen transition duration-500">
       <div class="text-black dark:text-white text-center">
-        <h1 class="text-7xl ">{% block heading %}{% endblock %}</h1>
-        <p class="text-2xl ">Session Open Group Server</p>
+        <h1 class="text-3xl xs:text-4xl sm:text-5xl">{% block heading %}{% endblock %}</h1>
+        <p class="text-lg xs:text-xl sm:text-2xl">Session Open Group Server</p>
       </div>
-      <button class='h-8 px-4 bg-black text-white rounded-full space-x-3' onclick="toggleDarkMode()">Toggle Dark Mode</button>
+      <button class='h-12 px-1 bg-black text-white rounded' onclick="toggleDarkMode()">Dark<br>Mode</button>
     </div>
     
     <!-- content/body -->
     <section class="text-black dark:text-white">
       {% block body %}
       {% endblock %}
-    </section>  
+    </section>
   </body>
 </html>
diff --git a/sogs/templates/index.html b/sogs/templates/index.html
@@ -6,14 +6,16 @@
 
 {% block body %}
 
-<div class="grid grid-cols-2 lg:grid-cols-4 2xl:grid-cols-6 justify-items-center gap-y-5 gap-x-7 px-5 mx-16">
+<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6 justify-items-center gap-y-2 gap-x-2 mx-4">
   {% for room in rooms %}
-  <a class="px-5 flex flex-col justify-center items-center transition duration-500 text-center
-  w-full h-36 md:h-28 bg-sessionGreen hover:bg-black hover:text-white text-6xl lg:text-4xl border-8 border-black 
-  dark:border-sessionGreen rounded-full dark:bg-black dark:hover:bg-sessionGreen dark:hover:text-black " href="/r/{{room.token}}">
-    <p>{{room.token }}</p>
-    <p class="text-3xl lg:text-xl">{{room.active_users() }} Active User{{'s' if room.active_users() > 1}}</p>
-  </a>
+  {% for i in range(8) %}
+    <a class="px-5 flex flex-col justify-center items-center transition duration-500 text-center w-full h-24 
+    border-8 border-black bg-sessionGreen hover:bg-black hover:text-white md:h-28
+    dark:border-sessionGreen rounded-full dark:bg-black dark:hover:bg-sessionGreen dark:hover:text-black " href="/r/{{room.token}}">
+      <p class="text-2xl xs:text-3xl sm:text-4xl">{{room.token }}</p>
+      <p class="text-sm xs:text-lg sm:text-xl">{{room.active_users() }} Active User{{'s' if room.active_users() > 1}}</p>
+    </a>
+  {% endfor %}
   {% endfor %}
 </div>
 
