Update "ThemedSection" component to responsively reduce vertical padding on smaller screens

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

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

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

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

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

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 }) => (