fixup to the media with caption

.storybook/stories/paragraphs/MediaWithCaption.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ComponentProps } from "react";
+import StanfordMediaCaption from '@components/paragraphs/stanford-media-caption/media-caption-paragraph';
+import { getStoryBookImage } from '../storybook-entities';
+
+type ComponentStoryProps = ComponentProps<typeof StanfordMediaCaption> & {
+  // text: Text["processed"]
+}
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<ComponentStoryProps> = {
+  title: 'Design/Paragraphs/MediaCaption',
+  component: StanfordMediaCaption,
+  tags: ['autodocs'],
+  argTypes: {}
+};
+
+export default meta;
+type Story = StoryObj<ComponentStoryProps>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Banner: Story = {
+  render: ({ ...args }) => {
+    return <StanfordMediaCaption {...args} />
+  },
+  args: {
+    paragraph: {
+      id: "aed8df99-4689-46c9-a1ce-2b75a861c707",
+      suMediaCaptionCaption: {
+        processed: "<p>This is a media with a caption.</p>",
+        value: "<p>This is a media with a caption.</p>"
+      },
+      suMediaCaptionLink: {
+        url: "/publications",
+        title: "Link.",
+        internal: true
+      },
+      suMediaCaptionMedia: getStoryBookImage()
+    }
+  }
+};

src/components/elements/button.tsx

@@ -33,7 +33,7 @@ export const Button = ({
       'inline-block text-center w-fit': !centered,
       'btn btn--big transition text-5xl text-white hocus:text-white bg-digital-red hocus:bg-black no-underline hocus:underline py-6 px-12 font-normal': big && !secondary,
       'btn btn--secondary transition text-digital-red border-2 border-digital-red hocus:border-black no-underline hocus:underline py-4 px-8 font-normal': !big && secondary,
-      'btn bg-digital-red text-white hocus:bg-black hocus:text-white py-4 px-8 no-underline hocus:underline transition': !big && !secondary,
+      'btn bg-digital-red font-normal text-white hocus:bg-black hocus:text-white py-4 px-8 no-underline hocus:underline transition': !big && !secondary,
     }
   )
 

src/components/global/page-header.tsx

@@ -22,7 +22,7 @@ const PageHeader = async () => {
       <div className="bg-cardinal-red">
         <div className="centered py-3">
           <a
-            className="font-stanford no-underline hocus:underline text-white hocus:text-white leading-none"
+            className="font-stanford no-underline font-regular text-m0 hocus:underline text-white hocus:text-white leading-none"
             href="https://www.stanford.edu"
           >
             Stanford University

src/components/menu/main-menu.tsx

@@ -100,7 +100,7 @@ const MenuItem = ({id, url, title, activeTrail, children, level}: MenuItemProps)
   const inTrail = activeTrail.includes(id) && !isCurrent;
 
   const linkStyles = clsx(
-    'w-full relative inline-block text-white lg:text-cardinal-red hocus:text-white lg:hocus:text-black no-underline hocus:underline py-5 lg:pl-0 border-l-[6px]',
+    'w-full relative inline-block text-white lg:text-digital-red hocus:text-white lg:hocus:text-black no-underline hocus:underline py-5 lg:pl-0 border-l-[6px]',
     leftPadding[level],
     // Top menu item styles.
     {
@@ -149,7 +149,7 @@ const MenuItem = ({id, url, title, activeTrail, children, level}: MenuItemProps)
             {level === 0 && <div className="block ml-5 w-[1px] h-[25px] mb-[6px]  bg-archway-light shrink-0"/>}
             <button
               ref={buttonRef}
-              className="shrink-0 mb-[6px] relative right-10 lg:right-0 text-white lg:text-cardinal-red bg-cardinal-red lg:bg-transparent rounded-full lg:rounded-none group border-b border-transparent hocus:border-black hocus:bg-white"
+              className="shrink-0 mb-[6px] relative right-10 lg:right-0 text-white lg:text-digital-red bg-digital-red lg:bg-transparent rounded-full lg:rounded-none group border-b border-transparent hocus:border-black hocus:bg-white"
               onClick={toggleSubmenu}
               aria-expanded={submenuOpen}
             >

src/components/paragraphs/stanford-banner/banner-paragraph.tsx

@@ -40,13 +40,13 @@ const BannerParagraph = ({paragraph, eagerLoadImage, ...props}: Props) => {
               </H2>
             }
             {paragraph.suBannerSupHeader &&
-              <div className="order-1 font-semibold">
+              <div className="order-1 text-09em font-semibold">
                 {paragraph.suBannerSupHeader}
               </div>
             }
 
             {paragraph.suBannerBody &&
-              <Wysiwyg html={paragraph.suBannerBody.processed} className="order-3"/>
+              <Wysiwyg html={paragraph.suBannerBody.processed} className="order-3 text-m0"/>
             }
 
             {paragraph.suBannerButton?.url &&