From c4c115de17d2c49c4ad0474af728681e0bb9d36a Mon Sep 17 00:00:00 2001
From: kelinfoxy <67766943+kelinfoxy@users.noreply.github.com>
Date: Fri, 8 May 2026 20:35:07 -0400
Subject: [PATCH] Convert service rows into service icons in a grid instead of
a table.
---
index.html | 813 +++++++++++++++++++++++++++--------------------------
1 file changed, 410 insertions(+), 403 deletions(-)
diff --git a/index.html b/index.html
index bb26d7d..d949147 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,9 @@
--accent-soft: #1a2a3d;
--shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
--radius: 14px;
- --column-width: 300px;
+ --column-width: 320px;
+ --num-columns: 4;
+ --num-columns-services: 4;
}
* { box-sizing: border-box; }
@@ -215,7 +217,7 @@
.tables {
display: grid;
- grid-template-columns: auto auto auto auto;
+ grid-template-columns: repeat(var(--num-columns), 1fr);
gap: 20px;
align-items: start;
justify-content: start;
@@ -343,30 +345,78 @@
width: 100%;
}
.admin-row {
- display: inline-flex;
+ display: flex;
vertical-align: bottom;
align-items: flex-start;
- justify-content: flex-start;
+ flex-direction: row;
gap: 10px;
margin: 0px 10px 10px 10px;
+ width: 100%;
+ min-width: 200px;
}
.admin-row a {
display: inline-flex;
font-size: 3rem;
+ justify-content: center;
}
.admin-row img {
width: 30px;
height: 30px;
- display: inline-flex;
}
.local-url {
font-size: 0.8rem !important;
color: var(--text);
margin-top: 0px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ }
+
+ .service-row-small {
+ display: flex;
+ gap: 20px 20px;
+ margin: 20px 20px;
+ }
+
+ .service-row-small img {
+ width: 30px;
+ height: 30px;
+ display: block;
+ padding: 0px;
+ margin: 0px;
+ }
+
+ .service-row-large {
+ display: flex;
+ gap: 20px 20px;
+ margin: 20px 20px;
+ justify-content: space-between;
+ }
+
+ .service-row-large img {
+ width: 60px;
+ height: 60px;
+ display: block;
+ padding: 0px;
+ margin: 0px;
+ }
+
+ .service-grid {
+ display: grid;
+ grid-template-columns: repeat(var(--num-columns-services), 1fr);
+ gap: 20px;
+ margin: 20px;
+ max-width: fit-content;
+ }
+ .service-grid div {
+ display: block;
+ gap: 6px;
+ width: calc(var(--column-width) / var(--num-columns-services) - 25px);
}
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
