Update UI

Author: pegvin

index.html

@@ -23,8 +23,22 @@
 			--></div>
 			<div class="footerControls"><!--
 			--><span><!--
-				--><input tabindex="0" type="checkbox" id="UseFontSerif" name="UseFontSerif"><!--
-				--><label for="UseFontSerif"> Use Serif Font</label><!--
+				--><select id="fontSelector"><!--
+					--><optgroup label="Serif"><!--
+						--><option value="'Courier Prime', serif">Courier Prime</option><!--
+						--><option value="'Merriweather', serif">Merriweather</option><!--
+					--></optgroup><!--
+					--><optgroup label="Sans Serif"><!--
+						--><option value="'Atkinson Hyperlegible', sans-serif">Atkinson Hyperlegible</option><!--
+						--><option value="'Geologica', sans-serif">Geologica</option><!--
+					--></optgroup><!--
+					--><optgroup label="Monospace"><!--
+						--><option value="'Cousine', monospace" selected>Cousine</option><!--
+						--><option value="'Ubuntu Mono', monospace">Ubuntu Mono</option><!--
+					--></optgroup><!--
+				--></select><!--
+				--><input type="number" id="fontSize" name="fontSize" min="12" max="100" value="20"><!--
+				--><label for="fontSelector"> Font</label><!--
 			--></span><!--
 				--><span class="separator">·</span><!--
 			--><span><!--

main.js

@@ -44,14 +44,17 @@ window.onload = function() {
 	// Attach Word Count & Character Count Hook
 	textArea.onkeyup = OnTextAreaChange;
 
-	document.getElementById("UseFontSerif").onchange = function(e) {
-		if (e.target.checked == true) {
-			document.querySelector(':root').style.setProperty("--mainFont", "'Courier Prime', serif");
-		} else {
-			document.querySelector(':root').style.setProperty("--mainFont", "'Cousine', monospace");
-		}
+	document.getElementById("fontSelector").onchange = function(e) {
+		document.querySelector(':root').style.setProperty("--mainFont", e.target.value);
 		textArea.focus();
 	}
+
+	document.getElementById("fontSize").onchange = function(e) {
+		if (e.target.value > 100) e.target.value = 100;
+		document.querySelector(':root').style.setProperty("--mainFontSize", `${e.target.value}px`);
+		textArea.focus();
+	}
+
 	document.getElementById("EnableSpellCheck").onchange = function(e) {
 		if (e.target.checked == true) {
 			textArea.setAttribute("spellcheck", "true");

styles.css

@@ -1,16 +1,23 @@
-@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&family=Cousine&display=swap');
+/* https://fonts.google.com/share?selection.family=Atkinson+Hyperlegible|Courier+Prime|Cousine|Geologica|Merriweather|Ubuntu+Mono */
+@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&family=Courier+Prime&family=Cousine&family=Geologica&family=Merriweather&family=Ubuntu+Mono&display=swap');
 
 * {
 	box-sizing: border-box;
 }
 
 /*
+font-family: 'Atkinson Hyperlegible', sans-serif;
+font-family: 'Courier Prime', monospace;
 font-family: 'Cousine', monospace;
-font-family: 'Courier Prime', serif;
+font-family: 'Geologica', sans-serif;
+font-family: 'Merriweather', serif;
+font-family: 'Ubuntu Mono', monospace;
 */
+
 :root {
 	font-size: 16px;
 	--mainFont: 'Cousine', monospace;
+	--mainFontSize: 20px;
 }
 
 @media (max-width: 750px) {
@@ -50,7 +57,7 @@ textarea {
 
 	color: #333;
 	tab-size: 4;
-	font-size: 1.9rem;
+	font-size: var(--mainFontSize);
 	font-family: var(--mainFont), monospace;
 
 	word-break: normal;
@@ -96,3 +103,17 @@ footer span.separator {
 	padding: 0 0.5rem;
 }
 
+select#fontSelector {
+	font-family: 'Cousine', monospace;
+	padding: 0.1rem 0.2rem;
+	border: 1px solid #CCC;
+	max-width: 8rem;
+	border-right: none;
+}
+
+input#fontSize {
+	font-family: 'Cousine', monospace;
+	padding: 0.1rem 0 0.1rem 0.3rem;
+	border: 1px solid #CCC;
+	max-width: 4rem;
+}