page 10 - visage

<!DOCTYPE html>

<!--

VISAGE page (10) by PEACHTHMS | peachthms.tumblr.com
V1.0

- do not claim this page or any of the code as your own
- do not redistribute this page or any of the code as your own
- do not mix my code with another theme maker's code
- do not remove or edit the credit in anyway; it must remain visible in the code and on the page

saturnthms - icon font

TO EDIT FILTERS

1. Find <ul class="filters">

    <li="filter" data-filter="filtername">filter name</li>

    Change the data-filter value between the quotation marks, " " to a single word you wish to use for your filter.

    E.G.
    <li class="filter" data-filter="pink">pink</li>


2. Find the corresponding img with

    <img class="icon" src="#">

    Add your matching filter after icon between the quotation marks, " ". Make sure that you do not delete icon.

    E.G.
    <img class="icon pink" src="#">

-->

<head>

<title>icons</title>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="shortcut icon" href="{Favicon}">

<link href="https://fonts.googleapis.com/css?family=Lato|Lora|Karla" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link href="https://dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">

<style type="text/css">

* {
    margin: 0;
    padding: 0;
}

::-moz-selection {
    background-color: #649587;
    color: #ffffff;
}

::selection {
    background-color: #649587;
    color: #ffffff;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-thumb {
    background: #9bc4b8;
}

::-webkit-scrollbar-track {
    background: #ffffff;
}

.tmblr-iframe-compact .tmblr-iframe--unified-controls {
    z-index: 99999999999;
    transform: scale(0.7,0.7);
    filter: invert(50%);
}

a {
    color: #9bc4b8;
    text-decoration: none;
    transition: 0.4s ease-in-out;
}

a:hover {
    color: #649587;
}

body {
    background: #ffffff;
    color: #686868;
    font-family: 'Karla', sans-serif;
    font-size: 12px;
    line-height: 1.8em;
}

#container {
    width: 100%;
    height: 100%;
}

#wrapper {
    margin: 100px auto;
    display: flex;
    justify-content: space-between;
    width: 80%;
    max-width: 800px;
}

aside {
    margin-right: 20px;
    width: 185px;
    position: fixed;
    border-left: 2px solid #9bc4b8;
}

aside h1, aside p, aside li {
    padding-left: 15px;
}

aside h1 {
    text-transform: uppercase;
}

aside p {
    width: 70%;
    margin: 10px 0;
}

aside li {
    list-style: none;
    margin: 4px 0;
    cursor: help;
}

.colours li::before {
    content: '';
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

/**
to add another colour before the filter copy and paste
make sure the div name matches the id name in the filters section

#colourname::before {
    background: colour;
}

**/

#white::before {
    background: #f1f1f1;
}

#pink::before {
    background: #febfca;
}

#blue::before {
    background: #bfe0eb;
}

#green::before {
    background: #a8f1ab;
}

#purple::before {
    background: #dba7f0;
}

.active {
    font-weight: bold;
}

.divider {
    margin: 5px 0;
    width: 80%;
    height: 2px;
    background: #9bc4b8;
}

#grid {
    margin: 0 auto 0 200px;
    padding-right: 30px;
}

#grid img {

    display: inline-block;
}

#grid img {
    margin: 0 15px 15px 0;
    width: 60px;
    border-radius: 4px;
    transition: 0.4s ease-in-out;
}

#grid img:hover {
    filter: grayscale(0.7);
}

.credit {
    position: fixed;
    bottom: 10px;
    left: 17px;
    font-size: 14px;
}

.credit a {
    font-weight: normal;
}

.credit span {
    padding: 6px 9px;
    font-size: 10px;
    background: #9bc4b8;
    color: #ffffff;
    border-radius: 6px;
    opacity: 0;
    transition-duration: 0.5s;
}

.credit:hover span {
    margin-left: 15px;
    opacity: 1;
}

.credit:before {
    content: '\e2b0';
    font-family: 'saturnicons';
}

.credit:hover:before {
    color: #9bc4b8;
}

</style>

</head>

<body>

<section id="container">

<div id="wrapper">

    <aside>
        <h1>icon page</h1>

        <p>all icons were made by <a href="http://peachthms.tumblr.com">@peachthms</a>.</p>

        <div class="divider"></div>

        <ul class="filters">
            <li class="active" data-filter="icon">all icons</li>
            <li data-filter="femme">femme</li>
            <li data-filter="homme">homme</li>
            <li data-filter="faceless">faceless</li>
            <li data-filter="flora">flora</li>
        </ul>

        <div class="divider"></div>

        <ul class="filters colours">
            <li id="white" data-filter="white">white</li>
            <li id="pink" data-filter="pink">pink</li>
            <li id="blue" data-filter="blue">blue</li>
            <li id="green" data-filter="green">green</li>
            <li id="purple" data-filter="purple">purple</li>
            <!-- to add another colour copy and paste
            <li id="colourname" data-filter="filtername">filter name</li>
            -->
        </ul>
    </aside>

    <div id="grid">

        <!-- to add another icon copy and paste
        <img class="icon" src="#"></div>
        change # to your icon url and add in your filters after "icon
        -->

        <img class="icon filter1 filter2" src="https://placehold.it/100x100">

    </div>

</div>
</section>

<div class="credit"><a href="http://peachthms.tumblr.com"><span>page by peachthms</span></a></div>

<script>
var $item = $("#grid img");
var $filter = $(".filters li").on("click", function() {
    var active =
        $filter.removeClass("active").filter(this).addClass("active").data("filter");
        $item.hide().filter( "." + active ).fadeIn(500);
});
</script>

</body>

</html>