- let data = {
- 	home: { ico: '🏠', hue: 200 }, 
- 	notes: { ico: '🗒️', hue: 260 }, 
- 	activity: { ico: '🔔', hue: 320 }, 
- 	discovery: { ico: '🧭', hue: 30 }
- };
- let e = Object.entries(data);
- let n = e.length;

nav
	- for(let i = 0; i < n; i++)
		- let ico = e[i][1].ico;
		a.item(href='#' style=`--hue: ${e[i][1].hue}deg`)
			span.icon.mono(id=`blur${i}` aria-hidden='true') #{ico}
			span.icon.mono(aria-hidden='true') #{ico}
			span.icon.midl(aria-hidden='true' style=`background-image: -moz-element(#blur${i})`) #{ico}
			span.icon.grey(aria-hidden='true') #{ico}
			| #{e[i][0]}

$r: 5px;
$t: .3s;

body, nav, a { display: grid }

body {
	margin: 0;
	height: 100vh;
	background: #333
}

nav {
	grid-auto-flow: column;
	place-self: center;
	padding: .75em .25em .375em;
	background: #fff;
	font: clamp(.625em, 5vw, 1.25em)/ 1.25 ubuntu, sans-serif
}

.item {
	--hl: 0;
	width: 5em;
	color: hsl(var(--hue), calc(var(--hl)*100%), 65%);
	text-align: center;
	text-decoration: none;
	transition: color $t;
	
	&:focus { outline: none }
	&:hover, &:focus { --hl: 1 }
}

.icon {
	grid-area: 1/ 1;
	place-self: center;
	font-size: 2.5em
}

.mono {
	z-index: 1;
	transform: 
			translate(calc(var(--hl)*.375em), calc(var(--hl)*-.25em)) 
			rotate(calc(var(--hl)*22.5deg));
	opacity: var(--hl);
	filter: 
		sepia(1) hue-rotate(calc(var(--hue) - 50deg)) saturate(3) 
		blur(var(--r, 0));
	transition: .3s;
	
	&[id*='blur'] {
		--r: #{$r};
		position: fixed;
		bottom: 100vh
	}
}

.midl {
	z-index: 2;
	color: transparent;
	backdrop-filter: blur($r);
	-webkit-mask: linear-gradient(red 0 0) text;
	
	@supports (background: -moz-element(#hl)) {
		background-color: #fff;
		background-clip: text;
		backdrop-filter: none
	}
}

.grey {
	z-index: 3;
	filter: grayscale(1) opacity(.35)
}