homepage/styles/components/_timeline.scss

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

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

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

	> .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;
		}

		> h3:first-child {
			text-align: center;

			> time {
				display: block;
				padding-inline: layout.$small-gap;
				font-size: typography.$base-size;
				font-weight: typography.$normal-weight;
			}
		}
	}

	@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;
				text-align: left;

				&::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;
				}

				> time {
					display: inline-block;
					float: right;
					transition: background-color motion.$subtle;
				}
			}
		}
	}

	&: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);
		> .content > h3:first-child > time {
			background-color: colors.$yellow-300;
		}

		@include colors.coderdojo-theme {
			@include stamp-hover(colors.$orange-500);
			> .content > h3:first-child > time {
				background-color: colors.$orange-100;
			}
		}
	}

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

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

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

.gallery-preview {
	position: relative;
	display: grid;
	grid-template-columns: var(--x1, 50%) minmax(0, 1fr);
	grid-template-rows: var(--y1, 50%) minmax(0, 1fr);
	gap: layout.$tiny-gap;
	padding: layout.$tiny-gap;
	height: 27rem;
	background-color: colors.$blue-800;
	@include colors.card-shadow;

	&,
	&:any-link {
		transition: grid-template motion.$subtle;
	}

	> img {
		object-fit: cover;
		width: 100%;
		height: 100%;
	}

	&:not(.flip) > img:nth-of-type(1) {
		grid-row: 1 / span 2;
	}
	&.flip > img:nth-of-type(3) {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	&::after {
		content: '\279C';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: typography.$heading-size;
		background-color: #00000077;
		color: colors.$gray-50;
		opacity: 0;
		transition: opacity motion.$subtle;
	}

	&:hover {
		grid-template-columns: var(--x2, var(--x1, 50%)) minmax(0, 1fr);
		grid-template-rows: var(--y2, var(--x2, 50%)) minmax(0, 1fr);

		&::after {
			opacity: 1;
		}
	}

	&.horizontal {
		grid-template-columns: var(--a1, 33.3%) var(--b1, 33.3%) minmax(0, 1fr);
		grid-template-rows: auto;

		> img:nth-of-type(1),
		> div:nth-of-type(1) > img,
		> img:nth-of-type(3),
		> div:nth-of-type(3) > img {
			grid-column: unset;
			grid-row: unset;
		}

		&:hover {
			grid-template-columns: var(--a2, 33.3%) var(--b2, 33.3%) minmax(0, 1fr);
		}

		&.two {
			grid-template-columns: var(--a1, 50%) minmax(0, 1fr);

			&:hover {
				grid-template-columns: var(--a2, 50%) minmax(0, 1fr);
			}
		}
	}
}