fix search input not focusing by using transition display allow-discrete, which has been supported since 2024 apparently

Author: SheepTester

all/search/search.css

@@ -1,6 +1,4 @@
 .search-modal {
-  display: block;
-  visibility: hidden;
   border: none;
   padding: 0;
   position: fixed;
@@ -12,12 +10,10 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.8);
   opacity: 0;
-  pointer-events: none;
   /* Remove text selection on close. Should be fine without though */
-  user-select: none;
-  transition: all 0.5s;
+  transition: opacity 0.5s, display 0.5s allow-discrete;
   max-width: unset;
   max-height: unset;
 
@@ -32,10 +28,7 @@
   overflow: hidden;
 }
 .search-modal[open] {
-  visibility: visible;
   opacity: 1;
-  pointer-events: unset;
-  user-select: text;
 }
 .search-modal::backdrop {
   background: none;

all/search/start.js

@@ -10,6 +10,7 @@ import('/all/search/search.js').then(({ loadSearch }) => {
   const search = Object.assign(document.createElement('input'), {
     className: 'search',
     type: 'search',
+    name: 'q',
     placeholder: 'Search everything',
     ariaLabel: 'Search everything'
   })

home-page/index.html.scss

@@ -1056,13 +1056,6 @@ html[prefix="og: http://ogp.me/ns/website#"][lang="en"][dir="ltr"]
         z-index: 2;
         grid-area: search;
       }
-      .search-button {
-        text-align: left;
-        transition: box-shadow 0.2s;
-      }
-      .search-button:hover {
-        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
-      }
     }
     @media (min-width: 1000px) {
       .search-button-wrapper {
@@ -1071,11 +1064,37 @@ html[prefix="og: http://ogp.me/ns/website#"][lang="en"][dir="ltr"]
       }
     }
     .projects-info.search-button-wrapper {
+      css {
+        .search-button {
+          display: flex;
+          align-items: center;
+          text-align: left;
+          transition: box-shadow 0.2s;
+        }
+        .search-button:hover {
+          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
+        }
+      }
       button.search.search-button#search-button {
         content: 'Search everything';
+
+        css {
+          .search-shortcut {
+            margin-left: auto;
+            font-family: inherit;
+            border: 1px solid rgba(151, 189, 179, 0.2);
+            border-radius: 5px;
+            width: 20px;
+            display: block;
+            text-align: center;
+          }
+        }
+        kbd.search-shortcut {
+          content: '/';
+        }
       }
     }
-    dialog.search-modal#search-modal {
+    dialog.search-modal#search-modal[inert] {
       form.search-wrapper#search-form[autocomplete='off'][action='/all/search/'] {
         input.search#search[type='search'][name='q'][placeholder='Search everything'][aria-label='Search everything'] {
         }

home-page/main.js

@@ -214,15 +214,18 @@ function startSearch () {
     loadSearch(search, searchForm, suggestions)
     startedSearch = true
   }
+  searchModal.inert = false
   searchModal.showModal()
-  // search.focus()
 }
 searchButton.addEventListener('click', startSearch)
 searchModal.addEventListener('click', e => {
   if (e.target === searchModal || e.target === searchForm) {
     searchModal.close()
   }
 })
+searchModal.addEventListener('close', () => {
+  searchModal.inert = true
+})
 window.addEventListener('keydown', e => {
   if (e.target.tagName === 'INPUT') {
     return