Mira/flask_blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bigger text

Browse Source
This commit is contained in:
m
2026-03-14 17:15:37 +01:00
parent e4d6c35acc
commit b03e46aa99
2 changed files with 29 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
static/css/components/timeline.css
View File

@@ -1,43 +1,52 @@
/* 1. Reset the LI to ensure no Bootstrap frames/padding interfere */ /* 1. FONT MATCHING: Force Tailwind classes to use your blog's native font */
li.tw-list-none { .tw-text-base,
border: none !important; .tw-text-lg,
background: transparent !important; .tw-font-semibold,
padding-left: 0 !important; /* Forces alignment control to the Button */ .timeline-button,
margin-left: 1.5rem !important; /* This is the 'tw-ml-6' equivalent */ 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 { .timeline-button {
position: absolute; 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; top: 0.25rem;
width: 0.75rem; width: 0.75rem;
height: 0.75rem; height: 0.75rem;
border-radius: 9999px; border-radius: 9999px;
background: #d1d5db; background: #d1d5db;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
/* This creates the 'gap' around the dot so it looks clean */
border: 2px solid white !important; border: 2px solid white !important;
z-index: 10; z-index: 10;
transition: all 0.2s ease; transition: all 0.2s ease;
cursor: pointer; 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 { ol.tw-border-l-2 {
border-left: 2px solid #d1d5db !important; border-left: 2px solid #d1d5db !important;
border-right: none !important; border-right: none !important;
border-top: none !important; border-top: none !important;
border-bottom: 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 */ /* Ensure the dot stays put when screen shrinks */

4
templates/components/timeline.html
View File

@@ -1,6 +1,6 @@
<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 <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> </ol>