Improve plain <p> message styling

diff --git a/errors/404.html b/errors/404.html
index 514cab62f48ef026c870047f8090e1d1126c67de..292af366770a86664b9db33121b7209d43317540 100644 (file)
--- a/errors/404.html
+++ b/errors/404.html
@@ -48,7 +48,7 @@
 
   <main>
     <div class="skeleton-line"></div>
-    <p hidden>The page you requested does not exist.</p>
+    <p class="message" hidden>The page you requested does not exist.</p>
 
     <a href="/">
       <svg role="img" aria-labelledby="home" width="24" height="24" viewBox="0 0 24 24">

diff --git a/script.js b/script.js
index 306ad52cc366b476b8ca6bc08ecd585d684b9fcb..6cda4742dd993961a3aac2f8c458e7087cb856aa 100644 (file)
--- a/script.js
+++ b/script.js
@@ -108,8 +108,7 @@ function buildHomeComponent(metadata) {
   home.classList.add('card-container');
 
   if (metadata.size === 0) {
-    home.insertAdjacentHTML('beforeend', 
-      `<p>No results found.</p>`);
+    home.insertAdjacentHTML('beforeend', `<p class="message">No results found.</p>`);
     return home;
   }
 

diff --git a/style.css b/style.css
index 2271f9216b384059a0759b5f95c77bf1ae804bfb..6b7ccdf1ad75487e92aa46306796211eb292a3e8 100644 (file)
--- a/style.css
+++ b/style.css
@@ -359,6 +359,12 @@ td {
   background: hsl(30deg 80% 90%);
 }
 
+.message {
+  text-align: center;
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+
 .post {
   inline-size: min(100% - 2rem, 1440px);
   margin-inline: auto;