source ⟩ hypertext ⟩ public ⟩ latbs ⟩ the-line ⟩ theline.css

#timeline-list {
	display: flex;
	flex-direction: column;
	gap: 2ch;

	padding-block: 2ch;
	padding-inline-start: 4ch;

	background-image: linear-gradient(
		to right,
		transparent 0 1ch,
		var(--bright-acc) 1ch 1.2ch,
		var(--gentle-acc) 1.2ch 1.8ch,
		var(--bright-acc) 1.8ch 2ch,
		transparent 2ch
	);
}

.timeline-container {
	position: relative;
	display: block;
	margin: 0;
	padding-inline: 2ch;

	background-image: linear-gradient(
		to right,
		var(--gentle-acc),
		var(--gentlest-acc) 1ch,
		transparent
	);
}

.timeline-container::before {
	content: "";
	position: absolute;
	inset-block-start: calc(2.25ch - 3px);
	inset-inline-start: calc(-3.3ch - 3px);

	display: block;
	block-size: 1.5ch;
	inline-size: 1.5ch;

	background-color: var(--bright-acc);
	border: 3px solid var(--background);
	border-radius: 50%;
}

.timeline-container::after {
	content: "";
	position: absolute;
	inset-block-start: 1.5ch;
	inset-inline-start: -1.5ch;

	display: block;
	block-size: 3ch;
	inline-size: 1.5ch;

	background-color: var(--gentle-acc);
	clip-path: polygon(0 50%, 100% 100%, 100% 0);
}

.timeline-container p {
	margin-block: 1ch;

	& b:first-child {
		color: var(--text-acc);
		font-family: var(--sans-serif);
		font-size: 1.2em;
		font-style: italic;
		line-height: 0.5;
	}
}