MystiqueAquanian

My Former Tags Page (Tags page by Cyantists)

Nov 24th, 2016
73
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.94 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <!-----------------------------------------------------------------------
  4.  
  5. THEME BY SAARAA @ CYANTISTS.TUMBLR.COM
  6.  
  7. Please observe common theme sharing etiquette:
  8. http://cyantists.tumblr.com/terms
  9. Thank you.
  10.  
  11. ------------------------------------------------------------------------>
  12.  
  13. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  14. <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">
  15.  
  16. <title>Tags</title>
  17. <link rel="shortcut icon" href="{Favicon}">
  18.  
  19. <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>
  20.  
  21. <script>$(document).ready(function(){$("[title]").style_my_tooltips({
  22. tip_follows_cursor:true, tip_delay_time:50, tip_fade_speed:800});});</script>
  23.  
  24. <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">
  25.  
  26. <style type="text/css">
  27.  
  28. .name, .name:hover {
  29. transition:all 0.4s ease-in-out;
  30. -webkit-transition:all 0.4s ease-in-out;
  31. -o-transition:all 0.4s ease-in-out;
  32. -moz-transition:all 0.4s ease-in-out;
  33. -ms-transition:all 0.4s ease-in-out;}
  34.  
  35. body {
  36. background-color:#e9d0f3;}
  37.  
  38. ::-webkit-scrollbar {
  39. background:#ffffff;}
  40. ::-webkit-scrollbar-thumb:vertical {
  41. background:#df73ff;}
  42.  
  43. ::selection {
  44. background:#df73ff;
  45. color:#ffffff;}
  46. ::-webkit-selection {
  47. background:#df73ff;
  48. color:#ffffff;}
  49. ::-moz-selection {
  50. background:#df73ff;
  51. color:#ffffff;}
  52. ::-o-selection {
  53. background:#df73ff;
  54. color:#ffffff;}
  55.  
  56. body, a:link, a:active, a:visited, .button, .search, .cred:before, .clogo:before {
  57. color:#777777;}
  58. a:hover, .button:hover, .button.active, .name:hover, .clogo:after {
  59. color:#df73ff;}
  60.  
  61. #s-m-t-tooltip {
  62. color:#ffffff;
  63. background:#df73ff;}
  64.  
  65. .t, .clogo, .cred:before, .clogo:after {
  66. background:#ffffff;}
  67.  
  68. .h:not(.nl):after {
  69. background:#777777;}
  70.  
  71. .i {
  72. background:#ffffff;}
  73.  
  74. .top {
  75. height:30px;
  76. padding:14px;}
  77. .top img {
  78. pointer-events:none;
  79. width:30px;}
  80. .right {
  81. display:table;}
  82. .name {
  83. display:table-cell;
  84. vertical-align:middle;}
  85.  
  86. .tags {
  87. display:block;
  88. width:100%;}
  89. .tags a {
  90. display:block;
  91. position:relative;
  92. padding:12px 14px;
  93. border-top:1px solid #ffffff;}
  94. body:not(.borders) .tags a {
  95. padding:0px 14px 14px 34px;}
  96. body:not(.borders) .tags a:before {
  97. position:absolute;
  98. content:'-';
  99. font-size:0.7rem;
  100. top:0;
  101. left:0;
  102. margin:0.3em 21px;}
  103. body:not(.borders) .tags a:hover {
  104. padding-left:41px;}
  105. body:not(.borders) .tags a:hover:before {
  106. margin-left:28px;}
  107. body.borders .tags a:hover {
  108. padding-left:21px;}
  109.  
  110. .t, .i, .clogo, .cred:before {
  111. border:1px solid #ffffff;}
  112. .borders .t, .borders .i, .borders .tags a, .borders .clogo, .borders .cred:before {
  113. border-color:#f0f0f0;}
  114.  
  115. .tags {height:calc(8.4rem - 1px + 75px*6);}
  116.  
  117. </style>
  118.  
  119. <body>
  120.  
  121. <!------------------------------------------------------------------
  122.  
  123. ** LAYOUT OPTIONS
  124.  
  125. * borders (around the topbar and tags): change <body> to
  126. <body class="borders">
  127.  
  128. * rounded edges (on the topbar and tags): change <body> to
  129. <body class="rounded">
  130.  
  131. * circular images: change <body> to <body class="circle">
  132.  
  133. * three columns: change <body> to <body class="three">
  134.  
  135. !imporant:
  136. * e.g. for borders and rounded edges but not circular images,
  137. you would have <body class="borders rounded">
  138.  
  139. ** COLOURS: (ctrl + f + f to find and replace)
  140.  
  141. * accent: #df73ff
  142. * background: #f6f6f6
  143. * text and links: #777777
  144. * topbar/tags background: #ffffff
  145. * borders (if you choose this layout option): #f0f0f0
  146.  
  147. ------------------------------------------------------------------->
  148.  
  149. <div class="topbar"><div class="t">
  150.  
  151.  
  152. <a href="/">return</a>
  153. <a href="/ask">ask</a>
  154.  
  155. <div class="f buttons">
  156. <!-- if you don't want a line under this then change
  157. class="h" to class="h nl" --><span class="h">filter:</span>
  158. <button class="button active" category="">all</button>
  159. <!-- e.g. <button class="button" category=".tvshows">tv shows</button> -->
  160. </div>
  161.  
  162. <!-- if you want a word other than search to appear automatically
  163. in the search bar then change placeholder="search" to whatever
  164. else you want, e.g. placeholder="filter" -->
  165. <input type="text" class="search" placeholder="search" />
  166.  
  167.  
  168. </div></div><div class="container"><div class="ss"></div>
  169.  
  170. <!---------------------------- TEMPLATE ----------------------------
  171.  
  172. <div class="float filters"><div class="i"><div class="top">
  173. <img src="image url" />
  174. <div class="right"><div class="name">
  175. name here
  176. </div></div></div><div class="tags">
  177. <a href="/tagged/tag">tag name</a>
  178. </div></div></div>
  179.  
  180. ------------------------------------------------------------------->
  181.  
  182. <!---------------------------- EXAMPLE ---------------------------->
  183. <div class="float books"><div class="i"><div class="top">
  184.  
  185. <img src="http://imgur.com/WVYUDBi.png" />
  186. <div class="right"><div class="name">
  187. Books
  188. </div></div></div><div class="tags">
  189. <a href="tagged/harry potter">Harry Potter</a>
  190. <a href="/tagged/percy jackson">Percy Jackson</a>
  191. <a href="/tagged/the hunger games">The Hunger Games</a>
  192. <a href="/tagged//">---------------------</a>
  193. <a href="/tagged/egyptian mythology">Egyptian Mythology</a>
  194. <a href="/tagged/greek mythology">Greek Mythology</a>
  195. <a href="/tagged/norse mythology">Norse Mythology</a>
  196. <a href="/tagged/roman mythology">Roman Mythology</a>
  197. </div></div></div>
  198.  
  199. <div class="float celebrities and stars"><div class="i"><div class="top">
  200.  
  201. <img src="http://imgur.com/tUZrxz0.png" />
  202. <div class="right"><div class="name">
  203. Celebrities and Stars
  204. </div></div></div><div class="tags">
  205. <a href="tagged/lucy hale">Lucy Hale</a>
  206. <a href="/tagged/laura marano">Laura Marano</a>
  207. <a href="/tagged/ashley benson">Ashley Benson</a>
  208. <a href="/tagged/cara delevingne">Cara Delevingne</a>
  209. <a href="/tagged//">---------------------</a>
  210. <a href="/tagged/taylor swift">Taylor Swift</a>
  211. <a href="/tagged/emma watson">Emma Watson</a>
  212. <a href="/tagged/sabrina carpenter">Sabrina Carpenter</a>
  213. <a href="/tagged/zendaya">Zendaya</a>
  214. <a href="/tagged/natalie dormer">Natalie Dormer</a>
  215. <a href="/tagged/kristen stewart">Kristen Stewart</a>
  216. <a href="/tagged/shay mistchell">Shay Mistchell</a>
  217. <a href="/tagged/danielle campbell">Danielle Campbell</a>
  218. <a href="/tagged/phoebe tonkin">Phoebe Tonkin</a>
  219. <a href="/tagged/holland roden">Holland Roden</a>
  220. <a href="/tagged/nina dobrev">Nina Dobrev</a>
  221. <a href="/tagged/katherine mcnamara">Katherine Mcnamara</a>
  222. <a href="/tagged/little mix">Little Mix</a>
  223. </div></div></div>
  224.  
  225. <div class="float my stories"><div class="i"><div class="top">
  226.  
  227. <img src="http://imgur.com/jf2AzFO.png" />
  228. <div class="right"><div class="name">
  229. My Stories
  230. </div></div></div><div class="tags">
  231. <a href="tagged/learning to survive">Learning to Survive</a>
  232. <a href="/tagged/flawed">Flawed</a>
  233. <a href="/tagged/tangled in love">Tangled In Love</a>
  234. <a href="/tagged/viviana">Viviana</a>
  235. <a href="/tagged/kaelyn">Kaelyn</a>
  236. <a href="/tagged/ingrid">Ingrid</a>
  237. <a href="/tagged/kristy">Kristy</a>
  238. <a href="/tagged/sarah">Sarah</a>
  239. <a href="/tagged/taylor">Taylor</a>
  240. </div></div></div>
  241.  
  242. <div class="float random"><div class="i"><div class="top">
  243.  
  244. <img src="http://i.imgur.com/qAMLNqy.png?2" />
  245. <div class="right"><div class="name">
  246. Random
  247. </div></div></div><div class="tags">
  248. <a href="/tagged/aesthetics">Aesthetics</a>
  249. <a href="/tagged/art">Art</a>
  250. <a href="/tagged/books">Books</a>
  251. <a href="tagged/disney">Disney</a>
  252. <a href="/tagged/fantasy">Fantasy</a>
  253. <a href="/tagged/fashion">Fashion</a>
  254. <a href="/tagged/feminism">Feminism</a>
  255. <a href="/tagged/friends">Friends</a>
  256. <a href="/tagged/funny">Funny</a>
  257. <a href="/tagged/inspirational">Inspirational</a>
  258. <a href="/tagged/life">Life</a>
  259. <a href="/tagged/posters">Posters</a>
  260. <a href="/tagged/pretty">Pretty</a>
  261. <a href="/tagged/quotes">Quotes</a>
  262. <a href="/tagged/studeying">Studeying</a>
  263. <a href="/tagged/studying">Studying</a>
  264. <a href="/tagged/writing">Writing</a>
  265. <a href="/tagged/writing material">Writing Material</a>
  266. </div></div></div>
  267.  
  268. <div class="float resources"><div class="i"><div class="top">
  269. <img src="http://imgur.com/4TlZK0Q.png" />
  270. <div class="right"><div class="name">
  271. Resources
  272. </div></div></div><div class="tags">
  273. <a href="/tagged/answers">Answers</a>
  274. <a href="/tagged/brushes">Brushes</a>
  275. <a href="/tagged/colours">Colours</a>
  276. <a href="/tagged/edit materials">Edit Materials</a>
  277. <a href="/tagged/fonts">Fonts</a>
  278. <a href="/tagged/headers">Headers</a>
  279. <a href="tagged/icons">Icons</a>
  280. <a href="/tagged/information">Information</a>
  281. <a href="/tagged/misc. resources">Misc. Resources</a>
  282. <a href="/tagged/packs">Packs</a>
  283. <a href="/tagged/psds">PSDs</a>
  284. <a href="/tagged/textures">Textures</a>
  285. <a href="/tagged/templates">Templates</a>
  286. <a href="/tagged/themes">Themes</a>
  287. <a href="/tagged/tutorials">Tutorials</a>
  288.  
  289. </div></div></div>
  290.  
  291. <div class="float tvshows"><div class="i"><div class="top">
  292.  
  293. <img src="http://imgur.com/mehQoSc.png" />
  294. <div class="right"><div class="name">
  295. TV Shows/Movies
  296. </div></div></div><div class="tags">
  297. <a href="tagged/austin and ally">Austin and Ally</a>
  298. <a href="tagged/frozen">Frozen</a>
  299. <a href="tagged/girl meets world">Girl Meets Worldr</a>
  300. <a href="/tagged/girl meets world: riley">Girl Meets world: Riley</a>
  301. <a href="/tagged/girl meets world: maya">Girl Meets World: Maya</a>
  302. <a href="tagged/jessie">Jessie</a>
  303. <a href="tagged/mean girls">Mean Girls</a>
  304. <a href="/tagged/once apon a time">Once Apon A Time</a>
  305. <a href="tagged/pirates of the caribbean">Pirates of the Caribbean</a>
  306. <a href="/tagged/pretty little liars">Pretty Little Liars</a>
  307. <a href="/tagged/the flash">The Flash</a>
  308.  
  309. </div></div></div>
  310.  
  311. </div>
  312.  
  313. <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>
  314. <script>$( function() {var qsRegex;var buttonFilter;
  315. var $grid = $('.container').isotope({
  316. itemSelector: '.float', masonry: {columnWidth: '.ss'},
  317. transitionDuration: '0.6s', filter: function() {var $this = $(this);
  318. var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
  319. var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
  320. return searchResult && buttonResult;
  321. },});$('.f').on( 'click', 'button', function() {
  322. buttonFilter = $( this ).attr('category');
  323. console.log("Filter button click",buttonFilter); $grid.isotope();
  324. });var $quicksearch = $('.search').keyup( debounce( function() {
  325. qsRegex = new RegExp( $quicksearch.val(), 'gi' );
  326. console.log("Search input",qsRegex); $grid.isotope();
  327. }, 600 ) );$('.buttons').each( function( i, buttonGroup ) {
  328. var $buttonGroup = $( buttonGroup );
  329. $buttonGroup.on( 'click', 'button', function() {
  330. $buttonGroup.find('.active').removeClass('active');
  331. $( this ).addClass('active');
  332. });});});function debounce( fn, threshold ) {
  333. var timeout; return function debounced() {
  334. if ( timeout ) {clearTimeout( timeout );}
  335. function delayed() {fn(); timeout = null;}
  336. timeout = setTimeout( delayed, threshold || 100 );
  337. }}</script>
  338.  
  339. <!-- PLEASE DO NOT EDIT OR DELETE -->
  340. <a class="cred" href="http://yearsandsyears.tumblr.com" target="_blank"><div class="clogo"></div></a>
  341. <!----------- THANK YOU! ----------->
  342.  
  343. </body></html>
Add Comment
Please, Sign In to add comment