From: Ardis Lu <ardisglu@gmail.com>
Date: Thu, 15 Dec 2022 05:13:40 +0000 (-0800)
Subject: Improve dialog styling
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=b5539cbbe1c35889ab9bf8eb0acaa6280958e823;p=ardislu.dev

Improve dialog styling
---

diff --git a/index.html b/index.html
index 43e2573..bb60b60 100644
--- a/index.html
+++ b/index.html
@@ -110,8 +110,10 @@
   </footer>
 
   <dialog>
-    <p>A newer version of this page is available.</p>
-    <button id="refresh">Refresh</button>
+    <div>
+      <p>A newer version of this page is available.</p>
+      <button id="refresh">Refresh</button>
+    </div>
   </dialog>
 
   <script type="module" src="/script.js"></script>
diff --git a/style.css b/style.css
index 8a755f0..791001a 100644
--- a/style.css
+++ b/style.css
@@ -273,16 +273,18 @@ dialog {
     0.1px 16px 18px -2.5px hsl(50deg 72% 69% / 0.17);
 }
 
-dialog * {
-  display: inline;
+dialog div {
+  display: flex;
+  gap: 4px;
+  align-items: center;
 }
 
-dialog > button {
+dialog div > button {
   cursor: pointer;
   text-transform: uppercase;
   font-weight: bold;
   background: hsl(216deg 100% 80%);
-  padding: 0.25rem;
+  padding: 0.75rem;
   border: 1px hsl(216deg 100% 70%) solid;
   border-radius: 0.5rem;
   transition: 0.15s;