Add descriptive class names for flexsearch result items

assets/js/index.js

@@ -144,10 +144,12 @@ Source:
 
         const title = document.createElement('span');
         title.textContent = doc.title;
+        title.classList.add("suggestion__title");
         a.appendChild(title);
 
         const description = document.createElement('span');
         description.textContent = doc.description;
+        description.classList.add("suggestion__description");
         a.appendChild(description);
 
         suggestions.appendChild(entry);

assets/scss/components/_search.scss

@@ -43,12 +43,12 @@
   font-size: $font-size-base;
 }
 
-#suggestions span:first-child {
+.suggestion__title {
   font-weight: $headings-font-weight;
   color: $black;
 }
 
-#suggestions span:nth-child(2) {
+.suggestion__description {
   color: $gray-700;
 }
 
@@ -61,7 +61,7 @@
     display: flex;
   }
 
-  #suggestions span:first-child {
+  .suggestion__title {
     width: 9rem;
     padding-right: 1rem;
     border-right: 1px solid $gray-200;
@@ -69,7 +69,7 @@
     text-align: right;
   }
 
-  #suggestions span:nth-child(2) {
+  .suggestion__description {
     width: 19rem;
     padding-left: 1rem;
   }