components/Sections.module.css

@@ -11,7 +11,7 @@
 }
 
 .separator {
-  flex: 2;
+  flex: 1;
   background-color: var(--label);
   height: calc(1rem / 16);
   width: 100%;

components/Sections.tsx

@@ -10,8 +10,6 @@ interface SectionsData {
 interface SectionsProps {
   /* Whether to display the "Sections" title and separator that appears on the left. */
   showHeader?: boolean;
-  /* Width of the entire Sections, in px. */
-  width?: number;
   data: SectionsData[];
   className?: string;
 }
@@ -19,7 +17,6 @@ interface SectionsProps {
 export function Sections({
   data,
   showHeader = true,
-  width = 800,
   className,
 }: SectionsProps) {
   return (
@@ -27,7 +24,6 @@ export function Sections({
       className={
         className ? `${className} ${styles.sections}` : `${styles.sections}`
       }
-      style={{ width: width }}
     >
       {showHeader ? (
         <>

components/Timeline.module.css

@@ -15,7 +15,6 @@
   display: flex;
   flex-direction: column;
   justify-content: space-around;
-  align-items: flex-end;
   gap: calc(20rem / 16);
 }
 
@@ -23,7 +22,7 @@
   width: 100%;
   display: flex;
   flex-direction: row;
-  justify-content: flex-end;
+  justify-content: center;
 }
 
 .time {
@@ -35,7 +34,7 @@
   word-wrap: break-word;
 }
 
-.outerCircle {
+.circle {
   background-color: var(--secondary-accent);
   box-shadow: calc(0rem / 16) calc(0rem / 16) calc(30rem / 16) var(--secondary-accent);
   display: flex;

components/Timeline.tsx

@@ -17,6 +17,8 @@ interface TimelineProps {
   outerCircleWidth?: number;
   /** Width of the inner circles on the timeline, in pixels. */
   innerCircleWidth?: number;
+  /** Width of time label, in pixels. */
+  timeWidth?: number;
   /** Width of text label, in pixels. */
   textWidth?: number;
   /** Distance between the time label AND the text label to middle line, in pixels. */
@@ -30,12 +32,14 @@ export function Timeline({
   lineWidth = 5,
   outerCircleWidth = 30,
   innerCircleWidth = 15,
+  timeWidth = 1000,
   textWidth = 500,
   gap = 50,
   className,
 }: TimelineProps) {
   const largerMiddleElement =
     outerCircleWidth > lineWidth ? outerCircleWidth : lineWidth;
+  const width = timeWidth + gap + largerMiddleElement + gap + textWidth;
   if (innerCircleWidth > outerCircleWidth) {
     throw new Error(
       `<Timeline /> - innerCircleWidth (${innerCircleWidth}) is larger than outerCircleWidth (${outerCircleWidth})`
@@ -47,12 +51,13 @@ export function Timeline({
       className={
         className ? `${className} ${styles.wrapper}` : `${styles.wrapper}`
       }
+      style={{ width: width }}
     >
       <div
         className={styles.line}
         style={{
           width: lineWidth,
-          right: textWidth + gap + largerMiddleElement / 2 - lineWidth / 2,
+          left: width / 2 - lineWidth / 2,
         }}
       />
       <div className={styles.timelineSections}>
@@ -60,9 +65,11 @@ export function Timeline({
           <TimelineSection
             key={datum.time}
             datum={datum}
+            width={width}
             isTimeUppercase={isTimeUppercase}
             outerCircleWidth={outerCircleWidth}
             innerCircleWidth={innerCircleWidth}
+            timeWidth={timeWidth}
             textWidth={textWidth}
             gap={gap}
           />
@@ -74,33 +81,42 @@ export function Timeline({
 
 interface TimelineSectionProps {
   datum: TimelineData;
+  width: number;
   isTimeUppercase: boolean;
   outerCircleWidth: number;
   innerCircleWidth: number;
+  timeWidth: number;
   textWidth: number;
   gap: number;
 }
 
 function TimelineSection({
   datum,
+  width,
   isTimeUppercase,
   outerCircleWidth,
   innerCircleWidth,
+  timeWidth,
   textWidth,
   gap,
 }: TimelineSectionProps) {
   return (
     <div className={styles.timelineSection} style={{ gap: gap }}>
-      <div className={styles.time}>
+      <div
+        className={styles.time}
+        style={{
+          width: timeWidth,
+          marginLeft: (width - 2 * gap - outerCircleWidth) / 2 - timeWidth,
+        }}
+      >
         {isTimeUppercase ? datum.time.toUpperCase() : datum.time}
       </div>
       <div
-        className={styles.outerCircle}
+        className={styles.circle}
         style={{
           width: outerCircleWidth,
           height: outerCircleWidth,
           borderRadius: outerCircleWidth,
-          flex: `0 0 ${outerCircleWidth}px`,
         }}
       >
         <div
@@ -116,7 +132,7 @@ function TimelineSection({
         className={styles.text}
         style={{
           width: textWidth,
-          flex: `0 0 ${textWidth}px`,
+          marginRight: (width - 2 * gap - outerCircleWidth) / 2 - textWidth,
         }}
       >
         {datum.text}