From 877331e8a4ec827def9a9c2fac13133bfe109549 Mon Sep 17 00:00:00 2001
From: Ayo <ayo@ayco.io>
Date: Thu, 2 Apr 2026 17:16:34 +0200
Subject: [PATCH] style: app title text sizes

---
 src/minesweeper.css | 11 +++++++++--
 src/minesweeper.js  |  6 +++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/minesweeper.css b/src/minesweeper.css
index c8b7f5c..c78315b 100644
--- a/src/minesweeper.css
+++ b/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 {
diff --git a/src/minesweeper.js b/src/minesweeper.js
index 59a180c..6db83df 100644
--- a/src/minesweeper.js
+++ b/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'
     }