From 172da9e0ffbdcd04eb2e0cbe42f47e82705e2daf Mon Sep 17 00:00:00 2001
From: nahbee10 <nahee@sanctuary.computer>
Date: Wed, 6 Nov 2024 22:34:52 -0500
Subject: [PATCH] apply more

---
 assets/tailwind-output.css     | 100 +++++++++++++++++++++++++++++++--
 styles/main.css                |  17 +++++-
 templates/new_request_page.hbs |  21 +------
 templates/search_results.hbs   |  88 +++++++++++++++++++----------
 4 files changed, 169 insertions(+), 57 deletions(-)

diff --git a/assets/tailwind-output.css b/assets/tailwind-output.css
index 34ab4f2a8..e7b8a89e2 100644
--- a/assets/tailwind-output.css
+++ b/assets/tailwind-output.css
@@ -845,12 +845,12 @@ video {
   margin-top: 2rem;
 }
 
-.mt-\[1\.875rem\] {
-  margin-top: 1.875rem;
+.mt-\[1\.5rem\] {
+  margin-top: 1.5rem;
 }
 
-.mt-\[1\.94rem\] {
-  margin-top: 1.94rem;
+.mt-\[1\.875rem\] {
+  margin-top: 1.875rem;
 }
 
 .mt-margin-mobile {
@@ -1665,6 +1665,11 @@ video {
   padding-right: 1rem;
 }
 
+.px-\[1\.63rem\] {
+  padding-left: 1.63rem;
+  padding-right: 1.63rem;
+}
+
 .px-gap-large {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -3267,7 +3272,7 @@ html:has(.ArticlePage) {
   padding-right: 0.75rem !important;
 }
 
-.search.search-full {
+.search {
   width: 100%;
   flex-grow: 1;
   input {
@@ -3276,6 +3281,10 @@ html:has(.ArticlePage) {
   input {
     background-color: transparent !important;
   }
+  input {
+    --tw-text-opacity: 1;
+    color: rgb(125 125 125 / var(--tw-text-opacity));
+  }
   input {
     font-family: var(--font-basel-grotesk) !important;
     font-size: 0.875rem !important;
@@ -3291,6 +3300,61 @@ html:has(.ArticlePage) {
     outline: 2px solid transparent !important;
     outline-offset: 2px !important;
   }
+  input:where(.dark, .dark *) {
+    --tw-text-opacity: 1;
+    color: rgb(155 155 155 / var(--tw-text-opacity));
+  }
+}
+
+.filters-in-section {
+  display: flex;
+  flex-direction: column;
+}
+
+.filters-in-section > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+
+.filters-in-section {
+  .sidenav-item {
+    --tw-text-opacity: 1;
+    color: rgb(34 34 34 / var(--tw-text-opacity));
+  }
+  .sidenav-item {
+    font-family: var(--font-basel-grotesk) !important;
+    font-size: 0.875rem !important;
+    font-weight: 485 !important;
+    line-height: 1/25rem !important;
+    -webkit-font-smoothing: antialiased !important;
+    -moz-osx-font-smoothing: grayscale !important;
+  }
+  .sidenav-item:hover {
+    --tw-text-opacity: 1;
+    color: rgb(245 13 180 / var(--tw-text-opacity));
+  }
+  .sidenav-item:where(.dark, .dark *) {
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity));
+  }
+  .sidenav-item:hover:where(.dark, .dark *) {
+    --tw-text-opacity: 1;
+    color: rgb(252 116 254 / var(--tw-text-opacity));
+  }
+}
+
+.search-result-description {
+  em {
+    --tw-bg-opacity: 1;
+    background-color: rgb(252 116 254 / var(--tw-bg-opacity));
+  }
+  em {
+    padding: 1px !important;
+  }
+  em {
+    font-style: normal !important;
+  }
 }
 
 .placeholder\:text-light-pink-vibrant::-moz-placeholder {
@@ -3315,6 +3379,10 @@ html:has(.ArticlePage) {
   margin-top: 1.5rem;
 }
 
+.last\:hidden:last-child {
+  display: none;
+}
+
 .focus-within\:\!border-light-surface-3:focus-within {
   border-color: rgba(34,34,34,0.05) !important;
 }
@@ -3391,6 +3459,16 @@ html:has(.ArticlePage) {
   color: rgb(245 13 180 / var(--tw-text-opacity));
 }
 
+.hover\:text-light-neutral-1:hover {
+  --tw-text-opacity: 1;
+  color: rgb(34 34 34 / var(--tw-text-opacity));
+}
+
+.hover\:text-light-neutral-2:hover {
+  --tw-text-opacity: 1;
+  color: rgb(125 125 125 / var(--tw-text-opacity));
+}
+
 .hover\:text-light-pink-vibrant:hover {
   --tw-text-opacity: 1;
   color: rgb(245 13 180 / var(--tw-text-opacity));
@@ -3922,6 +4000,16 @@ html:has(.ArticlePage) {
   color: rgb(252 116 254 / var(--tw-text-opacity));
 }
 
+.hover\:dark\:text-dark-neutral-1:where(.dark, .dark *):hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.hover\:dark\:text-dark-neutral-2:where(.dark, .dark *):hover {
+  --tw-text-opacity: 1;
+  color: rgb(155 155 155 / var(--tw-text-opacity));
+}
+
 .group:hover .group-hover\:dark\:fill-dark-accent-1:where(.dark, .dark *) {
   fill: #FC74FE;
 }
@@ -3972,4 +4060,4 @@ html:has(.ArticlePage) {
 .dark\:data-\[active\]\:text-dark-neutral-1[data-active]:where(.dark, .dark *) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
-}
+}
\ No newline at end of file
diff --git a/styles/main.css b/styles/main.css
index 3ca2dc7be..246b17fa4 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -334,9 +334,22 @@ html:has(.ArticlePage) {
   @apply !px-3;
 }
 
-.search.search-full {
+.search {
   @apply w-full grow;
   input {
-    @apply !body-3 !bg-transparent w-full focus-visible:!border-none focus-visible:!outline-none;
+    @apply !body-3 !bg-transparent w-full focus-visible:!border-none focus-visible:!outline-none dark:text-dark-neutral-2 text-light-neutral-2;
   }
 }
+
+.filters-in-section {
+  @apply flex flex-col space-y-6;
+  .sidenav-item {
+    @apply !body-3 dark:text-dark-neutral-1 text-light-neutral-1 hover:text-light-accent-1 dark:hover:text-dark-accent-1;
+  }
+}
+
+.search-result-description {
+  em {
+    @apply bg-dark-accent-1 !p-px !not-italic;
+  }
+}
\ No newline at end of file
diff --git a/templates/new_request_page.hbs b/templates/new_request_page.hbs
index 50b81dbf8..619c1b173 100644
--- a/templates/new_request_page.hbs
+++ b/templates/new_request_page.hbs
@@ -3,7 +3,7 @@
   <div class="page-wrapper">
     <div class="mb-3 md:mb-6 flex flex-row items-center overflow-scroll col-span-4 sm:col-span-8">
       <a href="/" target="_self" class="group flex">
-        <span class="body-3 text-nowrap transition text-light-neutral-1 dark:text-dark-neutral-1 group-hover:text-light-neutral-2 group-hover:dark:text-dark-neutral-2">
+        <span class="body-3 text-nowrap transition text-light-neutral-2 dark:text-dark-neutral-2 group-hover:text-light-neutral-1 group-hover:dark:text-dark-neutral-1">
           Home
         </span>
       </a>
@@ -19,11 +19,11 @@
           fill-rule="evenodd"
           clip-rule="evenodd"
           d="M5.52827 3.52827C5.26792 3.78862 5.26792 4.21073 5.52827 4.47108L9.05687 7.99967L5.52827 11.5283C5.26792 11.7886 5.26792 12.2107 5.52827 12.4711C5.78862 12.7314 6.21073 12.7314 6.47108 12.4711L10.4711 8.47108C10.7314 8.21073 10.7314 7.78862 10.4711 7.52827L6.47108 3.52827C6.21073 3.26792 5.78862 3.26792 5.52827 3.52827Z"
-          class="fill-light-neutral-1 dark:fill-dark-neutral-1"
+          class="fill-light-neutral-2 dark:fill-dark-neutral-2"
         />
       </svg>
       <a href="#" class="group flex">
-        <span class="body-3 text-nowrap text-light-neutral-1 dark:text-dark-neutral-1 transition group-hover:text-light-neutral-2 group-hover:dark:text-dark-neutral-2">
+        <span class="body-3 text-nowrap text-light-neutral-2 dark:text-dark-neutral-2 transition group-hover:text-light-neutral-1 group-hover:dark:text-dark-neutral-1">
           Submit a Request
         </span>
       </a>
@@ -37,21 +37,6 @@
     </div>
   </div>
 </div>
-{{!-- <script type="module">
-  import { renderArticleBreadcrumbs } from "article-page";
-
-  const container = document.getElementById("new-article-breadcrumbs");
-
-  const settings = {{json settings}};
-
-
-  const articlePageData = {
-    article: {{json article}}
-  }
-
-  // Make sure arguments are correctly typed. 
-  renderArticleBreadcrumbs(settings, articlePageData, container);
-</script> --}}
 <script type="module">
   import { renderNewRequestForm } from "new-request-form";
 
diff --git a/templates/search_results.hbs b/templates/search_results.hbs
index bc2475039..6ea05b867 100644
--- a/templates/search_results.hbs
+++ b/templates/search_results.hbs
@@ -1,8 +1,8 @@
 <div class="container-divider"></div>
-<div class="container">
-  <div class="search-results flex flex-row text-light-neutral-1 dark:text-light-neutral-1">
-    <div class="min-w-[15rem] max-w-[15rem] hidden md:block border-2 mt-nav-h">
-      <aside class="search-results-sidebar">
+<div>
+  <div class="search-results flex flex-row text-light-neutral-1 dark:text-light-neutral-1 !bg-light-surface-1 dark:!bg-dark-surface-1">
+    <div class="min-w-[15rem] max-w-[15rem] mt-nav-h hidden md:block !bg-light-surface-1 dark:!bg-dark-surface-1">
+      <aside class="search-results-sidebar mt-[1.5rem] px-[1.63rem]">
         {{#if source_filters}}
           <section class="filters-in-section collapsible-sidebar">
             <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false" aria-label="{{t 'search_result_source_menu'}}">
@@ -122,8 +122,35 @@
       </aside>
     </div>
     <div class="page-wrapper">
-      <section id="main-content" class="search-results-column mt-[1.94rem]">
-        <h1 class="search-results-subheading heading-2">
+      <section id="main-content" class="search-results-column">
+        <div class="mb-3 md:mb-6 flex flex-row items-center overflow-scroll col-span-4 sm:col-span-8">
+          <a href="/" target="_self" class="group flex">
+            <span class="body-3 text-nowrap transition text-light-neutral-2 dark:text-dark-neutral-2 group-hover:text-light-neutral-1 group-hover:dark:text-dark-neutral-1">
+              Home
+            </span>
+          </a>
+          <svg
+            class="mx-0.5 min-w-4 min-h-4"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M5.52827 3.52827C5.26792 3.78862 5.26792 4.21073 5.52827 4.47108L9.05687 7.99967L5.52827 11.5283C5.26792 11.7886 5.26792 12.2107 5.52827 12.4711C5.78862 12.7314 6.21073 12.7314 6.47108 12.4711L10.4711 8.47108C10.7314 8.21073 10.7314 7.78862 10.4711 7.52827L6.47108 3.52827C6.21073 3.26792 5.78862 3.26792 5.52827 3.52827Z"
+              class="fill-light-neutral-2 dark:fill-dark-neutral-2"
+            />
+          </svg>
+          <a href="#" class="group flex">
+            <span class="body-3 text-nowrap text-light-neutral-2 dark:text-dark-neutral-2 transition group-hover:text-light-neutral-1 group-hover:dark:text-dark-neutral-1">
+              Search results
+            </span>
+          </a>
+        </div>
+        <h1 class="search-results-subheading heading-2 text-light-neutral-1 dark:text-dark-neutral-1">
           {{#if results}}
             {{#is current_filter.identifier 'unified'}}
               {{#if content_tag_filters }}
@@ -148,12 +175,11 @@
             {{/is}}
           {{/if}}
         </h1>
-        <div class="search-container my-[1.94rem]">
-          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon" aria-hidden="true">
-            <circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
-            <path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
-          </svg>
-          {{search submit=false}}
+        <div class="search-container my-[1.94rem] w-full mt-8">
+          <div class="m-auto flex flex-row space-x-2 p-3 rounded-[1.25rem] bg-light-surface-3 dark:!bg-dark-surface-3 items-center !pointer-events-auto !mt-4 border border-transparent focus-within:!border-light-surface-3 focus-within:dark:!border-dark-surface-3 focus-within:!bg-transparent focus-within:!text-light-neutral-1 focus-within:dark:!text-dark-neutral-1">
+            <h2 class="sr-only">{{ t 'search' }}</h2>
+            {{search submit=false}}
+          </div>
         </div>
         {{#if results}}
           <ul class="search-results-list">
@@ -162,7 +188,7 @@
                 <article class="flex flex-col space-y-[0.62rem]">
                   <header class="flex flex-col space-y-[0.62rem]">
                     <div class="search-result-title-container">
-                      <h2 class="search-result-title heading-3">
+                      <h2 class="search-result-title heading-3 text-light-neutral-1 dark:text-dark-neutral-1 hover:text-light-neutral-2 hover:dark:text-dark-neutral-2">
                         <a href="{{url}}" {{#if is_external}} target="_blank" {{/if}}>
                           {{title}}
                           {{#if is_external}}
@@ -211,33 +237,33 @@
                         {{#is type 'community_post'}}aria-label='{{t 'post_location_with_title' title=title}}'{{/is}}
                         {{#is type 'external_content_record'}}aria-label='{{t 'external_content_location_with_title' title=title}}'{{/is}}
                       >
-                        <ol class="breadcrumbs search-result-breadcrumbs flex flex-row">
+                        <ol class="breadcrumbs search-result-breadcrumbs flex flex-row items-center flex-wrap">
                           {{#each path_steps}}
-                            <li class="flex flex-row items-center body-3 text-light-neutral-2 dark:text-dark-neutral-2">
+                            <li class="flex flex-row items-center body-3 text-light-neutral-2 dark:text-dark-neutral-2 hover:text-light-neutral-1 hover:dark:text-dark-neutral-1 shrink-0">
                               <a href="{{url}}" target="{{target}}">{{name}}</a>
-                              <svg
-                                class="min-w-4 min-h-4"
-                                width="16"
-                                height="16"
-                                viewBox="0 0 16 16"
-                                fill="none"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  fill-rule="evenodd"
-                                  clip-rule="evenodd"
-                                  d="M5.52827 3.52827C5.26792 3.78862 5.26792 4.21073 5.52827 4.47108L9.05687 7.99967L5.52827 11.5283C5.26792 11.7886 5.26792 12.2107 5.52827 12.4711C5.78862 12.7314 6.21073 12.7314 6.47108 12.4711L10.4711 8.47108C10.7314 8.21073 10.7314 7.78862 10.4711 7.52827L6.47108 3.52827C6.21073 3.26792 5.78862 3.26792 5.52827 3.52827Z"
-                                  class="fill-light-neutral-2 dark:fill-dark-neutral-2"
-                                />
-                              </svg>
                             </li>
+                            <svg
+                              class="min-w-4 min-h-4 last:hidden shrink-0"
+                              width="16"
+                              height="16"
+                              viewBox="0 0 16 16"
+                              fill="none"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M5.52827 3.52827C5.26792 3.78862 5.26792 4.21073 5.52827 4.47108L9.05687 7.99967L5.52827 11.5283C5.26792 11.7886 5.26792 12.2107 5.52827 12.4711C5.78862 12.7314 6.21073 12.7314 6.47108 12.4711L10.4711 8.47108C10.7314 8.21073 10.7314 7.78862 10.4711 7.52827L6.47108 3.52827C6.21073 3.26792 5.78862 3.26792 5.52827 3.52827Z"
+                                class="fill-light-neutral-2 dark:fill-dark-neutral-2"
+                              />
+                            </svg>
                           {{/each}}
                         </ol>
                       </nav>
                     </div>
                   </header>
                   <p class="search-result-description body-2 dark:text-dark-neutral-1 text-light-neutral-1">{{text}}</p>
-                  <span class="meta-data body-2 text-light-neutral-2 dark:text-dark-neutral-2">{{date created_at}}</span>
+                  <span class="meta-data body-2 text-light-neutral-2 dark:text-dark-neutral-2 italic">{{date created_at}}</span>
                 </article>
               </li>
               <div class="h-px bg-light-surface-3 dark:bg-dark-surface-3 w-full my-[1.94rem]"></div>