diff --git a/overrides/home/component.tsx b/overrides/home/component.tsx
index 34de6f65a..c1370ade2 100644
--- a/overrides/home/component.tsx
+++ b/overrides/home/component.tsx
@@ -23,7 +23,6 @@ import RedEarthImg from "./media/earth-1.png";
const IntroHeadline = styled(Hug)`
display: flex;
- flex-flow: column;
gap: ${glsp(2)};
grid-column: content-start / content-end;
@@ -32,6 +31,10 @@ const IntroHeadline = styled(Hug)`
flex-flow: row;
`}
+ ${media.mediumDown`
+ flex-flow: column;
+ `}
+
p {
font-size: 1.25rem;
padding-top: 1rem;
@@ -144,7 +147,7 @@ export default function HomeComponent() {
{description}
-
+
diff --git a/overrides/home/partners.tsx b/overrides/home/partners.tsx
index 839d22855..0ca110a3e 100644
--- a/overrides/home/partners.tsx
+++ b/overrides/home/partners.tsx
@@ -28,41 +28,104 @@ const LogoWrapper = styled.div`
`}
`;
+const LogoWrapperWithLimit = styled.div`
+ display: flex;
+ flex-flow: column;
+ flex-shrink: 0;
+ gap: 2rem;
+ align-items: center;
+ justify-content: center;
+
+ div {
+ gap: 1rem;
+ display: flex;
+ flex-flow: row;
+ align-items: center;
+ ${media.mediumDown`
+ gap: 0.5rem;
+ `}
+ }
+`;
+
export default function Partners(props: {
- size: "big" | "small"
+ size: "big" | "small",
+ top?: number,
}) {
const { size } = props;
const squareLogoHeight = size == "big" ? "80" : "40";
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ let partners = [
+ {
+ href: "https://www.nasa.gov/",
+ src: nasaImg,
+ alt: "NASA logo"
+ },
+ {
+ href: "https://www.epa.gov/",
+ src: epaImg,
+ alt: "EPA logo"
+ },
+ {
+ href: "https://www.fema.gov/",
+ src: femaImg,
+ alt: "FEMA logo"
+ },
+ {
+ href: "https://www.noaa.gov/",
+ src: noaaImg,
+ alt: "NOAA logo"
+ },
+ {
+ href: "https://www.usaid.gov/",
+ src: usaidImg,
+ alt: "USAID logo"
+ },
+ {
+ href: "https://www.usda.gov/",
+ src: usdaImg,
+ alt: "USDA logo"
+ },
+ {
+ href: "https://www.usgs.gov/",
+ src: usgsImg,
+ alt: "USGS logo",
+ height: size == "big" ? "40" : "20",
+ },
+ ]
-
-
-
+ const createOrder = (top?: number) => {
+ const createRow = (logos: any[]) => (
+ <>
+ {logos.map((partner) => (
+
+
+
+ ))}
+ >
+ );
-
-
-
-
-
-
-
-
+ if (top) {
+ const bottom = partners.splice(top);
+ return (
+
+ {createRow(partners)}
+ {createRow(bottom)}
+
+ );
+ } else {
+ return (
+
+ {createRow(partners)}
+
+ );
+ }
+ }
+
+ return (
+ createOrder(props.top)
);
}