homepage/styles/components/_site.scss

@use '../lib/colors';
@use '../lib/layout';
@use '../lib/motion';
@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;
	white-space: nowrap;

	> .angestoepselt-logo {
		height: 1em;
		vertical-align: middle;
		transition: stroke motion.$subtle;

		fill: none;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-width: 4px;
		stroke: currentColor;
		stroke-miterlimit: 10;

		.plug {
			fill: colors.$teal-500;
		}

		+ span {
			display: inline-block;
		}
	}

	&:hover > .angestoepselt-logo {
		stroke: currentColor;

		.plug {
			fill: colors.$yellow-500;
			transition: fill #{0.3 * motion.$prominent-duration} motion.$prominent-timing;
		}

		@keyframes angestoepselt-logo-hover {
			0% {
				transform: none;
			}
			30% {
				transform: translateX(0.6rem);
			}
			100% {
				transform: translateX(-0.4rem);
			}
		}

		animation: angestoepselt-logo-hover motion.$prominent forwards;

		+ span {
			transform-origin: 100% 50%;
			transition: transform #{0.7 * motion.$prominent-duration} motion.$prominent-timing #{0.3 * motion.$prominent-duration};
			transform: scale(1.1);
		}
	}
}

// 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 {
			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 {
	@media screen and (min-width: layout.$breakpoint) {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: layout.$normal-gap;

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