API tools faq
paste
paigeh987

Fanfic Page 1

paigeh987
Aug 16th, 2017
4,557
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.85 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. FIC REC PAGE
  7. By Paige @ neonbikethemes.tumblr.com
  8. last updated 8.16.17
  9.  
  10. Credits
  11. - filtering code by zsu @creatre
  12.  
  13. Rules:
  14. - Do not steal code or design
  15. - Do not remove/alter credit
  16. - Please like/reblog the post
  17.  
  18. Thanks!
  19.  
  20. -->
  21.  
  22. <meta charset="utf-8">
  23. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  24. <title>{Title}{block:TagPage} - {Tag} {/block:TagPage} {block:SearchPage} - {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary}- {PostSummary} {/block:PostSummary}</title>
  25. <link rel="shortcut icon" href="{Favicon}">
  26. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  27.  
  28.  
  29.  
  30. <!-- TOOLTIPS -->
  31. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  32. <script>
  33. (function($){
  34. $(document).ready(function(){
  35. $("[title]").style_my_tooltips({
  36. tip_follows_cursor:true,
  37. tip_delay_time:100,
  38. tip_fade_speed:200
  39. }
  40. );
  41. });
  42. })(jQuery);
  43. </script>
  44.  
  45.  
  46. <!-- FONT SCRIPTS -->
  47. <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,300,400,600,700|PT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
  48.  
  49.  
  50. <!-- CSS -->
  51. <style type=text/css>
  52.  
  53.  
  54. /* TOOLTIPS */
  55. #s-m-t-tooltip{
  56. max-width:250px;
  57. margin:15px;
  58. padding: 0px 5px 2px 5px;
  59. border-radius:3px;
  60. background:#000;
  61. color:#fff;
  62. z-index:999999;
  63. font-size:10px;
  64. font-style:italic;
  65. text-transform:lowercase;
  66. }
  67.  
  68. /* STUFF */
  69.  
  70. body{
  71. font-family:'Open Sans', Helvetica, sans-serif;
  72. color:#000000;
  73. margin:0;
  74. background:#f0f0f0 url('');
  75. background-attachment:fixed;
  76. }
  77.  
  78. a {
  79. text-decoration:none;
  80. color:#000;
  81. }
  82.  
  83. a:hover {
  84. text-decoration:none;
  85. color:#a0a0a0;
  86. }
  87.  
  88. p{
  89. margin: 0px 0px 10px 0px;
  90. }
  91.  
  92. ul{
  93. list-style-type:square;
  94. }
  95.  
  96. ol{
  97. list-style-type:lower-roman;
  98. }
  99.  
  100. .navbar{
  101. position:fixed;
  102. background:#fff;
  103. text-align:left;
  104. width:100%;
  105. height:50px;
  106. top:0px;
  107. z-index:99999999999999;
  108. }
  109.  
  110. #title{
  111. float:left;
  112. margin-left:25px;
  113. margin-top:18px;
  114. text-transform:uppercase;
  115. text-align:center;
  116. font-size:10px;
  117. letter-spacing:1px;
  118. font-weight:bold;
  119. z-index:9999999999;
  120. }
  121.  
  122. #navlinks{
  123. float:right;
  124. margin-top:13px;
  125. margin-right:20px;
  126. text-align:right;
  127. z-index:999999999;
  128. }
  129.  
  130. .navlink{
  131. background:#fff;
  132. border:0px solid #a0a0a0;
  133. padding:4px;
  134. padding-left:8px;
  135. padding-right:8px;
  136. margin-left:3px;
  137. margin-right:3px;
  138. font-size:10px;
  139. letter-spacing:1px;
  140. position:relative;
  141. display:inline-block;
  142. text-transform:uppercase;
  143. }
  144.  
  145. /* CONTAINER */
  146.  
  147. .container{
  148. width:770px;
  149. text-align:left;
  150. margin-left:auto;
  151. margin-right:auto;
  152. margin-top:30px;
  153. margin-bottom:100px;
  154. }
  155.  
  156. article{
  157. float:left;
  158. border: 0px solid #dbdbdb;
  159. padding:0px;
  160. margin: 15px 25px 10px 0px;
  161. font-size:9px;
  162. text-align:left;
  163. width:230px;
  164. }
  165. article img{
  166. width:100%;
  167. }
  168.  
  169. .story {
  170. transition-duration:.5s;
  171. -moz-transition-duration:.5s;
  172. -webkit-transition-duration:.5s;
  173. -o-transition-duration:.5s;
  174. }
  175.  
  176. .sectiontitle{
  177. background:#fff;
  178. font-size:11px;
  179. padding:10px;
  180. margin:0px;
  181. margin-bottom:1px;
  182. text-align:center;
  183. text-transform:uppercase;
  184. font-weight:bold;
  185. letter-spacing:1px;
  186. border-bottom: 0px solid #dbdbdb;
  187. }
  188.  
  189. .abt{
  190. font-size:9px;
  191. font-style:italic;
  192. letter-spacing:1px;
  193. margin-bottom:-1px;
  194. padding:7px;
  195. padding-left:11px;
  196. background:#fff;
  197. border-bottom:1px solid #eeeeee;
  198. margin-bottom:0px;
  199. -webkit-transition: all .5s;
  200. text-align:left;
  201. }
  202.  
  203. .txt{
  204. font-size:9px;
  205. letter-spacing:1px;
  206. margin-bottom:-1px;
  207. padding:7px;
  208. padding-left:11px;
  209. background:#fff;
  210. border-bottom:1px solid #eeeeee;
  211. margin-bottom:0px;
  212. -webkit-transition: all .5s;
  213. text-align:left;
  214. text-align:center;
  215. }
  216.  
  217. #sort{
  218. position:relative;
  219. margin:120px auto 0 auto;
  220. font-size:10px;
  221. letter-spacing:1px;
  222. width:770px;
  223. text-align:center;
  224. padding-right:25px;
  225. }
  226.  
  227. #sort ul{
  228. list-style-type:none;
  229. margin-left:-40px;
  230. }
  231. #sort li{
  232. display:inline-block;
  233. padding:5px 7px;
  234. padding-left:11px;
  235. background:#fff;
  236. border-left:1px solid #eeeeee;
  237. margin: 0 0 2px -3px;
  238. }
  239.  
  240. .selected{
  241. opacity:.4;
  242. }
  243.  
  244. </style>
  245.  
  246. </head>
  247.  
  248. <body>
  249.  
  250.  
  251.  
  252. <div class="navbar">
  253.  
  254. <div id="title">FIC REC</div>
  255.  
  256. <div id="navlinks">
  257.  
  258. <a href="/">
  259. <div class="navlink">Home</div></a>
  260.  
  261. <a href="http://tumblr.com/dashboard">
  262. <div class="navlink">Dashboard</div></a>
  263.  
  264. <a href="http://neonbikethemes.tumblr.com">
  265. <div class="navlink">Credit</div></a>
  266.  
  267. </div>
  268.  
  269. </div>
  270.  
  271.  
  272. <!----- Filter links ------>
  273. <div id="sort">
  274. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  275.  
  276. <li><b>sort </b></li>
  277. <li><a href="#filter" data-option-filter=".story">all</a></li>
  278. <li><a href="#filter" data-option-filter=".fic">fiction</a></li>
  279. <li><a href="#filter" data-option-filter=".fantasy">fantasy</a></li>
  280. <li><a href="#filter" data-option-filter=".scifi">sci-fi</a></li>
  281. <li><a href="#filter" data-option-filter=".romance">romance</a></li>
  282. <li><a href="#filter" data-option-filter=".fav">favorites</a></li>
  283.  
  284. <!--
  285.  
  286. Here's an explanation of how the tag system works:
  287.  
  288. this is our exaple line:
  289. <li><a href="#filter" data-option-filter=".fantasy">fantasy</a></li>
  290.  
  291. the flter part (ex: data-option-filter=".fantasy") is the actual tag. You will use this tag and add it to the classes of the fic below. The tag cannot have a space in it.
  292. The word in between <a ...> and </a> will be the word that actualy appears on the website. (ex: Fantasy)
  293. When you want to tag a fic as fantasy, you will add 'fantasy' to the list of classes at the beginning (see below for more info).
  294.  
  295. to add a new tag, copy an paste one of the lines and edit it.
  296.  
  297. -->
  298.  
  299. </ul>
  300. </div>
  301.  
  302.  
  303. <!-- START CONTAINER --->
  304. <div class="container clearfix" >
  305. <!-- paste any new sections after this line -->
  306.  
  307.  
  308. <!-- START SECTION -->
  309. <article class="story HERES WHERE YOU WILL LIST TAGS">
  310. <!-- (above) all sections should have the story class, but you will also want to add the classes that apply to it. simply type each tag out in the class="..." section, and leave a space in between each tag.-->
  311. <div class="sectiontitle">
  312. <a href="http://LINK TO FANFIC">Fanfic Title</a>
  313. </div>
  314. <div class="txt">by <a href="http://LINK TO AUTHOR">Author</a></div>
  315. <div class="abt">
  316. Description or review of fanfic
  317. </div>
  318. <div class="txt"><b>pairing</b> / rating / length / tags</div>
  319. </article>
  320. <!-- END SECTION -->
  321.  
  322.  
  323.  
  324. <!-- START SECTION -->
  325. <article class="story fantasy fav">
  326. <div class="sectiontitle">
  327. <a href="http://archiveofourown.org/">Example</a>
  328. </div>
  329. <div class="txt">by <a href="http://archiveofourown.org/">username</a> on ao3</div>
  330. <div class="abt">
  331. In ut lobortis dolor. Duis rhoncus pulvinar augue. Quisque id ante tortor. In hac habitasse platea dictumst. Nam sed diam ultricies, consequat massa consectetur, mattis nunc. Nam ultrices dui quis hendrerit ultricies. Nulla porta augue id massa laoreet scelerisque. Phasellus at suscipit lectus.
  332. </div>
  333. <div class="txt"><b>pairing</b> / mature / 121k / angst, fluff, romance, high school!AU</div>
  334.  
  335. </article>
  336. <!-- END SECTION -->
  337.  
  338. <article class="story scifi fic romance">
  339. <div class="sectiontitle">
  340. <a href="http://archiveofourown.org/">Example</a>
  341. </div>
  342. <div class="txt">by <a href="http://archiveofourown.org/">username</a> on ao3</div>
  343. <div class="abt">
  344. In ut lobortis dolor. Duis rhoncus pulvinar augue. Quisque id ante tortor. In hac habitasse platea dictumst. Nam sed diam ultricies, consequat massa consectetur, mattis nunc. Nam ultrices dui quis hendrerit ultricies.
  345. </div>
  346. <div class="txt"><b>pairing</b> / mature / 121k / angst, fluff, romance, high school!AU</div>
  347.  
  348. </article>
  349. <!-- END SECTION -->
  350.  
  351.  
  352.  
  353.  
  354. <!-- To make new sections, copy an entire section, and paste before this line! -->
  355. </div>
  356. </div>
  357.  
  358.  
  359. <!------- filter scripts -------->
  360. <script src="http://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
  361. <script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  362. <script>
  363. $(function(){
  364. var $container = $('.container');
  365. $container.isotope({
  366. itemSelector : '.story'
  367. });
  368. var $optionSets = $('#sort .option-set'),
  369. $optionLinks = $optionSets.find('a');
  370.  
  371. $optionLinks.click(function(){
  372. var $this = $(this);
  373. // don't proceed if already selected
  374. if ( $this.hasClass('selected') ) {
  375. return false;
  376. }
  377. var $optionSet = $this.parents('.option-set');
  378. $optionSet.find('.selected').removeClass('selected');
  379. $this.addClass('selected');
  380. // make option object dynamically, i.e. { filter: '.my-filter-class' }
  381. var options = {},
  382. key = $optionSet.attr('data-option-key'),
  383. value = $this.attr('data-option-filter');
  384. // parse 'false' as false boolean
  385. value = value === 'false' ? false : value;
  386. options[ key ] = value;
  387. if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  388. // changes in layout modes need extra logic
  389. changeLayoutMode( $this, options )
  390. } else {
  391. // otherwise, apply new options
  392. $container.isotope( options );
  393. }
  394. return false;
  395. });
  396. });
  397. </script>
  398. <!-----end filter scripts------>
  399.  
  400.  
  401. </body>
Advertisement
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!