fix(related questions): use CSS to mark unanswered questions instead of hacking into html and js

views/pug/mixins/_formatText.pug

@@ -27,9 +27,6 @@ mixin spansChecker(spans)
     //- handle italic text
     - else if (!!span.modifiers.italic)
       em.text__span-italic= span.text
-    //- handle highlight text
-    - else if (span.modifiers.highlight)
-      span.text__span-highlight= span.text
     //- regular plain text
     - else 
       span.text__span-plain= span.text 

views/pug/pages/answers.pug

@@ -41,4 +41,4 @@ block content
       ul.related__questions 
         each question in data.relatedQuestions
           li.related__question-item: a.related__question-link.answers__link(href=question.url)
-            +spansChecker([{text: question.url.slice(0, 12) == '/unanswered/' ? "[Unanswered] " : " ", modifiers: {highlight: true}}, ...question.text[0].spans])
+            +spansChecker(question.text[0].spans)

views/sass/_components.scss

@@ -441,6 +441,11 @@
   &__question-item {
     font-weight: 500;
   }
+
+  &__question-link[href^="/unanswered/"]::before {
+    content: '[Unanswered] ';
+    color: var(--clr-base-text-alt-alpha);
+  }
 }
 
 ////////////////////////////////////////////////////////

views/sass/_layouts.scss

@@ -314,9 +314,6 @@
   &__span-italic {
     font-style: italic;
   }
-  &__span-highlight {
-	color: var(--clr-focus);
-}
 
   &__span-link,
   &__link {