From d9785498aa9bc35569939299bf8297123aa9d2be Mon Sep 17 00:00:00 2001
From: juls0730 <62722391+juls0730@users.noreply.github.com>
Date: Thu, 14 Nov 2024 02:19:31 -0600
Subject: [PATCH] more responsive styles

---
 views/admin/index.hbs  |  2 +-
 views/index.hbs        |  4 ++--
 views/layouts/main.hbs | 28 ++++++++++++----------------
 3 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/views/admin/index.hbs b/views/admin/index.hbs
index eee2d30..462a7a8 100644
--- a/views/admin/index.hbs
+++ b/views/admin/index.hbs
@@ -6,7 +6,7 @@
                 <h2 class="capitalize">{{this.Name}}</h2>
                 <button onclick="deleteCategory({{this.ID}})" class="w-fit h-fit flex p-0.5 bg-[#1C1C21] border-solid border-[#211F23] rounded-md hover:bg-[#29292e] cursor-pointer"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="none" stroke="#ff1919" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"/></svg></button>
             </div>
-            <div class="p-2.5 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-2">
+            <div class="p-2.5 grid grid-cols-[repeat(auto-fill,_minmax(min(330px,_100%),_1fr))] gap-2">
                 {{#each this.Links}}
                     <div class="rounded-2xl bg-[#211F23] p-2.5 flex flex-row items-center shadow-md hover:shadow-xl transition-[shadow,transform] ease-[cubic-bezier(0.16,1,0.3,1)] relative">
                         <img class="object-contain mr-2 select-none rounded-md" width="64" height="64" draggable="false" src="{{this.Icon}}" alt="{{this.Name}}" />
diff --git a/views/index.hbs b/views/index.hbs
index a1e41f5..fce9210 100644
--- a/views/index.hbs
+++ b/views/index.hbs
@@ -12,7 +12,7 @@
     </div>
     <div class="flex flex-col items-center w-full mx-6">
         <div class="flex items-center pb-2.5">
-            <svg class="mr-3" width="60" height="60" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="12.1483" y="24.7693" width="70" height="47" rx="12" transform="rotate(14.63 12.1483 24.7693)" fill="url(#paint0_linear_20_10)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M52.7386 13.4812C46.8869 10.3698 39.6209 12.5913 36.5096 18.4429L32.7819 25.4537L68.4322 34.7599C77.5166 37.1313 82.9586 46.418 80.5872 55.5025L74.7779 77.7567C74.7752 77.7674 74.7724 77.778 74.7696 77.7886C79.7728 78.7022 85.0029 76.3441 87.518 71.6138L98.3159 51.306C101.427 45.4543 99.2058 38.1883 93.3542 35.0769L52.7386 13.4812Z" fill="url(#paint1_linear_20_10)"/><defs><linearGradient id="paint0_linear_20_10" x1="12.359" y1="44.8681" x2="82.491" y2="48.2607" gradientUnits="userSpaceOnUse"><stop stop-color="#F0389B"/><stop offset="1" stop-color="#EEE740"/></linearGradient><linearGradient id="paint1_linear_20_10" x1="33.8935" y1="25.6926" x2="94.2236" y2="61.6131" gradientUnits="userSpaceOnUse"><stop stop-color="#AA38F0"/><stop offset="1" stop-color="#EE406A"/></linearGradient></defs></svg>
+            <svg class="mr-3 aspect-square w-[clamp(48px,10vw,60px)]" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="12.1483" y="24.7693" width="70" height="47" rx="12" transform="rotate(14.63 12.1483 24.7693)" fill="url(#paint0_linear_20_10)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M52.7386 13.4812C46.8869 10.3698 39.6209 12.5913 36.5096 18.4429L32.7819 25.4537L68.4322 34.7599C77.5166 37.1313 82.9586 46.418 80.5872 55.5025L74.7779 77.7567C74.7752 77.7674 74.7724 77.778 74.7696 77.7886C79.7728 78.7022 85.0029 76.3441 87.518 71.6138L98.3159 51.306C101.427 45.4543 99.2058 38.1883 93.3542 35.0769L52.7386 13.4812Z" fill="url(#paint1_linear_20_10)"/><defs><linearGradient id="paint0_linear_20_10" x1="12.359" y1="44.8681" x2="82.491" y2="48.2607" gradientUnits="userSpaceOnUse"><stop stop-color="#F0389B"/><stop offset="1" stop-color="#EEE740"/></linearGradient><linearGradient id="paint1_linear_20_10" x1="33.8935" y1="25.6926" x2="94.2236" y2="61.6131" gradientUnits="userSpaceOnUse"><stop stop-color="#AA38F0"/><stop offset="1" stop-color="#EE406A"/></linearGradient></defs></svg>
             <h1>Passport</h1>
         </div>
         <input id="search-input" class="w-full max-w-3xl bg-[#1C1C21] border border-[rgb(86,86,91)/30] rounded-full px-3 py-1 text-white h-7" placeholder="Search..." />
@@ -25,7 +25,7 @@
                 <img class="object-contain mr-2 select-none" width="32" height="32" draggable="false" src="{{this.Icon}}" />
                 <h2 class="capitalize w-fit">{{this.Name}}</h2>
             </div>
-            <div class="p-2.5 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-2">
+            <div class="p-2.5 grid grid-cols-[repeat(auto-fill,_minmax(min(330px,_100%),_1fr))] gap-2">
                 {{#each this.Links}}
                     <a href="{{this.URL}}" class="underline-none text-unset" draggable="false" target="_blank" rel="noopener noreferrer">
                         <div class="rounded-2xl bg-[#211F23] p-2.5 flex flex-row items-center shadow-md hover:shadow-xl transition-[shadow,transform] ease-[cubic-bezier(0.16,1,0.3,1)] hover:-translate-y-1">
diff --git a/views/layouts/main.hbs b/views/layouts/main.hbs
index 34dadb2..0055776 100644
--- a/views/layouts/main.hbs
+++ b/views/layouts/main.hbs
@@ -60,11 +60,11 @@
         }
 
         h1 {
-            font-size: 64px;
+            font-size: clamp(48px,10vw,64px);
         }
 
         h2 {
-            font-size: 36px;
+            font-size: clamp(30px,6vw,36px);
         }
 
         .font-semibold {
@@ -156,20 +156,8 @@
             display: grid;
         }
 
-        .grid-cols-1 {
-            grid-template-columns: repeat(1, minmax(0, 1fr));
-        }
-
-        @media (min-width: 640px) {
-            .sm\:grid-cols-2 {
-                grid-template-columns: repeat(2, minmax(0, 1fr));
-            }
-        }
-
-        @media (min-width: 1280px) {
-            .xl\:grid-cols-3 {
-                grid-template-columns: repeat(3, minmax(0, 1fr));
-            }
+        .grid-cols-\[repeat\(auto-fill\,_minmax\(min\(330px\,_100\%\)\,_1fr\)\)\] {
+            grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
         }
 
         .gap-2 {
@@ -216,6 +204,14 @@
             width: fit-content;
         }
 
+        .w-\[clamp\(48px\,10vw\,60px\)\] {
+            width: clamp(48px,10vw,60px);
+        }
+
+        .aspect-square {
+            aspect-ratio: 1/1;
+        }
+
         @media (min-width: 640px) {
             .sm\:w-8\/10 {
                 width: 80%;