use .hidden class for dialog

diff --git a/index.html b/index.html
index c9e092c1ea4a04a7ded0ae9e6772b074e6d8fd86..2f029f9bf3d405ad43f86a13b2686607c82953c1 100644 (file)
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
 <link rel="stylesheet" href="style.css">
 <title>Michael D. Lowis - About Me</title>
 
-<aside id="dialog">
+<aside id="dialog" class="hidden">
     <section>
         <label>Search Title:</label><input id="search"/>
         <ul id="pages"></ul>
@@ -20,7 +20,7 @@ const loadPage = file => {
         .then(response => response.text())
         .then(data => {
             code.innerText = data;
-            dialog.style.display = "none";
+            dialog.classList.add('hidden');
         })
 };
 
@@ -39,13 +39,13 @@ const loadPage = file => {
 
     const keys = {
         "f": () => {
-            dialog.style.display = "block";
+            dialog.classList.remove('hidden');
             search.value = "";
             filterPages(true);
             search.focus();
         },
         "Escape": () => {
-            dialog.style.display = "none";
+            dialog.classList.add('hidden');
         }
     };
     document.onkeyup = ev => !keys[ev.key] || keys[ev.key](ev);

diff --git a/style.css b/style.css
index a8e312048f2e4329acc5a0264fa0d0cb2d865059..cfecf32d59ac49145d936a4d461d63076839a569 100644 (file)
--- a/style.css
+++ b/style.css
@@ -93,7 +93,7 @@ nav a {
 }
 
 aside {
-    display: none;
+    display: block;
     position: fixed;
     z-index: 1;
     left: 0;