Fixed spelling on README

README.md

@@ -1,6 +1,6 @@
 ## The problem
 
-Many preditory companies charge rediculous amounts of money for "autisim" related products.
+Many predatory companies charge ridiculous amounts of money for "autism" related products.
 
 This includes things like the PEC system, there are free resources for this, but the most common android app costs $399
 
@@ -8,7 +8,7 @@ This is unacceptable.
 
 ## The solution (or part of it)
 
-An open source web app that offers feature parity with the commercial solution, without locking the ability to communicate with people byhind a pricetag.
+An open source web app that offers feature parity with the commercial solution, without locking the ability to communicate with people behind a price tag.
 
 # librePECS
 
@@ -22,5 +22,5 @@ A free open source Picture Exchange Communication System or PECS
 - [ ] Remove custom PEC's
 - [ ] Persist data
 - [ ] Allow data backup/restore
-- [x] Multipul PEC boards
+- [x] Multiple PEC boards
 - [ ] Convert to android app

main.css

@@ -6,6 +6,9 @@
 	--middle-accent:	rgba(128,128,128,0.1);
 	--middle-shade:		rgba(128,128,128,0.5);
 	--shadows-color:	rgba(138,138,138,1);
+	--ui-height:		5vh;
+	--ui-half-height:	calc(var(--ui-height) / 2);
+	--ui-quarter-height:	calc(var(--ui-half-height) / 2);
 	&.darkmode {
 		--foreground-high:	rgba(250,250,250,0.5);
 		--foreground-low:	rgba(200,200,200,1);
@@ -32,8 +35,8 @@ body {
 }
 
 #navigation {
-	padding-top:25px;
+	padding-top: var(--ui-half-height);
-	height: 25px;
+	height: var(--ui-half-height);
 	box-shadow: inset 0 -2px 3px 0 var(--shadows-color);
 }
 
@@ -94,14 +97,16 @@ body {
 
 .board_tab {
 	display: inline-block;
-	height: 24px;
+	height: var(--ui-half-height);
-	width: 100px;
+	min-width: 100px;
 	border: solid 1px var(--foreground-low);
 	color: var(--foreground-high);
 	border-bottom: unset;
 	border-radius: 15px 15px 0 0;
 	background: var(--background-low);
 	text-align: center;
+	line-height: var(--ui-half-height);
+	font-size: var(--ui-quarter-height);
 }
 
 .active_board {
@@ -141,11 +146,11 @@ body {
 }
 
 .title_bar {
-	height: 50px;
+	height: var(--ui-height);
 	box-shadow: inset 0 -2px 3px 0 var(--shadows-color);
 	display: flex;
 	justify-content: stretch;
-	font-size: 32pt;
+	font-size: var(--ui-half-height);
 	user-select: none;
 }
 
@@ -158,17 +163,18 @@ body {
 	display: inline-block;
 	background: var(--middle-accent);
 	box-shadow: inset 2px 2px 2px 0 var(--middle-shade);
-	width: 50px;
+	width: var(--ui-height);
 	text-align: center;
 	cursor: pointer;
+	line-height: var(--ui-height);
 }
 
 .options_button {
 	position: absolute;
-	height: 50px;
+	height: var(--ui-height);
 	top: 0;
 	right: 0;
-	font-size: 32pt;
+	font-size: var(--ui-half-height);
 }
 
 .focused {