From d9f88c5268a013005d6307361a204f3a0ad98ccb Mon Sep 17 00:00:00 2001
From: alexisreytech <89283739+alexisreytech@users.noreply.github.com>
Date: Tue, 7 Apr 2026 13:20:51 -0500
Subject: [PATCH 1/2] Update "ThemedSection" component to responsively reduce
 vertical padding sizes for smaller screens. Achieve this by applying the
 pattern established by the existing "ColumnedHero" component. Remove existing
 optional padding class from "ThemedSection" component to unify the look
 across the website.

---
 astro/src/components/ThemedSection.astro     | 7 ++++---
 astro/src/layouts/BlogLayout.astro           | 2 +-
 astro/src/layouts/PolicyLayout.astro         | 2 +-
 astro/src/layouts/TipLayout.astro            | 2 +-
 astro/src/pages/blog/authors/index.astro     | 2 +-
 astro/src/pages/blog/dates/index.astro       | 2 +-
 astro/src/pages/blog/topics/index.astro      | 2 +-
 astro/src/pages/escape-room/_csun-2025.astro | 2 +-
 astro/src/pages/escape-room/index.astro      | 2 +-
 astro/src/pages/podcasts/index.astro         | 2 +-
 astro/src/pages/services/index.astro         | 2 +-
 11 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/astro/src/components/ThemedSection.astro b/astro/src/components/ThemedSection.astro
index 2f3456cf..72a63342 100644
--- a/astro/src/components/ThemedSection.astro
+++ b/astro/src/components/ThemedSection.astro
@@ -4,7 +4,7 @@ interface Props {
   theme?: string;
   style?: string;
   text?: boolean;
-  py?: number;
+  verticalPaddings?: Array<string>;
   fluid?: boolean;
 }
 
@@ -13,17 +13,18 @@ const {
   theme = undefined,
   style = undefined,
   text = false,
-  py = 5,
+  verticalPaddings = ["xs-1", "sm-2", "md-3", "lg-4"],
   fluid = false,
 } = Astro.props;
 
 import { getBackgroundAndText } from "../lib/themes.ts";
 
 const bgAndTextClass = getBackgroundAndText(theme, style, text);
+const verticalPaddingClasses = verticalPaddings.map((p) => `py-${p}`);
 ---
 
 <section {id} class:list={[bgAndTextClass, "py-4"]}>
-  <div class:list={[`container${fluid ? "-fluid" : ""}`, `py-${py}`]}>
+  <div class:list={[`container${fluid ? "-fluid" : ""}`, verticalPaddingClasses]}>
     <slot />
   </div>
 </section>
diff --git a/astro/src/layouts/BlogLayout.astro b/astro/src/layouts/BlogLayout.astro
index 5d2ed955..eedfc5ed 100644
--- a/astro/src/layouts/BlogLayout.astro
+++ b/astro/src/layouts/BlogLayout.astro
@@ -92,7 +92,7 @@ import ThemedSection from "@components/ThemedSection.astro";
       <strong>Blog</strong>
     </slot>
   </ImageHeading>
-  <ThemedSection style="tertiary" py={0}>
+  <ThemedSection style="tertiary">
     <div class="d-flex gap-4">
       <article class:list={[sidebar ? "d-none d-lg-block" : "col", "col-lg-9"]}>
         <h1 class="display-4 border-bottom mb-3" set:text={blog.data.title} />
diff --git a/astro/src/layouts/PolicyLayout.astro b/astro/src/layouts/PolicyLayout.astro
index 901a87b9..4a13f379 100644
--- a/astro/src/layouts/PolicyLayout.astro
+++ b/astro/src/layouts/PolicyLayout.astro
@@ -22,7 +22,7 @@ const metadata: PageMetadata = {
       {title}
     </slot>
   </ImageHeading>
-  <ThemedSection style="secondary" py={2}>
+  <ThemedSection style="secondary">
     <div class="d-print-none text-end pb-2">
       <button class="btn btn-contrast-dark btn-info" onclick="window.print()">
         Print this page
diff --git a/astro/src/layouts/TipLayout.astro b/astro/src/layouts/TipLayout.astro
index 1c04b54b..fbafac50 100644
--- a/astro/src/layouts/TipLayout.astro
+++ b/astro/src/layouts/TipLayout.astro
@@ -131,7 +131,7 @@ const metadata: PageMetadata = {
     </div>
   </ThemedSection>
 
-  <ThemedSection style="secondary" py={3}>
+  <ThemedSection style="secondary">
     <TipLicense />
   </ThemedSection>
 </Layout>
diff --git a/astro/src/pages/blog/authors/index.astro b/astro/src/pages/blog/authors/index.astro
index 40ad86e6..75cb340e 100644
--- a/astro/src/pages/blog/authors/index.astro
+++ b/astro/src/pages/blog/authors/index.astro
@@ -23,7 +23,7 @@ import ThemedSection from "../../../components/ThemedSection.astro";
   <ImageHeading image="blog" slot="header">
     <strong>Blogs</strong> by author
   </ImageHeading>
-  <ThemedSection style="tertiary" py={0}>
+  <ThemedSection style="tertiary">
     <h2 class="text-info-emphasis display-5" set:text={title} />
     <ul>
       {
diff --git a/astro/src/pages/blog/dates/index.astro b/astro/src/pages/blog/dates/index.astro
index e633761f..055e9fda 100644
--- a/astro/src/pages/blog/dates/index.astro
+++ b/astro/src/pages/blog/dates/index.astro
@@ -24,7 +24,7 @@ import ThemedSection from "../../../components/ThemedSection.astro";
   <ImageHeading image="blog" slot="header">
     <strong>Blogs</strong> by date
   </ImageHeading>
-  <ThemedSection style="tertiary" py={0}>
+  <ThemedSection style="tertiary">
     <h2 class="text-info-emphasis display-5" set:text={title} />
     <ul>
       {
diff --git a/astro/src/pages/blog/topics/index.astro b/astro/src/pages/blog/topics/index.astro
index b7594ad2..333b65af 100644
--- a/astro/src/pages/blog/topics/index.astro
+++ b/astro/src/pages/blog/topics/index.astro
@@ -24,7 +24,7 @@ import ThemedSection from "../../../components/ThemedSection.astro";
   <ImageHeading image="blog" slot="header">
     <strong>Blogs</strong> by topic
   </ImageHeading>
-  <ThemedSection style="tertiary" py={0}>
+  <ThemedSection style="tertiary">
     <h2 class="text-info-emphasis display-5" set:text={title} />
     <ul>
       {
diff --git a/astro/src/pages/escape-room/_csun-2025.astro b/astro/src/pages/escape-room/_csun-2025.astro
index db4040e1..4c887333 100644
--- a/astro/src/pages/escape-room/_csun-2025.astro
+++ b/astro/src/pages/escape-room/_csun-2025.astro
@@ -61,7 +61,7 @@ const timeSlots = ["7:20", "7:50", "8:20", "8:50", "9:20"];
   </Hero>
 
   <img src="/images/wave.svg" class="wave" />
-  <ThemedSection id="form" theme="secondary" style="subtle" py={2}>
+  <ThemedSection id="form" theme="secondary" style="subtle">
     <h2 class="display-3 mb-4">
       CSUN <strong>Escape Room</strong> Registration
     </h2>
diff --git a/astro/src/pages/escape-room/index.astro b/astro/src/pages/escape-room/index.astro
index 15700a88..33367ec1 100644
--- a/astro/src/pages/escape-room/index.astro
+++ b/astro/src/pages/escape-room/index.astro
@@ -27,7 +27,7 @@ import woodenPuzzles from "src/images/escape-room/wooden-puzzles.png";
 ---
 
 <EscapeRoomLayout {metadata} {title}>
-  <ThemedSection slot="header" theme="info" py={4}>
+  <ThemedSection slot="header" theme="info">
     <div
       class="d-flex flex-column flex-lg-row gap-4 py-3 justify-content-lg-center align-items-center"
     >
diff --git a/astro/src/pages/podcasts/index.astro b/astro/src/pages/podcasts/index.astro
index dcb06ec8..102b0aae 100644
--- a/astro/src/pages/podcasts/index.astro
+++ b/astro/src/pages/podcasts/index.astro
@@ -72,7 +72,7 @@ import ThemedBox from "@components/ThemedBox.astro";
   </ImageHeading>
   {
     shows.map((show, index) => (
-      <ThemedSection style={(index % 2) ? "tertiary" : undefined} id={show.id} py={3}>
+      <ThemedSection style={(index % 2) ? "tertiary" : undefined} id={show.id}>
         {index === 0
         ? <ThemedBox theme="primary" style="subtle" border={1} padding={3} class="mb-5 p-3 rounded">
             <div class="d-flex flex-column flex-lg-row justify-content-center column-gap-3 align-items-center mt-2">
diff --git a/astro/src/pages/services/index.astro b/astro/src/pages/services/index.astro
index 55d25afa..6d3c7e98 100644
--- a/astro/src/pages/services/index.astro
+++ b/astro/src/pages/services/index.astro
@@ -78,7 +78,7 @@ const metadata: PageMetadata = {
     </div>
   </Hero>
 
-  <ThemedSection style="tertiary" py={4}>
+  <ThemedSection style="tertiary">
     <div class="row row-gap-4 row-cols-1 row-cols-lg-2 mb-3">
       {
         services.map(({ icon, name, title, text, link }) => (

From 8ecd30713378d50102b0f6720ae67f2871da0005 Mon Sep 17 00:00:00 2001
From: alexisreytech <89283739+alexisreytech@users.noreply.github.com>
Date: Tue, 14 Apr 2026 11:45:03 -0500
Subject: [PATCH 2/2] Change "verticalPaddings" property to "yPaddings"

---
 astro/src/components/ThemedSection.astro | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/astro/src/components/ThemedSection.astro b/astro/src/components/ThemedSection.astro
index 72a63342..0cdc4ccf 100644
--- a/astro/src/components/ThemedSection.astro
+++ b/astro/src/components/ThemedSection.astro
@@ -4,7 +4,7 @@ interface Props {
   theme?: string;
   style?: string;
   text?: boolean;
-  verticalPaddings?: Array<string>;
+  yPaddings?: Array<string>;
   fluid?: boolean;
 }
 
@@ -13,18 +13,18 @@ const {
   theme = undefined,
   style = undefined,
   text = false,
-  verticalPaddings = ["xs-1", "sm-2", "md-3", "lg-4"],
+  yPaddings = ["xs-1", "sm-2", "md-3", "lg-4"],
   fluid = false,
 } = Astro.props;
 
 import { getBackgroundAndText } from "../lib/themes.ts";
 
 const bgAndTextClass = getBackgroundAndText(theme, style, text);
-const verticalPaddingClasses = verticalPaddings.map((p) => `py-${p}`);
+const yPaddingClasses = yPaddings.map((p) => `py-${p}`);
 ---
 
 <section {id} class:list={[bgAndTextClass, "py-4"]}>
-  <div class:list={[`container${fluid ? "-fluid" : ""}`, verticalPaddingClasses]}>
+  <div class:list={[`container${fluid ? "-fluid" : ""}`, yPaddingClasses]}>
     <slot />
   </div>
 </section>