Homer app - back-end

by PhilQ

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<header id="top-primary" class="container-fluid">
	<div class="row">
		<div class="col-md-auto m-3">
			<a id="logo" href="#"><img src="" alt="Homer" /></a>
		</div>
		<div class="col">
			<div class="row justify-content-between">
				<ul id="menu-primary" class="nav m-3">
					<li class="nav-item"><a class="nav-link" href="#">item A</a></li>
					<li class="nav-item"><a class="nav-link" href="#">item B</a></li>
					<li class="nav-item"><a class="nav-link active" href="#">item C</a></li>
					<li class="nav-item"><a class="nav-link" href="#">item D</a></li>
				</ul>
				<ul id="menu-user" class="nav justify-content-end m-3">
					<li class="nav-item"><a class="nav-link" href="#">profiel</a></li>
					<li class="nav-item"><a class="nav-link" href="#">instellingen</a></li>
					<li class="nav-item"><a class="nav-link nav-link-reverse" href="#">uitloggen</a></li>
				</ul>
			</div>
		</div>
	</div>
</header>

<div id="top-secondary" class="container-fluid">
	<div class="container">
		<div id="menu-secondary" class="row">
			<ul class="nav m-2">
				<li class="nav-item"><a class="nav-link" href="#">item 1</a></li>
				<li class="nav-item"><a class="nav-link active" href="#">item 2</a></li>
				<li class="nav-item"><a class="nav-link" href="#">item 3</a></li>
				<li class="nav-item"><a class="nav-link" href="#">item 4</a></li>
			</ul>
		</div>
	</div>
</div>

SCSS

// Reset
*, :before, :after { margin:0; padding: 0; box-sizing: border-box; }

// Fonts
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;700;900&display=swap');

// Colors
$theme-colors: (
	"green": #45cd98,
	"yelllow": #f9e5a5,
	"orange": #fac694,
	"red": #e37762,
	"darkred": #752e38,
);
$colors: map-merge($theme-colors, (
	"green-60": mix(map-get($theme-colors, "green"), #fff, 60%),
	"green-25": mix(map-get($theme-colors, "green"), #fff, 25%),
	"green-10": mix(map-get($theme-colors, "green"), #fff, 10%),
	"bg-grey": rgb(247,247,247),
	"border-grey": rgb(204,204,204),
	"cb-grey": rgb(212,212,212),
	"cb-dark-grey": rgb(179,179,179),
	"near-black": #222,
));

@mixin color-modifiers($prefix: '-', $attributes...) {
	@each $name, $hex in $local-theme-colors {
		&#{$prefix}#{$name} {
			@for $i from 0 to length($attributes) {
				#{nth($attributes, $i + 1)}: $hex;
			}
			@content;
		}
	}
}


body {
	font-family: 'Nunito', sans-serif;
	font-size: 16px;
	background-color: map-get($colors, "bg-grey");
}


// Header
#top-primary {
	background-color: map-get($colors, "green");
	color: #fff;
	position: relative;
	z-index: 10;
	box-shadow: 0 -8px 8px 8px rgba(0,0,0, .2);
	
	a.nav-link {
		border-radius: 4px;
		color: rgba(#fff, 0.8);
		border: 1px solid transparent;
		
		&:hover, &:focus, &:active {
			color: #fff;
		}
		
		&.active {
			border: 1px solid map-get($colors, "green-25");
			color: #fff;
		}
		
		&.nav-link-reverse {
			background: #fff;
			color: map-get($colors, "green")
		}
	}
}

#top-secondary {
	background-color: #fff;
	position: relative;
	z-index: 5;
	box-shadow: 0 -7px 8px 8px rgba(0,0,0, .2);
	
	#menu-secondary {
		font-size: 0.85rem;
		
		a.nav-link {
			color: map-get($colors, "near-black");

			&:hover, &:focus, &:active {
				color: map-get($colors, "green");
			}
			&.active {
				color: map-get($colors, "green");
			}
		}
	}
}