styling for alert

app/static/css/partials/_about.scss

@@ -103,8 +103,18 @@
         display: block;
     }
   }
+
+  .alert {
+    @media screen and (min-width: 800px) {
+      width: 50%;
+    }
+  }
 }
 
 .accordion-checkbox:checked + .accordion-content {
   display: block; 
-} 
+}
+
+.alert {
+  padding: var(--spacing) 0;
+}

app/static/css/partials/_contact.scss

@@ -48,6 +48,7 @@
     display: block;
     background-size: 400% 100%;
     animation: background_animation 60s ease-in-out infinite, text_animation 60s ease-in-out infinite;
+    cursor: pointer;
   }
 
 }

app/static/js/about.js

@@ -53,5 +53,5 @@ document.getElementById('contact-form').addEventListener('submit', async functio
         success = false
     }
     const thanksMsg = success ? 'Thanks for your message 謝謝您的訊息' : 'Failed to send message. Try again later.'
-    document.getElementById('contact-container').innerHTML = thanksMsg
+    document.getElementById('contact-container').innerHTML = `<div class="alert">${thanksMsg}</div>`
 })