Refactor CSS styling

assets/search.html

@@ -3,16 +3,14 @@
 {{define "content"}}
 {{if .Query}}
     {{if .Results}}
-    <h2 class="muted search-summary">{{len .Results}} match{{if ne (len .Results) 1}}es{{end}} for &ldquo;{{.Query}}&rdquo;</h2>
+    <p class="muted">{{len .Results}} match{{if ne (len .Results) 1}}es{{end}} for &ldquo;{{.Query}}&rdquo;</p>
-    <div class="search-results">
+    {{range .Results}}
-        {{range .Results}}
+    <article class="search-card">
-        <article class="search-card">
+        <a href="{{.URL}}">{{.Name}}</a>
-            <a class="search-card-name" href="{{.URL}}">{{.Name}}</a>
+        <div class="muted">/{{.Path}}</div>
-            <div class="search-card-path muted">/{{.Path}}</div>
+        {{if .Snippet}}<div>{{.Snippet}}</div>{{end}}
-            {{if .Snippet}}<div class="search-card-snippet">{{.Snippet}}</div>{{end}}
+    </article>
-        </article>
+    {{end}}
-        {{end}}
-    </div>
     {{else}}
     <p class="empty">No matches for &ldquo;{{.Query}}&rdquo;.</p>
     {{end}}

assets/style.css

@@ -379,41 +379,25 @@ textarea {
 .search-input:focus {
     border-color: var(--primary-hover);
 }
-.search-summary {
-    margin-bottom: 1rem;
-}
-.search-results {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
 .search-card {
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
     padding-bottom: 1rem;
+    margin-bottom: 1rem;
     border-bottom: 1px dashed var(--secondary);
+    word-break: break-word;
 }
 .search-card:last-child {
     border-bottom: none;
 }
-.search-card-name {
+.search-card a {
     color: var(--link);
     font-size: 1.1rem;
-    word-break: break-word;
 }
-.search-card-name:hover {
+.search-card a:hover {
     color: var(--link-hover);
 }
-.search-card-path {
-    word-break: break-all;
-}
-.search-card-snippet {
-    font-size: 0.9rem;
-    line-height: 1.5;
-    color: var(--text-muted);
-    margin-top: 0.25rem;
-}
 
 /* === Muted text === */
 .muted {