API tools faq
paste
Advertisement
shelbsart

rhythm project page

shelbsart
Jul 3rd, 2021
182
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.88 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <!--
  4. Rhythm Project Page!
  5. Creator: @shelbsart
  6.  
  7. please do not steal! please do not remove credit! if you have any questions,
  8. feel free to ask me for help at shelbsart.tumblr.com/ask
  9.  
  10. -->
  11.  
  12.  
  13. <head>
  14. <meta charset="UTF-8">
  15. <title>Fics_Podcast Big Bang</title>
  16. <meta name="author" content="name">
  17. <meta name="description" content="description here">
  18. <meta name="keywords" content="keywords,here">
  19. <link rel="stylesheet" href="https://fonts.googleapis.
  20. com/css?family=Abel" type="text/css">
  21. <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital@1&display=swap" rel="stylesheet">
  22. <link rel="preconnect" href="https://fonts.gstatic.com">
  23. <link href="https://fonts.googleapis.com/css2?family=Satisfy&display=swap" rel="stylesheet">
  24. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  25. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
  26. <script src="https://static.tumblr.com/p0knose/FpAp5c11c/magnusthemes.combofilters.js"></script>
  27. <script src="https://kit.fontawesome.com/9a8fc1d335.js" crossorigin="anonymous"></script>
  28.  
  29.  
  30. <style type="text/css">
  31. body {
  32. background-color: #f2f2f2;
  33. color: #000;
  34. font-size: 14px;
  35. font-family: 'Abel';
  36. background-image:url("https://cdn.discordapp.com/attachments/789225607221215232/829218667526225931/pbb_fic_page_bg.svg");
  37. background-attachment:fixed;
  38. background-size:cover;
  39. background-repeat:no-repeat;
  40. }
  41.  
  42. a {
  43. color: #804c9f;
  44. text-decoration: none;
  45. }
  46.  
  47. a:hover {
  48. color: #d95c1c;
  49. }
  50.  
  51. li {
  52. text-decoration: none;
  53. list-style-type: none;
  54. }
  55.  
  56. /*HEADER & UPPER LINKS*/
  57. .header {
  58. position: relative;
  59. width: 90%;
  60. padding: 50px;
  61. color: #000;
  62. }
  63.  
  64. .links {
  65. margin: 10px;
  66. padding: 5px;
  67. }
  68.  
  69. .links a {
  70. padding: 10px;
  71. }
  72.  
  73.  
  74. /*SIDEBAR & FILTERS*/
  75. .sidebar {
  76. float: left;
  77. width: 20%;
  78. padding: 10px;
  79. border-right: 5px solid #000;
  80. text-align: right;
  81. margin-right: 5%;
  82. }
  83.  
  84.  
  85. .fandom-filter {
  86. display: none;
  87. position: absolute;
  88. background-color: #f9f9f9;
  89. min-width: 160px;
  90. padding: 12px 16px;
  91. z-index: 1;
  92. }
  93.  
  94. .fandom-filter a:visited {
  95. color:#000;
  96. }
  97.  
  98. .category {
  99. }
  100.  
  101. .fandomfilters {
  102. padding:5px;
  103. position:relative;
  104. cursor:default;
  105. }
  106. .fandomfilters:before {
  107. position:absolute;
  108. left:-5px;
  109. line-height:130%;
  110. padding-left:15px;
  111. }
  112. .fandomfilters.open:before {
  113. position:absolute;
  114. left:-5px;
  115. line-height:150%;
  116. padding-left:15px;
  117. }
  118. .ffdrop {
  119. }
  120.  
  121.  
  122. /* links */
  123. .ffdrop a {
  124. display:inline-block;
  125. padding:5px;
  126. margin-right:10px;
  127. position:relative;
  128. overflow: hidden;
  129. white-space: nowrap;
  130. }
  131.  
  132. .ffdrop a:before, .fandomfilters:before{
  133. content: "";
  134. position: absolute;
  135. width: 100%;
  136. height: 2px;
  137. bottom: 0;
  138. left:0;
  139. transition: all 0.7s ease, background-color 0.5s ease 0.2s;
  140.  
  141. -webkit-transform: scaleX(0);
  142. -ms-transform: scaleX(0);
  143. transform: scaleX(0);
  144.  
  145.  
  146. }
  147. .ffdrop a:hover:before, .fandomfilters:hover:before{
  148. background-color: #804c9f; /* accent 1 */
  149. -webkit-transform: scaleX(.8);
  150. -ms-transform: scaleX(.8);
  151. transform: scaleX(.8);
  152. }
  153.  
  154. .selected {
  155. color:#d95c1c;
  156. }
  157.  
  158.  
  159. /* faq */
  160. .ffdrop p {
  161. padding:10px;
  162. }
  163. .ffdrop p a {
  164. color:#b280ab; /* accent 4 */
  165. cursor:pointer;
  166. display:inline;
  167. padding:0;
  168. margin:0;
  169. background:none;
  170. border-bottom:2px solid #b280ab; /* accent 4 */
  171. transition:0.3s;
  172. }
  173. .ffdrop p a:hover {
  174. border-bottom:2px solid #ffddc1; /* accent 2 */
  175. }
  176. .ffdrop p i, .ffdrop p em {
  177. opacity:0.5;
  178. }
  179. .ffdrop p a:before {
  180. display:none;
  181. }
  182.  
  183. .container {
  184. float: left;
  185. width: 70%;
  186. }
  187.  
  188.  
  189. /*FIC BOXES & INSIDES*/
  190. .ficboxes {
  191. width: 70%;
  192. /* border: 1px solid #000;*/
  193. margin: 10px 0 15px 0px;
  194. position: absolute;
  195. right: 20px;
  196. padding: 10px;
  197. box-shadow: 5px 10px 12px #b3b3b3;
  198. background-color:#f2f2f2;
  199. }
  200.  
  201. .ficicon {
  202. width:50px;
  203. padding: 3px;
  204. float:left;
  205. margin-right: 10px;
  206. }
  207.  
  208. .innercontent, .innercontenttwo {
  209. width:85%;
  210. float:left;
  211. margin-bottom:30px;
  212. }
  213.  
  214. .innercontenttwo {
  215. width:75%;
  216. }
  217.  
  218. .fictitle, .fictitle a {
  219. font-size:16px;
  220. }
  221.  
  222. .ficauthor, .ficauthor a {
  223. display:inline;
  224. }
  225.  
  226. .betas {
  227. margin-left:25px;
  228. }
  229.  
  230. .fictags {
  231. color:#333333;
  232. font-family: 'Open Sans', sans-serif;
  233. font-size:12px;
  234. }
  235.  
  236. .ficsum {
  237. margin:20px;
  238. width:90%;
  239. }
  240.  
  241. .ficinfo {
  242. text-align:right;
  243. margin:5px;
  244. width:90%;
  245. }
  246.  
  247. .ficartist {
  248. width:30%;
  249. padding:5px;
  250. background-color:#f8bec1;
  251. margin:15px 5px 5px 5px;
  252. display:inline;
  253. line-height:40px;
  254.  
  255. }
  256. .ficartist a {
  257. color:#000;
  258. }
  259.  
  260. .ficartist a:hover {
  261. color:#804c9f;
  262. }
  263.  
  264. /*DO NOT TOUCH*/
  265. .credit {
  266. color: #b3b3b3;
  267. position: fixed;
  268. bottom: 10px;
  269. right: 10px;
  270. font-size: 16px;
  271. padding: 5px;
  272. border: 1px dotted #b3b3b3;
  273. }
  274. </style>
  275. </head>
  276. <body>
  277.  
  278. <!--DO NOT REMOVE-->
  279. <div class="credit"><a href="https://shelbsart.tumblr.com/">SMc</a></div>
  280.  
  281. <div class="header"><h2>Projects 2021</h2><div class="links">
  282. <a href="/">home</a> <a href="/ask">ask</a> <a href="/">link 1</a> <a href="/">link 2</a></div>
  283. </div>
  284.  
  285. <div class="sidebar">
  286.  
  287. <div class="category">
  288. <div class="fandomfilters">fandoms</div>
  289. <div class="ffdrop">
  290. <ul class="filter option-set" data-filter-group="fandom">
  291. <li class="fandom-filter">
  292. <li><a href="#" data-filter-value="" class="selected">all</a></li>
  293. <li><a href="#" data-filter-value=".kaleidotrope">Kaleidotrope</a></li>
  294. <li><a href="#" data-filter-value=".k&f">Kane and Feels</a></li>
  295. <li><a href="#" data-filter-value=".tbs">The Bright Sessions</a></li>
  296. <li><a href="#" data-filter-value=".taz">The Adventure Zone</a></li>
  297. <li><a href="#" data-filter-value=".tma">The Magnus Archives</a></li>
  298. <li><a href="#" data-filter-value=".tpp">The Penumbra Podcast</a></li>
  299. <li><a href="#" data-filter-value=".wtnv">Welcome to Night Vale</a></li>
  300. </ul>
  301. </div>
  302. </div>
  303.  
  304. <div class="category">
  305. <div class="fandomfilters">rating</div>
  306. <div class="ffdrop">
  307. <ul class="filter option-set" data-filter-group="rating">
  308. <li><a href="#" data-filter-value="" class="selected">all</a></li>
  309. <li><a href="#" data-filter-value=".gen">gen</a></li>
  310. <li><a href="#" data-filter-value=".teen">teen</a></li>
  311. <li><a href="#" data-filter-value=".mature">mature</a></li>
  312. </ul>
  313. </div>
  314. </div>
  315.  
  316. <div class="category">
  317. <div class="fandomfilters">length</div>
  318. <div class="ffdrop">
  319. <ul class="filter option-set" data-filter-group="length">
  320. <li><a href="#" data-filter-value="" class="selected">all</a></li>
  321. <li><a href="#" data-filter-value=".oneshot">oneshot</a></li>
  322. <li><a href="#" data-filter-value=".multichap">multichap</a></li>
  323. </ul>
  324. </div>
  325. </div>
  326.  
  327. </div>
  328.  
  329. <!-- copy from here ONE AUTHOR
  330. <div class="ficboxes tpp teen oneshot 2021">
  331. <img class="ficicon" src="https://64.media.tumblr.com/1ae75a2fd7299fcd23736838ab5258f8/7dcd6f32baa820a7-0e/s128x128u_c1/e52a7e1465d1f4d3066bee081645b97e6125e075.pnj" />
  332. <div class="innercontent">
  333. <div class="fictitle"><a href="ao3.org">Look Me Over Closely</a></div>
  334. <div class="ficauthor"><a href="https://clownboye.tumblr.com/">@clownboye</a></div>
  335. <div class="betas">Betas:
  336. <a href="https://smallmediumproblems.tumblr.com/">@smallmediumproblems</a>,
  337. </div>
  338. <div class="fictags">#No Archive Warnings Apply #Juno Steel/Peter Nureyev</div>
  339. </div>
  340. <div class="ficsum">
  341. AO3 Summary Here
  342. </div>
  343. <div class="ficinfo">Rating: T | Length: Oneshot | Fandom: The Penumbra Podcast</div>
  344. <div class="ficartist"><a href="clown">@57papercranes</a></div>
  345. <div class="ficartist"><a href="radio">@i-castor-magic-missile</a></div>
  346. <div class="ficartist"><a href="blue">@lentej</a></div>
  347. </div>
  348. to here -->
  349.  
  350.  
  351. <!-- copy from here TWO AUTHORS
  352. <div class="ficboxes tpp teen oneshot 2021">
  353. <img class="ficicon" src="https://64.media.tumblr.com/1ae75a2fd7299fcd23736838ab5258f8/7dcd6f32baa820a7-0e/s128x128u_c1/e52a7e1465d1f4d3066bee081645b97e6125e075.pnj" />
  354. <div class="innercontenttwo">
  355. <div class="fictitle"><a href="ao3.org">Look Me Over Closely</a></div>
  356. <div class="ficauthor"><a href="https://clownboye.tumblr.com/">@clownboye</a></div>
  357. <div class="betas">Betas:
  358. <a href="https://smallmediumproblems.tumblr.com/">@smallmediumproblems</a>,
  359. </div>
  360. <div class="fictags">#No Archive Warnings Apply #Juno Steel/Peter Nureyev</div>
  361. </div>
  362. <div class="ficsum">
  363. AO3 Summary Here
  364. </div>
  365. <div class="ficinfo">Rating: T | Length: Oneshot | Fandom: The Penumbra Podcast</div>
  366. <div class="ficartist"><a href="clown">@57papercranes</a></div>
  367. <div class="ficartist"><a href="radio">@i-castor-magic-missile</a></div>
  368. <div class="ficartist"><a href="blue">@lentej</a></div>
  369. </div>
  370. to here -->
  371.  
  372. <div class="container">
  373. <div class="ficboxes tpp teen oneshot 2021">
  374. <img class="ficicon" src="https://64.media.tumblr.com/53a09b07212bf7c475a49e5b67b0295f/7dcd6f32baa820a7-f4/s128x128u_c1/bad98ffbc1e2ffa8ca799f917d5edf843de9b97b.pnj" />
  375. <div class="innercontent">
  376. <div class="fictitle"><a href="ao3.org">Look Me Over Closely</a></div>
  377. <div class="ficauthor"><a href="https://clownboye.tumblr.com/">@clownboye</a></div>
  378. <div class="betas">Betas:
  379. <a href="https://smallmediumproblems.tumblr.com/">@smallmediumproblems</a>
  380. </div>
  381. <div class="fictags">#No Archive Warnings Apply #Juno Steel/Peter Nureyev</div>
  382. </div>
  383. <div class="ficsum">
  384. AO3 Summary Here
  385. </div>
  386. <div class="ficinfo">Rating: T | Length: Oneshot | Fandom: The Penumbra Podcast</div>
  387. <div class="ficartist"><a href="clown">@57papercranes</a></div>
  388. <div class="ficartist"><a href="radio">@i-castor-magic-missile</a></div>
  389. <div class="ficartist"><a href="blue">@lentej</a></div>
  390. </div>
  391.  
  392. <div class="ficboxes tpp teen oneshot 2021">
  393. <img class="ficicon" src="https://64.media.tumblr.com/e95a26f408361793279dd20ccc8c2ef0/d5f3459ef3ea4075-43/s128x128u_c1/c29a9dcd6bfdf3d3637211dc0e2f3476dc49168b.jpg" />
  394. <img class="ficicon" src="https://64.media.tumblr.com/46273bd26158942e945558cf209809e8/cbd3bbab987afe0c-8d/s512x512u_c1/3d88cce8517d6afcb232fff0b67a4615b16e46b8.pnj" />
  395. <div class="innercontenttwo">
  396. <div class="fictitle"><a href="ao3.org">Juno Steel and the Duplicitous Double Heist</a></div>
  397. <div class="ficauthor"><a href="https://dont-taunt-the-octopus.tumblr.com/">@dont-taunt-the-octopus</a> and <a href="https://shelbychild.tumblr.com/">@shelbychild</a></div>
  398. <div class="betas">Betas:
  399. <a href="https://darlinglissa.tumblr.com/">@darlinglissa</a>, <a href="https://ravenick.tumblr.com/">@ravenick</a>
  400. </div>
  401. <div class="fictags">#No Archive Warnings Apply #Juno Steel/Peter Nureyev #Benzaiten Steel & Juno Steel #Rita Redacted & Benzaiten Steel & Juno Steel #Benzaiten Steel & Peter Nureyev</div>
  402. </div>
  403. <div class="ficsum">
  404. AO3 Summary Here
  405. </div>
  406. <div class="ficinfo">Rating: T | Length: Oneshot | Fandom: The Penumbra Podcast</div>
  407. <div class="ficartist"><a href="clown">@battoad</a></div>
  408. <div class="ficartist"><a href="radio">@mininacl</a></div>
  409. </div>
  410.  
  411. <div class="ficboxes wtnv teen oneshot 2021">
  412. <img class="ficicon" src="https://64.media.tumblr.com/bcb822562beefd8618e16668552d3adf/d91ef0752218a5ee-2b/s128x128u_c1/fed6513f0c72dc19576a8de5c90c0785b6f27dec.jpg" />
  413. <div class="innercontent">
  414. <div class="fictitle"><a href="ao3.org">You Know Me Well</a></div>
  415. <div class="ficauthor"><a href="https://mecharchivist.tumblr.com/">@mecharchivist</a></div>
  416. <div class="betas">Betas:
  417. <a href="https://closet-trumpet-monkey.tumblr.com/">@closet-trumpet-monkey</a>, <a href="https://anoccultarcanehex.tumblr.com/">@anoccultarcanehex</a>
  418. </div>
  419. <div class="fictags">#No Archive Warnings Apply #Cecil Palmer/Carlos the Scientist</div>
  420. </div>
  421. <div class="ficsum">
  422. AO3 Summary Here
  423. </div>
  424. <div class="ficinfo">Rating: T | Length: Oneshot | Fandom: Welcome to Night Vale</div>
  425. <div class="ficartist"><a href="clown">@kurofae</a></div>
  426. <div class="ficartist"><a href="radio">@ellevenstar</a></div>
  427. <div class="ficartist"><a href="blue">@thefigureinthecorner</a></div>
  428. </div>
  429.  
  430. <div class="ficboxes tpp teen multichap 2021">
  431. <img class="ficicon" src="https://64.media.tumblr.com/7f97da3c054c1737dfb76a5574056ee4/000e90917dccc84d-21/s128x128u_c1/9480203300017b1667da521cf922f622416b5e9d.jpg" />
  432. <div class="innercontent">
  433. <div class="fictitle"><a href="ao3.org">Is This Gonna be a Kissing Book?</a></div>
  434. <div class="ficauthor"><a href="https://hopeless-eccentric.tumblr.com/">@hopeless-eccentric</a></div>
  435.  
  436. <div class="fictags">#No Archive Warnings Apply #Peter Nureyev/Juno Steel #Juno Steel & Rita Redacted #Rita Redacted & Peter Nureyev</div>
  437. </div>
  438. <div class="ficsum">
  439. AO3 Summary Here
  440. </div>
  441. <div class="ficinfo">Rating: T | Length: Multichap | Fandom: The Penumbra Podcast</div>
  442. <div class="ficartist"><a href="clown">@ellevenstar</a></div>
  443. <div class="ficartist"><a href="radio">@kopescetic</a></div>
  444. <div class="ficartist"><a href="blue">@16thfear</a></div>
  445. <div class="ficartist"><a href="blue">@dont-taunt-the-octopus</a></div>
  446. </div>
  447.  
  448. <div class="ficboxes tma teen oneshot 2021">
  449. <img class="ficicon" src="https://64.media.tumblr.com/avatar_75575e5f148d_128.pnj" />
  450. <div class="innercontent">
  451. <div class="fictitle"><a href="ao3.org">Away From Prying Eyes</a></div>
  452. <div class="ficauthor"><a href="https://lymazhu.tumblr.com/">@lymazhu</a></div>
  453. <div class="betas">Betas:
  454. <a href="https://iceeckos12.tumblr.com/">@iceeckos12</a>, <a href="https://lentej.tumblr.com/">@lentej</a>
  455. </div>
  456. <div class="fictags">#No Archive Warnings Apply #Jonathan Sims/Martin Blackwood</div>
  457. </div>
  458. <div class="ficsum">
  459. AO3 Summary Here
  460. </div>
  461. <div class="ficinfo">Rating: T | Length: Oneshot | Fandom: The Magnus Archives</div>
  462. <div class="ficartist"><a href="clown">@vanroesburg</a></div>
  463. <div class="ficartist"><a href="radio">@janekfan</a></div>
  464. <div class="ficartist"><a href="blue">@bisexualoftheblade</a></div>
  465. </div>
  466.  
  467.  
  468. <div class="ficboxes kaleidotrope teen multichap 2021">
  469. <img class="ficicon" src="https://64.media.tumblr.com/d37992eace408ae97d491e1fbef49ade/c38c0bbd61b8a31e-28/s128x128u_c1/32ca10073f92450797f9cfaa2e2182fe7734fb58.pnj" />
  470. <img class="ficicon" src="https://64.media.tumblr.com/bda39164ef76d12a3ae103b159d87a35/ec7ba72d4bb64df3-5f/s128x128u_c1/d67af47b5cf88e59002ac95a253ceb03ac91b881.pnj" />
  471. <div class="innercontenttwo">
  472. <div class="fictitle"><a href="ao3.org">spite, caffeine, and homosexuality</a></div>
  473. <div class="ficauthor"><a href="https://bisexualoftheblade.tumblr.com/">@bisexualoftheblade</a> and <a href="https://antiv3nom.tumblr.com/">@antiv3nom</a></div>
  474. <div class="betas">Betas:
  475. <a href="https://houser-of-stories.tumblr.com/">@houser-of-stories</a>, <a href="https://acarrotcakehater.tumblr.com/">@acarrotcakehater</a>, <a href="hhttps://meterokinesis.tumblr.com/">@meterokinesis</a>, <a href="https://caedogeist-rights.tumblr.com/">@caedogeist-rights</a>, <a href="https://the-emerald7.tumblr.com/">@the-emerald7</a>
  476. </div>
  477. <div class="fictags">#No Archive Warnings Apply #Drew/Harrison
  478. </div>
  479. </div>
  480. <div class="ficsum">
  481. AO3 Summary Here
  482. </div>
  483. <div class="ficinfo">Rating: T | Length: Multichap | Fandom: Kaleidotrope</div>
  484. <div class="ficartist"><a href="clown">@clownboye</a></div>
  485. <div class="ficartist"><a href="radio">@radiosandrecordings</a></div>
  486. <div class="ficartist"><a href="blue">@bluereadingdolphin</a></div>
  487. </div>
  488.  
  489. <div class="ficboxes tpp teen oneshot 2021">
  490. <img class="ficicon" src="https://64.media.tumblr.com/e95a26f408361793279dd20ccc8c2ef0/d5f3459ef3ea4075-43/s128x128u_c1/c29a9dcd6bfdf3d3637211dc0e2f3476dc49168b.jpg" />
  491. <img class="ficicon" src="https://64.media.tumblr.com/46273bd26158942e945558cf209809e8/cbd3bbab987afe0c-8d/s512x512u_c1/3d88cce8517d6afcb232fff0b67a4615b16e46b8.pnj" />
  492. <div class="innercontenttwo">
  493. <div class="fictitle"><a href="ao3.org">always a song of absence</a></div>
  494. <div class="ficauthor"><a href="https://dont-taunt-the-octopus.tumblr.com/">@dont-taunt-the-octopus</a> and <a href="https://shelbychild.tumblr.com/">@shelbychild</a></div>
  495. <div class="betas">Betas:
  496. <a href="https://darlinglissa.tumblr.com/">@darlinglissa</a>
  497. </div>
  498. <div class="fictags">#No Archive Warnings Apply #Juno Steel/Peter Nureyev #Vespa Ilkay/Buddy Aurinko #Juno Steel & Rita Redacted #General Carte Blanche Creew</div>
  499. </div>
  500. <div class="ficsum">
  501. AO3 Summary Here
  502. </div>
  503. <div class="ficinfo">Rating: T | Length: Oneshot | Fandom: The Penumbra Podcast</div>
  504. <div class="ficartist"><a href="clown">@awkwardproducktions</a></div>
  505. <div class="ficartist"><a href="radio">@clownboye</a></div>
  506. <div class="ficartist"><a href="blue">@bisexualoftheblade</a></div>
  507. </div>
  508.  
  509. <div class="ficboxes tbs mature multichap 2021">
  510. <img class="ficicon" src="https://64.media.tumblr.com/f1d5a7fb06dfe48d5d5a36d984689370/f8d292ae852ff950-a0/s128x128u_c1/e913386c0d1a7c7f014ee6c6716ee66c16ae350e.jpg" />
  511. <div class="innercontent">
  512. <div class="fictitle"><a href="ao3.org">you took your time with the call (i took no time with the fall)</a></div>
  513. <div class="ficauthor"><a href="https://the-emerald7.tumblr.com/">@the-emerald7</a></div>
  514. <div class="betas">Betas:
  515. <a href="https://bisexualoftheblade.tumblr.com/">@bisexualoftheblade</a>, <a href="https://jewishmarkbryant.tumblr.com/">@jewishmarkbryant</a>, <a href="https://ariloveswords.tumblr.com/">@ariloveswords</a>
  516. </div>
  517. <div class="fictags">#No Archive Warnings Apply #Oliver Ritz/Mark Bryant #Mark Bryant & Caleb Michaels #Lee Sandoval/Oliver Ritz #Caleb Michaels/Adam Hayes </div>
  518. </div>
  519. <div class="ficsum">
  520. AO3 Summary Here
  521. </div>
  522. <div class="ficinfo">Rating: M | Length: Multichap | Fandom: The Bright Sessions</div>
  523. <div class="ficartist"><a href="clown">@zannakai</a></div>
  524. <div class="ficartist"><a href="radio">@thefigureinthecorner</a></div>
  525. <div class="ficartist"><a href="blue">@bisexualoftheblade</a></div>
  526. </div>
  527. </body>
  528.  
  529.  
  530. <!--fandom dropdown; credit to: https://cloudythms.tumblr.com/ -->
  531.  
  532. <script type="text/javascript">
  533. $(document).ready(function(){
  534.  
  535. /* DEFAULT STATE */
  536. // default open: use "slideDown" and "addClass"
  537. // default closed: use "slideUp" and "removeClass"
  538. $(".ffdrop").slideUp();
  539. $(".fandomfilters").removeClass("open");
  540.  
  541. $("#openall").click(function(){
  542. $(".ffdrop").slideDown();
  543. $(".fandomfilters").addClass("open");
  544. });
  545.  
  546. $("#closeall").click(function(){
  547. $(".ffdrop").slideUp();
  548. $(".fandomfilters").removeClass("open");
  549. });
  550.  
  551. $(".fandomfilters").click(function(){
  552. $(this).siblings(".ffdrop").slideToggle();
  553. $(this).toggleClass("open");
  554. });
  555.  
  556. });
  557. </script>
  558.  
  559.  
  560. <!--filtering from @magnusthemes "https://magnusthemes.tumblr.com/post/171696773190/isotope-combination-filtering"-->
  561. <script>
  562. $(document).ready(function () {
  563. var $container = $(".container"); // the container with all the elements to filter inside
  564. var filters = {}; //should be outside the scope of the filtering function
  565. /* --- read the documentation on isotope.metafizzy.co for more options --- */
  566. var $grid = $container.isotope({
  567. itemSelector: ".ficboxes", // the elements to filter
  568. percentPosition: true // put true if you use percentage widths, otherwise put false
  569. });
  570. $(".option-set a").click(function (e) {
  571. var $this = $(this); // cache the clicked link
  572. var filterAttr = "data-filter-value";
  573. var filterValue = $this.attr(filterAttr); // cache the filter
  574. var $optionSet = $this.parents(".option-set"); // cache the parent element
  575. var group = $optionSet.attr("data-filter-group"); // cache the parent filter group
  576. var filterGroup = filters[group];
  577. if (!filterGroup) {
  578. filterGroup = filters[group] = [];
  579. }
  580. var $selectAll = $optionSet.find('a[' + filterAttr + '=""]'); // the 'select all' button in the current group
  581. var activeClass = "selected", // the class for active links
  582. exclClass = "exclusive"; // the class for exclusive groups
  583. comboFiltering($this, filters, filterAttr, filterValue, $optionSet, group, $selectAll, activeClass, exclClass);
  584. var comboFilter = getComboFilter(filters);
  585. $grid.isotope({
  586. filter: comboFilter
  587. });
  588. $this.toggleClass(activeClass);
  589. e.preventDefault();
  590. });
  591. });
  592. </script>
  593. </html>
  594.  
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!