Fix grid spacing on centered top sites

hkamran80 · Oct 29, 2021 · f7bd10a · f7bd10a
1 parent 07b3558
commit f7bd10a
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 5 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/index.ts b/src/index.ts
@@ -359,6 +359,17 @@ function loadTopSites(): void {
                     limit: maxTopSites,
                 })
                 .then((topSites) => {
+                    if (
+                        topSitesContainer &&
+                        topSitesContainer.id === "topSitesCenter"
+                    ) {
+                        topSitesContainer.classList.add(
+                            topSites.length >= 1 && topSites.length < 5
+                                ? `grid-cols-${topSites.length}`
+                                : "grid-cols-5"
+                        );
+                    }
+
                     topSites.forEach((site) => {
                         const a = document.createElement("a");
                         a.href = site.url;
@@ -380,6 +391,17 @@ function loadTopSites(): void {
                 });
         } else {
             browser.topSites.get().then((topSites) => {
+                if (
+                    topSitesContainer &&
+                    topSitesContainer.id === "topSitesCenter"
+                ) {
+                    topSitesContainer.classList.add(
+                        topSites.length >= 1 && topSites.length < 5
+                            ? `grid-cols-${topSites.length}`
+                            : "grid-cols-5"
+                    );
+                }
+
                 topSites.slice(0, maxTopSites).forEach((site) => {
                     const a = document.createElement("a");
                     a.href = site.url;

diff --git a/src/template.html b/src/template.html
@@ -56,8 +56,10 @@
                     <div
                         id="topSitesCenter"
                         class="
-                            flex
-                            space-x-4
+                            grid
+                            gap-4
+                            place-items-center
+                            align-middle
                             justify-center
                             transition-opacity
                             duration-300

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -2,7 +2,10 @@ const defaultTheme = require("tailwindcss/defaultTheme");
 
 module.exports = {
     mode: "jit",
-    purge: ["./src/*.{html,css,ts}"],
+    purge: {
+        content: ["./src/*.{html,css,ts}"],
+        safeList: ["grid-cols-1", "grid-cols-2", "grid-cols-3", "grid-cols-4"],
+    },
     theme: {
         fontFamily: {
             sans: ["Quicksand", ...defaultTheme.fontFamily.sans],