quitsocialmedia.club/styles/parts/_nav.scss

@use 'parts/root';

header {
	height: root.$mega;
	text-transform: uppercase;
	* {
		border-radius: root.$radius-m;
		list-style-type: none !important;
		font-weight: 700 !important;
		z-index: 9;
	}
}

#home {
	position: fixed;
	top: 1.5vw;
	left: 5vw;
	padding: 0 root.$regular-less;
	line-height: root.$height; 
	font-size: root.$bigger;
	box-shadow: var(--shadow);
	color: #FFF;
	background: var(--red);
	border: 3px solid #FFF;
	&:hover,
	&:focus {
		color: var(--primary);
		background: var(--background);
		border-color: var(--primary);
	}
}

#nav {
	position: fixed;
	top: 1.5vw;
	right: 6vw;
	text-align: right;
	padding: 0 root.$small;
	box-shadow: var(--shadow);
	background: var(--background);
	* {
		margin: 0 !important;
	}
	ul,
	menu {
		padding: 0;
		li {
			float: left;
			a,
			label {
				display: block;
				color: var(--text) !important;
				line-height: root.$height;
				height: root.$height;
				padding: 0 root.$small;
				font-size: root.$regular-more;
				font-weight: 700;
				&::after {
					content: none;
				}
				&:hover,
				&:focus{
					transform: scale(1.1) rotate(3deg);
					filter: none;
					border-bottom: none;
				}
				&:active {
					opacity: .6;
				}
				&::before {
					content: none !important;
				}
			}
		}
	}
}

#nav-toggle-button {
	display: none;
	span {
		top: 1.4rem;
		left: root.$tiny;
	}
	span,
	span::before,
	span::after {
		height: root.$tiny;
		width: 1.7rem;
		background: var(--text);
		position: relative;
		display: block;
		content: '';
		box-shadow: var(--little-shadow);
		border-radius: root.$radius-s !important;
	}
	span::before {
		bottom: .6rem;
	}
	span::after {
		top: .6rem - root.$tiny;
	}
}


@media only screen and (max-width: 950px) {
	#home {
		right: 5vw;
		top: 2vh;
		text-align: center;
	}
	header {
		margin: 3vh;
	}
	#nav-toggle-button {
		display: block;
	}
	menu {
		position: fixed;
		width: 13rem;
		bottom: calc(3vh + 4.5rem);
		right: -14rem;
		background: var(--background);
		box-shadow: var(--shadow);
		z-index: 9;
		border: 3px solid var(--text);
		overflow: hidden;
	}
	#nav menu li,
	#nav ul li {
		float: none;
		border-radius: 0 !important;
		a,
		label {
			padding: 0 root.$regular-more;
		}
	}
}

#menutoggle:checked {
	& ~ menu {
		right: calc(4vw + .3rem);
	}
}