homepage/styles/components/_markup.scss

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

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

%title {
	@extend %content-gutter;
	margin-top: var(--gap-2xl);
	margin-bottom: var(--gap-l);
	font-size: var(--text-2xl);
	line-height: var(--scale-s);
	text-align: center;
	overflow-wrap: anywhere;
}

h1 {
	@extend %title;
}

%heading {
	@extend %content-gutter;
	margin-top: var(--gap-l);
	margin-bottom: var(--gap-l);
	font-size: var(--text-xl);
	line-height: var(--scale-s);
	overflow-wrap: anywhere;

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

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

h2 {
	@extend %heading;
}

%subheading {
	@extend %content-gutter;
	font-size: var(--text-l);
	line-height: var(--scale-s);
	overflow-wrap: anywhere;
}

h3 {
	@extend %subheading;
}

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

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

li {
	margin: var(--gap-s) 0;
}

dt {
	margin: var(--gap-m) 0;
	font-weight: var(--weight-emph);
	color: colors.$blue-800;

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

dd {
	margin: var(--gap-m) 0 var(--gap-m) var(--gap-l);
}

em {
	background-color: colors.$teal-300;
	padding: 0 0.5ch;

	@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: var(--gap-s);
	padding-right: var(--gap-s);
	$border: 0.5em solid $color;
	border-top: $border;
	border-bottom: $border;

	> p:only-child > a:only-child > img:only-child {
		display: block;
		max-width: 100%;
		max-height: max(20em, 80vh);
		margin: 0 auto;
	}
}

.cta-link {
	display: block;
	margin: 0 auto;
	padding: 0 var(--gap-m);
	max-width: layout.$narrow-content-width;
	text-align: center;
	text-decoration: none;
	line-height: var(--scale-l);
	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: var(--weight-emph);

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

ul.link-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap-xl) var(--gap-m);
	justify-items: center;
	align-items: center;
	padding: 0;
	list-style: none;

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

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

			> img {
				display: block;
				margin: 0 auto var(--gap-s) auto;
				max-width: 20ch;
				max-height: 5em;
			}

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

.post-list {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	@extend %content-gutter;
	margin-top: var(--gap-2xl);
	margin-bottom: var(--gap-2xl);

	@media screen and (min-width: layout.$breakpoint) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--gap-m);
		justify-content: stretch;
	}
}

:any-link.post-card {
	display: block;
	padding-top: var(--gap-m);
	padding-bottom: var(--gap-m);
	text-decoration: none;
	transition:
		background-color motion.$subtle,
		color motion.$subtle,
		box-shadow motion.$subtle;

	@media screen and (min-width: layout.$breakpoint) {
		padding-left: var(--gap-m);
		padding-right: var(--gap-m);
	}

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

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

	&.external {
		color: colors.$brown-800;

		> time {
			color: colors.$brown-500;
		}

		&:hover {
			background-color: colors.$teal-300;
		}
	}

	> :first-child {
		margin-top: 0;
	}

	> :last-child {
		margin-top: 0;
	}

	> h2,
	> p {
		margin-left: 0;
		margin-right: 0;
	}

	> h2 {
		@extend %subheading;

		&::after {
			display: none;
		}

		> img {
			display: inline-block;
			max-width: 4em;
			max-height: 1em;
		}

		+ time {
			margin-top: calc(-1 * var(--gap-m));
		}
	}

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

		+ p {
			margin-top: var(--gap-s);
		}
	}
}

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

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

	> img {
		display: block;
		margin: 0 auto var(--gap-s) auto;
		max-height: 6rem;
	}
}