API tools faq
paste
MystiqueAquanian

My Former Tags Page (Tags page by Cyantists)

MystiqueAquanian
Nov 24th, 2016
74
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.94 KB | None | 0 0
raw download clone embed print report
  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
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!