API tools faq
paste
Advertisement
harreyeh

taezs: members #1

harreyeh
Nov 19th, 2020 (edited)
2,736
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.37 KB | None | 0 0
raw download clone embed print report
  1. <!------
  2.  
  3. character/network page by taezs.tumblr.com, please do not remove credit.
  4.  
  5. message me if you have any issues!
  6.  
  7. ------>
  8.  
  9. <!DOCTYPE html>
  10. <head>
  11. <link rel="shortcut icon" href="{Favicon}">
  12. <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;400;600;700&family=Space+Grotesk:wght@300;500;700&display=swap" rel="stylesheet">
  13. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  14.  
  15. <link rel="preconnect" href="https://fonts.gstatic.com">
  16. <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;900&display=swap" rel="stylesheet">
  17.  
  18. <!-- browser page title ---->
  19. <title>Character List</title>
  20.  
  21. <style>
  22.  
  23.  
  24. /* styling colour changes */
  25.  
  26.  
  27. body{color:#333;} /* body text color */
  28. a{color:#bbb;} /* link color */
  29.  
  30. #sort a:hover {color:#000; border-color:#333;} /* filters */
  31. #sort li a.selected {color:#000; border-color:#333;} /* filters on hover */
  32.  
  33. .one span{background-image: linear-gradient(to right, #fafafa, #fff);}
  34. /* change the background of the descriptors here - if you don't want the gradient, just remove it all and say {background:#fafafa} (or the colour you want) */
  35.  
  36. .one a:hover span:before{color:white} /*color of the icon when you hover over the character name (if you have included a link) */
  37.  
  38. .one span.name{color:#000;background:#fafafa;} /*default colors for member name */
  39.  
  40. a.character{color:black;}
  41. a.character:before{color:black;}
  42. a.character:hover:before{color:white;}
  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. body {
  73. font-family: 'Lato', sans-serif;
  74. font-size: 10px;
  75. background-color:#fff;
  76. letter-spacing:0.5px;
  77. -moz-osx-font-smoothing:grayscale;
  78. -webkit-font-smoothing:antialiased;
  79. font-smoothing:antialiased;
  80. }
  81.  
  82. a {
  83. text-decoration: none;
  84. letter-spacing:0.5px;
  85. -webkit-transition: all 0.3s ease-in-out;
  86. -moz-transition: all 0.3s ease-in-out;
  87. -o-transition: all 0.3s ease-in-out;
  88. -ms-transition: all 0.3s ease-in-out;
  89. transition: all 0.3s ease-in-out;
  90. }
  91.  
  92. a:hover {
  93. color: #222;
  94. transition: 0.3s ease-in-out;
  95. }
  96.  
  97.  
  98.  
  99. #topbar{
  100. position:fixed;
  101. top:0px;
  102. left:0px;
  103. width:100%;
  104. height:30px;
  105. line-height:30px;
  106. background:#fafafa;
  107. z-index:1;
  108. padding-left:110px;
  109. }
  110.  
  111. #topbar a{
  112. display:inline-block;
  113. text-transform:uppercase;
  114. font-family:'Space Grotesk', sans-serif;
  115. margin-right:30px;
  116. }
  117.  
  118. #container{
  119. position:absolute;
  120. width:90%;
  121. top:0px;
  122. margin-bottom:100px;
  123. left:100px;
  124. }
  125.  
  126. .title{
  127. font-family:'Space Grotesk', sans-serif;
  128. margin-top:60px;
  129. padding:10px;
  130. height:95px;
  131. padding-bottom:10px;
  132. vertical-align:bottom;
  133. position:relative;
  134. }
  135.  
  136. .title h1{
  137. font-size:20px;
  138. font-weight:200;
  139. margin:0;
  140. padding:10px 0;
  141. }
  142.  
  143. .tlinks, .descr{
  144. display:inline-block;
  145. font-size:10px;
  146. line-height:150%;
  147. font-family: 'Lato', sans-serif;
  148. }
  149.  
  150. .descr{
  151. padding-bottom:10px;
  152. }
  153.  
  154.  
  155. ul.members{
  156. list-style:none;
  157. margin:0;
  158. margin-top:240px;
  159. left:80px;
  160. width:90%;
  161. margin-bottom:150px;
  162. padding:0;
  163. }
  164.  
  165. .one{
  166. background:#fafafa;
  167. display:inline-block;
  168. font-weight:400;
  169. margin:20px;
  170. text-transform:uppercase;
  171. width:270px;
  172. text-align:left;
  173. border-bottom:5px solid #fafafa;
  174. -moz-transition-duration: 0.5s;
  175. -o-transition-duration: 0.5s;
  176. -webkit-transition-duration: 0.5s;
  177. transition-duration: 0.5s;
  178. }
  179. .one img{
  180. width:60px;
  181. height:60px;
  182. border-left:1px solid white;
  183. border-bottom:1px solid white;
  184. float:right;
  185. object-fit: fill;
  186. }
  187.  
  188. .one span{
  189. display:block;
  190. font-family:'Space Grotesk', sans-serif;
  191. border-bottom:1px solid white;
  192. padding:4px;
  193. }
  194.  
  195. .one span.name{
  196. font-size:13px;
  197. padding:5px 10px;
  198. display:block;
  199. text-transform:none;
  200. }
  201.  
  202. .c, .one .th{
  203. font-size:9px;
  204. }
  205.  
  206. .one .th:before{
  207. display:block;
  208. margin-top:2px;
  209. margin-right:5px;
  210. width:15px;
  211. text-align:center;
  212. float:left;
  213. font-family:'honeybee';
  214. }
  215.  
  216. .one span.desc{
  217. padding:5px 10px;
  218. text-transform:none;
  219. overflow:scroll;
  220. font-family: 'Lato', sans-serif;
  221. background:#fafafa;
  222. margin-top:1px;
  223. line-height:150%;
  224. overflow-x:hidden;
  225. }
  226.  
  227. ::-webkit-scrollbar{
  228. height:11px;
  229. width:11px;
  230. background:inherit;
  231. }
  232.  
  233. ::-webkit-scrollbar-thumb {background:black;}
  234.  
  235. ::-webkit-scrollbar-track {background:#fafafa;}
  236.  
  237. ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track {border:5px solid #fafafa;}
  238.  
  239.  
  240. #sort li, #sort ul{list-style:none;margin:0;padding:0;}
  241.  
  242. #sort li{display:inline-block;}
  243.  
  244. #sort a{padding-bottom:1px; border-bottom:1px dotted transparent;}
  245.  
  246.  
  247.  
  248. a.back{
  249. display:block;
  250. width:30px;
  251. height:100%;
  252. position:absolute;
  253. margin-left:-45px;
  254. background:#fafafa;
  255. text-align:center;
  256. }
  257.  
  258. a.back .th{
  259. margin-top:19px;
  260. }
  261.  
  262. a.back:hover{
  263. background:#333;
  264. color:white;
  265. }
  266.  
  267.  
  268. .header{
  269. background:#fff;
  270. text-transform:uppercase;
  271. font-family:'Space Grotesk', sans-serif;
  272. font-weight:600;
  273. padding:10px;
  274. transition: all 0.4s ease;
  275. }
  276.  
  277. .header a{
  278. display:inline-block;
  279. margin:0 5px;
  280. transition: all 0.4s ease;
  281. }
  282.  
  283. .content {
  284. padding: 16px;
  285. transition: all 0.4s ease;
  286. }
  287.  
  288. .sticky {
  289. position: fixed;
  290. top:30px;
  291. left:100px;
  292. width: 100%;
  293. z-index:10;
  294. transition:.5s;
  295. transition: all 0.4s ease;
  296. }
  297.  
  298. #scrollup a{
  299. position: fixed;
  300. bottom: 30px;
  301. left: 40px;
  302. z-index: 99;
  303. border: none;
  304. outline: none;
  305. background-color: #fafafa;
  306. color: black;
  307. font-weight:lighter;
  308. cursor: pointer;
  309. padding: 10px;
  310. font-size: 12px;
  311. }
  312.  
  313. #scrollup a:hover {
  314. background-color: #555;
  315. color:white;
  316. }
  317.  
  318.  
  319. .one a:hover span{
  320. background:#222;
  321. color:white;
  322. -webkit-transition: all 0.3s ease-in-out;
  323. -moz-transition: all 0.3s ease-in-out;
  324. -o-transition: all 0.3s ease-in-out;
  325. -ms-transition: all 0.3s ease-in-out;
  326. transition: all 0.3s ease-in-out;
  327. }
  328.  
  329.  
  330. .one a:hover span:before{
  331. -webkit-transition: all 0.3s ease-in-out;
  332. -moz-transition: all 0.3s ease-in-out;
  333. -o-transition: all 0.3s ease-in-out;
  334. -ms-transition: all 0.3s ease-in-out;
  335. transition: all 0.3s ease-in-out;
  336. }
  337.  
  338. a.character:before{
  339. content:'\ebbe';
  340. float:right;
  341. margin:8px;
  342. font-size:10px;
  343. font-family:'honeybee';
  344. -webkit-transition: all 0.3s ease-in-out;
  345. -moz-transition: all 0.3s ease-in-out;
  346. -o-transition: all 0.3s ease-in-out;
  347. -ms-transition: all 0.3s ease-in-out;
  348. transition: all 0.3s ease-in-out;
  349. }
  350.  
  351. .one a span{transition:0.5s ease;}
  352.  
  353. /* leave credit in tact please */
  354. .taezs{position:fixed;bottom:20px;right:20px;width:200px;height:20px;}
  355. .taezs a{display:inline-block;background:#eee;border:1px solid #eee;border-radius:3px;position:fixed;color:black;right:20px;padding:5px;bottom:20px;}
  356. .taezs a:hover{background:#000;color:white;}.taezs a:before{content:"theme by taezs";position:fixed;right:70px;opacity:0;bottom:25px;transition:.5s;}.taezs a:hover:before{opacity:1;right:50px;transition:.5s;color:black;}
  357.  
  358. </style></head>
  359.  
  360.  
  361.  
  362. <body>
  363.  
  364. <div id="topbar"><a href="/">home</a><a href="/ask">contact</a><a href="https://taezs.tumblr.com">theme</a></div>
  365.  
  366. <div id="container">
  367.  
  368. <div class="title">
  369. <h1>character list</h1>
  370. <div class="descr" style="width:450px">
  371. <!--- change the width if you need here. I recommend keeping it max three lines so widen the box if necessary ---->
  372. Here you can put a <b>description</b>.<br>
  373. You don't have to make each character/member a different colour, and you also don't need a photo. for each character. if you do, <a href="https://imagecolorpicker.com/en/">imagecolorpicker</a> will be your friend.
  374. </div>
  375. </div>
  376.  
  377.  
  378.  
  379. <div class="header" id="sort">
  380. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  381. filter by:
  382. <li><a href="#filter" data-option-filter=".one" class="selected">all</a></li>
  383. <li><a href="#filter" data-option-filter=".options">customization options</a></li>
  384. <li><a href="#filter" data-option-filter=".female">female</a></li>
  385. <li><a href="#filter" data-option-filter=".male">male</a></li>
  386. <li><a href="#filter" data-option-filter=".good">good</a></li>
  387. <li><a href="#filter" data-option-filter=".neutral">neutral</a></li>
  388. <li><a href="#filter" data-option-filter=".evil">evil</a></li>
  389. <li><a href="#filter" data-option-filter=".pc">pc</a></li>
  390. <li><a href="#filter" data-option-filter=".npc">npc</a></li>
  391.  
  392. </ul>
  393.  
  394. </div></div>
  395.  
  396. <ul class="members">
  397.  
  398.  
  399. <!---- START CHARACTER LIST ----->
  400.  
  401.  
  402.  
  403. <!-- add filters with spaces in between each. leave "one" there.
  404. e.g. <li class="one admin filter1 filter2"> -->
  405. <li class="one FILTERS">
  406.  
  407. <a href="BLOGURL" class="character"><!---remove this if you don't want a link-->
  408.  
  409. <!-- to change the background colour of the character title, replace the background color here. If you just want them all to be the same, delete this: style="background:#c5cee0;" -->
  410. <span class="name" style="background:#c5cee0;">
  411. Character Name
  412. </span>
  413.  
  414. </a><!---remove this if you don't want a link-->
  415.  
  416. <!-- put in your own img url here or delete it entirely-->
  417. <img src="http://i.imgur.com/C3Izm3d.png">
  418.  
  419. <!--
  420. to change the icon that appears in each row, head to https://honeybee.suiomi.com/ and scroll to the bottom to find out the icon you want to replace it with. copy the text below it (e.g. acorn) and replace it AFTER th-.
  421. e.g. <span class="th th-icon">
  422. -->
  423. <span class="th th-moon">name</span>
  424. <span class="th th-map-1-o">location</span>
  425. <span class="th th-constellation">star sign</span>
  426.  
  427. <span class="desc">
  428. Description
  429. </span>
  430.  
  431. </li>
  432.  
  433.  
  434.  
  435.  
  436.  
  437.  
  438.  
  439.  
  440.  
  441.  
  442.  
  443. <!---- do not edit past here ----->
  444.  
  445. </ul>
  446.  
  447.  
  448.  
  449. </div>
  450.  
  451.  
  452.  
  453.  
  454.  
  455. <!------ LEAVE CREDIT IN TACT ------------>
  456. <div class="taezs"><a href="https://taezs.tumblr.com"><span class="th th-paperclip"></span></a></div>
  457. <!------ LEAVE CREDIT IN TACT ------------>
  458.  
  459. <!------ S C R I P T S! ------>
  460. <script src="https://static.tumblr.com/w3dcevg/q2Tp3n8qs/b.js"></script>
  461. <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>
  462. <script src="https://static.tumblr.com/uopakca/GVcnvdwbq/jquery.style-my-tooltips.js"></script>
  463. <script>
  464. (function($){
  465. $(document).ready(function(){
  466. $("a[title]").style_my_tooltips({
  467. tip_follows_cursor:true,
  468. tip_delay_time:90,
  469. tip_fade_speed:700,
  470. attribute:"title"
  471. });
  472. });
  473. })(jQuery);
  474.  
  475.  
  476.  
  477. $(window).scroll(function() {
  478. if ($(this).scrollTop() >= 145){
  479. $('.header').addClass("sticky");
  480. }
  481. else{
  482. $('.header').removeClass("sticky");
  483. }
  484. });
  485.  
  486. $(function(){
  487.  
  488. var $container = $('.members');
  489.  
  490. $container.isotope({
  491. itemSelector : '.one'
  492. });
  493.  
  494.  
  495. var $optionSets = $('#sort .option-set'),
  496. $optionLinks = $optionSets.find('a');
  497.  
  498. $optionLinks.click(function(){
  499. var $this = $(this);
  500. // don't proceed if already selected
  501. if ( $this.hasClass('selected') ) {
  502. return false;
  503. }
  504. var $optionSet = $this.parents('.option-set');
  505. $optionSet.find('.selected').removeClass('selected');
  506. $this.addClass('selected');
  507.  
  508. // make option object dynamically, i.e. { filter: '.my-filter-class' }
  509. var options = {},
  510. key = $optionSet.attr('data-option-key'),
  511. value = $this.attr('data-option-filter');
  512. // parse 'false' as false boolean
  513. value = value === 'false' ? false : value;
  514. options[ key ] = value;
  515. if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  516. // changes in layout modes need extra logic
  517. changeLayoutMode( $this, options )
  518. } else {
  519. // otherwise, apply new options
  520. $container.isotope( options );
  521. }
  522.  
  523. return false;
  524. });
  525.  
  526.  
  527. });
  528.  
  529. </script>
  530.  
  531. <script type="text/javascript">
  532. $(window).load(function(){
  533. var $wall = $('.members');
  534. $wall.imagesLoaded(function(){
  535. $wall.masonry({
  536. itemSelector: '.one',
  537. isAnimated : true
  538. });
  539. });
  540. $wall.infinitescroll({
  541. navSelector : "div#navigation",
  542. nextSelector : "div#navigation a#nextPage",
  543. itemSelector : '#group',
  544. loadingImg : "",
  545. loadingText : " ",
  546. donetext : " ",
  547. extraScrollPx : 0,
  548. bufferPx : 10000,
  549. debug : false,
  550. errorCallback: function() {
  551. $('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');
  552. }},
  553. function( newElements ) {
  554. var $newElems = $( newElements );
  555. $newElems.hide();
  556. $newElems.imagesLoaded(function(){
  557. $wall.masonry( 'appended', $newElems, {isAnimated: true, animationOptions: {duration: 250, easing: 'linear', queue: false}}, function(){$newElems.fadeIn('slow');} );
  558. });
  559. }); $('#tags').show(500);
  560. });
  561. </script>
  562.  
  563.  
  564. <!-----end filter scripts------>
  565.  
  566. </body>
  567. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!