<html> <!---- © hunterthemes.tumblr.com | Page #14 - Directory (dark) * Do not redistribute this page and claim it as your own. * Do not remove the credit or move it to another page. * Minor changes to this page are allowed. ----> <!-- GOOGLE FONTS --> <link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Rozha+One" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Nova+Slim" rel="stylesheet"> <style type="text/css"> /* CSS */ /*-- GENERAL --*/ body { margin: 0; padding: 0; width: 100%; height: 100%; color: #eeeeee; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; background-color: #111111; background-image:url(); background-attachment: fixed; background-repeat: no-repeat; background-size:cover; } /* Headings */ h1{ color: #fff; max-width:100px; font-family: Baumans; font-size: 20px; line-height: 30px; padding:5px 10px; border-bottom: 1px solid #000; text-align:right; } h2{ font-family:Helvetica, Arial, sans-serif; font-size: 11px; line-height: 13px; } /* Links */ a { color: #444444; text-decoration: none; } a:hover { text-decoration: none; color: #eee; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } /* Bold and italic */ b, strong {color: #222222;} i, em {color: #bbbbbb;} /* Tumblr controls */ iframe.tmblr-iframe { top:2px!important; right:40px!important; opacity:0.8; transform:scale(0.6); transform-origin:100% 0; -webkit-transform:scale(0.8); -webkit-transform-origin:100% 0; -o-transform:scale(0.8); -o-transform-origin:100% 0; -moz-transform:scale(0.8); -moz-transform-origin:100% 0; -ms-transform:scale(0.8); -ms-transform-origin:100% 0; z-index:100000!important; filter:invert(100%) hue-rotate(180deg); -webkit-filter:invert(100%) hue-rotate(180deg); -moz-filter:invert(100%) hue-rotate(180deg); -o-filter:invert(100%) hue-rotate(180deg); -ms-filter:invert(100%) hue-rotate(180deg); } iframe.tmblr-iframe:hover { opacity:1!important;} /*-- Webkit scrollbar --*/ ::-webkit-scrollbar { width: 9px; height: 0px; } ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment { height: 0px; display: block; background-color: #000000; } ::-webkit-scrollbar-track-piece { background-color: #000000; } ::-webkit-scrollbar-thumb:vertical { height: 0px; background-color: #ddd; border: 4px solid #000000; } /*-- TOOLTIPS --*/ #s-m-t-tooltip { margin:24px 14px 7px 12px; padding: 5px; max-width: 250px; color: #222; background: #000000; border: 1px solid #222; font-size: 12px; line-height: 15px; z-index: 100000; } /* Fix */ iframe, img, embed, object, video { max-width: 100%; border: none; } input, textarea, select, a { outline: none; } /*------ MENU -----*/ #menu{ position:fixed; top:0; left:0; width:100%; height:45px; background:#000000; border-bottom:1px solid #222222; z-index:100; } /* Blog title */ #blogtitle{ margin-top:0px; margin-left:200px; width:210px; font-family:"Exo"; font-size:25px; line-height:45px; color:#ffffff; letter-spacing:1px; text-align:center; z-index:10000; } /*------ SIDEBAR -----*/ #sidebar{ position:fixed; top:0; left:0; width:230px; height:100%; background:#000000; border-right:1px solid #222222; z-index:100; } .triangle1{ position:absolute; margin:0; width: 0; height: 0; border-style: solid; border-width: 0 230px 200px 0; /* triangle background */ border-color:transparent #B2DDC1 transparent transparent; z-index:1; } #avatar{ position:absolute; margin-top:65px; margin-left:60px; width:100px; height:100px; border:2px solid #FCCBAD; border-radius:100%; z-index:10; overflow:hidden; } #avatar img{ width:100%; height:100%; border-radius:100%; } #avatar img:hover { -webkit-transition: all .7s ease; -moz-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease; -ms-transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.2); } /*-- Main icons --*/ #mainicons{ position:absolute; margin-left:40px; bottom:10px; width:150px; height:20px; padding-top:10px; border-top:1px solid #ddd; text-align:center; } /* Main icons */ #mainicons span{ margin-top:10px; margin-left:5px; margin-right:5px; width:20px; height:25px; font-size:17px; text-align:center; color:#B2DDC1; } #mainicons span:hover{ color:#FCCBAD; -webkit-transition: all .7s ease; -moz-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease; } /* -------- SORTING CONTENT ------- */ /* Sort box style */ #sorting{ margin-top:190px; margin-left:30px; width:170px; max-height: -moz-calc(100% - 250px); max-height: -webkit-calc(100% - 250px); max-height: -o-calc(100% - 250px); max-height: calc(100% - 250px); overflow-y:auto; } #sorting ul { margin:0px; width:170px; padding:0px; list-style: none; } /* Sorting titles */ #titleone, #titletwo, #titlethree{ margin-bottom:15px; height:25px; line-height:30px; font-size:15px; color:#ffffff; cursor:pointer; text-align:center; } .sdivider{ margin:auto; width:30px; height:3px; background:#FCCBAD; } #titleone:hover, #titletwo:hover, #titlethree:hover{ color:#FCCBAD; } #titleone:hover .tdivider, #titletwo:hover .tdivider, #titlethree:hover .tdivider{ width:70px; } #linkboxone, #linkboxtwo, #linkboxthree{ display:none; } /* Sorting links */ #sorting a { display:block; margin-left:15px; width:125px; padding:5px; color:#bbbbbb; font-size:12px; text-align:center; } #sorting li a.selected { color:#FCCBAD; } #sorting a:hover { color:#FCCBAD; } /*------ CONTAINER -----*/ #container{ margin-left:250px; top:60px; width: -moz-calc(100% - 250px); width: -webkit-calc(100% - 250px); width: -o-calc(100% - 250px); width:: calc(100% - 250px); height:auto; z-index:10; } /* Entries */ .story{ width:230px; margin:15px; -moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; } /* Entries */ #entry{ width:250px; height:auto; font-size:12px; background:#000000; border:1px solid #222222; } /* Images */ #entry img{ width:250px; height:auto; } /* Titles */ #entry h1{ color: #ffffff; margin:0; font-family:"Exo"; font-size: 20px; line-height: 20px; padding:10px; background:#000000; text-align:left; } /* Title divider */ .tdivider{ margin-left:10px; width:50px; height:3px; background:#B2DDC1; } /* Info */ .info{ margin-top:0px; margin-left:-1px; width:230px; padding:10px; color:#bbbbbb; font-size:12px; line-height:18px; text-align:justify; } .info-text{ max-height:200px; overflow-y:auto; } #entry:hover{ border:1px solid #222222; -moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; } .etags{ margin-top:10px; border-top:1px solid #222222; padding-top:5px; color:#FCCBAD; } .etags b{ color:#B2DDC1; } /*-- PAGE CREDIT --*/ #credit { position:fixed; right:10px; top:8px; width:30px; z-index:10000; } /* END CSS */ {CustomCSS} </style> </head> <meta charset="utf-8"> <title>{Title}</title> <link rel="shortcut icon" href="{Favicon}"> <link rel="alternate" type="application/rss+xml" href="{RSS}"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- HTML --> <body> <div id="menu"> <div id="blogtitle">Page #14</div> </div> <!--End menu--> <div id="sidebar"> <div class="triangle1"></div> <div id="avatar"><img src="http://i.imgur.com/gzwmImF.png"></div> <div id="mainicons"> <a href="/" title="Index"><span class="sf sf-home-o"></span></a> <a href="/ask" title="Ask"><span class="sf sf-envelope-2-o"></span></a> <a href="/submit" title="Submit"><span class="sf sf-paperclip-o"></span></a> <a href="/archive" title="Archive"><span class="sf sf-clock-3-o"></span></a> </div> <!--End mainicons--> <!-- These are the filter links. Don't change ".story" tag because it refreshes the page --> <div id="sorting"> <ul id="filters" class="option-set clearfix" data-option-key="filter"> <!-- Replace .tag1, .tag2 etc with names of the tags that you want to add --> <div id="titleone"> Title one <div class="sdivider"></div></div> <div id="linkboxone"> <li><a href="#filter" data-option-filter=".tag1"> #tag1 </a></li> <li><a href="#filter" data-option-filter=".tag2"> #tag2 </a></li> <li><a href="#filter" data-option-filter=".tag3"> #tag3 </a></li> <li><a href="#filter" data-option-filter=".tag4"> #tag4 </a></li> <li><a href="#filter" data-option-filter=".tag5"> #tag5 </a></li> </div> <!--End linkboxone--> <div id="titletwo"> Title two <div class="sdivider"></div></div> <div id="linkboxtwo"> <li><a href="#filter" data-option-filter=".tag6"> #tag6 </a></li> <li><a href="#filter" data-option-filter=".tag7"> #tag7 </a></li> <li><a href="#filter" data-option-filter=".tag8"> #tag8 </a></li> <li><a href="#filter" data-option-filter=".tag9"> #tag9 </a></li> <li><a href="#filter" data-option-filter=".tag10"> #tag10 </a></li> </div> <!--End linkboxtwo--> <div id="titlethree"> Title three <div class="sdivider"></div></div> <div id="linkboxthree"> <li><a href="#filter" data-option-filter=".tag11"> #tag11 </a></li> <li><a href="#filter" data-option-filter=".tag12"> #tag12 </a></li> <li><a href="#filter" data-option-filter=".tag13"> #tag13 </a></li> <li><a href="#filter" data-option-filter=".tag14"> #tag14 </a></li> <li><a href="#filter" data-option-filter=".tag15"> #tag15 </a></li> </div> <!--End linkboxthree--> <li><a href="#filter" data-option-filter=".story"> All tags </a></li> </ul> </div> <!--End sorting--> </div> <!--End sidebar--> <!-- Container --> <div id="container" class="clearfix"> <!--- Replace tag1, tag2 etc. with the tags you've previously chosen and added to filter links ---> <div id="entry" class="story tag1 tag2"> <!--You can insert image here--> <img src="https://68.media.tumblr.com/10b29c807491889b42dedaa008dcbcbe/tumblr_owc6s1Bs8Y1uo5urho3_r1_400.png"></a> <h1>Title</h1> <div class="tdivider"></div> <div class="info"> <div class="info-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. </div> <!--End info-text--> <div class="etags"> <b> label </b> <br> #tag, #tag, #tag </div> <!--End etags --> </div> <!--End info--> </div> <!--End entry--> <div id="entry" class="story tag2 tag3"> <!--You can insert image here--> <img src="https://68.media.tumblr.com/10b29c807491889b42dedaa008dcbcbe/tumblr_owc6s1Bs8Y1uo5urho3_r1_400.png"></a> <h1>Title</h1> <div class="tdivider"></div> <div class="info"> <div class="info-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. </div> <!--End info-text--> <div class="etags"> <b> label </b> <br> #tag, #tag, #tag </div> <!--End etags --> </div> <!--End info--> </div> <!--End entry--> <div id="entry" class="story tag3 tag4"> <!--You can insert image here--> <img src="https://68.media.tumblr.com/10b29c807491889b42dedaa008dcbcbe/tumblr_owc6s1Bs8Y1uo5urho3_r1_400.png"></a> <h1>Title</h1> <div class="tdivider"></div> <div class="info"> <div class="info-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. </div> <!--End info-text--> <div class="etags"> <b> label </b> <br> #tag, #tag, #tag </div> <!--End etags --> </div> <!--End info--> </div> <!--End entry--> <div id="entry" class="story tag4 tag5"> <!--You can insert image here--> <img src="https://68.media.tumblr.com/10b29c807491889b42dedaa008dcbcbe/tumblr_owc6s1Bs8Y1uo5urho3_r1_400.png"></a> <h1>Title</h1> <div class="tdivider"></div> <div class="info"> <div class="info-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. </div> <!--End info-text--> <div class="etags"> <b> label </b> <br> #tag, #tag, #tag </div> <!--End etags --> </div> <!--End info--> </div> <!--End entry--> <div id="entry" class="story tag5 tag6"> <!--You can insert image here--> <img src="https://68.media.tumblr.com/10b29c807491889b42dedaa008dcbcbe/tumblr_owc6s1Bs8Y1uo5urho3_r1_400.png"></a> <h1>Title</h1> <div class="tdivider"></div> <div class="info"> <div class="info-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. </div> <!--End info-text--> <div class="etags"> <b> label </b> <br> #tag, #tag, #tag </div> <!--End etags --> </div> <!--End info--> </div> <!--End entry--> <div id="entry" class="story tag1 tag2 tag3"> <!--You can insert image here--> <img src="https://68.media.tumblr.com/10b29c807491889b42dedaa008dcbcbe/tumblr_owc6s1Bs8Y1uo5urho3_r1_400.png"></a> <h1>Title</h1> <div class="tdivider"></div> <div class="info"> <div class="info-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. </div> <!--End info-text--> <div class="etags"> <b> label </b> <br> #tag, #tag, #tag </div> <!--End etags --> </div> <!--End info--> </div> <!--End entry--> <div id="entry" class="story tag4 tag5 tag6"> <!--You can insert image here--> <img src="https://68.media.tumblr.com/10b29c807491889b42dedaa008dcbcbe/tumblr_owc6s1Bs8Y1uo5urho3_r1_400.png"></a> <h1>Title</h1> <div class="tdivider"></div> <div class="info"> <div class="info-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. </div> <!--End info-text--> <div class="etags"> <b> label </b> <br> #tag, #tag, #tag </div> <!--End etags --> </div> <!--End info--> </div> <!--End entry--> <div id="entry" class="story tag1 tag2"> <!--You can insert image here--> <img src="https://68.media.tumblr.com/10b29c807491889b42dedaa008dcbcbe/tumblr_owc6s1Bs8Y1uo5urho3_r1_400.png"></a> <h1>Title</h1> <div class="tdivider"></div> <div class="info"> <div class="info-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. </div> <!--End info-text--> <div class="etags"> <b> label </b> <br> #tag, #tag, #tag </div> <!--End etags --> </div> <!--End info--> </div> <!--End entry--> <div id="entry" class="story tag1 tag2 tag3"> <!--You can insert image here--> <img src="https://68.media.tumblr.com/10b29c807491889b42dedaa008dcbcbe/tumblr_owc6s1Bs8Y1uo5urho3_r1_400.png"></a> <h1>Title</h1> <div class="tdivider"></div> <div class="info"> <div class="info-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. </div> <!--End info-text--> <div class="etags"> <b> label </b> <br> #tag, #tag, #tag </div> <!--End etags --> </div> <!--End info--> </div> <!--End entry--> <!---- To insert more entries just copy/paste the following: <div id="entry" class="story tag1 tag2 tag3"> <img src="https://68.media.tumblr.com/10b29c807491889b42dedaa008dcbcbe/tumblr_owc6s1Bs8Y1uo5urho3_r1_400.png"></a> <h1>Title</h1> <div class="tdivider"></div> <div class="info"> <div class="info-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. </div> <div class="etags"> <b> label </b> <br> #tag, #tag, #tag </div> </div> </div> ----> </div> <!--End container--> <!-- CREDIT (DO NOT REMOVE) --> <div id="credit"><a href="https://www.hunterthemes.tumblr.com"> <img src="https://66.media.tumblr.com/b29d8873c09628252057b9408a7c4a88/tumblr_plbuq65td51uo5urho1_100.png" title="theme by hunter themes"></a></div> </body> <!---------- SCRIPTS ----------> <!-- Saturnicons script --> <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet"> <!-- Jquery --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Style my tooltips script --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="jquery.style-my-tooltips.js"></script> <script type="text/javascript" src="http://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"></script> <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script> <script> (function($){ $(document).ready(function(){ $("[title]").style_my_tooltips({ tip_follows_cursor:true, tip_delay_time:200, tip_fade_speed: 300 } ); }); })(jQuery); </script> <!-- Filter scripts --> <script src="http://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script> <script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script> <script> $(function(){ var $container = $('#container'); $container.isotope({ itemSelector : '.story' }); var $optionSets = $('#sorting .option-set'), $optionLinks = $optionSets.find('a'); $optionLinks.click(function(){ var $this = $(this); // don't proceed if already selected if ( $this.hasClass('selected') ) { return false; } var $optionSet = $this.parents('.option-set'); $optionSet.find('.selected').removeClass('selected'); $this.addClass('selected'); // make option object dynamically, i.e. { filter: '.my-filter-class' } var options = {}, key = $optionSet.attr('data-option-key'), value = $this.attr('data-option-filter'); // parse 'false' as false boolean value = value === 'false' ? false : value; options[ key ] = value; if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) { // changes in layout modes need extra logic changeLayoutMode( $this, options ) } else { // otherwise, apply new options $container.isotope( options ); } return false; }); }); </script> <!-- Hide/show on click --> <script> $(document).ready(function(){ $("#titleone").click(function(){ $("#linkboxone").slideToggle(300); }); $("#titletwo").click(function(){ $("#linkboxtwo").slideToggle(300); }); $("#titlethree").click(function(){ $("#linkboxthree").slideToggle(300); }); }); </script> </html> <!-- END HTML -->