Issue #531: Update "ThemedSection" component to responsively reduce vertical padding on smaller screens (#534)

* 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.

* Change "verticalPaddings" property to "yPaddings"

Author: alexisreytech

astro/src/components/ThemedSection.astro

@@ -4,7 +4,7 @@ interface Props {
   theme?: string;
   style?: string;
   text?: boolean;
-  py?: number;
+  yPaddings?: Array<string>;
   fluid?: boolean;
 }
 
@@ -13,17 +13,18 @@ const {
   theme = undefined,
   style = undefined,
   text = false,
-  py = 5,
+  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 yPaddingClasses = yPaddings.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" : ""}`, yPaddingClasses]}>
     <slot />
   </div>
 </section>

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} />

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

astro/src/layouts/TipLayout.astro

@@ -132,7 +132,7 @@ const metadata: PageMetadata = {
     </div>
   </ThemedSection>
 
-  <ThemedSection style="secondary" py={3}>
+  <ThemedSection style="secondary">
     <TipLicense />
   </ThemedSection>
 </Layout>

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>
       {

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>
       {

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>
       {

astro/src/pages/escape-room/_csun-2025.astro

@@ -62,7 +62,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>

astro/src/pages/escape-room/index.astro

@@ -32,7 +32,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"
     >

astro/src/pages/podcasts/index.astro

@@ -73,7 +73,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">