chrismas

app.py

@@ -116,9 +116,12 @@ def post_detail(post_id):
         return "Post not found", 404
     #get comments
     comments = get_comments_for_post(post_id)
+    if post["id"] == 8:
+        post["template"] = "components/christmas_post.html"
+
     if post["id"] == 10:
 
-        post["template"] = "components/timeline_post.html"
+        post["template"] = "components/timeline.html"
         post["timeline"] = """
     <li class="tw-mb-10 tw-ml-10 tw-list-none tw-relative">
       <button 

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;
-}

templates/components/christmas_post.html

@@ -0,0 +1,5 @@
+<div class="background-svg">
+  <img src="{{ url_for('static', filename='animation.svg') }}" alt="" />
+  <br />
+  <p>tree source: codepen @uchardon</p>
+</div>

templates/components/post_renderer.html

@@ -1,9 +1,3 @@
 {% macro render_post(post) %}
-<article class="blog-content">
-  {{ post.content | safe }}{% if post.template %} {% include post.template %} {%
-  endif %}
-</article>
-
-<hr class="post-divider post-divider-expanded" />
-
-{% endmacro %}
+<article class="blog-content">{{ post.content | safe }}</article>
+{% if post.template %} {% include post.template %} {% endif %} {% endmacro %}

templates/components/timeline_post.html

@@ -1 +0,0 @@
-{% include "components/timeline.html" %}

templates/post_detail.html

@@ -11,15 +11,7 @@ Template{% endblock %} {% block content %} {% from
       <span class="glyphicon glyphicon-time"></span> Posted on {{ post.date }}
     </p>
     <hr />
-    {{ render_post(post) }} {% if post.id == 8 %}
-    <div class="background-svg">
-      <img src="{{ url_for('static', filename='animation.svg') }}" alt="" />
-      <br />
-      <p>tree source: codepen @uchardon</p>
-    </div>
-    {% endif %}
-
-    <div class="blog-content">{{ post.content | safe }}</div>
+    {{ render_post(post) }}
 
     <a href="{{ url_for('home') }}" class="btn btn-default btn-custom"
       >← Back to Posts</a