- let palettes = [
- 	'#28beae #6cdfdb #6c7d9c #287d9c', 
- 	'#be28b9 #51239f #510062 #be008d', 
- 	'#be5128 #ce9248 #e4c060 #db9c4e'
- ];
- let n = palettes.length;

mixin panel(c)
	- let rel_rng = .65; // relative range, 65% of total
	- let o = 50*(1 - rel_rng); // absolute offset
	//- generate x, y coords between 0 & 100%, but not too close to either
	- let x = Math.round(o + rel_rng*100*Math.random());
	- let y = Math.round(o + rel_rng*100*Math.random());
	//- we want b between 0 & 90 degrees, scale [0, 100] accordingly
	- let b = Math.round(.9*(o + rel_rng*100*Math.random()));
	//- we want a between 0 & 180 degrees, scale [0, 100] accordingly
	- let a = Math.round(1.8*(o + rel_rng*100*Math.random()));
	.panel(style=`--xy: ${x}% ${y}%; 
								--b: ${b}deg; --a: ${a}deg; 
								${c.map((k, i) => `--c${i}: ${k}`).join('; ')}`)

.grid
	while n--
		+panel(palettes[n].split(' '))

//- thanks
p
	span.look Pretty palettes by 
		a(href='https://twitter.com/deanleigh/status/1252978357467262976' target='_blank') Dean Leigh
		| .
	|  
	span.code Clever code tricks by 
		a(href='https://twitter.com/anatudor' target='_blank') me
		| , 
		a(href='https://css-tricks.com/author/thebabydino/' target='_blank') myself
		|  and 
		a(href='https://www.patreon.com/anatudor' target='_blank') I
		| !

/* =============== RELEVANT CODE =============== */
$gap: 2vmin;

.panel {
	border-radius: 3px;
	box-shadow: 2px 2px 5px;
	background: 
		conic-gradient(from var(--b) at var(--xy), 
				var(--c0) var(--a), var(--c1) 0% 50%, 
				var(--c2) 0% calc(180deg + var(--a)), var(--c3) 0%);
	
	&:last-child { grid-column: 1/ span 2 }
}


/* =============== LAYOUT & PRETTiFYING CODE =============== */
/* (some pretty clever shit in there too) */
html { overflow-x: hidden }

body {
	display: grid;
	grid-template-rows: 1fr max-content;
	margin: 0;
	min-width: 160px; height: 100vh;
	background: #363636;
	font: 1.25em/ 1.5 segoe script, purisa, comic sans ms, cursive;
	
	@media (max-width: 480px) { font-size: .875em }
}

.grid {
	box-sizing: border-box;
	display: grid;
	grid-template: 
		minmax(65vmin, 65%) minmax(2em, 1fr)/ 
		minmax(2em, 1fr) minmax(65vmin, 65%);
	grid-gap: $gap;
	padding: $gap
}

p {
	margin: 0;
	padding: .5em $gap;
	color: #eee;
	text-align: center;
}

a {
	--hlight: 0;
	--not-hlight: calc(1 - var(--hlight));
	--active: 0;
	--not-active: calc(1 - var(--active));
	position: relative;
	display: inline-block;
	padding: 0 .125em;
	color: gold;
	text-decoration: none;
	
	&::before {
		position: absolute;
		top: 1px; right: 0; bottom: 1px; left: 0;
		transform-origin: 50% 100%;
		transform: scaley(calc(var(--hlight) + var(--not-hlight)*.075));
		background: currentcolor;
		mix-blend-mode: difference;
		transition: 
			transform .35s 
			cubic-bezier(calc(var(--hlight)*.42), 0, calc(var(--not-hlight)*.58), 1);
		filter: hue-rotate(calc(var(--active)*-35deg));
		content: ''
	}
	
	&:hover, &:focus { --hlight: 1 }
	&:active { --active: 1 }
}

/*
used in this CSS-Tricks article
https://css-tricks.com/background-patterns-simplified-by-conic-gradients/
*/