abdullahtarawneh.com/assets/scss/layouts/partials/site-header.scss

.site-header {
	text-transform: lowercase;
	padding-block: 1rem;
	.container {
		height: 4rem;
		display: grid;
		place-items: center start;
		grid-template-columns: 1fr auto;
	}

	.support {
		--icon-size: 2rem;
		svg {
			font-size: var(--icon-size, 2rem);
		}
		span {
			display: none;
		}
		
		padding: 1rem;
		display: grid;
		place-items: center;
		background: var(--color-accent);
		color: var(--color-text);
		text-decoration: none;
		&:hover {
			background-color: var(--color-button-hover-background);
			color: var(--color-button-hover-text);
		}
		border-radius: 0.75rem;

		@media (min-width: 400px) {
			span {display: unset;}
			grid-template-columns: var(--icon-size, 1rem) auto;
			width: unset;
			gap: 1rem;
			padding-inline: 1rem;
		}
	}

	

	.site-masthead {
		display: inline-flex;
		gap: 1rem;
		text-decoration: none;
		color: inherit;
		font-weight: bold;
		img {
			width: 3rem;
			height: 3rem;
		}
		p {
			margin: 0;
			padding: 1rem;
			border-radius: 0;
			transition-duration: 0.4s;
		}
		&:hover {
			p {
				background-color: var(--color-highlight-weak);
				color: var(--color-highlight);
				border-radius: 100rem;
			}
		}
	}
	.site-nav {
		--icon-size: 3rem;
		--icon-size-active: 3rem;
		--icon-size-hover: 3rem;
		height: var(--nav-height, 4rem);
		@include box-shadow-heavy;
		padding-block-end: 0.5rem;
		ul {
			list-style: none;
			padding-inline-start: 0;
			margin-block: 0;
			display: flex;
			justify-content: space-around;
			height: 100%;
		}
		li {
			display: contents;
			&.active {
				font-weight: bold;
				color: var(--color-highlight);
				svg {
					font-size: var(--icon-size-active, 2rem)
				}
			}
		}
		a {
			text-decoration: none;
			color: inherit;
			display: flex;
			flex-flow: column;
			align-items: center;
			justify-content: center;
			width: var(--nav-height);
			transition-duration: var(--transition-duration);
			svg {
				transition-duration: var(--transition-duration);
				padding: 0.0rem 0.5rem;
				font-size: var(--icon-size, 2rem);
				border-radius: 100rem;
			}
			&:hover {
				color: var(--color-highlight);
				svg {
					font-size: var(--icon-size-hover, 2.5rem);
					background-color: var(--color-highlight-weak);
				}
			}
		}
		background-color: var(--color-background);
		color: var(--color-text);
		position: fixed;
		z-index: 10;
		bottom: 0;
		left: 0;
		width: 100%;
		box-shadow: 0 -1px 3px rgba(0,0,0,0.12), 0 -1px 2px rgba(0,0,0,0.24);
	}
	@media (min-width: 768px) {
		--nav-height: 4rem;
		.site-nav {
			position: unset;
			grid-area: nav;
			display: inline-flex;
			background: unset;
			width: unset;
			place-self: end;
			box-shadow: unset;
			padding-block-end: unset;
			ul {gap: 1rem;}
		}
		.container {
			grid-template-columns: auto 1fr auto;
			grid-template-areas: "mast nav button";
			gap: 1rem;
		}

	}
}

body {
	--nav-height: 5rem;
	margin-bottom: var(--nav-height, 4rem);
}