diff --git a/_layouts/default.html b/_layouts/default.html index 653ef99e50208244930bf94f9718c333dc22c1ca..fe76346d43c23b502f7105483d0b91ac1b256caf 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -19,7 +19,7 @@ <div class="main-content pb-0"> <div class="search js-search"> <div class="search-input-wrap"> - <input type="text" class="js-search-input search-input fs-2" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off"> + <input type="text" class="js-search-input search-input" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off"> <svg width="14" height="14" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="search-icon"><title>Search</title><g fill-rule="nonzero"><path d="M17.332 20.735c-5.537 0-10-4.6-10-10.247 0-5.646 4.463-10.247 10-10.247 5.536 0 10 4.601 10 10.247s-4.464 10.247-10 10.247zm0-4c3.3 0 6-2.783 6-6.247 0-3.463-2.7-6.247-6-6.247s-6 2.784-6 6.247c0 3.464 2.7 6.247 6 6.247z"/><path d="M11.672 13.791L.192 25.271 3.02 28.1 14.5 16.62z"/></g></svg> </div> <div class="js-search-results search-results-wrap"></div> diff --git a/_sass/search.scss b/_sass/search.scss index b57aa6e3c641cc67211e646a80af55f632a3f118..7037080661b29ecb2b12377dd9f639e4fbd58fcc 100644 --- a/_sass/search.scss +++ b/_sass/search.scss @@ -7,10 +7,11 @@ z-index: 99; display: none; flex-grow: 1; - padding-bottom: $gutter-spacing / 2; - background-color: $white; padding: $sp-2; margin-bottom: $sp-3; + background-color: $white; + border-radius: 3px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 3px 10px rgba(0, 0, 0, 0.05); @include mq(md) { display: block; @@ -20,6 +21,7 @@ padding-left: 0; margin-bottom: 0; background-color: transparent; + box-shadow: none; } &.nav-open { @@ -65,6 +67,16 @@ fill: $purple-000; } } + + @include fs-5; + + @include mq(sm) { + @include fs-3; + } + + @include mq(md) { + @include fs-2; + } } .search-icon {