Commit 3674d8b2 authored by Jeff Sturek's avatar Jeff Sturek
Browse files

Merge branch 'optimize-images' into 'master'

Optimize search form background image

See merge request iim/UNL_Search!21
parents 63d22514 4cd9e65c
......@@ -10,36 +10,77 @@
// TODO: update search form to use app sub-theme
#searchform {
background: #38431b url(../images/050419.jpg) 50% 50% no-repeat;
background-size: cover;
text-align: center;
.search-bg {
background-image: url('../images/search-bg-640.jpg');
@media (min-width: 640px) { background-image: url('../images/search-bg-960.jpg'); }
@media (min-width: 960px) { background-image: url('../images/search-bg-1280.jpg'); }
@media (min-width: 1280px) { background-image: url('../images/search-bg-1920.jpg'); }
@media (min-width: 1920px) { background-image: url('../images/search-bg-2560.jpg'); }
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
background-image: url('../images/search-bg-1280.jpg');
@media (min-width: 640px) { background-image: url('../images/search-bg-1920.jpg'); }
@media (min-width: 960px) { background-image: url('../images/search-bg-2560.jpg'); }
}
}
.webp .search-bg {
background-image: url('../images/search-bg-640.webp');
@media (min-width: 640px) { background-image: url('../images/search-bg-960.webp'); }
@media (min-width: 960px) { background-image: url('../images/search-bg-1280.webp'); }
@media (min-width: 1280px) { background-image: url('../images/search-bg-1920.webp'); }
@media (min-width: 1920px) { background-image: url('../images/search-bg-2560.webp'); }
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
background-image: url('../images/search-bg-1280.webp');
@media (min-width: 640px) { background-image: url('../images/search-bg-1920.webp'); }
@media (min-width: 960px) { background-image: url('../images/search-bg-2560.webp'); }
}
}
#searchform .dcf-input-group {
margin: 0 auto;
max-width: 30em!important;
}
.result-tab li + li::before {
content: '\b7'; // middle-dot + space
padding-left: .43em;
padding-right: .43em;
}
.result-tab li.selected a {
color: #2e2e2d;
}
.search-results {
opacity: 0;
transition: opacity 400ms;
}
.search-results.active {
opacity: 1;
}
.search-results h3,
.google-search {
display: none;
......@@ -57,29 +98,35 @@
display: none;
}
#ppl_results .ppl_Sresult,
#ppl_results .dep_result {
margin-bottom: 1.77em;
}
#ppl_results .overflow > .recordDetails {
align-self: center;
flex: 1 1 auto;
}
#ppl_results .overflow .roles li {
margin-bottom: .32em;
}
#ppl_results .overflow .roles:last-child {
margin-bottom: 0;
}
#ppl_results .overflow .roles .title,
#ppl_results .overflow .roles .organization-unit {
display: block;
}
#ppl_results .given-name {
font-size: 1rem;
margin-left: 1em;
......
<div id="searchform" class="dcf-bleed dcf-p-6">
<form action="./" method="get" class="dcf-wrapper">
<div class="dcf-bleed dcf-wrapper dcf-pt-7 dcf-pb-7 dcf-txt-center dcf-bg-center dcf-bg-no-repeat dcf-bg-cover unl-bg-darker-gray search-bg" id="searchform">
<form action="./" method="get">
<div class="dcf-input-group">
<input type="text" name="q" id="search_q" aria-label="Search Query" placeholder="e.g., Herbert Husker, Ph.D." />
<span class="wdn-input-group-btn"><button class="button" type="submit"><span class="wdn-icon-search" aria-hidden="true"></span><span class="dcf-sr-only">Search</span></button></span>
<button class="button" type="submit"><span class="wdn-icon-search" aria-hidden="true"></span><span class="dcf-sr-only">Search</span></button>
</div>
<?php if (!empty($local_results)): ?>
<input type="hidden" name="u" value="<?php echo htmlentities($_GET['u'], ENT_QUOTES) ?>" />
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment