icons page #1: swim [UPDATED]

<!--
    - icons page #1 'swim' by sur southcodes.tumblr.com
    - modify as you please but please do not touch the credit
    - any errors? need help? have questions? let me know!
    southcodes.tumblr.com/ask
-->

<!DOCtype html>
<html>
<head>

    <title>{Title}</title>

    <link rel="shortcut icon" href="{favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">

    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>

<style type="text/css">
::-webkit-scrollbar-thumb:vertical {
    height:0px;
    background-color: #888;
    border-right:3px solid #fff;
    border-top:4px solid #fff;
    border-bottom:4px solid #fff;}
::-webkit-scrollbar {
    background-color: inherit;
    width:4px;
    height:0px;}
* {padding:0px;margin:0px;}
.tmblr-iframe {margin:10px;opacity:.7;}

body {
    font-family:'Open Sans', sans-serif;
    font-size:13px;
    color:#444;         /*text color*/
    background:#fff;
    font-weight: 400}
a {color:#8e1f1f;         /*links color*/
text-decoration:none;}
a:hover {
    color:#000;         /*links on hover color*/
}

            /*          header        */

header {
    width:100%;
    height:130px;
    background:#e2cec9;          /* header background color */
    position:relative;}
.info {position:absolute;bottom:-30px;left:200px;}

.simg{width:70px;
    height:70px;
    padding:0px;margin:0px;border-radius:4px;}
.about{display:inline-block;vertical-align: top;margin:0px 0 0 15px;}

.title {
    font-size:15px;
    font-weight:normal;
    text-transform:uppercase;
    font-weight: 700;
    color:#fff;         /*page title color*/
    text-shadow:1px 1px 3px #8e1f1f;         /*page title shadow color*/
    letter-spacing:1.2px;
}
nav {margin-top:2px;}
nav a {padding-right:15px;font-weight: 400;font-size:12px;letter-spacing: .5px;}
.desc {font-size: 13.4px;letter-spacing: .3px;margin-top:9px;}


            /*      filters      */

.filters {
    vertical-align: top;
    max-height:120px;
    overflow:scroll;
    line-height:26px;
    z-index:2;
    padding: 13px 7px 5px;
    background: rgba(255,255,255, .95); /*background color of filters bar*/
    position: -webkit-sticky;position: sticky;top: 0;}
.filtert {
    background:#e0d0d0;   /*background color of filters titles*/
    padding:2px 4px;
    margin-right:6px;
    font-weight: 600;
    color:#fff;     /*text color of filters titles*/
    text-transform: uppercase;
    letter-spacing:.5px;}

            /*      buttons     */

button {border:0px;background: transparent;font-size: inherit;margin: 0px 2px;padding:0px 3px 3px;}
button:focus {outline:0;}
.is-checked {
    border-bottom: 2px solid #e0d0d0;  /*underline in checked filter color*/
}
.button-group {margin-bottom: 13px;}

            /*      grid      */

.container {
    width:calc(115px * 6);    /* change the last number for the number of rows you want */
    margin: 100px 0 50px 200px;}

.grid {margin-top: 60px}
.grid-item {height:95px;width:95px;margin:10px;}
.grid-item img{height:95px;width:95px;}

</style>
</head>
<body>

<header>

    <aside class="info">

        <a href="/"><img class="simg" src="HEADER_IMAGE_URL"/></a>

        <div class="about">
            <h1 class="title">icons page</h1>

            <nav>
                <a href="/">home</a>
                <a href="/ask">inbox</a>
                <a href="http://tumblr.com/dashboard">dash</a>
            </nav>

            <div class="desc">description</div>
        </div>

    </aside>    <!--info-->

</header>    <!--header-->


<section class="container">


<!--

PART 1: HOW TO CUSTOMIZE FILTERS:

1) copy the group template and paste it right under     <div class="filters">   :

    <div class="button-group" data-filter-group="UNIQUE NAME HERE">
        <span class="filtert">FILTER TITLE</span>

        <button class="button is-checked" data-filter="">ALL OPTIONS</button>
        <button class="button" data-filter=".UNIQUE FILTER NAME">OPTION 1</button>
    </div>

2) change the 'UNIQUE NAME HERE' for whatever you want. only letters and no spaces (if you add more groups always choose different names). DO NOT delete the dot at the start of the word or the filters wont work

3) change the 'FILTER TITLE' and 'ALL OPTIONS' for whatever you want them to say

4) change the OPTION 1 for the name of the filter you want, then change the 'UNIQUE FILTER NAME' for a single word (no spaces) with a dot  which you will use to link each icon to each filter. repeat this step and copy paste for multiple options

should look something like this:

    <div class="button-group" data-filter-group="colors">
        <span class="filtert">filter by color</span>

        <button class="button is-checked" data-filter="">all colors</button>
        <button class="button" data-filter=".red">red hair</button>
        <button class="button" data-filter=".blue">blue hair</button>
        <button class="button" data-filter=".green">green hair</button>
    </div>


keep scrolling for the second part

-->


                    <!--    FILTERS     -->

<div class="filters">


    <div class="button-group" data-filter-group="a">
        <span class="filtert">filter title</span>

        <button class="button is-checked" data-filter="">all options</button>
        <button class="button" data-filter=".">option 1</button>
    </div>


    <div class="button-group" data-filter-group="b">
        <span class="filtert">filter title</span>

        <button class="button is-checked" data-filter="">all options</button>
        <button class="button" data-filter=".">option 1</button>
    </div>


    <div class="button-group" data-filter-group="c">
        <span class="filtert">filter title</span>

        <button class="button is-checked" data-filter="">all options</button>
        <button class="button" data-filter=".">option 1</button>
    </div>


</div><!--filters end-->


<!--

PART 2: HOW TO CUSTOMIZE ICONS

1)      TEMPLATES:

template with link

<figure class="grid-item FILTER1 FILTER2">
    <a href="LINK"><img src="IMAGE_URL"/></a>
</figure>

____________

template without link

<figure class="grid-item FILTER1 FILTER2">
    <img src="IMAGE_URL"/>
</figure>


^ choose the template you need and paste it right after     <main class="grid">
then change the 'FILTER1' to the same filter name you wrote previously (eg. 'blue' or 'green'), and the FILTER2 for whatever other filter you want that icon to have, delete it if not, remember they need to be separated with a space. change the image url and link accordingly: should look like this at the end

<figure class="grid-item blue long">
    <a href="LINK"><img src="IMAGE_URL"/></a>
</figure>


that's it! it can be quite hard to understand, so shoot me an ask if you have any issues: http://southcodes.tumblr.com/ask

-->

                    <!--    ICONS     -->

<main class="grid">


<!--template with link-->
<figure class="grid-item FILTER1 FILTER2">
    <a href="LINK"><img src="IMAGE_URL"/></a>
</figure>


<!--template without link-->
<figure class="grid-item FILTER1 FILTER2">
    <img src="IMAGE_URL"/>
</figure>


</main> <!--grid-->    <!--        END ICONS       -->

</section> <!-- container -->
<script type="text/javascript">
$(document).ready( function() {
 // init Isotope
 var $grid = $('.grid').isotope({
  itemSelector: '.grid-item'
 });
 // store filter for each group
 var filters = {};
 $('.filters').on( 'click', '.button', function() {
  var $this = $(this);
  // get group key
  var $buttonGroup = $this.parents('.button-group');
  var filterGroup = $buttonGroup.attr('data-filter-group');
  // set filter for group
  filters[ filterGroup ] = $this.attr('data-filter');
  // combine filters
  var filterValue = concatValues( filters );
  // set filter for Isotope
  $grid.isotope({ filter: filterValue });
 });
 // change is-checked class on buttons
 $('.button-group').each( function( i, buttonGroup ) {
  var $buttonGroup = $( buttonGroup );
  $buttonGroup.on( 'click', 'button', function() {
     $buttonGroup.find('.is-checked').removeClass('is-checked');
     $( this ).addClass('is-checked');
  });
 });
});
// flatten object by concatting values
function concatValues( obj ) {
 var value = '';
 for ( var prop in obj ) {
  value += obj[ prop ];
 }
 return value;
}
</script>

<script>
    $(".filters").hover(function() {
  var oldScrollPos = $(window).scrollTop();

  $(window).on('scroll.scrolldisabler', function(event) {
    $(window).scrollTop(oldScrollPos);
    event.preventDefault();
  });
}, function() {
  $(window).off('scroll.scrolldisabler');
});
 </script>

<div style="position:fixed;bottom:18px;right:18px;font-family:calibri;font-size:14.5px;line-height:18px;height:20px;text-align:center;width:20px;color:#777;letter-spacing:.7px;background:white"><a style="color:#555" href="http://southcodes.tumblr.com" title="southcodes">sc</a></div>
</body>
</html>