homepage/styles/components/_site.scss

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

@mixin header-item {
	padding: 0 layout.$large-gap;
	line-height: 4rem;
}

// The site logo text. More specific styles for this element are also present
// underneath .site-header.
.site-logo {
	margin: 0 layout.$large-gap;
	text-transform: lowercase;
}

// The navigation is present twice on the site: once in the header and once in
// the footer. The former also has some specific styles (see .site-header
// below).
.site-navigation {
	&.horizontal {
		> ul {
			display: flex;
			margin-bottom: 0;

			> li {
				margin: 0;
			}
		}

		a {
			display: inline-block;
			@include header-item;
		}
	}

	> ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	a {
		display: block;
		padding: layout.$small-gap;
		font-weight: typography.$emphasized-weight;
		text-align: center;
		text-decoration: none;
		text-transform: lowercase;
	}
}

.site-mobile-navigation {
	cursor: pointer;

	> summary {
		display: block;
		@include header-item;
	}

	&[open] {
		flex-basis: 100%;

		> summary {
			// The positioning requires that the header component has relative
			// positioning.
			position: absolute;
			top: 0;
			right: 0;
			color: colors.$blue-800;
		}
	}

	// This is the next site navigation block (the one that's visible on desktop),
	// while...
	+ .site-navigation {
		display: none;
	}

	// ... this here is the one inside the mobile-only <details> block.
	> .site-navigation {
		&::before {
			content: '';
			display: block;
			margin: 0 auto;
			width: calc(100% - #{2 * layout.$normal-gap});
			height: 1px;
			background-color: colors.$gray-300;
		}
	}

	@media screen and (min-width: layout.$breakpoint) {
		display: none;

		+ .site-navigation {
			display: block;
		}
	}
}

.site-header {
	display: flex;
	// This container needs to wrap because when the navigation is open on small
	// screens, we want it to overflow into its own line.
	flex-wrap: wrap;
	align-items: center;
	// Relative positioning is required here so that we can fake the menu button's
	// location on mobile.
	position: relative;
	z-index: 10;
	background-color: colors.$main-background;
	@include colors.block-shadow;

	> .site-logo {
		flex-grow: 1;
		margin: 0;
		font-size: typography.$subheading-size;
		text-decoration: none;
		@include header-item;
	}
}

.site-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: layout.$normal-gap;

	.site-navigation a {
		text-align: right;
	}
}