Add version number back into About window

Author: 1j01

index.html

@@ -79,7 +79,8 @@
 		<h1 id="about-paint-header">
 			<img src="images/icons/32x32.png" width="32" height="32" id="paint-32x32" alt="" />
 			<span id="jspaint-project-name">JS Paint</span>
-			<!-- <small id="jspaint-version" title="expect bugs!">Alpha</small> -->
+			<small id="jspaint-version"
+				title="About time to increment the version number, don't you think?">v1.0.0+</small>
 			<button id="view-project-news">What's New?</button>
 		</h1>
 

styles/layout.css

@@ -967,19 +967,25 @@ input[type="radio"] + label::before {
 #about-paint-header {
 	display: flex;
 	flex-direction: row;
+	flex-wrap: wrap;
 	margin: 0;
 	margin-top: 30px;
 	margin-bottom: 10px;
+	line-height: 30px;
 }
 #jspaint-project-name {
 	margin-left: 10px;
 	margin-right: 8px;
 	white-space: nowrap;
 }
 #jspaint-version {
-	/* @TODO: separate into a shared.css? (not really layout!) */
-	font-size: 0.6em;
-	color: #7b7b7b;
+	/* @TODO: separate some of this into a shared.css? (not all layout!) */
+	font-size: 0.7em;
+	font-weight: normal;
+	vertical-align: bottom;
+	/* limited by Bubblegum theme's layout FYI */
+	margin-left: 2px;
+	display: inline-block;
 }
 #maybe-outdated-line {
 	font-style: italic;

styles/layout.rtl.css

@@ -967,19 +967,25 @@ input[type="radio"] + label::before {
 #about-paint-header {
 	display: flex;
 	flex-direction: row;
+	flex-wrap: wrap;
 	margin: 0;
 	margin-top: 30px;
 	margin-bottom: 10px;
+	line-height: 30px;
 }
 #jspaint-project-name {
 	margin-right: 10px;
 	margin-left: 8px;
 	white-space: nowrap;
 }
 #jspaint-version {
-	/* @TODO: separate into a shared.css? (not really layout!) */
-	font-size: 0.6em;
-	color: #7b7b7b;
+	/* @TODO: separate some of this into a shared.css? (not all layout!) */
+	font-size: 0.7em;
+	font-weight: normal;
+	vertical-align: bottom;
+	/* limited by Bubblegum theme's layout FYI */
+	margin-right: 2px;
+	display: inline-block;
 }
 #maybe-outdated-line {
 	font-style: italic;