style: minor changes

hugomods · Oct 25, 2024 · 8e2e295 · 8e2e295
1 parent 4b09871
commit 8e2e295
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 8 deletions.
diff --git a/assets/search/js/renderer.ts b/assets/search/js/renderer.ts
@@ -62,6 +62,10 @@ export default class Renderer {
     }
 
     icon(page) {
+        return page.kind in params.icons ? params.icons[page.kind] : params.icons.page
+    }
+
+    img(page) {
         if (page.img) {
             let h = ''
             let w = ''
@@ -74,7 +78,7 @@ export default class Renderer {
             return `<img class="search-result-img" src="${page.img}"${w}${h} />`
         }
 
-        return page.kind in params.icons ? params.icons[page.kind] : params.icons.page
+        return ''
     }
 
     url(page, url): string {
@@ -357,6 +361,7 @@ export default class Renderer {
     <div class="search-result-title">${this.title(result)}</div>
     ${this.desc(result)}
   </div>
+  ${this.img(result.item)}
   <div class="search-result-meta">
     <span class="search-result-score">${this.score(result.score)}</span>
     <span class="search-result-lang">${result.item.lang}</span>

diff --git a/assets/search/scss/_result.scss b/assets/search/scss/_result.scss
@@ -1,20 +1,28 @@
 .search-result-icon {
-    margin-right: 0.5rem;
+    margin: 0.25rem 0.5rem 0 0;
 
     svg {
         vertical-align: middle;
     }
 }
 
 .search-result-img {
-    height: 64px;
-    width: auto;
+    width: 86px;
+    height: 48px;
+    object-fit: cover;
+
+    @media (max-width: 576px) {
+        width: 100%;
+        height: 120px;
+        order: 1;
+        margin-top: .25rem;
+    }
 }
 
 .search-result-content {
     display: flex;
     flex: 1;
-    margin: 0 2rem 0.125rem 0;
+    margin: 0 0 0.125rem 0;
     flex-flow: column nowrap;
     overflow: hidden;
 }
@@ -25,14 +33,13 @@
 
 .search-result-desc,
 .search-result-meta {
-    font-size: 0.75rem;
+    font-size: 0.95rem;
     color: var(--search-result-color-secondary);
 }
 
 .search-result-title,
 .search-result-desc {
     overflow: hidden;
-    white-space: nowrap;
     text-overflow: ellipsis;
 
     mark {
@@ -115,6 +122,14 @@
     white-space: normal;
 }
 
+.search-result-action-meta {
+    opacity: .75;
+
+    &:hover {
+        opacity: 1;
+    }
+}
+
 .search-results {
     margin-bottom: 0.5rem;
 
@@ -135,7 +150,7 @@
     text-decoration: none;
     display: flex;
     flex-wrap: wrap;
-    align-items: center;
+    align-items: start;
     margin: 0.5rem 0 0;
     padding: 0.5rem;
     position: relative;