play: Move to Bootstrap 4.6

This is intended with providing a better baseline for styling for this
and future projects, while maintaining reasonable browser compatibility.

play/static/css/main.css

@@ -1,132 +1,25 @@
-html, body {
-	min-height: 100%;
+.navbar-brand .logo {
+	max-height: 2rem;
 }
 
-html {
-	height: 100%;
-}
-
-body {
-	background: #fefefe;
-	color: #333;
-	font-family: sans-serif;
-	font-size: 1.6rem;
-}
-
-h1 {font-size: 3.6rem; line-height: 1.2;  letter-spacing: 0;}
-h2 {font-size: 2.6rem; line-height: 1.25; letter-spacing: 0;}
-h3 {font-size: 2.2rem; line-height: 1.3;  letter-spacing: 0;}
-h4 {font-size: 1.8rem; line-height: 1.35; letter-spacing: 0;}
-h5 {font-size: 1.4rem; line-height: 1.5;  letter-spacing: 0;}
-h6 {font-size: 1.2rem; line-height: 1.6;  letter-spacing: 0;}
-
-p {
-	margin-bottom: 1.5rem;
-}
-
-ul, ol {
-	list-style: disc outside;
-	padding-left: 2rem;
-}
-
-code {
-	background-color: #eeeeec;
-	border-color: #eee;
-	border-radius: 0.2rem;
-	font-size: 100%;
-}
-
-a {
-	color: #c0392b;
+.navbar-brand .title {
 	font-weight: bold;
-	text-decoration: none;
-}
-
-a:hover, a:active {
-	color: #111;
-}
-
-.button {
-	background: #333;
-	border: 0.2rem solid #333;
-	border-radius: 0;
-	color: #fefefe;
-	font-weight: bold;
-	padding: 0 1rem;
-	transition: background 0.2s ease, border 0.2s ease, color 0.2s ease;
-}
-
-.button-alt {
-	background: #fefefe;
-	color: #333;
+	margin-left: 0.25rem;
 }
 
-.button:hover, .button:focus {
-	background: #c82829;
-	border-color: #c82829;
-	color: #fefefe;
-}
-
-.button-alt:hover, .button-alt:focus {
-	background: #fefefe;
-	border-color: #c82829;
-	color: #c82829;
-}
-
-.preview-header {
-	border-bottom: 0.1rem solid #c1c1c1;
-	margin-bottom: 2rem;
-	padding: 1rem 0 0;
-}
-
-.preview-header a {
-	color: #333;
-	text-decoration: none;
-}
-
-.preview-header .title {
-	display: inline-block;
-	font-weight: bold;
-	line-height: 1.2;
-	padding-bottom: 1rem;
-	margin-right: 1rem;
-}
-
-.preview-header .logo {
-	max-height: 3.5rem;
-}
-
-.preview-header .button {
-	margin-right: 1rem;
-}
-
-.editor {
-	background: #f3f3f3;
-	border: 0 solid #eee;
-	border-width: 0.1rem 0.1rem 0.4rem 0.1rem;
-	border-radius: 0;
+#editor {
 	font-family: monospace;
-	height: 65rem;
-	overflow: auto;
 	resize: none;
-	white-space: pre-wrap;
-	width: 100%;
-}
-
-.editor:focus {
-	border: 0.15rem solid #c82829;
 }
 
-.preview-generated {
-	height: 65rem;
-	width: 100%;
+#editor {
+	height: 40rem;
 }
 
-.preview-generated svg {
-	max-height: 100%;
+#preview-generated svg {
+	max-height: 40rem;
 }
 
-.error {
-	color: #c82829;
-	padding: 0 1rem;
+#preview-error:empty {
+	display: none;
 }