API tools faq
paste
Advertisement
loranhale

osaka

loranhale
Nov 30th, 2019
2,956
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.33 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!----
  5.  
  6.  
  7. osaka
  8. network / biases page
  9.  
  10. @ aaronellas / wanderlusthemes
  11.  
  12.  
  13. ----->
  14.  
  15. <title>{Title}</title>
  16. <link rel="shortcut icon" href="{Favicon}">
  17. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  18.  
  19. <link href='https://fonts.googleapis.com/css?family=Lora:400,400italic,600,600italic|Overpass:400,400italic,600,600italic|Open+Sans:400,400italic,600,600italic' rel='stylesheet' type='text/css'>
  20. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  21. <script src="https://unpkg.com/feather-icons"></script>
  22.  
  23. <style type="text/css">
  24.  
  25. /* scrollbar */
  26.  
  27. ::-webkit-scrollbar {
  28. height:5px;
  29. width:1px;
  30. background:#fafafa;
  31. }
  32.  
  33. ::-webkit-scrollbar-thumb { background:#eee; }
  34.  
  35. /* tumblr controls */
  36.  
  37. iframe.tmblr-iframe {
  38. z-index:99999999999999!important;
  39. top:0!important;
  40. right:0!important;
  41. opacity:0.4;
  42. /* delete invert(1) from here */
  43. filter:invert(1) contrast(150%);
  44. -webkit-filter:invert(1) contrast(150%);
  45. -o-filter:invert(1) contrast(150%);
  46. -moz-filter:invert(1) contrast(150%);
  47. -ms-filter:invert(1) contrast(150%);
  48. /* to here if your blog has a dark background */
  49. transform:scale(0.65);
  50. transform-origin:100% 0;
  51. -webkit-transform:scale(0.65);
  52. -webkit-transform-origin:100% 0;
  53. -o-transform:scale(0.65);
  54. -o-transform-origin:100% 0;
  55. -moz-transform:scale(0.65);
  56. -moz-transform-origin:100% 0;
  57. -ms-transform:scale(0.65);
  58. -ms-transform-origin:100% 0;
  59. transition:all .6s ease;
  60. }
  61.  
  62. iframe.tmblr-iframe:hover { opacity:0.6!important; }
  63.  
  64. /* tooltips */
  65.  
  66. #s-m-t-tooltip {
  67. max-width:300px;
  68. margin:15px;
  69. padding:5px 6px;
  70. z-index:99999999;
  71. color:#000;
  72. text-transform:lowercase;
  73. border:1px solid #eee;
  74. background:#fff;
  75. }
  76.  
  77. /* body */
  78.  
  79. body {
  80. background:#fff;
  81. color:#555;
  82. font-family:'overpass', arial, sans-serif;
  83. font-size:11px;
  84. letter-spacing:.5px;
  85. -moz-osx-font-smoothing:grayscale;
  86. -webkit-font-smoothing:antialiased;
  87. font-smoothing:antialiased;
  88. }
  89.  
  90. a {
  91. color:#555; /* links colour */
  92. text-decoration:none;
  93. transition: all .4s ease;
  94. }
  95.  
  96. a:hover { color:#ff6f61; }
  97.  
  98. b { font-style:bold; color:#222; }
  99. i { font-style:italic; }
  100.  
  101. section {
  102. width:calc((250px + 20px) * 3);
  103. /* change 3 to 4 or however many columns you want */
  104. box-sizing:border-box;
  105. margin:100px auto;
  106. transform:translate(0px,0px);
  107. }
  108.  
  109. /* header */
  110.  
  111. nav {
  112. margin:0 10px;
  113. padding:0px;
  114. margin-bottom:40px;
  115. }
  116.  
  117. .t { display:inline; margin-right:10px; }
  118. .t {
  119. font-size:18px;
  120. font-weight:600;
  121. letter-spacing:.5px;
  122. text-transform:lowercase;
  123. color:#222;
  124. }
  125.  
  126. .icon { display:inline; float:left; padding:0; }
  127. .icon img {
  128. width:60px;
  129. height:auto;
  130. border-radius:1px 25px 3px 25px;
  131. }
  132.  
  133. .links { vertical-align:-1px; display:inline; }
  134. .links a { margin-right:5px; }
  135.  
  136. .links a .th {
  137. width:15px;
  138. height:15px;
  139. vertical-align:0px;
  140. transition:all .6s ease;
  141. }
  142.  
  143. .links a .th:hover { color:#000; }
  144.  
  145. .d { margin-bottom:10px; font-style:italic; }
  146.  
  147. .right { margin-left:80px; }
  148. .f { margin-top:-10px; }
  149.  
  150. /* filters */
  151.  
  152. nav ul { margin-left:-40px; margin-bottom:-10px; }
  153. nav ul li {
  154. list-style-type:none;
  155. display:inline-block;
  156. }
  157.  
  158. nav ul li a {
  159. margin-right:8px;
  160. color:#222; /* filters colour */
  161. }
  162.  
  163. nav ul li a:hover { color:#ff6f61; }
  164.  
  165. /* selected filter */
  166.  
  167. nav ul li a.selected { color:#918ad0; }
  168.  
  169. nav ul b { margin-right:10px; }
  170. li b { color:#ff6f61; }
  171.  
  172. /* boxes */
  173.  
  174. .grid .item {
  175. display:block;
  176. width:250px;
  177. height:100px;
  178. float:left;
  179. margin:10px;
  180. box-sizing:border-box;
  181. }
  182.  
  183. .th {
  184. width:14px;
  185. height:14px;
  186. vertical-align:-3px;
  187. margin-right:10px;
  188. color:#ff6f61;
  189. }
  190.  
  191. .name { margin-bottom:4px; display:block; }
  192. .name a { color:#222; font-weight:600; }
  193. .name a:hover { color:#ff6f61; }
  194.  
  195. .desc { float:right; width:70%; max-height:100px; overflow-y:scroll; }
  196.  
  197. .img { margin-right:10px; float:left; }
  198. .img img { width:55px; height:55px; border-radius:50%; }
  199.  
  200. /* do not disturb */
  201.  
  202. .lo { bottom:20px; right:20px; position:fixed; }
  203. .lo a { text-transform:uppercase; padding:5px; font-size:12px; }
  204.  
  205. </style>
  206.  
  207. <body>
  208.  
  209. <section>
  210. <nav>
  211.  
  212. <div class="t">network / bias page</div>
  213. <div class="links">
  214. <a href="/"><span class="th" data-feather="home"></span></a>
  215. <a href="/ask"><span class="th" data-feather="message-circle"></span></a>
  216. <a href="/"><span class="th" data-feather="compass"></span></a>
  217. </div>
  218.  
  219. <div class="d">optional description; you can delete this line</div>
  220.  
  221. <!-- filters
  222.  
  223. below is a template for a new filter
  224. do NOT remove the dot "." before FILTER.
  225. <li><a href="#" data-filter-value=".FILTER">FILTER NAME</a></li>
  226.  
  227.  
  228. below is a template for a whole set of filters that you can add
  229. REMEMBER to change group1 to group2 if it's a different set of filters
  230.  
  231. <ul class="filter option-set exclusive" data-filter-group="group1">
  232. <b>OPTIONAL CATEGORY TITLE. you can remove this</b>
  233. <li><a href="#" data-filter-value="" class="selected">FILTER NAME</a></li>
  234. <li><a href="#" data-filter-value=".FILTER">FILTER NAME</a></li>
  235. <li><a href="#" data-filter-value=".FILTER">FILTER NAME</a></li>
  236. <li><a href="#" data-filter-value=".FILTER">FILTER NAME</a></li>
  237. </ul>
  238.  
  239.  
  240. -->
  241. <div class="f">
  242. <ul class="filter option-set exclusive" data-filter-group="group1">
  243. <!-- add <b>sort</b> if you want a category title -->
  244. <li><a href="#" data-filter-value="" class="selected">all</a></li>
  245. <li><a href="#" data-filter-value=".filter1">filter name</a></li>
  246. <li><a href="#" data-filter-value=".filter2">filter name</a></li>
  247. </ul>
  248.  
  249. <ul class="filter option-set exclusive" data-filter-group="group2">
  250. <li><b>groups</b></li>
  251. <li><a href="#" data-filter-value="" class="selected">all</a></li>
  252. <li><a href="#" data-filter-value=".filter3">filter name</a></li>
  253. </ul>
  254. </div>
  255.  
  256. </nav>
  257.  
  258.  
  259. <div class="peeps">
  260.  
  261. <!-- BOX TEMPLATE
  262.  
  263. <div class="grid">
  264. <div class="item FILTER FILTER">
  265.  
  266. <div class="img">
  267. <img src="IMAGE URL" />
  268. </div>
  269.  
  270. <div class="desc">
  271. <div class="name"><span class="th" data-feather="user"></span><a href="/TAGGED/"> link name </a> </div>
  272. <div class="name"><span class="th" data-feather="book-open"></span>desc / quote </div>
  273. </div>
  274.  
  275. </div>
  276. </div>
  277.  
  278. more icons at https://feathericons.com/
  279. you can add
  280.  
  281. -->
  282.  
  283.  
  284. <div class="grid">
  285. <div class="item filter3">
  286.  
  287. <div class="img">
  288. <img src="https://i.imgur.com/QqXkezY.png" />
  289. </div>
  290.  
  291. <div class="desc">
  292. <div class="name"><span class="th" data-feather="user"></span><a href="/">name</a> </div>
  293. <div class="name"><span class="th" data-feather="book-open"></span>desc </div>
  294.  
  295. </div>
  296. </div>
  297.  
  298.  
  299. <div class="grid">
  300. <div class="item filter1 filter2 filter3">
  301.  
  302. <div class="img">
  303. <img src="https://i.imgur.com/DI2USF9.png" />
  304. </div>
  305.  
  306. <div class="desc">
  307. <div class="name"><span class="th" data-feather="user"></span><a href="/tagged/">name</a> </div>
  308. <div class="name"><span class="th" data-feather="star"></span>desc </div>
  309. </div>
  310.  
  311. </div>
  312. </div>
  313.  
  314.  
  315. <div class="grid">
  316. <div class="item filter2">
  317.  
  318. <div class="img">
  319. <img src="https://i.imgur.com/S6C6qqp.png" />
  320. </div>
  321.  
  322. <div class="desc">
  323. <div class="name"><span class="th" data-feather="user"></span><a href="/tagged/">name</a> </div>
  324. <div class="name"><span class="th" data-feather="gift"></span>birthday </div>
  325. <div class="name"><span class="th" data-feather="star"></span>desc</div>
  326. </div>
  327.  
  328. </div>
  329. </div>
  330.  
  331.  
  332. <div class="grid">
  333. <div class="item filter1 filter2">
  334.  
  335. <div class="img">
  336. <img src="https://i.imgur.com/b1CH1r7.png" />
  337. </div>
  338.  
  339. <div class="desc">
  340. <div class="name"><span class="th" data-feather="user"></span><a href="/tagged/">name</a> </div>
  341. <div class="name"><span class="th" data-feather="gift"></span>birthday </div>
  342. <div class="name"><span class="th" data-feather="edit"></span>desc </div>
  343. </div>
  344.  
  345. </div>
  346. </div>
  347.  
  348.  
  349. <div class="grid">
  350. <div class="item filter2">
  351.  
  352. <div class="img">
  353. <img src="https://i.imgur.com/GhySV01.png" />
  354. </div>
  355.  
  356. <div class="desc">
  357. <div class="name"><span class="th" data-feather="user"></span><a href="/tagged/">name</a> </div>
  358. <div class="name"><span class="th" data-feather="book-open"></span>desc</div>
  359. </div>
  360.  
  361. </div>
  362. </div>
  363.  
  364.  
  365.  
  366. <div class="grid">
  367. <div class="item filter1">
  368.  
  369. <div class="img">
  370. <img src="https://i.imgur.com/MQxwqDS.png" />
  371. </div>
  372.  
  373. <div class="desc">
  374. <div class="name"><span class="th" data-feather="user"></span><a href="/tagged/">name</a> </div>
  375. <div class="name"><span class="th" data-feather="hash"></span>role </div>
  376. <div class="name"><span class="th" data-feather="edit-2"></span>desc </div>
  377. </div>
  378.  
  379. </div>
  380. </div>
  381.  
  382.  
  383. </div>
  384. </section>
  385.  
  386. <!-- do not disturb -->
  387. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  388. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  389. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  390. <script>
  391. jQuery.noConflict();
  392. (function($){
  393. $(document).ready(function(){
  394. $("a[title],img[title],[title]").style_my_tooltips({
  395. tip_follows_cursor:true,
  396. tip_delay_time:200,
  397. tip_fade_speed:300,
  398. attribute:"title"
  399. });
  400. });
  401. })(jQuery);
  402. </script>
  403.  
  404. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  405. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
  406. <script src="https://static.tumblr.com/p0knose/FpAp5c11c/magnusthemes.combofilters.js"></script>
  407. <script>
  408. $(document).ready(function() {
  409. var $container = $(".peeps"); // the container with all the elements to filter inside
  410. var filters = {}; //should be outside the scope of the filtering function
  411. /* --- read the documentation on isotope.metafizzy.co for more options --- */
  412. var $grid = $container.isotope({
  413. itemSelector: ".item", // the elements to filter
  414. percentPosition: false // put true if you use percentage widths, otherwise put false
  415. });
  416. $(".option-set a").click(function(e) {
  417. var $this = $(this); // cache the clicked link
  418. var filterAttr = "data-filter-value";
  419. var filterValue = $this.attr(filterAttr); // cache the filter
  420. var $optionSet = $this.parents(".option-set"); // cache the parent element
  421. var group = $optionSet.attr("data-filter-group"); // cache the parent filter group
  422. var filterGroup = filters[group];
  423. if (!filterGroup) {
  424. filterGroup = filters[group] = [];
  425. }
  426. var $selectAll = $optionSet.find('a['+filterAttr+'=""]'); // the 'select all' button in the current group
  427. var activeClass = "selected", // the class for active links
  428. exclClass = "exclusive"; // the class for exclusive groups
  429. comboFiltering($this,filters,filterAttr,filterValue,$optionSet,group,$selectAll,activeClass,exclClass);
  430. var comboFilter = getComboFilter(filters);
  431. $grid.isotope({
  432. filter: comboFilter
  433. });
  434. $this.toggleClass(activeClass);
  435. e.preventDefault();
  436. });
  437. });
  438. </script>
  439. <script>feather.replace();</script>
  440. <div class="lo"><a href="http://loranhale.tumblr.com" title="theme">j</a></div>
  441.  
  442. </head>
  443. </body>
  444. </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!