SOEOPSFY24-350 | swap out timeline image overlay for tw contrast

SU-SOE · Dec 19, 2024 · 2a6316f · 2a6316f
1 parent 1c0d547
commit 2a6316f
Show file tree

Hide file tree

Showing 44 changed files with 103 additions and 98 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,7 +1,7 @@
 import { Masthead } from "@/components/Masthead";
 import { TimelineCard } from "@/components/Timeline";
 import { PageTitle } from "@/components/PageTitle";
-// import { TimelineFeature } from "@/components/Timeline/TimelineFeature";
+import { TimelineFeature } from "@/components/Timeline/TimelineFeature";
 import { ThreeCol, TwoCol } from "@/components/Layout";
 import { StoryCard } from "@/components/Story";
 import { Container } from "@/components/Container";
@@ -10,14 +10,21 @@ import { Heading } from "@/components/Typography";
 import Metadata from "@/components/Layout/Metadata";
 
 export default function Home() {
+  const timelineCardItems = [
+    "1937-foundational-technology-in-the-burgeoning-microwave-industry",
+    "1910-1915-the-engineering-corner",
+    "1943-training-for-war",
+    "1939-aviation-and-aeronautical-engineering",
+    "1944-stanford-engineerings-third-dean",
+  ];
   return (
     <div>
       <Metadata
         isHome
         title="100 years of Impact"
         description="Lorem ipsum curabitur blandit mollis lacus. Curabitur ullamcorper ultricies nisi."
       />
-      <Masthead isLight />
+      <Masthead isLight bgColor="fog-light" />
       <PageTitle heading="100 years of" bigText="Impact" />
       <TimelineCard
         isHorizontal
@@ -44,7 +51,7 @@ export default function Home() {
         image="https://airandspace.si.edu/sites/default/files/styles/slideshow_basic/public/images/NASA%20166851h.jpg?itok=yL6MTpUr"
         width="site"
       />
-      {/* <TimelineFeature uuids={[12, 3, 10, 4]} /> */}
+      <TimelineFeature anchors={timelineCardItems} />
       <Container width="site" py={6}>
         <StoryCard
           isHorizontal

diff --git a/components/Masthead/Masthead.tsx b/components/Masthead/Masthead.tsx
@@ -14,7 +14,7 @@ type MastheadProps = HTMLAttributes<HTMLDivElement> & {
 
 export const Masthead = ({
   isLight,
-  isOverlap = true,
+  isOverlap = false,
   bgColor,
   mainNav,
   className,

diff --git a/components/PageTitle/PageTitle.styles.ts b/components/PageTitle/PageTitle.styles.ts
@@ -1,3 +1,2 @@
 export const root = "overflow-hidden";
-export const heading =
-  "*:font-dm-sans flex flex-row items-center 2xl:whitespace-pre-line -mt-01em xl:max-w-1200";
+export const heading = "*:font-dm-sans flex flex-row items-center";
diff --git a/components/PageTitle/PageTitle.tsx b/components/PageTitle/PageTitle.tsx
@@ -20,12 +20,13 @@ export const PageTitle = ({
     as="section"
     bgColor={bgColor}
     width="site"
-    py={9}
+    pt={6}
+    pb={8}
     className={styles.root}
   >
     <Heading mb="base" leading="none" className={styles.heading}>
-      <span className="font-semibold type-1">{heading}</span>
-      <span className="font-bold type-8">{bigText}</span>
+      <span className="font-semibold type-0 w-[5ch]">{heading}</span>
+      <span className="font-bold type-6">{bigText}</span>
     </Heading>
   </Container>
 );
diff --git a/components/Timeline/TimelineCard.styles.ts b/components/Timeline/TimelineCard.styles.ts
@@ -13,8 +13,7 @@ export const heading =
   "2xl:whitespace-pre-line -mt-01em last:mb-0 xl:max-w-1200";
 export const superhead = "order-first rs-mb-2";
 export const imageWrapper = (align: string, isHorizontal: boolean) =>
-  cnb("rs-mb-2 lg:mb-0 w-[420px] order-first", {
-    "lg:w-600": isHorizontal,
+  cnb("relative rs-mb-2 lg:mb-0 w-[420px] order-first", {
     "lg:order-first": align === "left",
     "lg:order-last": align === "right",
     "lg:rs-mr-4": align === "left" && isHorizontal,

diff --git a/components/Timeline/TimelineCard.tsx b/components/Timeline/TimelineCard.tsx
@@ -25,7 +25,7 @@ type TimelineCardProps = HTMLAttributes<HTMLDivElement> & {
   heading: string;
   year: string;
   body: string;
-  cta?: string;
+  anchor?: string;
   image: string;
   animation?: AnimationType;
   delay?: number;
@@ -52,7 +52,7 @@ export const TimelineCard = ({
   heading,
   year,
   body,
-  cta = "/",
+  anchor = "/",
   image = "https://placecats.com/neo/600/600",
   animation,
   delay,
@@ -84,7 +84,7 @@ export const TimelineCard = ({
         {isHorizontal && (
           <Trapezoid
             className={cnb(
-              "absolute top-0 z-0 flex items-center overflow-hidden",
+              "absolute top-0 z-0 flex items-center overflow-hidden w-250 md:w-[300px] lg:w-[340px] xl:w-[420px] 2xl:w-600",
               {
                 "right-0": align === "right",
                 "left-0 rotate-180": align === "left",
@@ -105,7 +105,7 @@ export const TimelineCard = ({
                 weight="normal"
                 className={styles.heading}
               >
-                <Link className="font-inherit" href={cta}>
+                <Link className="font-inherit" href={`/timeline#${anchor}`}>
                   {heading}
                   <ArrowRightIcon
                     width={20}
@@ -127,7 +127,11 @@ export const TimelineCard = ({
           </div>
           {image && (
             <div className={styles.imageWrapper(align, isHorizontal)}>
-              <TimelineImage src={image} trapezoidAngle={align} size="full" />
+              <TimelineImage
+                src={image}
+                trapezoidAngle={align}
+                size={isHorizontal ? "xlarge" : "large"}
+              />
             </div>
           )}
         </FlexBox>

diff --git a/components/Timeline/TimelineFeature.tsx b/components/Timeline/TimelineFeature.tsx
@@ -6,16 +6,16 @@ import { Slideshow } from "../Slideshow/Slideshow";
 import { Button } from "../Cta";
 
 type TimelineFeatureProps = {
-  uuids: string[];
+  anchors: string[];
 };
 
-export const TimelineFeature = async ({ uuids }: TimelineFeatureProps) => {
+export const TimelineFeature = async ({ anchors }: TimelineFeatureProps) => {
   // Fetch the timeline data
   const timelineData = await loadTimelineData();
 
   // Filter timeline items based on the provided uuids
   const featureTimelineData = timelineData.filter((item) =>
-    uuids.includes(item.uuid),
+    anchors.includes(item.anchor),
   );
 
   return (

diff --git a/components/Timeline/TimelineImage.tsx b/components/Timeline/TimelineImage.tsx
@@ -39,26 +39,18 @@ export const TimelineImage = ({
         )}
       >
         {isExpanded && (
-          <>
-            <XMarkIcon
-              width={34}
-              className="absolute bg-stone-dark text-white rounded-full w-34 h-34 z-50"
-            />
-            <div
-              className={cnb(
-                "absolute top-0 left-0 bg-[#c4c4c4] opacity-80 w-full h-full z-10 overflow-hidden rounded-[20px] shadow-lg transform ease-in-out duration-1000",
-                trapezoidType,
-                imageSize,
-              )}
-            />
-          </>
+          <XMarkIcon
+            width={34}
+            className="absolute bg-stone-dark text-white rounded-full w-34 h-34 z-50"
+          />
         )}
         <Image
           alt={alt}
           src={src}
           fill
           className={cnb(
             "z-0 object-cover overflow-hidden rounded-[20px] shadow-lg transform ease-in-out duration-1000",
+            { "contrast-50": isExpanded },
           )}
         />
       </div>

diff --git a/components/Timeline/TimelineItem.styles.ts b/components/Timeline/TimelineItem.styles.ts
@@ -4,7 +4,7 @@ export const size = {
   small: "w-200 md:w-250",
   medium: "w-250 md:w-[300px] xl:w-[340px]",
   large: "w-250 md:w-[300px] xl:w-[420px]",
-  xlarge: "w-250 md:w-[300px] lg:w-[420px] xl:w-600",
+  xlarge: "w-250 md:w-[300px] lg:w-[340px] xl:w-[420px] 2xl:w-600",
   full: "w-full",
 };
 

diff --git a/components/images/trapezoid.tsx b/components/images/trapezoid.tsx
@@ -9,8 +9,8 @@ interface TrapezoidProps {
 
 export const Trapezoid = ({
   fill,
-  height = "909",
-  width = "495",
+  height = "100%",
+  width = "100%",
   className,
 }: TrapezoidProps) => {
   return (