Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <!-----------------------------------------------------------------------
- THEME BY SAARAA @ CYANTISTS.TUMBLR.COM
- Please observe common theme sharing etiquette:
- http://cyantists.tumblr.com/terms
- Thank you.
- ------------------------------------------------------------------------>
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">
- <title>Tags</title>
- <link rel="shortcut icon" href="{Favicon}">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script><script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
- <script>$(document).ready(function(){$("[title]").style_my_tooltips({
- tip_follows_cursor:true, tip_delay_time:50, tip_fade_speed:800});});</script>
- <link href='http://static.tumblr.com/w3dcevg/VF1oa2nvw/cyantists_theme_pack.css' rel='stylesheet' type='text/css'><link href="https://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet">
- <style type="text/css">
- .name, .name:hover {
- transition:all 0.4s ease-in-out;
- -webkit-transition:all 0.4s ease-in-out;
- -o-transition:all 0.4s ease-in-out;
- -moz-transition:all 0.4s ease-in-out;
- -ms-transition:all 0.4s ease-in-out;}
- body {
- background-color:#e9d0f3;}
- ::-webkit-scrollbar {
- background:#ffffff;}
- ::-webkit-scrollbar-thumb:vertical {
- background:#df73ff;}
- ::selection {
- background:#df73ff;
- color:#ffffff;}
- ::-webkit-selection {
- background:#df73ff;
- color:#ffffff;}
- ::-moz-selection {
- background:#df73ff;
- color:#ffffff;}
- ::-o-selection {
- background:#df73ff;
- color:#ffffff;}
- body, a:link, a:active, a:visited, .button, .search, .cred:before, .clogo:before {
- color:#777777;}
- a:hover, .button:hover, .button.active, .name:hover, .clogo:after {
- color:#df73ff;}
- #s-m-t-tooltip {
- color:#ffffff;
- background:#df73ff;}
- .t, .clogo, .cred:before, .clogo:after {
- background:#ffffff;}
- .h:not(.nl):after {
- background:#777777;}
- .i {
- background:#ffffff;}
- .top {
- height:30px;
- padding:14px;}
- .top img {
- pointer-events:none;
- width:30px;}
- .right {
- display:table;}
- .name {
- display:table-cell;
- vertical-align:middle;}
- .tags {
- display:block;
- width:100%;}
- .tags a {
- display:block;
- position:relative;
- padding:12px 14px;
- border-top:1px solid #ffffff;}
- body:not(.borders) .tags a {
- padding:0px 14px 14px 34px;}
- body:not(.borders) .tags a:before {
- position:absolute;
- content:'-';
- font-size:0.7rem;
- top:0;
- left:0;
- margin:0.3em 21px;}
- body:not(.borders) .tags a:hover {
- padding-left:41px;}
- body:not(.borders) .tags a:hover:before {
- margin-left:28px;}
- body.borders .tags a:hover {
- padding-left:21px;}
- .t, .i, .clogo, .cred:before {
- border:1px solid #ffffff;}
- .borders .t, .borders .i, .borders .tags a, .borders .clogo, .borders .cred:before {
- border-color:#f0f0f0;}
- .tags {height:calc(8.4rem - 1px + 75px*6);}
- </style>
- <body>
- <!------------------------------------------------------------------
- ** LAYOUT OPTIONS
- * borders (around the topbar and tags): change <body> to
- <body class="borders">
- * rounded edges (on the topbar and tags): change <body> to
- <body class="rounded">
- * circular images: change <body> to <body class="circle">
- * three columns: change <body> to <body class="three">
- !imporant:
- * e.g. for borders and rounded edges but not circular images,
- you would have <body class="borders rounded">
- ** COLOURS: (ctrl + f + f to find and replace)
- * accent: #df73ff
- * background: #f6f6f6
- * text and links: #777777
- * topbar/tags background: #ffffff
- * borders (if you choose this layout option): #f0f0f0
- ------------------------------------------------------------------->
- <div class="topbar"><div class="t">
- <a href="/">return</a>
- <a href="/ask">ask</a>
- <div class="f buttons">
- <!-- if you don't want a line under this then change
- class="h" to class="h nl" --><span class="h">filter:</span>
- <button class="button active" category="">all</button>
- <!-- e.g. <button class="button" category=".tvshows">tv shows</button> -->
- </div>
- <!-- if you want a word other than search to appear automatically
- in the search bar then change placeholder="search" to whatever
- else you want, e.g. placeholder="filter" -->
- <input type="text" class="search" placeholder="search" />
- </div></div><div class="container"><div class="ss"></div>
- <!---------------------------- TEMPLATE ----------------------------
- <div class="float filters"><div class="i"><div class="top">
- <img src="image url" />
- <div class="right"><div class="name">
- name here
- </div></div></div><div class="tags">
- <a href="/tagged/tag">tag name</a>
- </div></div></div>
- ------------------------------------------------------------------->
- <!---------------------------- EXAMPLE ---------------------------->
- <div class="float books"><div class="i"><div class="top">
- <img src="http://imgur.com/WVYUDBi.png" />
- <div class="right"><div class="name">
- Books
- </div></div></div><div class="tags">
- <a href="tagged/harry potter">Harry Potter</a>
- <a href="/tagged/percy jackson">Percy Jackson</a>
- <a href="/tagged/the hunger games">The Hunger Games</a>
- <a href="/tagged//">---------------------</a>
- <a href="/tagged/egyptian mythology">Egyptian Mythology</a>
- <a href="/tagged/greek mythology">Greek Mythology</a>
- <a href="/tagged/norse mythology">Norse Mythology</a>
- <a href="/tagged/roman mythology">Roman Mythology</a>
- </div></div></div>
- <div class="float celebrities and stars"><div class="i"><div class="top">
- <img src="http://imgur.com/tUZrxz0.png" />
- <div class="right"><div class="name">
- Celebrities and Stars
- </div></div></div><div class="tags">
- <a href="tagged/lucy hale">Lucy Hale</a>
- <a href="/tagged/laura marano">Laura Marano</a>
- <a href="/tagged/ashley benson">Ashley Benson</a>
- <a href="/tagged/cara delevingne">Cara Delevingne</a>
- <a href="/tagged//">---------------------</a>
- <a href="/tagged/taylor swift">Taylor Swift</a>
- <a href="/tagged/emma watson">Emma Watson</a>
- <a href="/tagged/sabrina carpenter">Sabrina Carpenter</a>
- <a href="/tagged/zendaya">Zendaya</a>
- <a href="/tagged/natalie dormer">Natalie Dormer</a>
- <a href="/tagged/kristen stewart">Kristen Stewart</a>
- <a href="/tagged/shay mistchell">Shay Mistchell</a>
- <a href="/tagged/danielle campbell">Danielle Campbell</a>
- <a href="/tagged/phoebe tonkin">Phoebe Tonkin</a>
- <a href="/tagged/holland roden">Holland Roden</a>
- <a href="/tagged/nina dobrev">Nina Dobrev</a>
- <a href="/tagged/katherine mcnamara">Katherine Mcnamara</a>
- <a href="/tagged/little mix">Little Mix</a>
- </div></div></div>
- <div class="float my stories"><div class="i"><div class="top">
- <img src="http://imgur.com/jf2AzFO.png" />
- <div class="right"><div class="name">
- My Stories
- </div></div></div><div class="tags">
- <a href="tagged/learning to survive">Learning to Survive</a>
- <a href="/tagged/flawed">Flawed</a>
- <a href="/tagged/tangled in love">Tangled In Love</a>
- <a href="/tagged/viviana">Viviana</a>
- <a href="/tagged/kaelyn">Kaelyn</a>
- <a href="/tagged/ingrid">Ingrid</a>
- <a href="/tagged/kristy">Kristy</a>
- <a href="/tagged/sarah">Sarah</a>
- <a href="/tagged/taylor">Taylor</a>
- </div></div></div>
- <div class="float random"><div class="i"><div class="top">
- <img src="http://i.imgur.com/qAMLNqy.png?2" />
- <div class="right"><div class="name">
- Random
- </div></div></div><div class="tags">
- <a href="/tagged/aesthetics">Aesthetics</a>
- <a href="/tagged/art">Art</a>
- <a href="/tagged/books">Books</a>
- <a href="tagged/disney">Disney</a>
- <a href="/tagged/fantasy">Fantasy</a>
- <a href="/tagged/fashion">Fashion</a>
- <a href="/tagged/feminism">Feminism</a>
- <a href="/tagged/friends">Friends</a>
- <a href="/tagged/funny">Funny</a>
- <a href="/tagged/inspirational">Inspirational</a>
- <a href="/tagged/life">Life</a>
- <a href="/tagged/posters">Posters</a>
- <a href="/tagged/pretty">Pretty</a>
- <a href="/tagged/quotes">Quotes</a>
- <a href="/tagged/studeying">Studeying</a>
- <a href="/tagged/studying">Studying</a>
- <a href="/tagged/writing">Writing</a>
- <a href="/tagged/writing material">Writing Material</a>
- </div></div></div>
- <div class="float resources"><div class="i"><div class="top">
- <img src="http://imgur.com/4TlZK0Q.png" />
- <div class="right"><div class="name">
- Resources
- </div></div></div><div class="tags">
- <a href="/tagged/answers">Answers</a>
- <a href="/tagged/brushes">Brushes</a>
- <a href="/tagged/colours">Colours</a>
- <a href="/tagged/edit materials">Edit Materials</a>
- <a href="/tagged/fonts">Fonts</a>
- <a href="/tagged/headers">Headers</a>
- <a href="tagged/icons">Icons</a>
- <a href="/tagged/information">Information</a>
- <a href="/tagged/misc. resources">Misc. Resources</a>
- <a href="/tagged/packs">Packs</a>
- <a href="/tagged/psds">PSDs</a>
- <a href="/tagged/textures">Textures</a>
- <a href="/tagged/templates">Templates</a>
- <a href="/tagged/themes">Themes</a>
- <a href="/tagged/tutorials">Tutorials</a>
- </div></div></div>
- <div class="float tvshows"><div class="i"><div class="top">
- <img src="http://imgur.com/mehQoSc.png" />
- <div class="right"><div class="name">
- TV Shows/Movies
- </div></div></div><div class="tags">
- <a href="tagged/austin and ally">Austin and Ally</a>
- <a href="tagged/frozen">Frozen</a>
- <a href="tagged/girl meets world">Girl Meets Worldr</a>
- <a href="/tagged/girl meets world: riley">Girl Meets world: Riley</a>
- <a href="/tagged/girl meets world: maya">Girl Meets World: Maya</a>
- <a href="tagged/jessie">Jessie</a>
- <a href="tagged/mean girls">Mean Girls</a>
- <a href="/tagged/once apon a time">Once Apon A Time</a>
- <a href="tagged/pirates of the caribbean">Pirates of the Caribbean</a>
- <a href="/tagged/pretty little liars">Pretty Little Liars</a>
- <a href="/tagged/the flash">The Flash</a>
- </div></div></div>
- </div>
- <script src="http://static.tumblr.com/ycrkdqn/ZFIn8dcjx/isotope.pkgd.min.js"></script><script src="http://static.tumblr.com/ycrkdqn/epEn8dclr/isotope-docs.js"></script>
- <script>$( function() {var qsRegex;var buttonFilter;
- var $grid = $('.container').isotope({
- itemSelector: '.float', masonry: {columnWidth: '.ss'},
- transitionDuration: '0.6s', filter: function() {var $this = $(this);
- var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
- var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
- return searchResult && buttonResult;
- },});$('.f').on( 'click', 'button', function() {
- buttonFilter = $( this ).attr('category');
- console.log("Filter button click",buttonFilter); $grid.isotope();
- });var $quicksearch = $('.search').keyup( debounce( function() {
- qsRegex = new RegExp( $quicksearch.val(), 'gi' );
- console.log("Search input",qsRegex); $grid.isotope();
- }, 600 ) );$('.buttons').each( function( i, buttonGroup ) {
- var $buttonGroup = $( buttonGroup );
- $buttonGroup.on( 'click', 'button', function() {
- $buttonGroup.find('.active').removeClass('active');
- $( this ).addClass('active');
- });});});function debounce( fn, threshold ) {
- var timeout; return function debounced() {
- if ( timeout ) {clearTimeout( timeout );}
- function delayed() {fn(); timeout = null;}
- timeout = setTimeout( delayed, threshold || 100 );
- }}</script>
- <!-- PLEASE DO NOT EDIT OR DELETE -->
- <a class="cred" href="http://yearsandsyears.tumblr.com" target="_blank"><div class="clogo"></div></a>
- <!----------- THANK YOU! ----------->
- </body></html>
Add Comment
Please, Sign In to add comment