on master help sign in
Increased selectors for non-inheritance on search
496199eMatilde Park
sass/_main.scss+8−2
@@ -115,18 +115,24 @@ body.essay {
115 max-width: 95vw;
115 max-width: 95vw;
116 }
116 }
117 &:not(.bg-white) {
117 &:not(.bg-white) {
118− * {
118+ *:not(.search-overlay, nav span) {
119 color: inherit;
119 color: inherit;
120 }
120 }
121 p a {
121 p a {
122 border-bottom: 1px solid;
122 border-bottom: 1px solid;
123 }
123 }
124 nav span, nav a:not(.section) {
124 nav span, nav a:not(.section) {
125− color: rgba(125,125,125,0.4);
125+ color: rgba(175,175,175,0.4);
126 }
126 }
127 nav a.section {
127 nav a.section {
128 color: inherit;
128 color: inherit;
129 }
129 }
130+ // We want the search to not inherit the colors from custom styles
131+ // on essays. Thus, *very selective styles*.
132+ .search-overlay, #search-results ul.search-results__items li a,
133+ #search-results ul.search-results__items li span {
134+ color: black;
135+ }
130 }
136 }
131 img {
137 img {
132 display: block;
138 display: block;
templates/partials/search-overlay.html+2−2
@@ -1,10 +1,10 @@
1{% block content %}
1{% block content %}
2−<nav id="search-overlay" class="search-overlay fixed w-100 full b-transparent z-999 dn">
2+<nav id="search-overlay" class="search-overlay black fixed w-100 full b-transparent z-999 dn">
3 <div class="wrapper">
3 <div class="wrapper">
4 <div id="search-window" class="pop-up">
4 <div id="search-window" class="pop-up">
5 <div class="search-bar pa0 bw0 z-1 di items-center flex w-100">
5 <div class="search-bar pa0 bw0 z-1 di items-center flex w-100">
6 <span class="header__search-icon ml3 absolute z-1 f5 gray3">⚲</span>
6 <span class="header__search-icon ml3 absolute z-1 f5 gray3">⚲</span>
7− <form id="search-form" class="w-100"><input id="search" autocomplete="off" type="search" class="search-bar__input bw0" placeholder="Go to..."></form>
7+ <form id="search-form" class="w-100"><input id="search" autocomplete="off" type="search" class="search-bar__input bw0 black" placeholder="Go to..."></form>
8 <a id="search-reset" class="f6 pr3 gray3 no-underline pointer:hover">&#57503;</a>
8 <a id="search-reset" class="f6 pr3 gray3 no-underline pointer:hover">&#57503;</a>
9 </div>
9 </div>
10 <div id="search-results" class="search-results bt-1 b-gray3 w-100">
10 <div id="search-results" class="search-results bt-1 b-gray3 w-100">