homepage/styles/components/_markup.scss

@use '../lib/colors';
@use '../lib/layout';
@use '../lib/motion';
@use '../lib/typography';

body {
	margin: 0;
	color: colors.$main-text;
}

%title {
	@extend %content-gutter;
	margin-top: layout.$huge-gap;
	margin-bottom: layout.$large-gap;
	font-size: typography.$title-size;
	line-height: typography.$heading-line-height;
	text-align: center;
}

h1 {
	@extend %title;
}

%heading {
	@extend %content-gutter;
	margin-top: layout.$large-gap;
	margin-bottom: layout.$large-gap;
	font-size: typography.$heading-size;
	line-height: typography.$heading-line-height;

	&:after {
		content: '';
		display: block;
		width: 8rem;
		height: 0.3rem;
		margin-top: 0.2rem;
		border-radius: 0.5rem;
		background-color: colors.$blue-800;

		@include colors.coderdojo-theme {
			background-color: colors.$brown-800;
		}
	}
}

h2 {
	@extend %heading;
}

%subheading {
	@extend %content-gutter;
	font-size: typography.$subheading-size;
	line-height: typography.$heading-line-height;
}

h3 {
	@extend %subheading;
}

p,
pre {
	@extend %content-gutter;
}

ul,
ol,
dl {
	@extend %content-gutter;
}

li {
	margin: layout.$small-gap 0;
}

dt {
	margin: layout.$normal-gap 0;
	font-weight: typography.$emphasized-weight;
	color: colors.$blue-800;

	@include colors.coderdojo-theme {
		color: colors.$brown-800;
	}
}

dd {
	margin: layout.$normal-gap 0 layout.$normal-gap layout.$large-gap;
}

em {
	background-color: colors.$teal-300;
	padding: 0 layout.$small-gap 0 layout.$small-gap;

	@include colors.coderdojo-theme {
		background-color: colors.$orange-300;
	}
}

:any-link,
a[href] {
	color: colors.$main-text;
	transition: color motion.$subtle;

	&:hover {
		color: colors.$blue-800;

		@include colors.coderdojo-theme {
			color: colors.$brown-800;
		}
	}
}

blockquote {
	$color: colors.$teal-300;

	@include colors.coderdojo-theme {
		$color: colors.$orange-300;
	}

	@extend %narrow-content-gutter;
	padding-left: layout.$small-gap;
	padding-right: layout.$small-gap;
	$border: 0.5em solid $color;
	border-top: $border;
	border-bottom: $border;
}

.cta-link {
	display: block;
	margin: 0 auto;
	padding: 0 layout.$normal-gap;
	max-width: layout.$narrow-content-width;
	text-align: center;
	text-decoration: none;
	line-height: 3rem;
	border: 1px solid colors.$main-text;
	transition: font motion.$subtle, border-color motion.$subtle,
		color motion.$subtle;

	&:hover {
		border-color: colors.$blue-800;
		font-weight: typography.$emphasized-weight;
		font-size: 110%;

		@include colors.coderdojo-theme {
			border-color: colors.$brown-800;
		}
	}
}

ul.link-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: layout.$larger-gap layout.$normal-gap;
	justify-items: center;
	align-items: center;
	list-style: none;

	@media screen and (min-width: layout.$breakpoint) {
		&:not(.large) {
			grid-template-columns: repeat(3, 1fr);
		}

		&.large {
			gap: layout.$normal-gap;

			> li > a {
				display: flex;
				align-items: center;

				> img {
					max-width: 6rem;
					margin-right: layout.$normal-gap;
				}
			}
		}
	}

	&.large {
		@extend %narrow-content-gutter;
	}

	> li {
		> a {
			display: inline-block;
			padding: layout.$normal-gap;
			text-align: center;
			text-decoration: none;
			color: colors.$gray-600;
			transition: color motion.$subtle, box-shadow motion.$subtle;

			> img {
				display: block;
				margin: 0 auto layout.$small-gap auto;
				max-width: 100%;
				max-height: 6rem;
			}

			&:hover {
				@include colors.card-shadow;
			}
		}
	}
}

.post-list {
	@extend %content-gutter;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: layout.$normal-gap;
	margin-top: layout.$huge-gap;
	margin-bottom: layout.$huge-gap;
}

:any-link.post-card {
	display: inline-block;
	padding-left: layout.$normal-gap;
	padding-right: layout.$normal-gap;
	text-decoration: none;
	transition: background-color motion.$subtle, color motion.$subtle,
		box-shadow motion.$subtle;

	&:hover {
		@include colors.card-shadow;
		background-color: colors.$yellow-300;
		color: colors.$blue-800;

		@include colors.coderdojo-theme {
			background-color: colors.$green-300;
		}
	}

	> h2 {
		@extend %subheading;

		&::after {
			display: none;
		}

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

	> time {
		display: block;
		color: colors.$gray-600;
	}
}

.post-metadata {
	text-align: center;
	color: colors.$blue-800;

	@include colors.coderdojo-theme {
		color: colors.$brown-800;
	}
}