bigger? new align css
This commit is contained in:
m
@@ -1,99 +1,77 @@
|
||||
/* 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. The Precision Dot */
|
||||
.timeline-button {
|
||||
position: absolute;
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* 3. Force the Line to be visible and solid */
|
||||
/* 1. CONTAINER & LINE FIX */
|
||||
ol.tw-border-l-2 {
|
||||
border-left: 2px solid #d1d5db !important;
|
||||
border-right: none !important;
|
||||
border-top: none !important;
|
||||
border-bottom: none !important;
|
||||
/* Pull the whole timeline left */
|
||||
margin-left: 0.75rem !important;
|
||||
border-left: 2px solid #e2e8f0 !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure the dot stays put when screen shrinks */
|
||||
.tw-relative {
|
||||
/* 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;
|
||||
}
|
||||
/* hover only when expanded */
|
||||
.timeline-button:hover:not(.collapsed) {
|
||||
background: #6b7280;
|
||||
}
|
||||
|
||||
/* collapsed state */
|
||||
.timeline-button.collapsed {
|
||||
background: transparent !important;
|
||||
color: #6b7280;
|
||||
}
|
||||
/* 1. Main Text Size - Matching standard blog paragraphs */
|
||||
#Tailscaleipdoesntwork p,
|
||||
.tw-text-base {
|
||||
font-size: 1.5rem !important; /* ~18px */
|
||||
line-height: 1.7 !important;
|
||||
color: #333 !important;
|
||||
margin-top: 8px !important;
|
||||
}
|
||||
|
||||
/* 2. Heading Size */
|
||||
#Tailscaleipdoesntwork h3,
|
||||
.tw-text-lg {
|
||||
font-size: 1.5rem !important; /* ~24px */
|
||||
font-weight: 700 !important;
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
|
||||
/* 3. Date Size */
|
||||
time,
|
||||
.tw-text-sm {
|
||||
font-size: 0.95rem !important;
|
||||
font-weight: 600 !important;
|
||||
color: #6b7280 !important;
|
||||
}
|
||||
|
||||
/* 4. The Alignment "Math" */
|
||||
/* If <li> has tw-ml-6 (1.5rem), the dot needs to move left exactly that much */
|
||||
/* 3. THE DOT (The "Timeline Button") */
|
||||
.timeline-button {
|
||||
width: 12px !important;
|
||||
height: 12px !important;
|
||||
position: absolute;
|
||||
left: -1.92rem !important; /* Adjust this slightly if the dot isn't centered on the line */
|
||||
/* Centering the dot exactly on the 2px line */
|
||||
left: -1.95rem !important;
|
||||
top: 0.5rem;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
/* 5. The Vertical Line */
|
||||
ol.tw-border-l-2 {
|
||||
border-left: 2px solid #e2e8f0 !important;
|
||||
.timeline-button:hover {
|
||||
background: #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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user