fix: title screen fix

assets/css/global.css

@@ -17,6 +17,7 @@ a {
 .link {
   text-decoration: none;
   color: var(--color-light);
+  font-weight: 500;
 }
 .link:hover {
   text-decoration: underline;
@@ -69,6 +70,7 @@ a {
   font-size: 1.4em;
   font-weight: 500;
   color: var(--color-dark);
+  border: 2px solid var(--color-dark);
   background-color: var(--color-light);
   border-radius: 50rem;
   padding: 0.4rem 0.8rem;

assets/css/upgrades.css

@@ -28,7 +28,7 @@
 }
 
 #upg-credits {
-  visibility: hidden;
+  display: none;
   position: absolute;
   width: 100%;
   height: 100%;
@@ -43,10 +43,9 @@
   align-items: center;
   position: absolute;
   width: 100%;
-  top: -85%;
   left: 50%;
   transform: translateX(-50%);
-  animation: 15s credits linear;
+  animation: 5s credits linear;
 }
 @keyframes credits {
   0% {
@@ -54,15 +53,15 @@
   }
 
   100% {
-    top: -85%;
+    top: 0%;
   }
 }
 
 .upg-credits-footer {
-  margin-top: 2rem;
+  margin-top: 1rem;
   text-align: center;
 }
 
-.upg-credits-inner > h2 {
+.upg-credits-play-again {
   margin-top: 2rem;
 }

index.html

@@ -59,18 +59,17 @@
       <h1 class="heading">Mood Clicker</h1>
 
       <h2>Visuals</h2>
-      <p>Upgrade icons by <b>Kirill Siukhin</b></p>
-      <p>Cuteface by <b>realexa770</b></p>
+      <span>Upgrade icons by <b>Kirill Siukhin</b></span>
+      <span>Cuteface by <b>realexa770</b></span>
 
       <h2>Music</h2>
-      <p>Background music – "Mood Not Found" by <b>Kirill Siukhin</b></p>
-      <p>Rain FX by <b>Kirill Siukhin</b></p>
+      <span>Background music – "Mood Not Found" by <b>Kirill Siukhin</b></span>
+      <span>Rain FX by <b>Kirill Siukhin</b></span>
 
       <h2>Other</h2>
-      <p>Programmed by <b>Kirill Siukhin</b></p>
+      <span>Programmed by <b>Kirill Siukhin</b></span>
 
-      <p><b>Time spent: 5 hours</b></p>
-      <button class="btn">Play again</button>
+      <button class="btn upg-credits-play-again" onclick="resetProgress()">Play again</button>
 
       <div class="upg-credits-footer">
         <p>Made with ❤️ by <a href="https://misterkirill.com" class="link">Mister Kirill</a></p>

js/game.js

@@ -138,12 +138,16 @@ function loadSave() {
   }
 }
 
+function resetProgress() {
+  localStorage.removeItem('save');
+  location.reload();
+}
+
 function onResetProgressClick() {
   if (upgSavesReset.innerText === 'Reset progress') {
     upgSavesReset.innerText = 'Reset progress (are you sure?)';
   } else {
-    localStorage.removeItem('save');
-    location.reload();
+    resetProgress();
   }
 }
 
@@ -180,7 +184,7 @@ function showCuteface() {
 
 function showCredits() {
   const credits = document.getElementById('upg-credits');
-  credits.style.visibility = 'visible';
+  credits.style.display = 'block';
 }