There are no notes for this item.
<div class="container">
<div class="listing">
<form>
<div class="listing__searchBar">
<div class="listing__searchField">
<label class="sr-only" for="search">Search the website</label>
<input class="" type="search" placeholder="Search using keywords (CSS tips, Amazon EC2)">
</div>
<div class="submit">
<input type="submit" class="button listing__searchButton" value="Search">
</div>
</div>
<div class="listing__filters">
<label class="toggleButton listing__filter">
<input class="toggleButton__checkbox" type="checkbox">
<span class="toggleButton__label">case study</span>
</label>
<label class="toggleButton listing__filter">
<input class="toggleButton__checkbox" type="checkbox">
<span class="toggleButton__label">event</span>
</label>
<label class="toggleButton listing__filter">
<input class="toggleButton__checkbox" type="checkbox">
<span class="toggleButton__label">infographic</span>
</label>
<label class="toggleButton listing__filter">
<input class="toggleButton__checkbox" type="checkbox">
<span class="toggleButton__label">video</span>
</label>
<label class="toggleButton listing__filter">
<input class="toggleButton__checkbox" type="checkbox">
<span class="toggleButton__label">white paper</span>
</label>
</div>
</form>
<p class="listing__resultSummary">
Showing results 1–10 for <strong>responsive design</strong>
</p>
<ul class="listing__results">
<li class="listing__result">
<h2 class="listing__resultTitle">
<a href="">Responsive Web Design roundup for 2016 | Imarc </a>
</h2>
<a class="listing__resultMeta" href="">http://imarc.com/blog/responsive-web-design</a>
<div class="listing__resultDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta obcaecati voluptatem facere alias nisi sint aliquid a deserunt nostrum explicabo. Ipsa dicta possimus ipsam dignissimos culpa maiores amet eaque! Natus.
</p>
</div>
</li>
<li class="listing__result">
<h2 class="listing__resultTitle">
<a href="">Top 3 Pitfalls of Responsive Web Design | Imarc </a>
</h2>
<a class="listing__resultMeta" href="">http://imarc.com/blog/pitfalls-responsive-web-design</a>
<div class="listing__resultDescription">
<p>
Consectetur adipisicing elit. Soluta obcaecati voluptatem facere alias nisi sint aliquid a deserunt nostrum explicabo. Ipsa dicta possimus ipsam dignissimos culpa maiores amet.
</p>
</div>
</li>
<li class="listing__result">
<h2 class="listing__resultTitle">
<a href="">Responsive Web Design roundup for 2016 | Imarc </a>
</h2>
<a class="listing__resultMeta" href="">http://imarc.com/blog/responsive-web-design</a>
<div class="listing__resultDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta obcaecati voluptatem facere alias nisi sint aliquid a deserunt nostrum explicabo. Ipsa dicta possimus ipsam dignissimos culpa maiores amet eaque! Natus.
</p>
</div>
</li>
<li class="listing__result">
<h2 class="listing__resultTitle">
<a href="">Top 3 Pitfalls of Responsive Web Design | Imarc </a>
</h2>
<a class="listing__resultMeta" href="">http://imarc.com/blog/pitfalls-responsive-web-design</a>
<div class="listing__resultDescription">
<p>
Consectetur adipisicing elit. Soluta obcaecati voluptatem facere alias nisi sint aliquid a deserunt nostrum explicabo. Ipsa dicta possimus ipsam dignissimos culpa maiores amet.
</p>
</div>
</li>
<li class="listing__result">
<h2 class="listing__resultTitle">
<a href="">Responsive Web Design roundup for 2016 | Imarc </a>
</h2>
<a class="listing__resultMeta" href="">http://imarc.com/blog/responsive-web-design</a>
<div class="listing__resultDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta obcaecati voluptatem facere alias nisi sint aliquid a deserunt nostrum explicabo. Ipsa dicta possimus ipsam dignissimos culpa maiores amet eaque! Natus.
</p>
</div>
</li>
<li class="listing__result">
<h2 class="listing__resultTitle">
<a href="">Top 3 Pitfalls of Responsive Web Design | Imarc </a>
</h2>
<a class="listing__resultMeta" href="">http://imarc.com/blog/pitfalls-responsive-web-design</a>
<div class="listing__resultDescription">
<p>
Consectetur adipisicing elit. Soluta obcaecati voluptatem facere alias nisi sint aliquid a deserunt nostrum explicabo. Ipsa dicta possimus ipsam dignissimos culpa maiores amet.
</p>
</div>
</li>
<li class="listing__result">
<h2 class="listing__resultTitle">
<a href="">Responsive Web Design roundup for 2016 | Imarc </a>
</h2>
<a class="listing__resultMeta" href="">http://imarc.com/blog/responsive-web-design</a>
<div class="listing__resultDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta obcaecati voluptatem facere alias nisi sint aliquid a deserunt nostrum explicabo. Ipsa dicta possimus ipsam dignissimos culpa maiores amet eaque! Natus.
</p>
</div>
</li>
<li class="listing__result">
<h2 class="listing__resultTitle">
<a href="">Top 3 Pitfalls of Responsive Web Design | Imarc </a>
</h2>
<a class="listing__resultMeta" href="">http://imarc.com/blog/pitfalls-responsive-web-design</a>
<div class="listing__resultDescription">
<p>
Consectetur adipisicing elit. Soluta obcaecati voluptatem facere alias nisi sint aliquid a deserunt nostrum explicabo. Ipsa dicta possimus ipsam dignissimos culpa maiores amet.
</p>
</div>
</li>
<li class="listing__result">
<h2 class="listing__resultTitle">
<a href="">Responsive Web Design roundup for 2016 | Imarc </a>
</h2>
<a class="listing__resultMeta" href="">http://imarc.com/blog/responsive-web-design</a>
<div class="listing__resultDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta obcaecati voluptatem facere alias nisi sint aliquid a deserunt nostrum explicabo. Ipsa dicta possimus ipsam dignissimos culpa maiores amet eaque! Natus.
</p>
</div>
</li>
<li class="listing__result">
<h2 class="listing__resultTitle">
<a href="">Top 3 Pitfalls of Responsive Web Design | Imarc </a>
</h2>
<a class="listing__resultMeta" href="">http://imarc.com/blog/pitfalls-responsive-web-design</a>
<div class="listing__resultDescription">
<p>
Consectetur adipisicing elit. Soluta obcaecati voluptatem facere alias nisi sint aliquid a deserunt nostrum explicabo. Ipsa dicta possimus ipsam dignissimos culpa maiores amet.
</p>
</div>
</li>
</ul>
</div>
</div>
///
/// LISTING shows a listing of entries. It includes an optional search form with filters.
/// Remove the search form elements for a simple list.
///
@mixin listing() {
margin-bottom: 2rem;
&__searchBar {
display: flex;
margin-bottom: 1rem;
}
&__searchField {
flex-grow: 1;
}
&__searchButton {
flex-basis: 120px;
flex-grow: 0;
height: 100%;
}
&__filters {
margin-bottom: 2rem;
}
&__results {
list-style: none;
padding: 0;
margin: 0;
}
&__result {
border-top: 4px solid $border;
margin-bottom: 0;
padding: 2rem 0;
}
&__resultTitle {
margin-bottom: .25rem;
}
&__resultMeta {
display: block;
font-size: 0.9rem;
margin-bottom: 1rem;
}
&__resultDescription {
p:last-child {
margin-bottom: 0;
}
}
}