FancyCard.js

function hashCode(s){
	return s
		.split('')
		.reduce((a,b)=>{a=((a<<5)-a)+b.charCodeAt(0);return a&a},0)
}
function hashColor(text){
	return "#"+Math.abs(hashCode(text)).toString(16).slice(0,6)
}
function light(text){return text
	.replace(/0/g,"8").replace(/1/g,"9").replace(/2/g,"A").replace(/3/g,"B")
	.replace(/4/g,"C").replace(/5/g,"D").replace(/6/g,"E").replace(/7/g,"F")
}
function medium(text){return text
	.replace(/C/g,"4").replace(/D/g,"5").replace(/E/g,"6").replace(/F/g,"7")
	.replace(/0/g,"8").replace(/1/g,"9").replace(/2/g,"A").replace(/3/g,"B")
}
function dark(text){return text
	.replace(/0/gi,"8").replace(/1/gi,"9").replace(/2/gi,"A")
	.replace(/B/gi,"3").replace(/C/gi,"4").replace(/D/gi,"5").replace(/E/gi,"6").replace(/F/gi,"7")
}
function breadcrumb(){
	let card = document.querySelector("#qa");
	let breadcrumb = document.querySelector(".breadcrumb");
	breadcrumb.innerHTML = breadcrumb.innerHTML
		.split("::")
		.join(" :: ")
	card.style=`--deckcolor:${dark(hashColor(breadcrumb.innerHTML))};`
	background()
}
function background(){
	try{
		let page = document.querySelector(".card");
		let breadcrumb = document.querySelector(".breadcrumb");
		var pattern = GeoPattern.generate(breadcrumb.innerHTML);
		page.style=`--image: ${pattern.toDataUrl()}`;
	} catch(e) {
		if(e instanceof ReferenceError) window.requestAnimationFrame(background)
	}
}
function tags(){
	let tags = document.querySelector(".tags");
	if(tags.classList.contains("tagged")) return
	tags.innerHTML = tags.innerHTML
		.split(" ")
		.filter(e => e!=="")
		.map(text => `<li style="--tagcolor:${medium(hashColor(text))}">${text}</li>`)
		.join("")
	tags.classList.add("tagged")
}
window.requestAnimationFrame(breadcrumb);
window.requestAnimationFrame(tags);

Recto.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/geopattern/1.2.3/js/geopattern.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
<script src="https://gist.githubusercontent.com/YPetremann/3d63a1b2dc944fadc7bad0d605ec1023/raw/FancyCard.js"></script>

<nav class="breadcrumb">{{Deck}}</nav>
<nav class="tags">{{Tags}}</nav>

<!-- Start edit your template here -->
<header>{{Recto}}</header>

<!-- Optionnaly add footer for Recto -->
<!--
<footer>{{type:Verso}}</footer>
-->

Style.css

:root{
	box-sizing: border-box;
}
*,*:before,*:after {
	box-sizing: inherit;
}
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
body > nav {
	margin:0;
}
body > .container {
	flex-grow:1;
	width:auto;
	padding:0;
	margin:0;
	display:flex;
	flex-direction: column;
}
.pt-1, #ansarea-pad {display:none;}
.card {min-height:100vh;}
#quiz {
	flex-grow:1;
    display:grid !important;
    grid-template: 
            "left right" auto
            "qbox qbox" 1fr
            "foot foot" auto / 1fr 1fr;
}
#leftStudyMenu {
	grid-area: left;
	padding:10px;
}
#rightStudyMenu {
	grid-area: right;
	justify-self:end;
	align-self:center;
	overflow: hidden;
	padding:10px;
}
#qa_box.card {
    min-height: auto;
    grid-area: qbox;
}
#ansarea{
	grid-area: foot;
	position:static;
	min-height: auto;
}
#ansbut {
	margin:0;
}
.card {
	background: var(--image) calc(50%) calc(50%), var(--image) calc(50% + 1px) calc(50% + 1px);
	display:flex;
	justify-content:center;
	flex-grow:1;align-items:center;
	/* min-height:100vh; */
	margin:0;
	padding:20px;
	text-align: center;
	font-family:sans-serif;
	font-size: 16px; 
	box-sizing:border-box;
}
#qa {
	--deckcolor:#09C;
	--backcolor:#fffaf0;
	display:flex;
	flex-direction:column;
	margin: 0;
	background:var(--deckcolor);
	min-height:380px;
	width:100%;
	max-width:640px;
	border-radius: 7px;
	box-shadow:5px 5px 20px #0007;
}
#qa:before, #qa:after {
	content:"";
	flex-grow:1;
	background-color: var(--backcolor);
}
#qa>*{
	padding:10px;
}
#qa>.breadcrumb{
	font-weight: 900;
	order:-1;
	border-radius: 7px 7px 0 0;
	background:#0001;
	margin:0;
}
#qa>header{
	order:-1;
	border-radius: 7px;
	background:#FFF1;
}
#qa>footer{
	color:black;
	background-color: var(--backcolor);
	flex-grow:100;
}
#qa>.tags{
	order:2;
	border-radius: 0 0 7px 7px;
	background:#0001;
	margin:0;
}
#qa>.tags li{
	--tagcolor:red;
	display:inline-block;
	padding:0 5px;
	margin:0 5px;
	margin-left:10px;
	position:relative;
	background: var(--tagcolor);
	font-weight:900;
}
#qa>.tags li:before{
	position:absolute;
	right:100%;
	top:0;
	bottom:0;
	content:"";
	border:7px transparent solid;
	border-right-color:var(--tagcolor);
}
#qa>.tags li:after{
	position:absolute;
	left:-4px;
	top:50%;
	margin-top:-2px;
	height:4px;
	width:4px;
	content:"";
	background:var(--deckcolor);
}

hr { border:none; border-bottom:2px dotted #777; margin:5px;}
input{ border:none;border-bottom:#777 solid 2px; background: #7777; color:inherit; padding:5px;}
.typeMissed{background:#CCC7;}
ins, .typeGood{background:#0F07;}
del, .typeBad{background:#F007;}
mark { padding: 0px 5px; }
var { font-family: monospace; font-weight: 900; }
pre, code, kbd { text-align: left; background-color: #7777; border: 1px solid #777; padding: 0px 5px; }
kbd { border-radius:2px; border-bottom-width:5px; }
pre {margin:1px;}

pre.prettyprint, code.prettyprint { background-color: #333 }
pre .nocode, code .nocode { background-color: none; color: #000 }
pre .str, code .str { color: #ffa0a0 } /* string  - pink */
pre .kwd, code .kwd { color: #f0e68c; font-weight: bold }
pre .com, code .com { color: #87ceeb } /* comment - skyblue */
pre .typ, code .typ { color: #98fb98 } /* type    - lightgreen */
pre .lit, code .lit { color: #cd5c5c } /* literal - darkred */
pre .pun, code .pun { color: #fff }    /* punctuation */
pre .pln, code .pln { color: #fff }    /* plaintext */
pre .tag, code .tag { color: #f0e68c; font-weight: bold } /* html/xml tag    - lightyellow */
pre .atn, code .atn { color: #bdb76b; font-weight: bold } /* attribute name  - khaki */
pre .atv, code .atv { color: #ffa0a0 } /* attribute value - pink */
pre .dec, code .dec { color: #98fb98 } /* decimal         - lightgreen */

ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE }
li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8 { list-style-type: decimal; }
li.L1,li.L3,li.L5,li.L7,li.L9 { background: #444;}

Verso.html

{{FrontSide}}
<footer>{{Verso}}</footer>