Fix some issues revealed by sonarwhal

https://sonarwhal.com/

docs/_includes/footer.html

@@ -9,7 +9,7 @@
         </nav>
         <div class="col-6@xs col-12@sm">
           {% if page.photoCredit != false %}
-            <p class="site-footer__credit">Photos by the amazing people on <a href="https://unsplash.com/collections/1008516/shuffle-images" target="_blank">Unsplash.com</a>.</p>
+            <p class="site-footer__credit">Photos by the amazing people on <a href="https://unsplash.com/collections/1008516/shuffle-images" target="_blank" rel="noopener">Unsplash.com</a>.</p>
           {% endif %}
         </div>
       </div>

docs/_includes/picture-item.html

@@ -24,7 +24,7 @@
     </div>
     {% endif %}
     <div class="picture-item__details">
-      <figcaption class="picture-item__title"><a href="{{ item.source }}" target="_blank">{{ item.title }}</a></figcaption>
+      <figcaption class="picture-item__title"><a href="{{ item.source }}" target="_blank" rel="noopener">{{ item.title }}</a></figcaption>
       <p class="picture-item__tags hidden@xs">{{ item.groups | join: ', ' }}</p>
     </div>
     {% if item.type == 'large' or item.type == 'tall' %}

docs/_includes/scripts.html

@@ -22,5 +22,5 @@
 {% endif %}
 
 {% if site.environment == "production" %}
-<script>(function(G,o,O,g,l){G.GoogleAnalyticsObject=O;G[O]||(G[O]=function(){(G[O].q=G[O].q||[]).push(arguments)});G[O].l=+new Date;g=o.createElement('script'),l=o.scripts[0];g.src='//www.google-analytics.com/analytics.js';l.parentNode.insertBefore(g,l)}(this,document,'ga'));ga('create','UA-39355642-1','vestride.github.io');ga('send','pageview')</script>
+<script>(function(G,o,O,g,l){G.GoogleAnalyticsObject=O;G[O]||(G[O]=function(){(G[O].q=G[O].q||[]).push(arguments)});G[O].l=+new Date;g=o.createElement('script'),l=o.scripts[0];g.src='https://www.google-analytics.com/analytics.js';l.parentNode.insertBefore(g,l)}(this,document,'ga'));ga('create','UA-39355642-1','vestride.github.io');ga('send','pageview')</script>
 {% endif %}

docs/_posts/2013-06-19-adding-removing.html

@@ -84,8 +84,8 @@ photoCredit: false
   <div class="row">
     <div class="col-12@sm">
 
-      <div>
+      <fieldset class="filters-group">
-        <p class="filter-label">Sort</p>
+        <legend class="filter-label">Sort</legend>
         <div class="btn-group" id="sorter">
           <label class="btn active">
             <input type="radio" name="sort-value" value="dom" /> DOM Order
@@ -97,7 +97,7 @@ photoCredit: false
             <input type="radio" name="sort-value" value="least-reviews" /> Least Reviews
           </label>
         </div>
-      </div>
+      </fieldset>
 
       <div>
         <br>

docs/_posts/2013-07-16-faq.html

@@ -27,7 +27,7 @@ extraJS: [ "faq.js" ]
     <article id="spaces" class="col-12@sm question js-question">
       <div class="question__inner">
         <h3 class="question__title">Why Does Shuffle leave empty spaces?</h3>
-        <p class="question__answer">The algorithm used to place items does not keep track of empty space nor try to fill them. If you require this functionality, I suggest <a target="_blank" href="http://packery.metafizzy.co/">packery</a>.</p>
+        <p class="question__answer">The algorithm used to place items does not keep track of empty space nor try to fill them. If you require this functionality, I suggest <a target="_blank" rel="noopener" href="http://packery.metafizzy.co/">packery</a>.</p>
       </div>
     </article>
 

docs/_scss/pages/_homepage-filters.scss

@@ -2,13 +2,16 @@
 // Filters
 .filter-label {
   display: block;
+  padding: 0;
   margin-top: 0;
   margin-bottom: 4px;
   color: $gray60;
 }
 
 .filters-group {
-  margin-bottom: 4px;
+  padding: 0;
+  margin: 0 0 4px;
+  border: 0;
 }
 
 @include breakpoint(sm) {

docs/index.html

@@ -45,8 +45,8 @@ prism: true
             <button class="btn btn--primary" data-group="city">City</button>
           </div>
         </div>
-        <div class="filters-group">
+        <fieldset class="filters-group">
-          <p class="filter-label">Sort</p>
+          <legend class="filter-label">Sort</legend>
           <div class="btn-group sort-options">
             <label class="btn active">
               <input type="radio" name="sort-value" value="dom" /> Default
@@ -58,7 +58,7 @@ prism: true
               <input type="radio" name="sort-value" value="date-created" /> Date Created
             </label>
           </div>
-        </div>
+        </fieldset>
       </div>
     </div>
 
@@ -192,7 +192,7 @@ prism: true
       <div class="col-12@sm">
         <h2>Extra Features<a href="#extra-features"></a></h2>
 
-        <p>Shuffle likely will not grow much farther than the current feature set. If you need something with drag and drop, filling in gaps, more layout modes, etc., I suggest looking into <a target="_blank" href="http://packery.metafizzy.co/">packery</a> or <a target="_blank" href="http://isotope.metafizzy.co/">isotope</a>.</p>
+        <p>Shuffle likely will not grow much farther than the current feature set. If you need something with drag and drop, filling in gaps, more layout modes, etc., I suggest looking into <a target="_blank" rel="noopener" href="http://packery.metafizzy.co/">packery</a> or <a target="_blank" rel="noopener" href="http://isotope.metafizzy.co/">isotope</a>.</p>
       </div>
     </div>
   </div>
@@ -236,7 +236,7 @@ prism: true
       <div class="col-12@sm">
         <h2>Be Social<a href="#be-social"></a></h2>
         <div class="text-center">
-          <iframe src="https://ghbtns.com/github-btn.html?user=Vestride&repo=Shuffle&type=star&size=large" frameborder="0" scrolling="0" width="76px" height="30px"></iframe>
+          <iframe src="https://ghbtns.com/github-btn.html?user=Vestride&repo=Shuffle&type=star&size=large" frameborder="0" scrolling="0" width="76px" height="30px" title="Star this repository on GitHub"></iframe>
 
           <a href="https://twitter.com/share" class="twitter-share-button" data-via="Vestride" data-size="large">Tweet</a>