Improve styling of docsearch box

frontend/styles/index.css

@@ -23,4 +23,30 @@
 /* Set up Tailwind imports */
 @tailwind base;
 @tailwind components;
+
+button.DocSearch.DocSearch-Button {
+  @apply h-8 w-full items-center gap-2 rounded-full bg-white pl-2 pr-3 text-sm text-zinc-500 ring-1 ring-zinc-900/10;
+  @apply transition hover:ring-zinc-900/20 lg:flex dark:bg-white/5 dark:text-zinc-400 dark:ring-inset dark:ring-white/10 dark:hover:ring-white/20;
+
+}
+
+.DocSearch-Search-Icon {
+  @apply !h-5 !w-5;
+}
+
+.DocSearch-Button-Placeholder {
+  @apply !text-sm !text-zinc-400 dark:text-zinc-500;
+}
+
+.DocSearch-Button-Keys {
+  @apply ml-auto text-2xs text-zinc-400 dark:text-zinc-500 inline-block text-right;
+
+}
+
+.DocSearch-Button-Key {
+  background: none;
+  box-shadow: none;
+  @apply font-sans m-0 p-0 w-auto inline-block;
+}
+
 @tailwind utilities;

src/_layouts/default.erb

@@ -22,15 +22,6 @@
               <div class="absolute inset-x-0 top-full h-px transition bg-zinc-900/7.5 dark:bg-white/7.5"></div>
 
               <div class="hidden lg:block lg:max-w-md lg:flex-auto" id='oba-docs-search-container'>
-                <button type="button" class="hidden h-8 w-full items-center gap-2 rounded-full bg-white pl-2 pr-3 text-sm text-zinc-500 ring-1 ring-zinc-900/10 transition hover:ring-zinc-900/20 ui-not-focus-visible:outline-none lg:flex dark:bg-white/5 dark:text-zinc-400 dark:ring-inset dark:ring-white/10 dark:hover:ring-white/20">
-                  <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" class="h-5 w-5 stroke-current">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M12.01 12a4.25 4.25 0 1 0-6.02-6 4.25 4.25 0 0 0 6.02 6Zm0 0 3.24 3.25"></path>
-                  </svg>
-                  Find something...
-                  <kbd class="ml-auto text-2xs text-zinc-400 dark:text-zinc-500">
-                    <kbd class="font-sans">⌘</kbd><kbd class="font-sans">K</kbd>
-                  </kbd>
-                </button>
               </div>
 
               <div class="flex items-center gap-5 lg:hidden">
@@ -56,8 +47,8 @@
                 <div class="hidden md:block md:h-5 md:w-px md:bg-zinc-900/10 md:dark:bg-white/15"></div>
                 <div class="flex gap-4">
                   <div class="contents lg:hidden"><button type="button" class="flex h-6 w-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 ui-not-focus-visible:outline-none lg:hidden dark:hover:bg-white/5" aria-label="Find something..."><svg viewBox="0 0 20 20" fill="none" aria-hidden="true" class="h-5 w-5 stroke-zinc-900 dark:stroke-white"><path stroke-linecap="round" stroke-linejoin="round" d="M12.01 12a4.25 4.25 0 1 0-6.02-6 4.25 4.25 0 0 0 6.02 6Zm0 0 3.24 3.25"></path></svg></button></div>
-                  <button type="button" class="flex h-6 w-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 dark:hover:bg-white/5" aria-label="Switch to dark theme"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true" class="h-5 w-5 stroke-zinc-900 dark:hidden"><path d="M12.5 10a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"></path><path stroke-linecap="round" d="M10 5.5v-1M13.182 6.818l.707-.707M14.5 10h1M13.182 13.182l.707.707M10 15.5v-1M6.11 13.889l.708-.707M4.5 10h1M6.11 6.111l.708.707"></path></svg><svg viewBox="0 0 20 20" fill="none" aria-hidden="true" class="hidden h-5 w-5 stroke-white dark:block"><path d="M15.224 11.724a5.5 5.5 0 0 1-6.949-6.949 5.5 5.5 0 1 0 6.949 6.949Z"></path></svg></button></div>
-                <div class="hidden min-[416px]:contents"><a class="inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium transition rounded-full bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-1 dark:ring-inset dark:ring-emerald-400/20 dark:hover:bg-emerald-400/10 dark:hover:text-emerald-300 dark:hover:ring-emerald-300" href="#">Sign in</a></div>
+                  <button type="button" class="flex h-6 w-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 dark:hover:bg-white/5" aria-label="Switch to dark theme"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true" class="h-5 w-5 stroke-zinc-900 dark:hidden"><path d="M12.5 10a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"></path><path stroke-linecap="round" d="M10 5.5v-1M13.182 6.818l.707-.707M14.5 10h1M13.182 13.182l.707.707M10 15.5v-1M6.11 13.889l.708-.707M4.5 10h1M6.11 6.111l.708.707"></path></svg><svg viewBox="0 0 20 20" fill="none" aria-hidden="true" class="hidden h-5 w-5 stroke-white dark:block"><path d="M15.224 11.724a5.5 5.5 0 0 1-6.949-6.949 5.5 5.5 0 1 0 6.949 6.949Z"></path></svg></button>
+                </div>
               </div>
             </div>
             <%= render 'navbar' %>
@@ -95,7 +86,7 @@
         indexName: "onebusaway-onrender",
         insights: true, // Optional, automatically send insights when user interacts with search results
         container: '#oba-docs-search-container',
-        debug: true // Set debug to true if you want to inspect the modal
+        debug: false // Set debug to true if you want to inspect the modal
       });
     </script>
   </body>

src/_partials/_head.erb

@@ -11,9 +11,9 @@
 
 <meta name="description" content="<%= metadata.description %>" />
 
-<link rel="stylesheet" href="<%= asset_path 'css' %>" />
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"/>
+<link rel="stylesheet" href="<%= asset_path 'css' %>" />
 
 <script src="<%= asset_path 'js' %>" defer></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>

src/about.md

@@ -3,4 +3,8 @@ layout: page
 title: About
 ---
 
-OneBusAway is a suite of open source transit information tools that enable transit agencies to provide real-time vehicle locations, alerts, and arrival information to riders, with iOS and Android apps, a web platform, and robust APIs, as well as back office support. OneBusAway lets your agency be in control, without needing to build everything yourselves and without cutting corners.
+OneBusAway is a suite of open source transit information tools that enable transit agencies to provide real-time vehicle locations, alerts, and arrival information to riders, with iOS and Android apps, a web platform, and robust APIs, as well as back office support. OneBusAway lets your agency be in control, without needing to build everything yourselves and without cutting corners.
+
+## A Project of the Open Transit Software Foundation
+
+The Open Transit Software Foundation (OTSF) is the organizational and legal home for the OneBusAway project. OneBusAway is a suite of open source transit information tools based on real-time vehicle data. [Learn more about OTSF at our website](https://opentransitsoftwarefoundation.org).