From 872022914bcab22287e3e3c202b77fed5b07098f Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Fri, 18 Oct 2024 21:02:08 -0700
Subject: [PATCH] Improve plain <p> message styling

---
 errors/404.html | 2 +-
 script.js       | 3 +--
 style.css       | 6 ++++++
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/errors/404.html b/errors/404.html
index 514cab6..292af36 100644
--- 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 306ad52..6cda474 100644
--- 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 2271f92..6b7ccdf 100644
--- 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;
-- 
2.47.3