89 lines
2.0 KiB
CSS
89 lines
2.0 KiB
CSS
/* 1. CONTAINER & LINE FIX */
|
|
ol.tw-border-l-2 {
|
|
/* Pull the whole timeline left */
|
|
margin-left: 0.75rem !important;
|
|
border-left: 2px solid #e2e8f0 !important;
|
|
padding-left: 0 !important;
|
|
}
|
|
|
|
/* 2. ITEM SPACING */
|
|
li.tw-relative {
|
|
list-style: none !important;
|
|
/* Reduced margin-left to pull text closer to the line */
|
|
margin-left: 1.5rem !important;
|
|
margin-bottom: 3rem !important;
|
|
position: relative !important;
|
|
}
|
|
|
|
/* 3. THE DOT (The "Timeline Button") */
|
|
.timeline-button {
|
|
position: absolute;
|
|
/* Centering the dot exactly on the 2px line */
|
|
left: -2rem !important;
|
|
top: 0.1rem;
|
|
|
|
width: 14px !important;
|
|
height: 14px !important;
|
|
background: #cbd5e1;
|
|
border: 3px solid white !important;
|
|
border-radius: 50%;
|
|
z-index: 10;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.timeline-button:hover {
|
|
background: #6b7280;
|
|
}
|
|
|
|
/* hover only when expanded */
|
|
.timeline-button:hover:not(.collapsed) {
|
|
background: #6b7280;
|
|
}
|
|
|
|
/* collapsed state */
|
|
.timeline-button.collapsed {
|
|
background: transparent !important;
|
|
color: #6b7280;
|
|
}
|
|
|
|
/* 4. TYPOGRAPHY - BOLD & BLOG-SIZED */
|
|
/* Heading - Match "Project Timeline" style but smaller */
|
|
.tw-text-lg,
|
|
li h3 {
|
|
font-size: 1.5rem !important;
|
|
font-weight: 800 !important; /* Extra bold like your standalone */
|
|
color: #111827 !important;
|
|
margin: 0 0 8px 0 !important;
|
|
line-height: 1.2 !important;
|
|
display: block !important;
|
|
}
|
|
|
|
/* Body Text - Matching normal blog paragraph size */
|
|
.tw-text-base,
|
|
li p {
|
|
font-size: 1.25rem !important; /* Increased to match main blog text */
|
|
line-height: 1.6 !important;
|
|
color: #4b5563 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
/* Date/Time */
|
|
.tw-text-sm,
|
|
time {
|
|
font-size: 1rem !important;
|
|
font-weight: 500 !important;
|
|
color: #9ca3af !important;
|
|
margin-bottom: 4px !important;
|
|
display: block !important;
|
|
}
|
|
|
|
/* 5. BOOTSTRAP RESET */
|
|
/* Prevents Bootstrap from adding dots or padding to our timeline list */
|
|
li.tw-list-none::before {
|
|
content: none !important;
|
|
}
|