From da196f5ce6372678e364dc550c6ca0e01c2685ec Mon Sep 17 00:00:00 2001
From: Oscar Lopez <oscareduardolp6@gmail.com>
Date: Sat, 28 Dec 2024 23:32:50 -0600
Subject: [PATCH] Refactor about section layout to use CSS variables for column
 count

---
 layouts/partials/head.html | 1 +
 static/css/index.css       | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index b3635f8b7..06c995b17 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -58,6 +58,7 @@
         --secondary-background-color-dark: {{ .Site.Params.color.darkmode.secondaryBackgroundColor | default "#212529" }};
         --primary-color-dark: {{ .Site.Params.color.darkmode.primaryColor | default "#ffffff" }};
         --secondary-color-dark: {{ .Site.Params.color.darkmode.secondaryColor | default "#212529" }};
+        --about-me-column-count: repeat(2, minmax(140px, 200px));
     }
     body {
         font-size: {{ .Site.Params.font.fontSize | default "1rem" }};
diff --git a/static/css/index.css b/static/css/index.css
index bfe2743ca..85e88c80c 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -213,7 +213,7 @@ header .navbar.animate {
 
 #about ul {
     display: grid;
-    grid-template-columns: repeat(2, minmax(140px, 200px));
+    grid-template-columns: var(--about-me-column-count);
     gap: 0px 10px;
     padding: 0px;
     margin: 20px 0px 0px;
@@ -221,6 +221,12 @@ header .navbar.animate {
     list-style: none;
 }
 
+@media (min-width: 768px) { 
+  :root {
+    --about-me-column-count: repeat(3, minmax(140px, 200px));
+  }
+}
+
 #about ul li {
     position: relative;
     margin-bottom: 10px;