<nav class="tmln tmln--box tmln--hr">
	<h2 class="tmln__header">Latest News</h2>
		<ul class="tmln__list">
			<li class="tmln__item tmln__item--active">
				<span data-title>32 mins ago</span>
				<h3 class="tmln__item-headline">Someone, somewhere, did something stupid</h3>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, ab? Sequi dolorem aspernatur ad earum! Eius nulla tempora pariatur temporibus.</p>
				<a href="#none">Read more</a>
			</li>
			<li class="tmln__item tmln__item--bg-lght">
				<span data-title>36 mins ago</span>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, ab? </p>
				<a href="#none">Read more</a>
			</li>
			<li class="tmln__item tmln__item--bg-dark">
				<span data-title>58 mins ago</span>
				<h3 class="tmln__item-headline">Someone, somewhere, did something great</h3>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, ab? Sequi dolorem aspernatur ad earum! Eius nulla tempora pariatur temporibus.</p>
				<a href="#none">Read more</a>
			</li>
			<li class="tmln__item tmln__item--bg-lght">
				<span data-title>1 day ago</span>
				<h3 class="tmln__item-headline">The world needs more LEGO</h3>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, ab? Sequi dolorem aspernatur ad earum!</p>
				<a href="#none">Read more</a>
			</li>
		</ul>
</nav>

<br />

<nav class="tmln tmln--box">
	<h2 class="tmln__header">Latest News</h2>
		<ul class="tmln__list">
			<li class="tmln__item tmln__item--active">
				<span data-title>32 mins ago</span>
				<h3 class="tmln__item-headline">Someone, somewhere, did something stupid</h3>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, ab? Sequi dolorem aspernatur ad earum! Eius nulla tempora pariatur temporibus.</p>
				<a href="#none" class="block-link">Someone, somewhere, did something stupid</a>
			</li>
			<li class="tmln__item tmln__item--bg-lght">
				<span data-title>36 mins ago</span>
				<p>This section does not have a link, and will therefore not receive focus.</p>
			</li>
			<li class="tmln__item tmln__item--bg-dark">
				<span data-title>58 mins ago</span>
				<h3 class="tmln__item-headline">Someone, somewhere, did something great</h3>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, ab? Sequi dolorem aspernatur ad earum! Eius nulla tempora pariatur temporibus.</p>
				<a href="#none" class="block-link">Someone, somewhere, did something great</a>
			</li>
			<li class="tmln__item tmln__item--bg-lght">
				<span data-title>1 day ago</span>
				<h3 class="tmln__item-headline">The world needs more LEGO</h3>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, ab? Sequi dolorem aspernatur ad earum!</p>
				<a href="#none" class="block-link">The world needs more LEGO</a>
			</li>
		</ul>
</nav>

<br />

<nav class="tmln tmln--hr">
	<h2 class="tmln__header">Timeline</h2>
	<div class="tmln__list">
		<a class="tmln__item tmln__item--active" href="#2021"><span data-title>2021</span></a>
		<a class="tmln__item" href="#2020"><span data-title>2020</span></a>
		<a class="tmln__item" href="#2019"><span data-title>2019</span></a>
		<a class="tmln__item" href="#2018"><span data-title>2018</span></a>
		<a class="tmln__item" href="#2017"><span data-title>2017</span></a>
		<a class="tmln__item" href="#2016"><span data-title>2016</span></a>
		<a class="tmln__item" href="#2015"><span data-title>2015</span></a>
		<a class="tmln__item" href="#2014"><span data-title>2014</span></a>
		<a class="tmln__item" href="#2013"><span data-title>2013</span></a>
		<a class="tmln__item" href="#2012"><span data-title>2012</span></a>
		<a class="tmln__item" href="#2011"><span data-title>2011</span></a>
		<a class="tmln__item" href="#2010"><span data-title>2010</span></a>
		<a class="tmln__item" href="#2009"><span data-title>2009</span></a>
		<a class="tmln__item" href="#2008"><span data-title>2008</span></a>
		<a class="tmln__item" href="#2007"><span data-title>2007</span></a>
		<a class="tmln__item" href="#2006"><span data-title>2006</span></a>
		<a class="tmln__item" href="#2005"><span data-title>2005</span></a>
		<a class="tmln__item" href="#2004"><span data-title>2004</span></a>
		<a class="tmln__item" href="#2003"><span data-title>2003</span></a>
		<a class="tmln__item" href="#1999"><span data-title>1999</span></a>
		<a class="tmln__item" href="#1996"><span data-title>1996</span></a>
		<a class="tmln__item" href="#1994"><span data-title>1994</span></a>
		<a class="tmln__item" href="#1991"><span data-title>1991</span></a>
		<a class="tmln__item" href="#1987"><span data-title>1987</span></a>
		<a class="tmln__item" href="#1986"><span data-title>1986</span></a>
		<a class="tmln__item" href="#1985"><span data-title>1985</span></a>
		<a class="tmln__item" href="#1984"><span data-title>1984</span></a>
	</div>
</nav>

<br />

<nav class="tmln tmln--sl">
	<h2 class="tmln__header">Timeline</h2>
	<div class="tmln__list">
		<a class="tmln__item tmln__item--active" href="#2021"><span data-title>2021</span></a>
		<a class="tmln__item" href="#2020"><span data-title>2020</span></a>
		<a class="tmln__item" href="#2019"><span data-title>2019</span></a>
		<a class="tmln__item" href="#2018"><span data-title>2018</span></a>
		<a class="tmln__item" href="#2017"><span data-title>2017</span></a>
		<a class="tmln__item" href="#2016"><span data-title>2016</span></a>
		<a class="tmln__item" href="#2015"><span data-title>2015</span></a>
		<a class="tmln__item" href="#2014"><span data-title>2014</span></a>
		<a class="tmln__item" href="#2013"><span data-title>2013</span></a>
		<a class="tmln__item" href="#2012"><span data-title>2012</span></a>
		<a class="tmln__item" href="#2011"><span data-title>2011</span></a>
	</div>
</nav>
/**
 * timeline.css
 * @version 1.0.0
 * @summary 10-08-2021
 * @author Mads Stoumann
 * @description Stylesheet for timeline.
*/

.tmln {
	--bdc: hsl(200, 40%, 60%);
	--bdc-a: hsl(200, 40%, 40%);
	--bdc-h: hsl(200, 30%, 90%);
	--bgc: hsl(200, 40%, 80%);
	--bdrs: 0.25rem;
	--bdw: 2px;
	--bullet-bdrs: 50%;
	--bullet-sz: 1.2em;
	--bullet-sz-a: 6px;
	--c: hsl(200, 40%, 1%);
	--box-item-bdrs: 0.25rem;
	--box-item-bgc: rgba(255, 255, 255, .15);
	--box-item-dark-bgc: hsl(200, 40%, 40%);
	--box-item-dark-c: hsl(200, 40%, 95%);
	--box-item-lght-bgc: hsl(200, 30%, 90%);
	--gap: 1rem;
	--scroll-bgc: hsl(200, 40%, 85%);
	--scroll-tmb-bgc: hsl(200, 40%, 70%);
	--scroll-w: 10px;
	--trsdu: .3s;
	--trstf: ease-out;

	/* Modifier-specific properties */
	--sl-mbe: 2em;
	--bi-miw: 85%;
	--bi-miw-tablet: 30%;

	background-color: var(--bgc, transparent);
	border-radius: var(--bdrs, 0);
	color: var(--c, currentColor);
	font-family: var(--ff, ui-sans-serif, system-ui, sans-serif);
	padding-block: var(--gap) 0;
	padding-bottom: var(--gap); /* Safari */
	padding-top: var(--gap); /* Safari */
	width: var(--w, 100%);
	-webkit-tap-highlight-color: transparent;
}

.tmln:not(.tmln--hr) {
	padding-inline-start: var(--gap);
}

.tmln__header {
	margin-block-start: 0;
}

.tmln__item {
	color: inherit;
	display: block;
	margin-block-end: var(--mbe, var(--gap));
	padding-inline-start: calc(var(--gap) + var(--bullet-sz));
	position: relative;
	text-decoration: none;
}

/* Circle */
.tmln__item::after {
	border: var(--bdw) solid var(--bdc);
	border-radius: var(--bullet-bdrs);
	box-sizing: border-box;
	content: "";
	block-size: var(--bullet-sz);
	inline-size: var(--bullet-sz);
	inset-block-start: 0;
	inset-inline-start: 0;
	position: absolute;
	transition: all var(--trsdu) var(--trstf);
}

/* Line */
.tmln__item::before {
	background-color: var(--bdc);
	content: "";
	block-size: calc(100% + var(--mbe, var(--gap)) - var(--bullet-sz));
	inline-size: var(--bdw);
	inset-block-start: var(--bullet-sz);
	inset-inline-start: calc((var(--bullet-sz) - var(--bdw)) / 2);
	position: absolute;
}

/* Hide last line */
.tmln:not(.tmln--hr) .tmln__item:last-child::before {
	display: none;
}

.tmln__item-headline {
	margin-block: 0;
}

.tmln__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding-block: 0 var(--gap);
	padding-inline: 0;
}

/* 
====================
Modifiers and States
====================
*/

/* Active Circle */
.tmln__item--active::after {
	--bdc: var(--bdc-a);
	box-shadow: 0 0 0 calc(var(--bullet-sz-a) - var(--bdw)) var(--bgc, #FFF), 0 0 0 var(--bullet-sz-a) var(--bdc-a);
	background-color: var(--bdc-a);
}

/* :focus, :focus-within, :focus-visible */
.tmln__item--active:focus-visible::after,
.tmln__item--active:focus-within::after {
	box-shadow: 0 0 0 calc(var(--bullet-sz-a) - var(--bdw)) var(--bdc-h, #FFF), 0 0 0 var(--bullet-sz-a) var(--bdc);
}

.tmln__item--active [data-title],
.tmln__item:focus-visible [data-title] {
	text-shadow: 0.75px 0px 0px currentColor;
}

.tmln__item:not(.tmln__item--active):focus-visible::after,
.tmln__item:not(.tmln__item--active):focus-within::after {
	background-color: var(--bdc-h);
	box-shadow: 0 0 0 calc(var(--bullet-sz-a) - var(--bdw)) var(--bgc, #FFF), 0 0 0 var(--bullet-sz-a) var(--bdc);
}

.tmln--box .tmln__item:focus-within {
	box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.tmln__item:focus-visible {
	outline: none; 
}

.tmln__item:focus-visible [data-title],
.tmln__item:focus-within a {
	outline: 1px dotted currentColor;
	outline-offset: 6px;
}

/* Horizontal */
.tmln--hr .tmln__header {
	margin-inline-start: var(--gap);
}

.tmln--hr .tmln__list {
	flex-direction: row;
	flex-wrap: nowrap;
	overflow-x: auto;
	padding-block-start: var(--bullet-sz-a); /* Add room for box-shadow transition in horizontal mode */
	padding-inline-start: var(--gap);
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
}

.tmln--hr .tmln__item {
	align-self: flex-start;
	margin-block-end: 0;
	min-width: var(--miw, 6rem);
	padding-block-start: calc(var(--bullet-sz) + var(--gap));
	padding-inline-end: var(--gap);
	padding-inline-start: 0;
	scroll-snap-align: start;
	scroll-margin-inline-start: var(--gap);
	scroll-margin-left: var(--gap); /* Safari */
}

.tmln--hr .tmln__item::before {
	block-size: var(--bdw);
	inline-size: calc(100% - var(--bullet-sz));
	inset-block-start: calc((var(--bullet-sz) - var(--bdw)) / 2);
	inset-inline-start: calc(0% + var(--bullet-sz));
}

/* Item Box */
.tmln--box .tmln__item {
	background-color: var(--box-item-bgc);
	border-radius: var(--box-item-bdrs);
	margin-block-end: 0;
	margin-inline-start: calc(var(--bullet-sz) + var(--gap));
	padding: var(--gap);
	transition: box-shadow var(--trsdu) var(--trstf);
}

.tmln--box .tmln__item [data-title] {
	display: block;
	font-size: small;
	text-transform: uppercase;
}

.tmln--box:not(.tmln--hr) .tmln__item::after {
	inset-inline-start: calc(0px - var(--bullet-sz) - var(--gap));
}

.tmln--box:not(.tmln--hr) .tmln__item::before {
	inset-inline-start: calc(0px - var(--gap) - ((var(--bullet-sz) + var(--bdw)) / 2));
}

.tmln--box .tmln__item--bg-dark {
	background-color: var(--box-item-dark-bgc);
	color: var(--box-item-dark-c);
}

.tmln--box:not(.tmln--hr) .tmln__item--bg-dark a {
	outline-color: var(--box-item-dark-bgc);
}

.tmln--box .tmln__item--bg-lght {
	background-color: var(--box-item-lght-bgc);
}

.tmln--box .tmln__list {
	gap: var(--gap);
	padding-inline-end: var(--gap);
}

/* Item Box AND Horizontal */
.tmln--box.tmln--hr .tmln__item {
	--miw: var(--bi-miw);
	margin-block-end: 0;
	margin-block-start: calc(var(--bullet-sz) + var(--gap));
	margin-inline-start: 0;
}

.tmln--box.tmln--hr .tmln__item::after {
	inset-block-start: calc(0px - var(--bullet-sz) - var(--gap));
}
.tmln--box.tmln--hr .tmln__item::before {
	inset-block-start: calc(0px - var(--gap) - ((var(--bullet-sz) + var(--bdw)) / 2));
	inline-size: calc(100% - var(--bullet-sz) + var(--gap));
}

/* Single Line, center text to bullet */
.tmln--sl .tmln__item {
	--mbe: var(--sl-mbe, var(--gap));
	line-height: var(--bullet-sz);
}

/* Media Queries */

/* :hover */
@media (hover: hover) {
	.tmln__item--active:hover::after {
		box-shadow: 0 0 0 calc(var(--bullet-sz-a) - var(--bdw)) var(--bdc-h, #FFF), 0 0 0 var(--bullet-sz-a) var(--bdc);
	}
	.tmln__item:hover [data-title] {
		text-shadow: 0.75px 0px 0px currentColor;
	}
	.tmln__item:not(.tmln__item--active):hover::after {
		background-color: var(--bdc-h);
		box-shadow: 0 0 0 calc(var(--bullet-sz-a) - var(--bdw)) var(--bgc, #FFF), 0 0 0 var(--bullet-sz-a) var(--bdc);
	}
	.tmln--box .tmln__item:hover {
		box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
	}
}

@media (min-width: 768px) {
	.tmln--box.tmln--hr .tmln__item {
		--miw: var(--bi-miw-tablet);
	}
}

/* Show scrollbars on devices without touch  */
@media (pointer: fine) {
	.tmln--hr {
		/* Add space between scrollbar and bottom of container */
		padding-block-end: var(--gap);
	}
	.tmln--hr .tmln__list {
		scrollbar-width: var(--scroll-w);
	}
	.tmln--hr .tmln__list {
		scrollbar-color: var(--scroll-tmb-bgc) var(--scroll-bgc);
		scrollbar-width: thin;
	}
	.tmln--hr .tmln__list::-webkit-scrollbar {
		background: var(--scroll-bgc);
		height: var(--scroll-w);
		width: var(--scroll-w);
	}
	.tmln--hr .tmln__list::-webkit-scrollbar-button {
    background: var(--bgc);
	}
	.tmln--hr .tmln__list::-webkit-scrollbar-thumb {
		/* Hide scrollbar-button-area, so scrollbar appears smaller than container */
		background-color: var(--scroll-tmb-bgc);
	}
}

/* For demo */
		body {
			font: 100% / 1.5 ui-sans-serif, system-ui, sans-serif;
			margin: 0;
			padding: max(env(safe-area-inset-top), 0.75rem)
				max(env(safe-area-inset-right), 0.75rem)
				max(env(safe-area-inset-bottom), 0.75rem)
				max(env(safe-area-inset-left), 0.75rem);
		}
		body * {
			box-sizing: border-box;
		}
		html {
			scroll-behavior: smooth;
		}
		/* Helpers */
		.tmln__item a {
			color: currentColor;
		}

		.block-link {
			inset: 0;
			overflow: hidden;
			position: absolute;
			text-indent: 200%;
			white-space: nowrap;
		}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.