SASS optimizations, eliminate Complex selectors (4 or more expressions)

2 files changed, 16 insertions, 18 deletions

diff --git a/sass/abridge.scss b/sass/abridge.scss
index 655a91b..f5c69c0 100644
--- a/sass/abridge.scss
+++ b/sass/abridge.scss
@@ -446,7 +446,7 @@ $syntax: true !default;//syntax highlighting for code blocks
     color: var(--a2);
     text-decoration: underline;
   }
-  h1 a, h2 a, main nav a, header nav > div > a {
+  h1 a, h2 a, main nav a, nav > div > a {
     color: var(--f2);
     text-decoration: none;
     &:hover {
@@ -633,14 +633,21 @@ $syntax: true !default;//syntax highlighting for code blocks
 }
 @if $nav {
   //https://github.com/raj457036/attriCSS
-  main nav a,
-  main nav a:visited {//pagination link styling
+  .on,
+  .on:visited {//pagination link styling
     font-weight: var(--fh);
     border: .1rem solid var(--c4);
     border-radius: var(--br);
     padding: .1rem var(--s1);
   }
-  header nav > div > a, header i, header .dropdown {
+  .on:hover {//makes border of pagination links hover color
+    border-color: var(--a3);
+    .svgh {
+      background: var(--a3);
+      opacity: 1;
+    }
+  }
+  nav > div > a, header i, header .dropdown {
     margin-right: .2rem;
     vertical-align: middle;
     font-weight: var(--fh);
@@ -653,13 +660,6 @@ $syntax: true !default;//syntax highlighting for code blocks
   footer nav > a {
     margin: .2rem;
   }
-  main nav a:hover {//makes border of pagination links hover color
-    border-color: var(--a3);
-    .svgh {
-      background: var(--a3);
-      opacity: 1;
-    }
-  }
   header > nav > div:first-of-type {//Keep the logo from wrapping
     display: inline;
     min-width: fit-content;
@@ -961,7 +961,7 @@ $syntax: true !default;//syntax highlighting for code blocks
     margin-bottom: .25rem;
   }
   select,
-  input:not([size]):not([type="button" i]):not([type="submit" i]):not([type="reset" i]):not([type="checkbox" i]):not([type="radio" i]) {
+  input:not([size]), input:not([type="button" i]), input:not([type="submit" i]), input:not([type="reset" i]), input:not([type="checkbox" i]), input:not([type="radio" i]) {
     width: 100%;
   }
   [type="color" i] {
@@ -1057,7 +1057,7 @@ $syntax: true !default;//syntax highlighting for code blocks
   #suggestions span:nth-child(2), #results span:nth-child(2) {
     color: var(--f1);
   }
-  nav > div > form > div:last-of-type {//parent div of suggestions div
+  .results {//parent div of suggestions div
     display: block;
     position: relative;
     width: 100%;
@@ -1442,10 +1442,8 @@ $syntax: true !default;//syntax highlighting for code blocks
     color: var(--h8);
   }
   //json
-  .z-meta.z-mapping.z-key.z-json {
-    .z-punctuation.z-definition.z-string.z-begin.z-json, .z-punctuation.z-definition.z-string.z-end.z-json, .z-string.z-quoted.z-double.z-json {
-        color: var(--h4);
-    }
+  .z-key.z-json {
+    color: var(--h4);
   }
   // Figure out how to reproduce in code block otherwise don't include
   //.z-constant.z-numeric.z-line-number.z-match {
diff --git a/templates/base.html b/templates/base.html
index bcdb5ea..25994ae 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -92,7 +92,7 @@
             <input id="searchinput" type="text" placeholder="{%- if lang != config.default_language %}{{ trans(key="Search" | safe, lang=lang) }}{% else %}Search{% endif %}" title="Search"{% if config.extra.search_library %}{% if config.extra.search_library == "stork" %} data-stork="stork" {% endif %}{% endif %} />
             <button type="submit" title="Search" class="{%- if icon_search -%}{{ icon_search }}{%- else -%}si{%- endif -%}">{%- if not icon_search -%}&#8981;{%- endif -%}</button>
           </div>
-          <div><div id="suggestions"{% if config.extra.search_library %}{% if config.extra.search_library == "stork" %} data-stork="stork-output" {% endif %}{% endif %}></div></div>
+          <div class="results"><div id="suggestions"{% if config.extra.search_library %}{% if config.extra.search_library == "stork" %} data-stork="stork-output" {% endif %}{% endif %}></div></div>
         </form>
       </div>
       {%- endif %}