Long tail of style and accessibility fixes

app/assets/javascripts/editor.js

@@ -11,11 +11,11 @@
 			editor: editor,
 			class: 'pen',
 			textarea: '<textarea name="' + name + '"></textarea>',
-			list: ['p', 'h3', 'h4', 'blockquote', 'insertorderedlist', 'insertunorderedlist', 'bold', 'italic', 'underline', 'strikethrough', 'createlink', 'insertimage'],
+			list: ['p', 'h1', 'h2', 'blockquote', 'insertorderedlist', 'insertunorderedlist', 'bold', 'italic', 'underline', 'strikethrough', 'createlink', 'insertimage'],
 			title: {
 				'p': 'Paragraph',
-				'h3': 'Major Heading',
-				'h4': 'Minor Heading',
+				'h1': 'Major Heading',
+				'h2': 'Minor Heading',
 				'blockquote': 'Quotation',
 				'insertorderedlist': 'Ordered List',
 				'insertunorderedlist': 'Unordered List',

app/assets/stylesheets/_application.scss

@@ -216,16 +216,26 @@ textarea, .textarea {
 	}
 }
 
-.textarea {
+.textarea, .workshop-description {
 	> :first-child {
 		margin-top: 0;
 	}
+
 	> :last-child {
 		margin-bottom: 0;
 	}
+
 	p {
 		font-size: 1.125em;
 	}
+
+	h1 {
+		font-size: 1.667em;
+	}
+
+	h2 {
+		font-size: 1.25em;
+	}
 }
 
 input {
@@ -257,6 +267,14 @@ input {
 		}
 	}
 
+	&.big input {
+		@include font-family(secondary);
+
+		.composition & {
+			margin-top: 1em;
+		}
+	}
+
 	label,
 	&.focused label {
 		position: absolute;
@@ -290,15 +308,6 @@ input {
 		will-change: box-shadow;
 	}
 
-	&.big input {
-		font-size: 2em;
-		@include font-family(secondary);
-
-		.composition & {
-			margin-top: 1em;
-		}
-	}
-
 	&:focus, &:active, &:focus {
 
 		label {
@@ -772,12 +781,12 @@ ul.warnings li,
 	.user-nav-bar {
 		position: absolute;
 		right: 0;
-		width: auto;
 		text-align: right;
 		top: 1em;
 		font-size: 0.9em;
 		width: 100%;
 		padding-left: 13em;
+		padding-right: 1em;
 
 		a {
 			display: block;
@@ -839,7 +848,7 @@ ul.warnings li,
 			background-color: inherit;
 			@include _(transform, rotate(135deg));
 			@include _(transition, 'transform 200ms ease-in-out, background-color 200ms ease-in-out');
-			@include _(box-shadow, 0.2em -0.1em 0.8em -0.4em #000);
+			@include _(box-shadow, 0.2em -0.4em 0.8em -0.4em #000);
 		}
 
 		&.enabled {
@@ -879,7 +888,6 @@ ul.warnings li,
 
 #main {
 	position: relative;
-	max-width: (rems(68) - $sidebar-width) * 2;
 	background-color: $white;
 	padding-bottom: rems(2);
 
@@ -1223,6 +1231,14 @@ $header-tilt: 8deg;
 		}
 	}
 
+	.number-field,
+	.email-field,
+	.text-field {
+		&.big input {
+			font-size: 2em;
+		}
+	}
+
 	.flex-column {
 		display: flex;
 		align-items: flex-start;
@@ -1566,10 +1582,12 @@ input[type="submit"]:focus,
 	@include _(animation, fade-out ease-in-out 500ms infinite alternate both);
 }
 
-input:focus,
-textarea:focus,
-.textarea {
-	@include _(animation, none);
+body {
+	input:focus,
+	textarea:focus,
+	.textarea {
+		@include _(animation, none);
+	}
 }
 
 @include breakpoint(large) {
@@ -2153,12 +2171,19 @@ html[data-lingua-franca-example="html"] {
 	@include translation-pointer;
 }
 
+.workshop-notes {
+	p {
+		font-size: 1em;
+	}
+}
+
 .workshop-list {
 	list-style: none;
 	padding: 0 2em;
 
 	.workshop-description {
-		max-height: 10em;
+		font-size: 0.8em;
+		max-height: 20em;
 		padding: 1em;
 		overflow: hidden;
 	}