Improved preview control

index.css

@@ -59,6 +59,8 @@ html, body {
 .slab {
 	font-family: "IosevkaSlabWEB", monospace;
 }
+.bold { font-weight: bold }
+.italic { font-style: italic }
 pre, code {
 	font-family: inherit;
 }
@@ -162,23 +164,47 @@ section#preview pre {
 	text-align: left;
 }
 section#preview #preview-toolbar {
+	display: flex;
 	color: black;
+	font-family: "IosevkaWEB", monospace;
 	font-size: 1rem;
+	font-style: normal;
+	font-weight: normal;
 	background: white;
 	margin: -4rem -1rem 4rem;
 	padding: 0.75rem;
+	justify-content: center;
 }
 section#preview #preview-toolbar h2 {
+	display: inline;
 	font-size: 1em;
 	color: black;
-	display: inline;
+	margin: 0 1rem 0 0;
-	margin: 0 2rem 0 0;
 }
-span.options a {
+section#preview #preview-toolbar h3 {
+	display: none;
+}
+section#preview #preview-toolbar span.options {
+	display: block;
+	position: relative;
+}
+section#preview #preview-toolbar span.options + span.options {
+	padding-left: 1.5rem;
+}
+section#preview #preview-toolbar span.options + span.options:before {
+	content: ' ';
+	display: block;
+	border-left: 1px solid #ddd;
+	position: absolute;
+	top: -0.75rem;
+	bottom: -0.75rem;
+	left: 0.5rem;
+}
+section#preview #preview-toolbar span.options a {
 	margin-right: 0.5em;
 	background-position: 0px 11.075em;
 }
-span.options a.active, span.options a:hover {
+section#preview #preview-toolbar span.options a.active, section#preview #preview-toolbar span.options a:hover {
 	background-position: 0px 1.075em;
 }
 

index.html

@@ -38,8 +38,13 @@
 		</ul>
 	</section>
 	
-	<section id="preview" class="{{theme}} {{(isSlab ? 'slab' : '')}}">
+	<section id="preview" class="{{theme}} {{(isSlab ? 'slab' : '')}} {{(isBold ? 'bold' : '')}} {{(isItalic ? 'italic' : '')}}">
-	<div id="preview-toolbar"><h2>Preview Control</h2><span id="slab-toggle" class="options"><compact-toggle v-bind:on.sync="isSlab" v-bind:label="'slab'"></compact-toggle></span>| <span id="theme-picker" class="options"><compact-picker v-bind:items="themes" v-bind:current.sync="theme"></compact-picker></span>| <span id="snippet-picker" class="options"><compact-picker v-bind:items="snippets" v-bind:current.sync="snippet"></compact-picker></span></div>
+	<div id="preview-toolbar">
+		<span class="options"><h2>Preview</h2></span>
+		<span id="styles-toggle" class="options"><h3>Styles</h3><compact-toggle v-bind:on.sync="isSlab" v-bind:cls="'slab'">slab-serif</compact-toggle> <compact-toggle v-bind:on.sync="isBold" v-bind:cls="'bold'">bold</compact-toggle> <compact-toggle v-bind:on.sync="isItalic" v-bind:cls="'italic'">italic</compact-toggle></span>
+		<span id="theme-picker" class="options"><h3>Color</h3><compact-picker v-bind:items="themes" v-bind:current.sync="theme"></compact-picker></span>
+		<span id="snippet-picker" class="options"><h3>Language</h3><compact-picker v-bind:items="snippets" v-bind:current.sync="snippet"></compact-picker></span>
+	</div>
 		<snippet v-bind:name="'javascript'" v-bind:current="snippet"><code class="javascript hljs"><span class=hljs-keyword>var</span> languages = [
 	{lang: <span class=hljs-string>'English'</span>,       sample: <span class=hljs-string>'Shaw, those twelve beige hooks are joined if I patch a young, gooey mouth.'</span>},
 	{lang: <span class=hljs-string>'IPA'</span>,           sample: <span class=hljs-string>'[ɢʷɯʔ.nas.doːŋ.kʰlja] [ŋan.ȵʑi̯wo.ɕi̯uĕn.ɣwa]'</span>},
@@ -224,7 +229,7 @@ b = [[<span class="hljs-number">11</span>,<span class="hljs-number">9</span>,<sp
 </template>
 </script>
 <script type="text/x-template" id="compact-toggle-template">
-<a href="javascript:;" v-bind:class="{active:on}" v-on:click.prevent="toggle()">{{label}}</a>
+<a href="javascript:;" v-bind:class="{active:on}" v-on:click.prevent="toggle()" class="{{cls}}"><slot></slot></a>
 </script>
 <script type="text/x-template" id="code-snippet-template">
 <pre v-bind:id="name" v-show="(name === current)">

index.js

@@ -2,7 +2,8 @@ var CompactPicker = Vue.component('compact-picker', {
 	template: '#compact-picker-template',
 	props: {
 		items: Array,
-		current: String
+		current: String,
+		cls: String
 	},
 	data: {},
 	methods: {
@@ -16,7 +17,8 @@ var CompactToggle = Vue.component('compact-toggle', {
 	template: '#compact-toggle-template',
 	props: {
 		label: String,
-		on: Boolean
+		on: Boolean,
+		cls: String
 	},
 	data: {},
 	methods: {
@@ -45,6 +47,8 @@ var indexPage = new Vue({
 		snippet: 'javascript',
 		theme: 'dark',
 		isSlab: false,
+		isBold: false,
+		isItalic: false,
 		version: "1.1.2",
 		codename: "Calibum-2"
 	}