78 lines
1.8 KiB
CSS
78 lines
1.8 KiB
CSS
/* 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. 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;
|
|
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;
|
|
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 */
|
|
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 */
|
|
.tw-relative {
|
|
position: relative !important;
|
|
}
|
|
/* hover only when expanded */
|
|
.timeline-button:hover:not(.collapsed) {
|
|
background: #6b7280;
|
|
}
|
|
|
|
/* collapsed state */
|
|
.timeline-button.collapsed {
|
|
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;
|
|
}
|