Advertisement
wcrmtails

Fic Recs Page 02

Jun 16th, 2019 (edited)
2,020
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.27 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5.  
  6. <!-----page by arithemes/darthvcder
  7.  
  8. CREDITS
  9.  
  10. icon font by suiomi
  11. control fix by cyantists
  12. isotope combination filter tutorial by magnusthemes
  13.  
  14. ----->
  15.  
  16. <head>
  17.  
  18.  
  19.  
  20. <title>fic recs</title> <!-----change the title on the tab here----->
  21. <link rel="shortcut icon" href="{Favicon}">
  22. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  23.  
  24. <!--don't touch ANYTHING from here to "end"-->
  25.  
  26. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  27. <script src="https://static.tumblr.com/xd6ujov/9Rpouml9f/imagesloaded.pkgd.min.js"></script>
  28. <script src="https://static.tumblr.com/f6blkfc/3khouzw5b/masonry.pkgd.min.js"></script>
  29.  
  30. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  31.  
  32. <link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>
  33.  
  34. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  35. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
  36.  
  37. <script src="https://static.tumblr.com/p0knose/FpAp5c11c/magnusthemes.combofilters.js"></script>
  38.  
  39. <script>
  40. $(document).ready(function() {
  41. var $container = $(".container"); // the container with all the elements to filter inside
  42. var filters = {}; //should be outside the scope of the filtering function
  43. /* --- read the documentation on isotope.metafizzy.co for more options --- */
  44. var $grid = $container.isotope({
  45. itemSelector: ".fic", // the elements to filter
  46. percentPosition: false // put true if you use percentage widths, otherwise put false
  47. });
  48. $(".option-set a").click(function(e) {
  49. var $this = $(this); // cache the clicked link
  50. var filterAttr = "data-filter-value";
  51. var filterValue = $this.attr(filterAttr); // cache the filter
  52. var $optionSet = $this.parents(".option-set"); // cache the parent element
  53. var group = $optionSet.attr("data-filter-group"); // cache the parent filter group
  54. var filterGroup = filters[group];
  55. if (!filterGroup) {
  56. filterGroup = filters[group] = [];
  57. }
  58. var $selectAll = $optionSet.find('a['+filterAttr+'=""]'); // the 'select all' button in the current group
  59. var activeClass = "selected", // the class for active links
  60. exclClass = "exclusive"; // the class for exclusive groups
  61. comboFiltering($this,filters,filterAttr,filterValue,$optionSet,group,$selectAll,activeClass,exclClass);
  62. var comboFilter = getComboFilter(filters);
  63. $grid.isotope({
  64. filter: comboFilter
  65. });
  66. $this.toggleClass(activeClass);
  67. e.preventDefault();
  68. });
  69. });
  70. </script>
  71.  
  72. <!--end-->
  73.  
  74.  
  75. <style type="text/css">
  76.  
  77. /*FIX BY CYANTISTS*/
  78. iframe.tmblr-iframe {
  79. z-index:99999999999999!important;
  80. top:0!important;
  81. right:0!important;
  82. opacity:0.4;
  83. /* delete from here */
  84. filter:invert(1);
  85. -webkit-filter:invert(1);
  86. -o-filter:invert(1);
  87. -moz-filter:invert(1);
  88. -ms-filter:invert(1);
  89. /* to here if your blog has a dark background */
  90. transform:scale(0.6);
  91. transform-origin:100% 0;
  92. -webkit-transform:scale(0.6);
  93. -webkit-transform-origin:100% 0;
  94. -o-transform:scale(0.6);
  95. -o-transform-origin:100% 0;
  96. -moz-transform:scale(0.6);
  97. -moz-transform-origin:100% 0;
  98. -ms-transform:scale(0.6);
  99. -ms-transform-origin:100% 0;}
  100.  
  101. iframe.tmblr-iframe:hover {
  102. opacity:0.6!important;}
  103.  
  104. ::-webkit-scrollbar-thumb {
  105. background-color: #8b1c91; /*change the scrollbar color*/
  106. height:auto;
  107. border-bottom:none;
  108. }
  109. ::-webkit-scrollbar {
  110. height:9px;
  111. width:5px;
  112. background-color: transparent;
  113.  
  114. }
  115.  
  116. ::selection {
  117. background-color: #8b1c91; /*selection bg*/
  118. color: #fcfcfc; /*selection text*/
  119. }
  120.  
  121. body {
  122. background-color: #fcfcfc; /*background color*/
  123. background-image: url(/); /*background url*/
  124. background-repeat: repeat;
  125. font-family: Karla;
  126. line-height: 110%;
  127. font-size: 11px;
  128. }
  129.  
  130.  
  131. a {
  132.  
  133. color: #8b1c91; /*link color*/
  134. text-decoration: none;
  135. }
  136.  
  137. a:hover {
  138. color: #9c9c9c; /*link hover color*/
  139. -webkit-transition: 0.8s;
  140. -moz-transition: 0.8s;
  141. transition: 0.8s;
  142. }
  143.  
  144. b {
  145. color: #ff9f8c; /*bold color*/
  146. }
  147.  
  148.  
  149. #title {
  150. font-size: 20px;
  151. color: #8b1c91; /*title color*/
  152. margin-top: 50px;
  153. text-transform: uppercase;
  154. letter-spacing: 1px;
  155. }
  156.  
  157. #nav {
  158. font-size: 15px;
  159. margin-top: 20px;
  160. }
  161.  
  162. #nav a {
  163. height: relative;
  164. color: #8b1c91; /*home/ask/archive color*/
  165. padding-right: 2px;
  166. padding-left: 2px;
  167. letter-spacing: 1px;
  168. margin-left: 5px;
  169. }
  170.  
  171. #nav a:hover {
  172. color: #474646; /*home/ask/archive hover color*/
  173. }
  174.  
  175. #side {
  176. position: fixed;
  177. margin-left: 50px;
  178. }
  179.  
  180. .ffilters {
  181. background-color: white; /*filter box background color*/
  182. border: 1px solid #eee; /*filter box border color*/
  183. border-radius: 5px;
  184. width: 200px;
  185. height: relative;
  186. text-align: center;
  187. padding: 10px;
  188. display: block;
  189. margin-top: 20px;
  190. }
  191.  
  192. .fffilters {
  193. background-color: #fcfcfc; /*filter button bg color*/
  194. color: #474646; /*filter button color*/
  195. cursor: help;
  196. display: inline-block;
  197. margin-left: 5px;
  198. margin-top: 10px;
  199. padding: 6px;
  200. font-size: 13px;
  201. text-align: center;
  202. border: 1px solid #eeeeee; /*filter button border color*/
  203. border-radius: 5px;
  204. }
  205.  
  206. .selected {
  207. background-color: #8b1c91; /*selected filter bg color*/
  208. color: white; /*selected filter color*/
  209. }
  210.  
  211. .ftitle {
  212. font-size: 14px;
  213. background-color: #8b1c91; /*filter box title bg color*/
  214. color: white; /*filter box title color*/
  215. padding: 10px;
  216. width: 200px;
  217. height: relative;
  218. font-weight: bold;
  219. margin-top: -10px;
  220. margin-left: -10px;
  221. border-radius: 5px 5px 0px 0px;
  222. }
  223.  
  224.  
  225. .container {
  226. width: 1000px;
  227. height: auto;
  228. margin-left: 300px;
  229. margin-bottom: 20px;
  230. }
  231.  
  232. .fic {
  233. width: 200px;
  234. height: relative;
  235. background-color: white; /*fic bg color*/
  236. padding: 10px;
  237. border: 1px solid #eeeeee; /*fic border color*/
  238. border-radius: 5px;
  239. margin-top: 20px;
  240. margin-left: 20px;
  241. }
  242.  
  243.  
  244.  
  245. .title {
  246. text-align: center;
  247. background-color: #fcfcfc; /*fic title bg color*/
  248. padding: 6px;
  249. line-height: 1.5;
  250. border: 1px solid #eeeeee; /*fic title border color*/
  251. border-radius: 5px;
  252. font-size: 13px;
  253. }
  254.  
  255. .author {
  256. font-size: 11px;
  257. color: #474646; /*author color*/
  258. text-align: center;
  259. letter-spacing: 1px;
  260. margin-top: 5px;
  261. border-top: 1px solid #eeeeee; /*border between title & author color*/
  262. padding-top: 2px;
  263. }
  264.  
  265.  
  266.  
  267. .summary {
  268. background-color: #fcfcfc; /*summary bg color*/
  269. padding: 6px;
  270. color: #474646; /*summary text color*/
  271. font-size: 12px;
  272. text-align: left;
  273. margin-top: 10px;
  274. border: 1px solid #eeeeee; /*summary border color*/
  275. border-radius: 5px;
  276. line-height: 140%;
  277. }
  278.  
  279. .summary b {
  280. color: #8b1c91; /*"summary:" color*/
  281. }
  282.  
  283. .info {
  284. background-color: #fcfcfc; /*fic tags bg color*/
  285. padding: 6px;
  286. font-size: 11px;
  287. text-align: center;
  288. margin-top: 10px;
  289. display: inline-block;
  290. border: 1px solid #eeeeee; /*fic tags border color*/
  291. border-radius: 5px;
  292. color: #474646; /*fic tags text color*/
  293. }
  294.  
  295. .faves {
  296. background-color: #8b1c91; /*fave fic icon bg color*/
  297. color: white; /*fave fic icon color*/
  298. padding: 6px;
  299. font-size: 11px;
  300. text-align: center;
  301. margin-top: 10px;
  302. border: 1px solid white; /*fave fic icon border color*/
  303. border-radius: 5px;
  304. }
  305.  
  306.  
  307. </style>
  308. </head>
  309.  
  310. <body>
  311.  
  312.  
  313. <center>
  314. <div id="title">
  315. fic recs <!--page title-->
  316. </div>
  317.  
  318. <div id="nav">
  319. <a href="/" class="th th-home" title="home"></a> <!--home link. you don't need to change anything here.-->
  320. <a href="/ask" class="th th-paper-plane" title="ask"></a> <!--ask link. change /ask to whatever your page name is if you have an faq instead-->
  321. <a href="/archive" class="th th-calendar-2" title="archive"></a> <!--archive link. you don't need to change anything here.-->
  322. </div>
  323. </center>
  324.  
  325. <div id="side">
  326. <div class="ffilters">
  327.  
  328. <!--for the first group (general) you'll see the class "exclusive" after "filter option-set". this means that you can ONLY pick one filter in this category. if you wouldn't like that, delete ONLY the word "exclusive". to make the other categories work the same way (only one filter at a time from each category), just add the word "exclusive" after the words "filter option-set" but before the closing quotation mark.-->
  329.  
  330. <div class="ftitle"> <span class="th th-settings"></span> General</div> <!--change "general" to whatever category you want, but i recommend these.-->
  331.  
  332. <div class="filter option-set exclusive" data-filter-group="gen">
  333. <a href="#" data-filter-value="" class="fffilters selected">all fics</a><!--keep this one! important! only change "fics" if you're making this a book page-->
  334. <a href="#" data-filter-value=".fave" class="fffilters">favorites</a> <!--change .fave to whatever filter you want if you're changing it. just pick a unique class that you can remember.-->
  335. </div>
  336.  
  337.  
  338. </div>
  339.  
  340. <div class="ffilters">
  341.  
  342. <div class="ftitle"> <span class="th th-settings"></span> Pairing</div> <!--change pairings to whatever filter group name you'd like-->
  343.  
  344. <div class="filter option-set" data-filter-group="pairing">
  345. <a href="#" data-filter-value="" class="fffilters selected">all pairings</a> <!--keep this here. only change the word "pairings" to whatever you'd like-->
  346. <a href="#" data-filter-value=".filter1" class="fffilters">pairing 1</a> <!--change ".filter1" to an easy to remember class. for example for aziraphale/crowley fics, i made mine ".azcrow". make sure to keep the . !-->
  347. <a href="#" data-filter-value=".filter2" class="fffilters">pairing 2</a> <!--again change ".filter2" to whatever you'd like, following the rules above-->
  348. <a href="#" data-filter-value=".filter3" class="fffilters">pairing 3</a> <!--change ".filter3"-->
  349. <a href="#" data-filter-value=".filter4" class="fffilters">pairing 4</a> <!--change ".filter4"-->
  350. </div>
  351.  
  352. </div>
  353.  
  354. <div class="ffilters">
  355.  
  356. <div class="ftitle"> <span class="th th-settings"></span> Rating</div> <!--again change this if you want a different category-->
  357.  
  358. <div class="filter option-set" data-filter-group="ratings">
  359. <a href="#" data-filter-value="" class="fffilters selected">all ratings</a> <!--again, here only change the "ratings" portion-->
  360. <a href="#" data-filter-value=".gen" class="fffilters">gen</a> <!--like the above, change ".gen" to whatever you'd like as long as you remember it, keeping in the . !-->
  361. <a href="#" data-filter-value=".teen" class="fffilters">teen</a> <!--change ".teen"-->
  362. <a href="#" data-filter-value=".mature" class="fffilters">mature</a> <!--change ".mature"-->
  363. <a href="#" data-filter-value=".explicit" class="fffilters">explicit</a> <!--change ".explicit"-->
  364. </div>
  365.  
  366. </div>
  367. </div>
  368.  
  369.  
  370.  
  371.  
  372. </div>
  373.  
  374.  
  375. </div>
  376.  
  377.  
  378. <center>
  379. <div class="container">
  380.  
  381.  
  382. <!--rec template.-->
  383.  
  384. <!--this will go through the instructions/code with you the copy/paste for more recs will be at the very bottom of the code though, this is not it-->
  385.  
  386. <div class="fic filter1 explicit"> <!--here's where you'll categorize your fic. be sure to leave the "fic" filter! this is very important. but change filter1 to whatever filter you're using and explicit to whatever the rating is/whatever filter you've changed that to. for example if i wanted to use gen i'd just replace it with "gen" and so on.-->
  387.  
  388. <div class="title">
  389. <a href="fic link url">Fic One Title</a> <!--fic title-->
  390.  
  391. <div class="author">
  392. <span class="th th-user"></span> author (author website)
  393. </div> <!--author name & website. for example i'll put (ao3) or (tumblr) or (livejournal) etc.-->
  394. </div>
  395.  
  396.  
  397.  
  398. <div class="summary">
  399. <b>Summary:</b> Fic Summary <!--fic summary. use html for this so if you want <i>italics</i> <b>bold</b> <strike>strike</strike> etc. after each line break you need to put <br><br> OR wrap each paragraph/line <p>like this</p>-->
  400. </div>
  401.  
  402.  
  403. <!--any of these can be changed so it doesn't have to be pairing, length, etc. just change the word.-->
  404.  
  405. <div class="info">pairing</div> <!--pairing-->
  406. <div class="info">fic length</div> <!--fic length like "51k"-->
  407. <div class="info">rating</div> <!--rating-->
  408. <div class="info">warnings</div> <!--warnings-->
  409.  
  410.  
  411.  
  412. </div>
  413. <!--end rec template-->
  414.  
  415. <!--fave rec template-->
  416.  
  417. <!--this one is the same as the above but if you want to mark something as a fave fic, this is the template you use! this will go through the instructions/code with you the copy/paste for more recs will be at the very bottom of the code though, this is not it-->
  418.  
  419. <div class="fic filter2 gen fave"> <!--as above, change filter2 and gen but if you want a fave fic, keep in the word "fave"-->
  420.  
  421. <div class="title">
  422. <a href="fic link url">Fic Two Title</a>
  423.  
  424. <div class="author">
  425. <span class="th th-user"></span> author (author website like ao3)
  426. </div>
  427. </div>
  428.  
  429.  
  430.  
  431. <div class="summary">
  432. <b>Summary:</b> Fic Summary
  433. </div>
  434.  
  435. <div class="th th-heart-1 faves"></div> <!--this is the other difference. keep this as it gives the little heart icon next to your tags! if you don't want this and just want the filter to mark it as fave without the icon, just delete this line-->
  436. <div class="info">pairing</div>
  437. <div class="info">fic length</div>
  438. <div class="info">rating</div>
  439. <div class="info">warnings</div>
  440.  
  441.  
  442.  
  443. </div>
  444. <!--end fave rec template-->
  445.  
  446. <!--the rest are samples so you can see how the filtering works with many fics.-->
  447.  
  448. <!--rec-->
  449. <div class="fic filter3 mature">
  450.  
  451. <div class="title">
  452. <a href="fic link url">Fic Three Title</a>
  453.  
  454. <div class="author">
  455. <span class="th th-user"></span> author (author website)
  456. </div>
  457. </div>
  458.  
  459.  
  460.  
  461. <div class="summary">
  462. <b>Summary:</b> Fic Summary
  463. </div>
  464.  
  465.  
  466. <div class="info">pairing</div>
  467. <div class="info">fic length</div>
  468. <div class="info">rating</div>
  469. <div class="info">warnings</div>
  470.  
  471.  
  472.  
  473. </div>
  474. <!--end rec-->
  475.  
  476. <!--rec-->
  477. <div class="fic filter4 teen">
  478.  
  479. <div class="title">
  480. <a href="fic link url">Fic Four Title</a>
  481.  
  482. <div class="author">
  483. <span class="th th-user"></span> author (author website)
  484. </div>
  485. </div>
  486.  
  487.  
  488.  
  489. <div class="summary">
  490. <b>Summary:</b> Fic Summary
  491. </div>
  492.  
  493.  
  494. <div class="info">pairing</div>
  495. <div class="info">fic length</div>
  496. <div class="info">rating</div>
  497. <div class="info">warnings</div>
  498.  
  499.  
  500.  
  501. </div>
  502. <!--end rec-->
  503.  
  504. <!--rec-->
  505. <div class="fic filter3 explicit">
  506.  
  507. <div class="title">
  508. <a href="fic link url">Fic Five Title</a>
  509.  
  510. <div class="author">
  511. <span class="th th-user"></span> author (author website)
  512. </div>
  513. </div>
  514.  
  515.  
  516.  
  517. <div class="summary">
  518. <b>Summary:</b> Fic Summary
  519. </div>
  520.  
  521.  
  522. <div class="info">pairing</div>
  523. <div class="info">fic length</div>
  524. <div class="info">rating</div>
  525. <div class="info">warnings</div>
  526.  
  527.  
  528.  
  529. </div>
  530. <!--end rec-->
  531.  
  532. <!--rec-->
  533. <div class="fic filter2 mature fave">
  534.  
  535. <div class="title">
  536. <a href="fic link url">Fic Six Title</a>
  537.  
  538. <div class="author">
  539. <span class="th th-user"></span> author (author website)
  540. </div>
  541. </div>
  542.  
  543.  
  544.  
  545. <div class="summary">
  546. <b>Summary:</b> Fic Summary
  547. </div>
  548.  
  549. <div class="th th-heart-1 faves"></div>
  550. <div class="info">pairing</div>
  551. <div class="info">fic length</div>
  552. <div class="info">rating</div>
  553. <div class="info">warnings</div>
  554.  
  555.  
  556.  
  557. </div>
  558. <!--end rec-->
  559.  
  560. <!--rec-->
  561. <div class="fic filter1 gen">
  562.  
  563. <div class="title">
  564. <a href="fic link url">Fic Seven Title</a>
  565.  
  566. <div class="author">
  567. <span class="th th-user"></span> author (author website)
  568. </div>
  569. </div>
  570.  
  571.  
  572.  
  573. <div class="summary">
  574. <b>Summary:</b> Fic Summary
  575. </div>
  576.  
  577.  
  578. <div class="info">pairing</div>
  579. <div class="info">fic length</div>
  580. <div class="info">rating</div>
  581. <div class="info">warnings</div>
  582.  
  583.  
  584.  
  585. </div>
  586. <!--end rec-->
  587.  
  588. <!--rec-->
  589. <div class="fic filter4 explicit">
  590.  
  591. <div class="title">
  592. <a href="fic link url">Fic Eight Title</a>
  593.  
  594. <div class="author">
  595. <span class="th th-user"></span> author (author website)
  596. </div>
  597. </div>
  598.  
  599.  
  600.  
  601. <div class="summary">
  602. <b>Summary:</b> Fic Summary
  603. </div>
  604.  
  605.  
  606. <div class="info">pairing</div>
  607. <div class="info">fic length</div>
  608. <div class="info">rating</div>
  609. <div class="info">warnings</div>
  610.  
  611.  
  612.  
  613. </div>
  614. <!--end rec-->
  615.  
  616. <!--rec-->
  617. <div class="fic filter1 teen fave">
  618.  
  619. <div class="title">
  620. <a href="fic link url">Fic Nine Title</a>
  621.  
  622. <div class="author">
  623. <span class="th th-user"></span> author (author website)
  624. </div>
  625. </div>
  626.  
  627.  
  628.  
  629. <div class="summary">
  630. <b>Summary:</b> Fic Summary
  631. </div>
  632.  
  633. <div class="th th-heart-1 faves"></div>
  634. <div class="info">pairing</div>
  635. <div class="info">fic length</div>
  636. <div class="info">rating</div>
  637. <div class="info">warnings</div>
  638.  
  639.  
  640.  
  641. </div>
  642. <!--end rec-->
  643.  
  644. <!--rec-->
  645. <div class="fic filter2 gen">
  646.  
  647. <div class="title">
  648. <a href="fic link url">Fic Ten Title</a>
  649.  
  650. <div class="author">
  651. <span class="th th-user"></span> author (author website)
  652. </div>
  653. </div>
  654.  
  655.  
  656.  
  657. <div class="summary">
  658. <b>Summary:</b> Fic Summary
  659. </div>
  660.  
  661.  
  662. <div class="info">pairing</div>
  663. <div class="info">fic length</div>
  664. <div class="info">rating</div>
  665. <div class="info">warnings</div>
  666.  
  667.  
  668.  
  669. </div>
  670. <!--end rec-->
  671.  
  672. <!--if you want to add more fics/whatever copy/paste the following after the last "end rec" but AFTER the > :
  673.  
  674. <div class="fic filter2 gen">
  675.  
  676. <div class="title">
  677. <a href="fic link url">Fic Ten Title</a>
  678.  
  679. <div class="author">
  680. <span class="th th-user"></span> author (author website)
  681. </div>
  682. </div>
  683.  
  684.  
  685.  
  686. <div class="summary">
  687. <b>Summary:</b> Fic Summary
  688. </div>
  689.  
  690.  
  691. <div class="info">pairing</div>
  692. <div class="info">fic length</div>
  693. <div class="info">rating</div>
  694. <div class="info">warnings</div>
  695.  
  696.  
  697.  
  698. </div>
  699.  
  700. -->
  701.  
  702. <!--and here is the template for favorite fics:
  703.  
  704. <div class="fic filter2 gen fave">
  705.  
  706. <div class="title">
  707. <a href="fic link url">Fic Ten Title</a>
  708.  
  709. <div class="author">
  710. <span class="th th-user"></span> author (author website)
  711. </div>
  712. </div>
  713.  
  714.  
  715.  
  716. <div class="summary">
  717. <b>Summary:</b> Fic Summary
  718. </div>
  719.  
  720. <div class="th th-heart-1 faves"></div>
  721. <div class="info">pairing</div>
  722. <div class="info">fic length</div>
  723. <div class="info">rating</div>
  724. <div class="info">warnings</div>
  725.  
  726.  
  727.  
  728. </div>
  729.  
  730. -->
  731.  
  732.  
  733.  
  734. </div>
  735. </center>
  736.  
  737. <!--DO NOT EDIT THIS EXCEPT FOR #8b1c91 TO CHANGE THE LINK COLOR-->
  738.  
  739. <div style="position:fixed; bottom:8px; right:15px; font-size: 15px;"><a style="color:#8b1c91; text-decoration:none; font-weight: bold" class= "th th-stars" href="http://arithemes.tumblr.com/"></a></center></div>
  740.  
  741. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement