From 98a2dc9d50e1b851a22090473f39edca1546091e Mon Sep 17 00:00:00 2001 From: Ritchie Cunningham Date: Sat, 23 Aug 2025 17:13:26 +0100 Subject: [PATCH] Fix score visibility on some devices Thanks TayTay. --- dist/index.html | 10 ++++++---- dist/style.css | 38 ++++++++++++++++++-------------------- 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/dist/index.html b/dist/index.html index ef98d0b..bfb42c1 100644 --- a/dist/index.html +++ b/dist/index.html @@ -7,11 +7,13 @@ -
-

Score: 0

- -
+
+
+

Score: 0

+ +
+
Slap Me
diff --git a/dist/style.css b/dist/style.css index 2bcbe38..be9fb78 100644 --- a/dist/style.css +++ b/dist/style.css @@ -1,26 +1,24 @@ body { display: flex; flex-direction: column; - justify-content: center; align-items: center; - height: 100vh; margin: 0; background-color: #121212; - overflow: hidden; /* Hide the hand when it's off-screen. */ } #main-container { display: flex; - align-items: flex-start; + flex-direction: column; + align-items: center; } #slap-container { position: relative; - margin-right: 20px; } #slap-image { - width: 400px; + width: 100%; + max-width: 400px; height: auto; border: 2px solid #f0f0f0; border-radius: 10px; @@ -49,13 +47,16 @@ body { color: #FFD700; /* Gold. */ font-size: 36px; text-shadow: 2px 2px 4px #000000; - text-align: center; margin-bottom: 20px; } +#score-actions { + display: flex; + align-items: center; + justify-content: center; +} + #save-score { - display: block; - margin: 10px auto 0; padding: 10px 20px; border: 2px solid #FFD700; border-radius: 5px; @@ -64,6 +65,7 @@ body { font-size: 18px; cursor: pointer; transition: all 0.2s ease-in-out; + margin-left: 20px; } #save-score:hover { @@ -76,6 +78,7 @@ body { background-color: rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 10px; + margin-top: 20px; } #modal-overlay { @@ -146,13 +149,8 @@ body { } @media (max-width: 768px) { - #main-container { - flex-direction: column; - align-items: center; - } - #slap-image { - width: 80vw; /* 80% of the viewport width. */ + width: 80vw; } #leaderboard-container { @@ -161,12 +159,12 @@ body { overflow-y: auto; } - #save-score { - padding: 15px 30px; - font-size: 24px; - } - #score-container { font-size: 24px; } + + #save-score { + padding: 10px 15px; + font-size: 18px; + } }