style: app title text sizes

src/minesweeper.css

@@ -112,15 +112,22 @@ button {
 
 h1 {
   text-align: center;
-  font-size: 24px;
   font-weight: bold;
-  text-transform: uppercase;
+  font-size: 32px;
   background: -webkit-linear-gradient(90deg,#ff8a00,#e52e71);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   -moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none; -o-user-select:none;
 }
 
+h1 span {
+  text-transform: uppercase;
+}
+
+h1 sup {
+  font-size: small
+}
+
 /** mobile **/
 @media only screen and (max-width: 823px) {
   #grid tr td {

src/minesweeper.js

@@ -80,7 +80,7 @@ export const Minesweeper = function(appId) {
     const headingElement = document.createElement('h1')
     const gameBoard = document.createElement('div')
 
-    headingElement.innerText = `Minesweeper v${VERSION}`
+    headingElement.innerHTML = `<span>Minesweeper</span><sup>v${VERSION}</sup>`
     gameBoard.setAttribute('id', 'game-board')
     gameBoard.append(initializeToolbar(), grid, initializeFootbar())
     if(appElement) {
@@ -270,8 +270,8 @@ export const Minesweeper = function(appId) {
     grid.setAttributeNode(gameStatus)
 
     if (appElement) {
-      appElement.style.minWidth = '260px'
-      appElement.style.width = `${grid.offsetWidth + 40}px`
+      // appElement.style.minWidth = '260px'
+      // appElement.style.width = `${grid.offsetWidth + 40}px`
       appElement.style.margin = '0 auto'
     }