Block-based Scheme editor prototype layout

sblock.html

<style>
/*
SBlock Prototype CSS
*/
.pre {
	white-space: pre-wrap;
}
.sblock {
	display: inline-block;
	color: var(--sblock-txt-color);
	background: var(--sblock-bg-color);
	border-radius: var(--sblock-border-radius);
	padding: 0.25em;
	margin: 0.25em;
	border: 1px solid var(--sblock-txt-color);
	--sblock-txt-color: black;
	--sblock-bg-color: #ddd;
	--sblock-border-radius: 10000vmax;
}
.sblock::selection {
	color: black;
	background: #77ff0077;
}
.sblock[data-sblock-quote] {
	margin-left: 1em;
	padding-left: 2em;
}
.sblock[data-sblock-quote]::before {
    display: inline;
    content: attr(data-sblock-quote);
    margin-left: -3em;
    margin-right: 0.5em;
    color: var(--sblock-bg-color);
    background: var(--sblock-txt-color);
    border-radius: 1000vmax;
    padding: 0.25em;
    user-select: text;
}
.sblock-flow {
	--sblock-border-radius: 1em;
}
.sblock-quoted {
	--sblock-bg-color: skyblue;
}
.sblock-control {
	--sblock-bg-color: gold;
}
.sblock-functions {
	--sblock-bg-color: crimson; 
}
.sblock-mutating {
	--sblock-bg-color: orange;
}
.sblock-io {
	--sblock-bg-color: darkviolet;
	--sblock-txt-color: white;
}
.sblock-math {
	--sblock-bg-color: lightgreen;
}
.sblock-listop {
	--sblock-bg-color: maroon;
	--sblock-txt-color: white;
}
</style>


<pre class="pre">
<div class="sblock sblock-functions sblock-flow">define <div class="sblock">factorial n</div>
<div class="sblock sblock-control sblock-flow">if <div class="sblock sblock-math">= n 0</div>
0
<div class="sblock sblock-math">* n <div class="sblock">fibonacci <div class="sblock sblock-math">1- n</div></div></div>
</div>
</div>
<div class="sblock sblock-listop sblock-flow">map
<div class="sblock sblock-functions sblock-flow">lambda <div class="sblock">n</div>
<div class="sblock sblock-io">display "The factorial of "</div>
<div class="sblock sblock-io">display n</div>
<div class="sblock sblock-io">display " is "</div>
<div class="sblock sblock-io">display <div class="sblock">factorial n</div></div>
<div class="sblock sblock-io">display "."</div>
<div class="sblock sblock-io">newline</div>
</div>
<div class="sblock sblock-quoted" data-sblock-quote="'">1 2 3 4 100</div>
</div>
</pre>