From bb668de025b273014b1a73178ef340131ea59ad0 Mon Sep 17 00:00:00 2001
From: RedoX <pseudokawaii@gmail.com>
Date: Sun, 27 Jun 2021 08:35:48 +0000
Subject: [PATCH] Revert to use flex style instead of grid

---
 app/{templates => }/icons/logout.png | Bin
 app/{templates => }/icons/sun.png    | Bin
 app/templates/home.html              |  11 ++++++-----
 3 files changed, 6 insertions(+), 5 deletions(-)
 rename app/{templates => }/icons/logout.png (100%)
 rename app/{templates => }/icons/sun.png (100%)

diff --git a/app/templates/icons/logout.png b/app/icons/logout.png
similarity index 100%
rename from app/templates/icons/logout.png
rename to app/icons/logout.png
diff --git a/app/templates/icons/sun.png b/app/icons/sun.png
similarity index 100%
rename from app/templates/icons/sun.png
rename to app/icons/sun.png
diff --git a/app/templates/home.html b/app/templates/home.html
index f8840bf..6ddeb11 100644
--- a/app/templates/home.html
+++ b/app/templates/home.html
@@ -1,15 +1,16 @@
 {% include 'header.html' %}
 
 <h1 class=" my-2 text-2xl text-center font-bold text-green-400">
-	Available Sources
+    Available Sources
 </h1>
 
 <div class="mx-auto my-1 p-1 w-full">
-	<div class="px-2 sm:px-4 md:px-6 lg:px-8 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 text-center break-words">
-		{% for chat in chats %}
-		<a title="{{chat.name}}" href="/{{chat.page_id}}" class="p-2 rounded shadow hover:shadow-md hover:border hover:border-blue-300 hover:bg-blue-100 dark:bg-red-700 dark:hover:bg-red-500">
+    <div class="flex flex-wrap gap-4 justify-center w-full">
+        {% for chat in chats %}
+        <a title="{{chat.name}}" href="/{{chat.page_id}}"
+            class="justify-items-center min-h-full w-5/12 sm:w-1/4 md:w-1/5 lg:w-1/6 rounded p-2 text-center break-words shadow hover:shadow-md hover:bg-blue-100 dark:bg-red-700 dark:hover:bg-red-500">
 
-			<img src="/{{chat.page_id}}/logo?big=1" class="w-full rounded-full ">
+            <img src="/{{chat.page_id}}/logo?big=1" class="w-full rounded-full">
             <div class="p-1 mt-2 rounded text-white bg-blue-500 dark:bg-yellow-500">{{chat.name}}</div>
 
         </a>