quitsocialmedia.club/styles/parts/_nav.scss

$tiny: .2rem;
$small: .5rem;
$regular-less: .9rem;
$regular: 1.1rem;
$regular-more: 1.3rem;
$regular-more-em: 1.3em;
$big: 1.6rem;
$bigger: 1.8rem;
$twice: 2.2rem;
$height: 3.1rem;
$mastodon: 4rem;
$radius-s: .4rem;
$radius-m: .6rem;
$radius-l: 1rem;
$trans: .5s ease-out;
$quicktrans: .1s ease-in-out;

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

#home {
	position: fixed;
	top: 1.5vw;
	left: 5vw;
	padding: 0 $regular-less;
	line-height: $height; 
	font-size: $bigger;
	color: var(--background);
	background: var(--primary);
	box-shadow: var(--shadow);
	border: 2px solid var(--blue);
	&:hover,
	&:focus {
		color: var(--white-ish) !important;
		background: var(--red) !important;
		border-color: var(--white-ish) !important;
	}
	&:target {
		color: var(--primary);
	}
}

#nav {
	position: fixed;
	height: $height;
	top: 1.5vw;
	right: 6vw;
	text-align: right;
	padding: 0 $small;
	box-shadow: var(--shadow);
	background: var(--background);
	* {
		margin: 0 !important;
	}
	ul {
		padding: 0;
		li {
			float: left;
			a,
			label {
				display: block;
				color: var(--text) !important;
				line-height: $height;
				height: $height;
				padding: 0 $small;
				font-size: $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;
				}
			}
		}
	}
}

.lang-list {
	opacity: 0;
	top: 3.7rem;
	position: absolute;
	background: var(--background);
	z-index: -1;
	#langtoggle:checked + & {
		opacity: 1;
		box-shadow: var(--shadow);
		z-index: 9;
	}
}

.nav-mobile {
	display: none;
	height: $height;
	width: $height;
	position: fixed;
	bottom: calc(3vh + .5rem);
	right: calc(6vw + 3.5rem);
	box-shadow: var(--button-shadow);
	background: var(--background);
	z-index: 6;
	span {
		top: 1.4rem;
		left: .7rem;
	}
	span,
	span::before,
	span::after {
		height: 4px;
		width: 1.7rem;
		background: var(--text);
		position: absolute;
		display: block;
		content: '';
		box-shadow: var(--little-shadow);
		border-radius: $radius-s !important;
 		transition: $quicktrans;
	}
	span::before {
		top: .65rem;
	}
	span::after {
		bottom: .65rem;
	}
}

@media only screen and (max-width: 950px) {
	#home {
		left: 50%;
		margin-left: -7.5rem;
		top: 2vh;
		text-align: center;
	}
	.nav {
		margin: 3vh;
	}
	.nav-mobile {
		display: block;
	}
	.nav-list {
		position: fixed;
		width: 13rem;
		bottom: calc(3vh + 4.5rem);
		right: -14rem;
		background: var(--background);
		box-shadow: var(--shadow);
		z-index: 9;
		overflow: hidden;
	}
	#nav ul li {
		a,
		label {
			padding: 0 $regular-more;
		}
	}
}

#menutoggle:checked {
	& ~ .nav-list {
		right: calc(4vw + .3rem);
	}
	& ~ .nav-mobile {
		box-shadow: var(--inner-little-shadow);
		span {
			background: transparent;
			box-shadow: none;
			&::before,
			&::after {
				top: 0;
				box-shadow: none;
			}
			&::before {
				transform: rotate(45deg);
			}
			&::after {
				transform: rotate(-45deg);
			}
		}
	}
}