SOEOPSFY-301 | build out prototype of vertical border grid for timeline

app/components/TimelineEven/TimelineItem.styles.ts

@@ -1,7 +1,7 @@
 export const size = {
-  small: "w-150 h-150",
-  medium: "w-200 h-200",
-  large: "w-300 h-300",
+  small: "max-w-150 max-h-150",
+  medium: "max-w-200 max-h-200",
+  large: "max-w-300 max-h-300",
 };
 
 export const trapezoid = {

app/components/TimelineEven/TimelineItem.tsx

@@ -25,12 +25,11 @@ const TimelineItem = ({
   const trapezoidType = styles.trapezoid[trapezoid];
 
   return (
-    <div {...props} className="flex flex-col">
+    <div {...props} className={cnb("flex flex-col", className)}>
       <button
         className={cnb(
-          "group relative hocus:transform-none",
-          trapezoidType,
-          className,
+          "group relative hocus:transform-none rounded-lg flex items-center justify-center",
+          trapezoidType
         )}
       >
         <div

app/components/TimelineEven/TimelineOverview.tsx

@@ -3,6 +3,7 @@
 import { Container } from "@/components/Container";
 import TimelineItem from "./TimelineItem";
 import { SizeType } from "./TimelineItem.types";
+import { cnb } from 'cnbuilder';
 
 type TimelineItemData = {
   year: string;
@@ -15,14 +16,15 @@ type TimelineItemData = {
 
 type TimelineProps = {
   timelineData: TimelineItemData[];
+  hasBorder?: boolean
 };
 
-const TimelineEven = ({ timelineData }: TimelineProps) => {
+const TimelineEven = ({ timelineData, hasBorder }: TimelineProps) => {
   const sizePattern: SizeType[] = ["large", "medium", "small"];
 
   return (
     <Container width="site" py={5} bgColor="fog-light" className="mb-50">
-      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 *:mx-61">
+      <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 *:px-61">
         {timelineData.map((item, idx) => {
           const trapezoid = idx % 2 === 0 ? "right" : "left";
           const size = sizePattern[idx % sizePattern.length];
@@ -33,7 +35,7 @@ const TimelineEven = ({ timelineData }: TimelineProps) => {
               {...item}
               size={size}
               trapezoid={trapezoid}
-              className="rounded-lg flex items-center justify-center"
+              className={cnb("rs-pb-8", hasBorder && "border-r-3 border-black nth-2n:border-0 md:nth-2n:border-r-3 md:nth-3n:border-0 xl:nth-3n:border-r-3 xl:nth-4n:border-0")}
             />
           );
         })}

app/globals.css

@@ -4,28 +4,36 @@
 
 @layer utilities {
   .trapezoid-1 {
-    transition: transform 0.4s, -webkit-transform 0.4s;
+    transition:
+      transform 0.4s,
+      -webkit-transform 0.4s;
     transform-origin: center center;
     transform: scale(1.1) perspective(60rem) translate3d(0px, 0px, -0.05rem)
       rotateX(-10deg) rotateY(-25deg) translateZ(-50px);
   }
 
   .trapezoid-2 {
-    transition: transform 0.4s, -webkit-transform 0.4s;
+    transition:
+      transform 0.4s,
+      -webkit-transform 0.4s;
     transform-origin: center center;
     transform: scale(1.1) perspective(0.2rem) translate3d(0px, 0px, -0.05rem)
       rotateX(0.117422deg) rotateY(-0.155838deg);
   }
 
   .trapezoid-3 {
-    transition: transform 0.4s, -webkit-transform 0.4s;
+    transition:
+      transform 0.4s,
+      -webkit-transform 0.4s;
     transform-origin: center center;
     transform: scale(1.1) perspective(0.2rem) translate3d(0px, 0px, -0.1rem)
       rotateX(-0.2deg) rotateY(0.1deg);
   }
 
   .trapezoid-4 {
-    transition: transform 0.4s, -webkit-transform 0.4s;
+    transition:
+      transform 0.4s,
+      -webkit-transform 0.4s;
     transform-origin: center center;
     transform: scale(1.1) perspective(0.6rem) translate3d(0px, 0px, -0.1rem)
       rotateX(0.1deg) rotateY(-0.5deg);

app/timeline/oct-31/page.tsx

@@ -0,0 +1,19 @@
+import { Masthead } from "@/components/Masthead";
+import { PageTitle } from "@/components/PageTitle";
+import TimelineOverview from "@/components/TimelineEven/TimelineOverview";
+import { loadTimelineData } from "@/utilities/loadTimelineData";
+
+const TimelinePage = async () => {
+  const timelineData = await loadTimelineData();
+  return (
+    <div>
+      <Masthead isLight />
+      <PageTitle heading="100 years of" bigText="Impact" />
+      <TimelineOverview timelineData={timelineData} hasBorder />
+      <PageTitle heading="100 years of" bigText="Impact" />
+      <TimelineOverview timelineData={timelineData} />
+    </div>
+  );
+};
+
+export default TimelinePage;

tailwind.config.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-require-imports */
 
 import type { Config } from 'tailwindcss';
+import plugin from 'tailwindcss/plugin'
 
 // const path = require('path');
 const decanter = require('decanter');
@@ -36,5 +37,11 @@ export default {
   plugins: [
     require('@tailwindcss/container-queries'),
     require('@xpd/tailwind-3dtransforms'),
+    plugin(function ({ addVariant }) {
+      const nthVariants = [2, 3, 4];
+      nthVariants.forEach((n) => {
+        addVariant(`nth-${n}n`, `&:nth-child(${n}n)`);
+      });
+    }),
   ],
 } satisfies Config;