bigger text

static/css/components/timeline.css

@@ -1,43 +1,52 @@
-/* 1. Reset the LI to ensure no Bootstrap frames/padding interfere */
-li.tw-list-none {
-  border: none !important;
-  background: transparent !important;
-  padding-left: 0 !important; /* Forces alignment control to the Button */
-  margin-left: 1.5rem !important; /* This is the 'tw-ml-6' equivalent */
+/* 1. FONT MATCHING: Force Tailwind classes to use your blog's native font */
+.tw-text-base,
+.tw-text-lg,
+.tw-font-semibold,
+.timeline-button,
+time,
+h3,
+p {
+  font-family: inherit !important;
 }
 
-/* 2. The Precision Dot */
+/* 2. WIDTH FIX: Make the timeline fill the 750px container properly */
+@media (min-width: 1200px) {
+  .timeline-container {
+    max-width: 100% !important; /* Use the full 750px Bootstrap gives you */
+    width: 100% !important;
+  }
+}
+
+/* 3. THE DOT ALIGNMENT: Precision centering on the 2px gray line */
 .timeline-button {
   position: absolute;
-
-  /* MATH: The li has ml-6 (1.5rem). 
-     To center a 0.75rem dot on the line at the edge of that margin:
-     We move it left by (1.5rem + half the dot width). */
-  left: -1.9rem !important;
+  left: -1.92rem !important; /* Adjust this slightly if it's off by a pixel */
   top: 0.25rem;
-
   width: 0.75rem;
   height: 0.75rem;
   border-radius: 9999px;
   background: #d1d5db;
-
   display: flex;
   align-items: center;
   justify-content: center;
-
-  /* This creates the 'gap' around the dot so it looks clean */
   border: 2px solid white !important;
   z-index: 10;
   transition: all 0.2s ease;
   cursor: pointer;
 }
 
-/* 3. Force the Line to be visible and solid */
+/* 4. KILL THE FRAME: Ensure only the left border shows */
 ol.tw-border-l-2 {
   border-left: 2px solid #d1d5db !important;
   border-right: none !important;
   border-top: none !important;
   border-bottom: none !important;
+  border-style: solid !important;
+}
+
+li.tw-list-none {
+  border: none !important;
+  padding-left: 0 !important;
 }
 
 /* Ensure the dot stays put when screen shrinks */

templates/components/timeline.html

@@ -1,7 +1,7 @@
-<div class="tw-max-w-5xl tw-mx-auto tw-px-6 tw-py-16">
+<div class="timeline-container tw-mx-auto tw-px-6 tw-py-16">
   <ol
-    class="tw-relative tw-border-l-2 tw-border-gray-300 tw-p-0 tw-m-0 tw-ml-4"
+    class="tw-relative tw-border-l-2 tw-border-gray-300 tw-list-none tw-p-0 tw-m-0 tw-ml-4"
   >
-    {{ post.timeline | safe}}
+    {{ post.timeline | safe }}
   </ol>
 </div>