openpower.foundation/themes/openpowerfoundation/assets/css/timeline.scss

$primary: #007aad;
$dark-primary: #303F9F;
$light-primary: #000000;
$text: #ffffff;
$primary-text: #212121;
$secondary-text: #757575;
$accent: #aaaaaa;

.timeline {
	position: relative;
	&::before {
		content: '';
		background: $light-primary;
		width: 5px;
		height: 95%;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
}
.timeline-item {
	width: 100%;
	margin-bottom: 70px;
	&:nth-child(even) {
		.timeline-content {
			float: right;
			padding: 60px 30px 10px 30px;
			.date {
				right: auto;
				left: 0;
			}
			&::after {
				content: '';
				position: absolute;
				border-style: solid;
				width: 0;
				height: 0;
				top: 30px;
				left: -15px;
				border-width: 10px 15px 10px 0;
				border-color: transparent #f5f5f5 transparent transparent;
			}
		}
	}
	&::after {
		content: '';
		display: block;
	clear: both;
	}
}

.timeline-content {
	position: relative;
	width: 45%;
	padding: 60px 30px 10px 30px;
	border-radius: 4px;
	background: #f5f5f5;
	box-shadow: 0 20px 25px -15px rgba(0, 0, 0, .3);
	&::after {
		content: '';
		position: absolute;
		border-style: solid;
		width: 0;
		height: 0;
		top: 20px;
		right: -15px;
		border-width: 10px 0 10px 15px;
		border-color: transparent transparent transparent #f5f5f5;
	}
}

.timeline-content h2 {
	text-decoration: underline;
	color: #007aad;
}

.timeline-img {
	width: 30px;
	height: 30px;
	background: $primary;
	border-radius: 50%;
	position: absolute;
	left: 50%;
	margin-top: 25px;
	margin-left: -15px;
}

.timeline-card {
	padding: 0!important;
	p {
		padding: 0 20px;
	}
	a {
	margin-left: 20px;
	}
}

.timeline-img-header {
	height: 200px;
	position: relative;
	margin-bottom: 20px;
	h2 {
		color: $text;
		position: absolute;
		bottom: 5px;
		left: 20px;
	}
}

blockquote {
	margin-top: 30px;
	color: $secondary-text;
	border-left-color: $primary;
	padding: 0 20px;
}

.date {
	background: $accent;
	display: inline-block;
	color: $text;
	padding: 10px;
	position: absolute;
	top: 0;
	right: 0;
}

@media screen and (max-width: 768px) {
	.timeline {
		&::before {
			left: 50px;
	}
	.timeline-img {
		left: 50px;
	}
	.timeline-content {
		max-width: 100%;
		width: auto;
		margin-left: 70px;
	}
	.timeline-item {
		&:nth-child(even) {
				.timeline-content {
				float: none;
			}
		}
		&:nth-child(odd) {
			.timeline-content {
				&::after {
					content: '';
					position: absolute;
					border-style: solid;
					width: 0;
					height: 0;
					top: 30px;
					left: -15px;
					border-width: 10px 15px 10px 0;
					border-color: transparent #f5f5f5 transparent transparent;
				}
			}
		}
	}
	}
}

.framed {
	padding: 20px;
	border-radius: 10px;
	border: 1px solid #dcdcdc;
	border: 1px solid var(--border-color);
	max-width: 800px;
}