revamp 02 // electra

<!DOCTYPE html>
<head>

<!-- ELECTRA by @venusthms / @leejordan

-------------------------------------------------------------------------

    - do no redistribute any part of this theme or remove the credit
    - terms of use: venusthms.tumblr.com/terms

    - masonry & filter tutorial @cyantists
    - more credits https://venusthms.tumblr.com/credits

------------------------------------------------------------------------>

<title>members</title><link rel="shortcut icon" href="{Favicon}"><!--tab title-->

<!---- Scripts: no need to edit ---->
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet"><link href="//dl.dropbox.com/s/7donh9k4jonbmw5/venus.css" rel="stylesheet"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script><script src="//dl.dropbox.com/s/qxwy3ik34kqna5q/venus.js"></script><script src="//dl.dropbox.com/s/ykrvbtp0cbz250a/button.js"></script>

<link href="http://static.tumblr.com/4gatuv1/X8Poxwvz8/style-my-tooltips.css" rel="stylesheet" type="text/css" /><script src="http://static.tumblr.com/4gatuv1/Aneoxwvz8/jquery.style-my-tooltips.js"></script><script>!function(t){t(document).ready(function(){t("a[title]").style_my_tooltips({tip_follows_cursor:!0,tip_delay_time:200,tip_fade_speed:300})})}(jQuery);</script>

<script src="https://static.tumblr.com/xd6ujov/9Rpouml9f/imagesloaded.pkgd.min.js"></script><script src="//venusthms.github.io/pages/masonry.js"></script>

<script>$(document).ready(function(){
var $grid = $(".grid"); $grid.imagesLoaded(function() {
   $grid.masonry({
       itemSelector: ".item",
       columnWidth: 270, /* needs to be 20 more than item width */
       horizontalOrder: true,
       fitWidth: true
   })
});
  $(".button").click(function(){
   $(this).addClass("selected");
   $(".button").not($(this)).removeClass("selected");
   var ssf = $(this).attr("filter");
   $(".item." + ssf).show();
   $(".item").not("." + ssf).hide();
   $grid.masonry();
});
});</script>


<style type="text/css">

/* adjustments */
:root {
  --background: #fff;
  --text: #333!important;
  --accent-bg: #fafafa;
  --borders: #f6f6f6;
  --accent: #e6bbc3;

  --font: 'Karla';
  --font-size: 12px!important;

  --sidebar-width: 20vw; /*use vw, not px*/
  --item-icon-size: 50px;
}

/* tumblr controls */
iframe.tmblr-iframe {
    z-index:99999999999999!important;
    top:0!important;
    right:0!important;
    opacity:0.4;
    /* delete invert(1) from here */
        filter:invert(1) contrast(150%);
        -webkit-filter:invert(1) contrast(150%);
        -o-filter:invert(1) contrast(150%);
        -moz-filter:invert(1) contrast(150%);
        -ms-filter:invert(1) contrast(150%);
    /* to here if your blog has a dark background */
    transform:scale(0.65);
    transform-origin:100% 0;
    -webkit-transform:scale(0.65);
    -webkit-transform-origin:100% 0;
    -o-transform:scale(0.65);
    -o-transform-origin:100% 0;
    -moz-transform:scale(0.65);
    -moz-transform-origin:100% 0;
    -ms-transform:scale(0.65);
    -ms-transform-origin:100% 0;}

iframe.tmblr-iframe:hover {
    opacity:0.6!important;}

/* borders */
aside {border-right: 1px solid var(--borders)}
.item {border: 1px solid var(--borders)}

/* border radius */
.item,.icon img, .left img {border-radius:5px}

/* titles */
aside h1 {font-size:1.25em}
.title h1 {font-size:1.1em}

/* filters */
.button.selected {box-shadow:0 -5px 0 var(--accent) inset} /* selected filter */
.button:hover {box-shadow:0 -5px 0 var(--accent) inset} /* filter on hover */

/* items */

/* if you want to change the width of the item, you need to adjust the width in the script at the top (search for columnwidth and see note there)  */
.item {width: 250px;height:auto;padding:10px}

.item a, .right a {color: var(--accent)} /* in text links */
.item a:hover, .right a:hover {color: var(--text)} /* in text links on hover */

</style>
<link href="//dl.dropbox.com/s/y9x0ka1bc6838ky/style.css" rel="stylesheet">
</head>

<body>

<!----- sidebar starts ----->
<aside>

<!--- title --->
<h1>Title</h1>

<!--- icon --->
<!--- if you don't want your icon, change {PortraitURL-96} to an image URL --->
<!--- if you don't want an image: delete from here --->
<div class="sb-content">
<div class="left">
<img src="{PortraitURL-96}" />
</div>
<!--- to here --->

<!--- description --->
<!--- put between <span> and </span> --->
<div class="right">

<span>Description here. Looks better if it's at least two lines.</span>

</div>
</div>

<!--- links --->
<div class="links">
    <a href="/">Index</a>
    <a href="/ask">Contact</a>
    <a href="/">Link</a>
    <a href="/">Link</a>
    <a href="#" class="filter-button">Filter</a>
</div>

<!--- filter --->
<!--- <div class="button" filter="FILTERNAME">name that will be seen</div> --->
<div class="filters">
<div class="button selected" filter="item">Everything</div>
<div class="button" filter="filter1">Filter one</div>
<div class="button" filter="filter2">Filter two</div>
<div class="button" filter="filter3">Filter three</div>
</div>

</aside>
<!----- sidebar ends ----->

<!----- grid starts ----->
<div class="content">
<div class="grid">

<!--- item starts --->
<!--- put filter name (from above) after item --->
<!--- <div class="button" filter="FILTERNAME">Filter....</div> --->
<div class="item filternamehere">

<!--- icon --->
<div class="icon">
    <img src="https://i.imgur.com/qz8ZVzN.png" />
</div>

<div class="title">
    <h1>Title</h1> <!--- title --->
    <span>subtitle <a href="/">(can be a link)</a></span> <!--- subtitle --->
</div>

<!--- description --->
<div class="text">
    Description here.
</div>

</div>
<!--- item ends --->
<!--- copy & paste as needed --->


<!----- grid ends ----->
<!----- don't edit after this line ----->
</div>
</div>

<!----- credit: do not edit or remove ----->
<a href="https://venusthms.tumblr.com/" title="venusthms">
<div class="venus-icon"></div>
</a>
</body>
</html>