API tools faq
paste
harreyeh

taezs: tags page #2

harreyeh
Nov 19th, 2020 (edited)
827
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.26 KB | None | 0 0
raw download clone embed print report
  1. <!------
  2.  
  3. tags page by @taezs, please do not remove credit.
  4.  
  5. message me on creatre.tumblr.com/ask if you have any issues!
  6.  
  7. ------>
  8.  
  9. <!DOCTYPE html>
  10. <head>
  11. <link rel="shortcut icon" href="{Favicon}">
  12.  
  13. <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  14.  
  15. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  16.  
  17. <!------ S C R I P T S! ------>
  18. <script src="https://static.tumblr.com/w3dcevg/q2Tp3n8qs/b.js"></script>
  19. <script src="http://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
  20. <script src="https://static.tumblr.com/uopakca/GVcnvdwbq/jquery.style-my-tooltips.js"></script>
  21. <script>
  22. (function($){
  23. $(document).ready(function(){
  24. $("a[title]").style_my_tooltips({
  25. tip_follows_cursor:true,
  26. tip_delay_time:90,
  27. tip_fade_speed:700,
  28. attribute:"title"
  29. });
  30. });
  31. })(jQuery);
  32.  
  33. </script>
  34.  
  35.  
  36. <!-----end filter scripts------>
  37.  
  38. <!-- browser page title ---->
  39. <title>Tags List</title>
  40.  
  41. <style>
  42.  
  43.  
  44. #s-m-t-tooltip {
  45. max-width:240px;
  46. padding:3px 10px;
  47. margin-left:20px;
  48. margin-right:15px;
  49. margin-top:-8px;
  50. z-index:99999999990;
  51. transition:.2s;
  52. line-height:15px;
  53. font-size:12px;
  54. background:#f7f7f7;
  55. color:#000}
  56.  
  57. .iframe-controls--desktop {
  58. position:fixed;
  59. top:0px;
  60. right:0px;
  61. filter:invert(100%);
  62. -webkit-filter:invert(100%);
  63. z-index:999999999999;
  64. -webkit-transform:scale(0.6,0.6);
  65. -webkit-transform-origin: 100% 0%;
  66. -ms-transform-origin:100% 0%;
  67. -ms-transform:scale(0.6,0.6);
  68. transform:scale(0.6,0.6);
  69. transform-origin:100% 0%;
  70. }
  71.  
  72.  
  73.  
  74. body {
  75. font-family: 'Lato', sans-serif;
  76. color:#333;
  77. font-size: 10px;
  78. background-color:#fff;
  79. letter-spacing:0.5px;
  80. -moz-osx-font-smoothing:grayscale;
  81. -webkit-font-smoothing:antialiased;
  82. font-smoothing:antialiased;
  83. }
  84.  
  85. a {
  86. color: #aaa;
  87. text-decoration: none;
  88. letter-spacing:0.5px;
  89. -webkit-transition: all 0.3s ease-in-out;
  90. -moz-transition: all 0.3s ease-in-out;
  91. -o-transition: all 0.3s ease-in-out;
  92. -ms-transition: all 0.3s ease-in-out;
  93. transition: all 0.3s ease-in-out;
  94. }
  95.  
  96. a:hover {
  97. color: #222;
  98. transition: 0.3s ease-in-out;
  99. }
  100. .taezs{
  101. position:fixed;
  102. bottom:20px;
  103. right:20px;
  104. width:200px;
  105. height:20px;
  106. }
  107.  
  108. .taezs a{
  109. display:inline-block;
  110. background:#fff;
  111. border:1px solid #eee;
  112. border-radius:3px;
  113. position:fixed;
  114. right:20px;
  115. padding:5px;
  116. bottom:20px;
  117. }
  118.  
  119. .taezs a:before{
  120. content:"theme by taezs";
  121. position:fixed;
  122. right:70px;
  123. opacity:0;
  124. bottom:25px;
  125. transition:.5s;
  126. }
  127.  
  128. .taezs a:hover:before{
  129. opacity:1;
  130. right:50px;
  131. transition:.5s;
  132. }
  133.  
  134. #topbar{
  135. position:fixed;
  136. top:0px;
  137. left:0px;
  138. width:100%;
  139. height:30px;
  140. line-height:30px;
  141. background:#fafafa;
  142. z-index:1;
  143. padding-left:110px;
  144. }
  145.  
  146. #topbar a{
  147. display:inline-block;
  148. text-transform:uppercase;
  149. font-family:'Space Grotesk', sans-serif;
  150. margin-right:30px;
  151. }
  152.  
  153. #container{
  154. position:absolute;
  155. width:80%;
  156. top:0px;
  157. margin-bottom:100px;
  158. left:100px;
  159. }
  160.  
  161. .title{
  162. font-family:'Space Grotesk', sans-serif;
  163. margin-top:60px;
  164. padding:10px;
  165. height:95px;
  166. padding-bottom:10px;
  167. vertical-align:bottom;
  168. position:relative;
  169. }
  170.  
  171. .title h1{
  172. font-size:20px;
  173. font-weight:200;
  174. margin:0;
  175. padding:10px 0;
  176. }
  177.  
  178. .tlinks, .descr{
  179. display:inline-block;
  180. font-size:10px;
  181. line-height:150%;
  182. font-family: 'Lato', sans-serif;
  183. }
  184.  
  185. .descr{
  186. padding-bottom:10px;
  187. width:300px;
  188. }
  189.  
  190.  
  191. ul.members{
  192. list-style:none;
  193. margin:0;
  194. margin-left:-10px;
  195. margin-bottom:150px;
  196. padding:0;
  197. }
  198.  
  199. .one{
  200. background:#fafafa;
  201. display:inline-block;
  202. font-weight:400;
  203. margin:20px;
  204. text-transform:uppercase;
  205. width:270px;
  206. text-align:left;
  207. border-bottom:5px solid #fafafa;
  208. -moz-transition-duration: 0.5s;
  209. -o-transition-duration: 0.5s;
  210. -webkit-transition-duration: 0.5s;
  211. transition-duration: 0.5s;
  212. }
  213. .one img{
  214. height:65px;
  215. float:right;
  216. margin-left:10px;
  217. }
  218.  
  219. .one a, .one span{
  220. display:block;
  221. font-family:'Space Grotesk', sans-serif;
  222. border-bottom:1px solid white;
  223. padding:4px;
  224. }
  225.  
  226. .one span.name{
  227. font-size:13px;
  228. padding:5px 10px;
  229. display:block;
  230. color:#000;
  231. background:#fafafa;
  232. text-transform:none;
  233. }
  234.  
  235. .one a, .list span, .list2 span{
  236. font-size:10px;
  237. color:#333;
  238. padding-left:5px;
  239. }
  240.  
  241. .list span, .list2 span{
  242. font-weight:500;
  243. }
  244.  
  245. .one a:before, .list span:before, .list2 span:before{
  246. content:'\ebc6';
  247. display:block;
  248. margin-top:2px;
  249. margin-right:5px;
  250. width:15px;
  251. font-size:9px;
  252. text-align:center;
  253. float:left;
  254. font-family:'honeybee';
  255. }
  256.  
  257. .one a:hover{
  258. padding-left:10px;
  259. }
  260.  
  261. span.starsign:before{
  262. content:'\ebd4';
  263. }
  264.  
  265. span.age:before{
  266. content:'\ebee';
  267. }
  268.  
  269. .one span.desc{
  270. padding:10px;
  271. padding-top:5px;
  272. padding-bottom:0;
  273. text-transform:none;
  274. font-family: 'Lato', sans-serif;
  275. background:#fafafa;
  276. margin-top:1px;
  277. line-height:150%;
  278. overflow-x:hidden;
  279. }
  280.  
  281. ::-webkit-scrollbar{
  282. height:11px;
  283. width:11px;
  284. background:inherit;
  285. }
  286.  
  287. ::-webkit-scrollbar-thumb {background:black;}
  288.  
  289. ::-webkit-scrollbar-track {background:#fafafa;}
  290.  
  291. ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track {border:5px solid #fafafa;}
  292.  
  293.  
  294. #sort li, #sort ul{list-style:none;margin:0;padding:0;}
  295.  
  296. #sort li{
  297. display:inline-block;
  298. }
  299.  
  300. #sort a {color:#ccc; padding-bottom:1px; border-bottom:1px dotted transparent;}
  301.  
  302. #sort a:hover {color:#000; border-color:#333;}
  303.  
  304. #sort li a.selected {color:#000; border-color:#333;
  305.  
  306. }
  307.  
  308. a.back{
  309. display:block;
  310. width:30px;
  311. height:100%;
  312. position:absolute;
  313. margin-left:-45px;
  314. background:#fafafa;
  315. text-align:center;
  316. }
  317.  
  318. a.back .th{
  319. margin-top:19px;
  320. }
  321.  
  322. a.back:hover{
  323. background:#333;
  324. color:white;
  325. }
  326.  
  327.  
  328. /* Style the header */
  329. .header{
  330. background:#fff;
  331. text-transform:uppercase;
  332. font-family:'Space Grotesk', sans-serif;
  333. font-weight:600;
  334. padding:10px;
  335. transition: all 0.4s ease;
  336. }
  337.  
  338. .header a{
  339. display:inline-block;
  340. margin:0 5px;
  341. color:black;
  342. transition: all 0.4s ease;
  343. }
  344.  
  345. /* Page content */
  346. .content {
  347. padding: 16px;
  348. transition: all 0.4s ease;
  349. }
  350.  
  351. .list span:before{
  352. content:'\e941';
  353. }
  354. .in{
  355. position:absolute;
  356. left:250px;
  357. width:200px;
  358. margin-top:-23px;
  359. z-index:100;
  360. border:1px solid white;
  361. background:#fafafa;
  362. display:none;
  363. }
  364.  
  365. .list:hover .in{
  366. display:block;
  367. }
  368.  
  369. .list:hover, .in .list:hover{
  370. background:#eee;
  371. }
  372. .list2:hover .in2{
  373. display:block;
  374. }
  375.  
  376. .in2{
  377. display:none;
  378. display:block;
  379. position:absolute;
  380. left:180px;
  381. width:200px;
  382. margin-top:-23px;
  383. z-index:100;
  384. border:1px solid white;
  385. background:#fafafa;
  386. display:none;
  387.  
  388. }
  389.  
  390.  
  391.  
  392. </style></head>
  393.  
  394.  
  395.  
  396. <body>
  397.  
  398. <div id="topbar"><a href="/">home</a><a href="/ask">contact</a><a href="https://taezs.tumblr.com">theme</a></div>
  399.  
  400. <div id="container">
  401.  
  402. <div class="title">
  403. <h1>tags list</h1>
  404. <div class="descr">
  405. Here you can put a <b>description</b>. <a href="https://leethompkins-icons.tumblr.com/">icons from @leethompkins</a>.<br>
  406. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et <i>dolore</i> magna aliqua.
  407.  
  408. </div></div>
  409.  
  410.  
  411. <ul class="members">
  412.  
  413.  
  414.  
  415.  
  416. <!---- start tag groups --->
  417. <li class="one">
  418.  
  419. <span class="name" style="background:#bb4ae6; color:white">
  420. Tag Group Title
  421. </span>
  422.  
  423. <img src="https://i.imgur.com/6ySItMk.png">
  424.  
  425. <a href="LINK">TAG URL</a>
  426. <a href="LINK">TAG URL</a>
  427. <a href="LINK">TAG URL</a>
  428. <a href="LINK">TAG URL</a>
  429.  
  430. <!--- TO CREATE A SUBGROUP COPY THE BELOW: ---->
  431.  
  432. <div class="list"><span>SUBGROUP TITLE</span> <!-- title of subgroup --->
  433. <div class="in">
  434. <a href="LINK">TAG URL</a>
  435. <a href="LINK">TAG URL</a>
  436. <a href="LINK">TAG URL</a>
  437. <a href="LINK">TAG URL</a>
  438. </div></div>
  439.  
  440. <div class="list"><span>SUBGROUP TITLE</span>
  441. <div class="in">
  442. <a href="LINK">TAG URL</a>
  443. <a href="LINK">TAG URL</a>
  444.  
  445. <!--- TO CREATE A SUBGROUP WITH A SECOND SUBGROUP COPY THE BELOW: ----> <div class="list2"><span>SUBGROUP 2</span>
  446. <div class="in2">
  447. <a href="LINK">TAG URL</a>
  448. <a href="LINK">TAG URL</a>
  449. </div></div>
  450. <!-- END SECOND SUBGROUP -->
  451.  
  452. <a href="LINK">TAG URL</a>
  453. <a href="LINK">TAG URL</a>
  454. </div></div>
  455. <!--- END SUBGROUP --->
  456.  
  457. <a href="LINK">TAG URL</a>
  458. <a href="LINK">TAG URL</a>
  459.  
  460. </li>
  461. <!--- END TAG GROUP --->
  462.  
  463.  
  464. </ul>
  465.  
  466.  
  467.  
  468. </div>
  469.  
  470.  
  471.  
  472.  
  473.  
  474. <!------ LEAVE CREDIT IN TACT ------------>
  475. <div class="taezs"><a href="https://taezs.tumblr.com"><span class="th th-paperclip"></span></a></div>
  476. <!------ LEAVE CREDIT IN TACT ------------>
  477.  
  478.  
  479.  
  480. <script type="text/javascript" src="http://static.tumblr.com/me5sfsd/12Qlmj66n/script.js"></script>
  481.  
  482. <script type="text/javascript">
  483. $(window).load(function(){
  484. var $wall = $('.members');
  485. $wall.imagesLoaded(function(){
  486. $wall.masonry({
  487. itemSelector: '.one',
  488. isAnimated : true
  489. });
  490. });
  491. $wall.infinitescroll({
  492. navSelector : "div#navigation",
  493. nextSelector : "div#navigation a#nextPage",
  494. itemSelector : '#group',
  495. loadingImg : "",
  496. loadingText : " ",
  497. donetext : " ",
  498. extraScrollPx : 0,
  499. bufferPx : 10000,
  500. debug : false,
  501. errorCallback: function() {
  502. $('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');
  503. }},
  504. function( newElements ) {
  505. var $newElems = $( newElements );
  506. $newElems.hide();
  507. $newElems.imagesLoaded(function(){
  508. $wall.masonry( 'appended', $newElems, {isAnimated: true, animationOptions: {duration: 250, easing: 'linear', queue: false}}, function(){$newElems.fadeIn('slow');} );
  509. });
  510. }); $('#tags').show(500);
  511. });
  512.  
  513.  
  514.  
  515. </script>
  516.  
  517.  
  518. </body>
  519. </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!