com.xaymar.www/_sass/_header.scss

@keyframes menu_show {
	from {
		display: none;
		opacity: 0.0;
	}
	0% {
		display: block;
	}
	to {
		display: block;
		opacity: 1.0;
	}
}
@keyframes menu_hide {
	from {
		display: none;
		opacity: 0.0;
	}
	0% {
		display: block;
	}
	to {
		display: block;
		opacity: 1.0;
	}
}

// --------------------------------------------------------------------------------
// Header
// --------------------------------------------------------------------------------
#header {
	padding: 5px;
	background: $theme-header-background;
	color: $theme-header-color;
}

#header > .content {
	display: grid;
	grid-template-columns: min-content auto;
	max-width: $theme-width;
	margin-left: auto;
	margin-right: auto;
}

// --------------------------------------------------------------------------------
// Header > Logo
// --------------------------------------------------------------------------------
#header > .content .logo {
	display: grid;
	grid-template-columns: auto 1fr;
	margin: 0 20px 0 0;
	padding: 0;
}

#header > .content .logo > .icon {
	justify-self: stretch;
	align-self: stretch;
	height: 90px;
	margin: 0 10px 0 0;
	padding: 0;
}

#header > .content .logo > figcaption {
	justify-self: left;
	align-self: center;
	margin: 0;
	padding: 0;
	font-family: "Oswald";
	font-size: 2.0rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .20ch;
}

// --------------------------------------------------------------------------------
// Header > Navigation
// --------------------------------------------------------------------------------
#navigation-toggle {
	display: none;
}

#navigation {
	font-size: 1.0rem;
	color: $theme-menu-color;
}

#navigation .menu {
	list-style: none inside;
}

#navigation .menu > .entry > .item {
	color: $theme-menu-color;
}
#navigation .menu > .entry > .item:hover,
#navigation .menu > .entry > .item:active,
#navigation .menu > .entry > .item:focus {
	color: $theme-menu-color-active;
}

// Responsive Layout
@media (pointer: coarse), (max-width: 767px) {
	#navigation-toggle {
		justify-self: stretch;
		align-self: center;
		display: block;
		margin: 0;
		padding: 0rem 2.5rem;
		text-align: right;
		font-size: 3.0rem;
		color: $theme-menu-color;
	}

	#navigation {
		grid-column-start: span 2;
	}

	// Show/Hide menu
	#navigation {
		display: none;
	}
	#navigation.open {
		display: block;
	}

	#navigation .menu {
		margin: 0;
		padding: 0;
		background: transparent;
	}

	#navigation .menu .menu {
		padding-left: 1.5rem;
		background: $theme-menu-background;
		box-shadow: 2px 2px 5px 0px black;
	}

	#navigation .item {
		display: block;
		padding: .5rem .5rem;
		//border: 1px solid $theme-menu-background;
		transition: color 250ms linear;
	}
}

@media (pointer: fine) and (min-width: 768px) {
	#navigation {
		justify-self: stretch;
		align-self: center;
	}

	#navigation > .menu {
		text-transform: uppercase;
		padding: 0px;
		margin: 0;
	}

	#navigation > .menu > li {
		display: inline-block;
		padding: 0px .5em 0px 0px;
		margin: 0;
	}

	#navigation > .menu > li > .menu {
		display: block;
		position: absolute;
		padding: 0px .5em;
		margin: 0;
		cursor: auto;
		background: $theme-menu-background;
		box-shadow: 2px 2px 5px 0px black;
	}

	#navigation > .menu > li > .menu > li {
		display: block;
		padding: 0 .5em;
		margin: 0;
	}

	#navigation .menu > li > a {
		display: block;
		padding: .5em 0;
	}

	#navigation .menu li.has-menu {
		cursor: pointer;
	}

	#navigation .menu li.has-menu > .menu {
		position: absolute;
		pointer-events: none;
		display: block;
		animation-name: menu_hide;
		animation-duration: 100ms;
		animation-fill-mode: both;
		animation-direction: reverse;
	}

	#navigation .menu li.has-menu:hover > .menu,
	#navigation .menu li.has-menu > .menu:hover,
	#navigation .menu li.has-menu:focus > .menu,
	#navigation .menu li.has-menu > .menu:focus,
	#navigation .menu li.has-menu:active > .menu,
	#navigation .menu li.has-menu > .menu:active {
		display: block;
		pointer-events: auto;
		animation-name: menu_show;
		animation-duration: 100ms;
		animation-fill-mode: both;
		animation-direction: normal;
	}
}