center colums events and news

assets/scss/custom.scss

@@ -77,4 +77,16 @@
   .read-more-link {
     color: #FF6E00; /* Use the variable defined in theme.json */
   }
-  
+  
+  .center-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh; /* Adjust height as needed */
+  }
+
+  .grid-container-small {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+  }

hugo_stats.json

@@ -64,6 +64,7 @@
       "btn-primary",
       "btn-sm",
       "capitalize",
+      "center-wrapper",
       "col-12",
       "column",
       "container",
@@ -92,6 +93,7 @@
       "from-body",
       "g",
       "grid-container",
+      "grid-container-small",
       "grid-item",
       "group",
       "gx-5",
@@ -198,7 +200,6 @@
       "pl-2",
       "pr-5",
       "pr-8",
-      "primary",
       "pt-14",
       "pt-7",
       "px-2",
@@ -209,7 +210,6 @@
       "py-2",
       "py-7",
       "py-[2.5px]",
-      "read-more-link",
       "relative",
       "rounded",
       "rounded-2xl",

layouts/index.html

@@ -142,7 +142,8 @@
 {{ if gt (len (where .Site.RegularPages "Section" "blog")) 0 }}
 <section>
 
-  <div class="grid-container">
+  <div class="center-wrapper"> 
+  <div class="grid-container-small">
     <div class="column">
       <ul class="list">
         {{ if gt (len (where .Site.RegularPages "Section" "events")) 0 }}
@@ -186,6 +187,7 @@
       </ul>
     </div>
   </div>
+  </div>
 </section>
 {{ end }}
 

public/css/style.css

@@ -3084,6 +3084,18 @@ input#nav-toggle:checked ~ #nav-menu {
   color: #FF6E00;
   /* Use the variable defined in theme.json */ }
 
+.center-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  /* Adjust height as needed */ }
+
+.grid-container-small {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px; }
+
 @media (min-width: 540px) {
 
   .sm\:col-10 {

public/index.html

@@ -1265,7 +1265,8 @@
 
 <section>
 
-  <div class="grid-container">
+  <div class="center-wrapper"> 
+  <div class="grid-container-small">
     <div class="column">
       <ul class="list">
         
@@ -1354,6 +1355,7 @@
       </ul>
     </div>
   </div>
+  </div>
 </section>