homepage/styles/components/_timeline.scss

@use 'sass:math';
@use '../lib/colors';
@use '../lib/layout';
@use '../lib/motion';

.timeline {
	$stampSize: 4rem;
	$lineWeight: 0.2rem;
	$itemSpacing: layout.$normal-gap;

	@extend %content-gutter;
	display: flex;
	flex-direction: column;
	align-items: center;

	@media screen and (min-width: layout.$breakpoint) {
		flex-direction: row;
		align-items: flex-start;

		> .content {
			position: relative;
			flex-grow: 1;
			margin-left: layout.$normal-gap;
			margin-bottom: $itemSpacing;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				right: calc(100% + #{layout.$normal-gap + math.div($stampSize, 2)});
				bottom: #{-1 * $itemSpacing};
				width: $lineWeight;
				background-color: colors.$gray-300;
				transform: translateX(50%);
				transition: background-color motion.$subtle;
			}

			> h3:first-child {
				position: relative;
				margin-top: 0;
				margin-left: layout.$large-gap;
				line-height: $stampSize;

				&::after {
					content: '';
					position: absolute;
					right: calc(100% + #{layout.$small-gap});
					top: 50%;
					width: 4rem;
					height: $lineWeight;
					background-color: colors.$gray-300;
					transform: translateY(-100%);
					transition: background-color motion.$subtle;
				}
			}
		}
	}

	> .stamp {
		display: inline-block;
		flex-shrink: 0;
		width: $stampSize;
		height: $stampSize;
		z-index: 10; // To lift it above the line.
		border: $lineWeight solid colors.$gray-300;
		border-radius: 100%;
		line-height: #{$stampSize - 2 * $lineWeight};
		text-align: center;
		background-color: colors.$gray-50;
		transition: border-color motion.$subtle, background-color motion.$subtle,
			color motion.$subtle;

		&.small {
			background-color: colors.$gray-300;
		}
	}

	> .content {
		> p {
			margin-left: 0;
			margin-right: 0;
		}
	}

	&:hover {
		@mixin stamp-hover($color) {
			> .stamp {
				border-color: $color;
				background-color: $color;
				color: colors.$inverse-text;
			}

			> .content {
				&::before,
				> h3:first-child::after {
					background-color: $color;
				}
			}
		}

		@include stamp-hover(colors.$blue-800);
		@include colors.coderdojo-theme {
			@include stamp-hover(colors.$orange-500);
		}
	}

	&:last-child {
		margin-bottom: 0;

		> .content {
			padding-bottom: layout.$normal-gap;
		}
	}

	+ .timeline {
		margin-top: #{-1 * layout.$normal-gap};
	}
}