change css

dzonidoo · Sep 13, 2023 · 30c2365 · 30c2365
1 parent 16e292f
commit 30c2365
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 18 deletions.
diff --git a/assets/styles/tips-content.scss b/assets/styles/tips-content.scss
@@ -27,22 +27,16 @@
         @extend .advanced-search__content-description-text;
     }
 
-    div:nth-child(2) {
-        em {
-            color: #51831C;
-        }
+    .operator-and {
+        color: #51831C;
     }
 
-    div:nth-child(4) {
-        em {
-            color: #00658A;
-        }
+    .operator-or {
+        color: #00658A;
     }
 
-    div:nth-child(6) {
-        em {
-            color: #BC3434;
-        }
+    .operator-not {
+        color: #BC3434;
     }
 
     hr {

diff --git a/newsroom/templates/search_tips_advanced.html b/newsroom/templates/search_tips_advanced.html
@@ -5,32 +5,32 @@
     <div>
         <p><b>All of these:</b></p>
         <ul>
-            <li>This is the classic <em>"AND"</em> operator</li>
+            <li>This is the classic <em class="operator-and">"AND"</em> operator</li>
             <li>Every word you include must be present in the results</li>
             <li>This is a more restrictive search type</li>
         </ul>
-        <pre>Example: Apples Pear = Apples <em>AND</em> Pear</pre>
+        <pre>Example: Apples Pear = Apples <em class="operator-and">AND</em> Pear</pre>
     </div>
     <hr />
     <div>
         <p><b>Any of these:</b></p>
         <ul>
-            <li>This is the classic <em>"OR"</em> operator</li>
+            <li>This is the classic <em class="operator-or">"OR"</em> operator</li>
             <li>Not every word you include needs to be present in the results</li>
             <li>This is the broadest search type</li>
         </ul>
-        <pre>Example: Apples Pear = Apples <em>OR</em> Pear</pre>
+        <pre>Example: Apples Pear = Apples <em class="operator-or">OR</em> Pear</pre>
     </div>
     <hr />
     <div>
         <p><b>None of these:</b></p>
         <ul>
-            <li>This is the classic <em>"NOT"</em> operator</li>
+            <li>This is the classic <em class="operator-not">"NOT"</em> operator</li>
             <li>Every word you include must not be present in the results</li>
             <li>This is the most restrictive search type</li>
             <li>Use this in combination with other keywords and other search input fields to narrow search results</li>
         </ul>
-        <pre>Example: Apples Pear = <em>NOT</em> Apples <em>NOT</em> Pear</pre>
+        <pre>Example: Apples Pear = <em class="operator-not">NOT</em> Apples <em class="operator-not">NOT</em> Pear</pre>
     </div>
     <hr />
     <div>