API tools faq
paste
Advertisement
harreyeh

fic recs page 2

harreyeh
Jun 5th, 2014
3,661
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.41 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. FANFIC RECS PAGE 02
  4. THEME BY HARDZIAM / THEMESBYZSU
  5.  
  6. Do not use as base
  7. Keep (BOTH) credits in tact
  8.  
  9. MESSAGE ME @ themesbyzsu.tumblr.com/ask if you have ANY questions about using this page theme.
  10.  
  11.  
  12. -->
  13.  
  14. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  15.  
  16. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  17.  
  18. <head>
  19.  
  20. <title>{Title}</title>
  21. <link rel="shortcut icon" href="{Favicon}">
  22. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  23.  
  24. <link href='http://fonts.googleapis.com/css?family=Tangerine:400,700' rel='stylesheet' type='text/css'>
  25.  
  26. <style type="text/css">
  27.  
  28. #fic li{background:#eee;}
  29. #fic{background:#f6f6f6;color:black;}
  30. #fic h1 a{color:black;background:#fff;}
  31. #fic h1:hover:after, #fic h1:hover:before{background:red;}
  32.  
  33. #sort a {color:black;border-bottom:1px solid transparent;}
  34. #sort a:hover {border-bottom:1px solid red;}
  35. #sort li a.selected {border-bottom:1px solid black;}
  36.  
  37. #sort #hidden a:hover {color:white;border-bottom:none;}
  38. #sort #hidden li a.selected {color:white;border:none;}
  39.  
  40. #toplinks a{color:black;}
  41. #toplinks a:hover{border-bottom-color:black;}
  42.  
  43. .story {background:black;color:white;}
  44.  
  45. body{background:white;}
  46.  
  47.  
  48.  
  49. /* --------- STYLING --------- */
  50. body {position:absolute;margin:0;height:100%;width:100%;font-size:12px;font-family:Helvetica;}a {text-decoration:none;outline:none;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;}a:hover {-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;}#credit a{position:fixed;right:10px;bottom:10px;padding:5px;line-height:10px;font-size:11px;color:black;background:white;border:1px solid transparent;-moz-transition-duration:1s;-webkit-transition-duration:1s;-o-transition-duration:1s;}#credit a:hover {border:1px solid black;-moz-transition-duration:1s;-webkit-transition-duration:1s;-o-transition-duration:1s;}
  51. /* ----- HEADER ---- */
  52. #header img{height:250px;width:800px;}#header{position:absolute;left:50%;margin-left:-445px;width:890px;text-align:center;top:20px;}
  53. #toplinks{width:100%;text-align:center;} #toplinks a{display:inline-block;margin:5px;font:12px Montserrat;height:22px;text-transform:uppercase;padding:0 3px;border-bottom:2px solid transparent;-webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; transition: all .4s ease-out;}#toplinks a:hover{height:17px;-webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; transition: all .4s ease-out;}
  54. /* ----- SORT LINKS -----*/
  55. #sort a {-webkit-transition: all .6s ease-out; -moz-transition: all .6s ease-out; transition: all .6s ease-out;display:inline-block; padding:5px 10px;margin:0 5px;font:11px Montserrat;text-transform:uppercase;}
  56. #sort a:hover {-webkit-transition: all .6s ease-out;-moz-transition: all .6s ease-out;transition: all .6s ease-out;}#sort li {display:inline;list-style: none;} #sort ul {list-style: none;}#hidden{background:rgba(0,0,0,.6);padding:10px;overflow:auto;letter-spacing:1px;color:#eee;text-transform:uppercase;font:10px arial;} #hidden a {-webkit-transition: all .6s ease-out; -moz-transition: all .6s ease-out; transition: all .6s ease-out;font:10px arial;padding:6px;border-bottom:none;}
  57. /* ----- FICS ----- */
  58. #stories{position:absolute;top:320px;width:890px;left:50%;margin-left:-445px;text-align:center;}.story {float:left;margin:15px;width:250px;display:inline-block;-webkit-transition: all .6s ease-out; -moz-transition: all .6s ease-out; transition: all .6s ease-out;}
  59. #fic{padding:5px;font:10px 'Montserrat';}
  60. #fic h1 a{display:block;margin:-17px -20px -10px -5px;font:italic 13px 'Playfair Display';letter-spacing:1px;width:250px;padding:5px;line-height:20px;text-align:center;}#fic h1:after{content:"";position:absolute;margin-top:5px;background:transparent;height:2px;width:0px;margin-left:0px;-webkit-transition: all .6s ease-out;-moz-transition: all .6s ease-out;transition: all .6s ease-out;}#fic h1:before{content:"";position:absolute;margin-top:25px;margin-left:0px;background:transparent;height:2px;width:0px;-webkit-transition: all .6s ease-out;-moz-transition: all .6s ease-out;transition: all .6s ease-out;}#fic h1:hover:after{margin-left:-70px;}#fic h1:hover:after, #fic h1:hover:before{width:70px;-webkit-transition: all .6s ease-out; -moz-transition: all .6s ease-out; transition: all .6s ease-out;}
  61. #fic li{display:inline-block;list-style:none;width:30%;line-height:15px;height:0px;overflow:hidden;margin:5px 0;-webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; transition: all .4s ease-out;
  62. }#fic:hover li{height:15px;-webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; transition: all .4s ease-out;}
  63.  
  64. /*----- END STYLING ------*/
  65. </style>
  66.  
  67. </head>
  68.  
  69. <body>
  70.  
  71. <!-----
  72.  
  73. W E L C O M E
  74.  
  75. ----->
  76.  
  77. <div id="header">
  78.  
  79. <div id="toplinks">
  80. <a href="/">back</a> <a href="/ask">recommend</a>
  81. <!--- add more links here if you want, do not remove credit. --->
  82. <a href="http://hardziam.tumblr.com">theme</a>
  83. </div>
  84.  
  85. <!----- HEADER IMAGE! the dimensions are 800 x 250px. Use photoshop or a similar software, save the file, then go to http://tumblr.com/themes/upload_static_file. upload the photo, and then copy the link in below. -->
  86. <img src="http://static.tumblr.com/ssqfxic/rsyn6nqir/ff.jpg">
  87. </div>
  88.  
  89.  
  90. <div id="stories">
  91.  
  92. <!----- begin sorting links --->
  93. <div class="links">
  94. <div id="sort">
  95. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  96. <center>
  97.  
  98. <!---- these are the ones that will show up on the main page. to add a new "tag", copy this below:
  99.  
  100. ---------------------
  101.  
  102. <li><a href="#filter" data-option-filter=".tag">tagname</a></li>
  103.  
  104. ---------------------
  105.  
  106. you can put in anything with one word, or hyphenated. e.g.:
  107.  
  108. <li><a href="#filter" data-option-filter=".angsty">angst</a></li>
  109. <li><a href="#filter" data-option-filter=".high-school">high school</a></li>
  110.  
  111. you will not see the "tag" on the main page, so you can use your own keywords that you'll recognize, like hs - high school or ship names.
  112.  
  113. --->
  114. <li><a href="#filter" data-option-filter="*" class="selected">all fics</a></li>
  115.  
  116. <!----- ENTER THEM HERE! ---->
  117. <li><a href="#filter" data-option-filter=".angst">angst</a></li>
  118. <li><a href="#filter" data-option-filter=".fluff">fluff</a></li>
  119. <li><a href="#filter" data-option-filter=".au">AU</a></li>
  120. <!----- END FILTERS ---->
  121.  
  122. <li><a id="buttonsend" class="t" style="cursor:pointer; display:inline-block"><span class="t">more +</span><span class="t" style="display:none">less -</span></a></li>
  123. </ul>
  124.  
  125.  
  126. <div id="hidden">
  127. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  128. <center>
  129.  
  130. <!--- these are the hidden ones that you click on "more" to get. add in more tags the same way:
  131.  
  132. ---------------------
  133.  
  134. <li><a href="#filter" data-option-filter=".tag">tagname</a></li>
  135.  
  136. ---------------------
  137.  
  138. ---->
  139.  
  140.  
  141. you can put in a subtitles, like<br>
  142.  
  143. keywords:<br>
  144. <li><a href="#filter" data-option-filter=".tag">tagname</a></li>
  145. <li><a href="#filter" data-option-filter=".tag">tagname</a></li>
  146. <li><a href="#filter" data-option-filter=".tag">tagname</a></li>
  147. <br>
  148. ship:
  149. <li><a href="#filter" data-option-filter=".tag">tagname</a></li>
  150. <li><a href="#filter" data-option-filter=".tag">tagname</a></li>
  151. <li><a href="#filter" data-option-filter=".tag">tagname</a></li>
  152. <br>
  153. word counts:
  154. <li><a href="#filter" data-option-filter=".tag">tagname</a></li>
  155. <li><a href="#filter" data-option-filter=".tag">tagname</a></li>
  156. <li><a href="#filter" data-option-filter=".tag">tagname</a></li>
  157. <br>
  158. authors:
  159. <li><a href="#filter" data-option-filter=".tag">tagname</a></li>
  160. <li><a href="#filter" data-option-filter=".tag">tagname</a></li>
  161. <li><a href="#filter" data-option-filter=".tag">tagname</a></li>
  162. <br>
  163.  
  164.  
  165. </ul>
  166.  
  167. </div>
  168. </div>
  169. </div>
  170.  
  171. <div id="container" class="clearfix">
  172.  
  173. <!----- end sorting links --->
  174.  
  175. <!----
  176.  
  177. ---------------------
  178.  
  179. F I C S!
  180. copy and paste the template below.
  181.  
  182. where it says "put-your-tags-in-here", use the tags from above (e.g. angst, high-school) and put them there.
  183.  
  184. e.g.
  185.  
  186. <div id="fic" class="story high-school angst">
  187.  
  188. you can add as many as you want, just make sure you leave 'story' there!
  189.  
  190. ---------------------
  191.  
  192.  
  193.  
  194. <div id="fic" class="story put-your-tags-in-here">
  195. <h1><a href="LINK">FIC TITLE</a></h1>
  196.  
  197. FANFIC DESCRIPTION
  198.  
  199.  
  200. <li>word count</li> <li>pairing</li> <li style="color:#e7e404">★★★★★</li>
  201. </div>
  202.  
  203.  
  204. ---------------------
  205.  
  206.  
  207. ------>
  208.  
  209.  
  210. <div id="fic" class="story angst">
  211. <h1><a href="/">Fic title</a></h1>
  212. fic description here!
  213. <li>word count</li> <li>pairing</li> <li style="color:#e7e404">★★★★★</li>
  214. </div>
  215.  
  216.  
  217.  
  218.  
  219. <!------>
  220.  
  221.  
  222.  
  223. </div>
  224.  
  225. </div>
  226.  
  227. <div id="credit"><a href="http://feverfires.tumblr.com">✿</a></div>
  228.  
  229. <!------ S C R I P T S! ------>
  230. <link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic|Montserrat:400,700' rel='stylesheet' type='text/css'>
  231.  
  232. <!---- masonry scripts ---->
  233. <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
  234. <script type="text/javascript">
  235. $(window).load(function () {
  236. var $content = $('#fics');
  237. $content.masonry({itemSelector: '.entry'}),
  238. });
  239. });
  240. });
  241. </script>
  242. <!---- end masonry scripts -->
  243. <!---- hide/unhide scripts -->
  244. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  245. <script language="javascript">
  246. $(document).ready(function() {
  247. $('a#buttonsend').click(function() {
  248. $('.t',this).toggle();
  249. });
  250.  
  251. $("#hidden").css({"height": "0px", "opacity":"0" });
  252.  
  253. $("#buttonsend").toggle(
  254. function () {
  255. $("#hidden").animate({"height": "130px", "opacity":"1.0"}, "slow");
  256. },
  257. function () {
  258. $("#hidden").animate({"height": "0px", "opacity":"0"}, "slow");
  259. });
  260. });
  261. </script>
  262. <!---- end hide/unhide scripts -->
  263. <!------- filter scripts -------->
  264. <script src="http://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
  265. <script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  266. <script>
  267. $(function(){
  268.  
  269. var $container = $('#container');
  270.  
  271. $container.isotope({
  272. itemSelector : '.story'
  273. });
  274.  
  275.  
  276. var $optionSets = $('#sort .option-set'),
  277. $optionLinks = $optionSets.find('a');
  278.  
  279. $optionLinks.click(function(){
  280. var $this = $(this);
  281. // don't proceed if already selected
  282. if ( $this.hasClass('selected') ) {
  283. return false;
  284. }
  285. var $optionSet = $this.parents('.option-set');
  286. $optionSet.find('.selected').removeClass('selected');
  287. $this.addClass('selected');
  288.  
  289. // make option object dynamically, i.e. { filter: '.my-filter-class' }
  290. var options = {},
  291. key = $optionSet.attr('data-option-key'),
  292. value = $this.attr('data-option-filter');
  293. // parse 'false' as false boolean
  294. value = value === 'false' ? false : value;
  295. options[ key ] = value;
  296. if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  297. // changes in layout modes need extra logic
  298. changeLayoutMode( $this, options )
  299. } else {
  300. // otherwise, apply new options
  301. $container.isotope( options );
  302. }
  303.  
  304. return false;
  305. });
  306.  
  307.  
  308. });
  309. </script>
  310.  
  311. <!-----end filter scripts------>
  312.  
  313.  
  314. </body>
  315. </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!