chrismas

static/css/components/timeline.css

@@ -1,52 +1,43 @@
-/* 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;
+/* 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 */
 }
 
-/* 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 */
+/* 2. The Precision Dot */
 .timeline-button {
   position: absolute;
-  left: -1.92rem !important; /* Adjust this slightly if it's off by a pixel */
+
+  /* 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;
   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;
 }
 
-/* 4. KILL THE FRAME: Ensure only the left border shows */
+/* 3. Force the Line to be visible and solid */
 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 */
@@ -63,15 +54,3 @@ li.tw-list-none {
   background: transparent !important;
   color: #6b7280;
 }
-
-/* This forces the timeline area to take up 90% of the Bootstrap container 
-   instead of being restricted to a small pixel value */
-.tw-max-w-5xl {
-  max-width: 90% !important;
-}
-
-/* Ensure the body text doesn't wrap too aggressively */
-.tw-text-base {
-  line-height: 1.6 !important;
-  max-width: 100% !important;
-}