API tools faq
paste
Advertisement
speightthemes

ficrec 01

speightthemes
Sep 9th, 2014
678
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.91 KB | None | 0 0
raw download clone embed print report
  1. <head>
  2. <title>{title}</title>
  3.  
  4. <link rel="shortcut icon" href="{Favicon}">
  5. <!--
  6.  
  7.  
  8. fic rec 01 - dickspeight
  9. do not be an asshole and we will not have a problem
  10.  
  11.  
  12. --->
  13.  
  14. <!------- filter scripts -------->
  15. <script src="http://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
  16. <script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  17. <script>
  18. $(function(){
  19.  
  20. var $container = $('#container');
  21.  
  22. $container.isotope({
  23. itemSelector : '.story'
  24. });
  25.  
  26.  
  27. var $optionSets = $('#sort .option-set'),
  28. $optionLinks = $optionSets.find('a');
  29.  
  30. $optionLinks.click(function(){
  31. var $this = $(this);
  32. // don't proceed if already selected
  33. if ( $this.hasClass('selected') ) {
  34. return false;
  35. }
  36. var $optionSet = $this.parents('.option-set');
  37. $optionSet.find('.selected').removeClass('selected');
  38. $this.addClass('selected');
  39.  
  40. // make option object dynamically, i.e. { filter: '.my-filter-class' }
  41. var options = {},
  42. key = $optionSet.attr('data-option-key'),
  43. value = $this.attr('data-option-filter');
  44. // parse 'false' as false boolean
  45. value = value === 'false' ? false : value;
  46. options[ key ] = value;
  47. if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  48. // changes in layout modes need extra logic
  49. changeLayoutMode( $this, options )
  50. } else {
  51. // otherwise, apply new options
  52. $container.isotope( options );
  53. }
  54.  
  55. return false;
  56. });
  57.  
  58.  
  59. });
  60. </script>
  61.  
  62. <!-----end filter scripts------>
  63.  
  64. <style type="text/css">
  65.  
  66.  
  67.  
  68.  
  69. body {
  70. background: #fff; /*here you can put in a background */
  71. margin:0;width:100%;height:100%;
  72. font:11px Corbel;
  73. padding: 0;
  74. position:absolute;
  75. }
  76.  
  77. a {
  78. text-decoration:none;
  79. outline:none;
  80. color:gray; /*change link colors here */
  81. -webkit-transition: all 0.5s ease-in-out;
  82. -moz-transition: all 0.5s ease-in-out;
  83. -o-transition: all 0.5s ease-in-out;
  84. }
  85.  
  86. a:hover {
  87. color:#eee; /*change link hover color */
  88. -webkit-transition: all 0.5s ease-in-out;
  89. -moz-transition: all 0.5s ease-in-out;
  90. -o-transition: all 0.5s ease-in-out;
  91. }
  92.  
  93.  
  94. #credit {
  95. position:fixed;
  96. right:0px;
  97. bottom:0px;
  98. padding:4px;
  99. width:9px;
  100. text-transform:none;
  101. font-family: helvetica;
  102. font-weight:none;
  103. letter-spacing:1px;
  104. margin-bottom:3px;
  105. font-size:9px;
  106. margin-right:3px;
  107. border:1px solid;
  108. opacity:0.7;
  109. border-color:#bbb;
  110. background: #fff;
  111. -moz-transition-duration:1s;
  112. -webkit-transition-duration:1s;
  113. -o-transition-duration:1s;
  114. }
  115.  
  116. #credit:hover {
  117. opacity:1;
  118. width:15px;
  119. background:black;
  120. -moz-transition-duration:0.5s;
  121. -webkit-transition-duration:0.5s;
  122. -o-transition-duration:0.5s;
  123. }
  124.  
  125. #containment {
  126. margin-left:auto;
  127. margin-right:auto;
  128. margin-top:140px;
  129. width:520px;
  130. max-height:350px;
  131. min-height:350px;
  132. padding:10px;
  133. border:1px solid #ddd;
  134. overflow-y:scroll;
  135. box-shadow:5px 5px 5px #ddd;
  136. }
  137. ::-webkit-scrollbar {
  138. width: 5px;
  139. }
  140.  
  141. ::-webkit-scrollbar-track {
  142. background-color:white;
  143. }
  144.  
  145. ::-webkit-scrollbar-thumb {
  146. background-color:#eee; /*scrollbar color*/
  147. }
  148.  
  149. .story{
  150. width:188px;
  151. margin:20px;
  152. padding:20px;
  153. transition-duration:1s;
  154. -webkit-transition-duration:1s;
  155. -moz-transition-duration:1s;
  156. -o-transition-duration:1s;
  157. }
  158.  
  159. /* home link */
  160.  
  161. #linkage ul {
  162. position:fixed;
  163. top:500px;
  164. font-family:calibri;
  165. left:50%;
  166. margin-left:-20px;
  167. text-align: center;
  168. display: inline;
  169. border-radius:10px;
  170. padding: 13px 4px 15px 0px;
  171. list-style: none;
  172. }
  173.  
  174. #linkage ul li {
  175. text-transform:lowercase;
  176. position: relative;
  177. font-family:calibri;
  178. font-size: 10px;
  179. display: inline-block;
  180. margin-right: 0px;
  181. padding: 5px 10px;
  182. margin-left:0px;
  183. box-shadow:2px 2px 2px #ddd;
  184. background: #fff;
  185. border:1px solid #eee;
  186. cursor: pointer;
  187. text-decoration:none;
  188. transition-duration:1s;
  189. -webkit-transition-duration:1s;
  190. -moz-transition-duration:1s;
  191. -o-transition-duration:1s;
  192. }
  193.  
  194. #linkage ul li a {
  195. color:#000;
  196. text-decoration:none;
  197. transition-duration:1s;
  198. -webkit-transition-duration:1s;
  199. -moz-transition-duration:1s;
  200. -o-transition-duration:1s;
  201. }
  202.  
  203. /* home link on hover */
  204.  
  205. #linkage ul li:hover {
  206. color: #bbb;
  207. transition-duration:1s;
  208. -webkit-transition-duration:1s;
  209. -moz-transition-duration:1s;
  210. -o-transition-duration:1s;
  211. }
  212.  
  213. #linkage ul li a:hover {
  214. color:#bbb;
  215. }
  216.  
  217.  
  218. /* sort boxes */
  219.  
  220. #nav ul {
  221. position:fixed;
  222. top:103px;
  223. font-family:calibri;
  224. left:50%;
  225. text-align: center;
  226. display: inline;
  227. border-radius:10px;
  228. padding: 13px 4px 15px 0px;
  229. list-style: none;
  230. }
  231.  
  232. /* sort links */
  233.  
  234. #nav ul li {
  235. text-transform:lowercase;
  236. position: relative;
  237. font-family:calibri;
  238. font-size: 10px;
  239. display: inline-block;
  240. margin-right: 17px;
  241. padding: 5px 10px;
  242. margin-left:0px;
  243. box-shadow:2px 2px 2px #ddd;
  244. background: #fff;
  245. border:1px solid #eee;
  246. cursor: pointer;
  247. text-decoration:none;
  248. transition-duration:1s;
  249. -webkit-transition-duration:1s;
  250. -moz-transition-duration:1s;
  251. -o-transition-duration:1s;
  252. }
  253.  
  254. #nav ul li a {
  255. color:#000;
  256. text-decoration:none;
  257. transition-duration:1s;
  258. -webkit-transition-duration:1s;
  259. -moz-transition-duration:1s;
  260. -o-transition-duration:1s;
  261. }
  262.  
  263. /* sort links on hover */
  264.  
  265. #nav ul li:hover {
  266. color: #bbb;
  267. transition-duration:1s;
  268. -webkit-transition-duration:1s;
  269. -moz-transition-duration:1s;
  270. -o-transition-duration:1s;
  271. }
  272.  
  273. #nav ul li a:hover {
  274. color:#bbb;
  275. }
  276.  
  277. /* drop down menu */
  278.  
  279. #nav ul li ul {
  280. position:absolute;
  281. visibility: hidden;
  282. display: none;
  283. margin-top:-89px;
  284. margin-left:-36px;
  285. width: 100px;
  286. text-align:left;
  287. background:none;
  288. padding: 0;
  289. opacity: 0;
  290. z-index:10000000;
  291. -webkit-transition:all 0.8s;
  292. -moz-transition:all 0.8s;
  293. -ms-transition:all 0.8s;
  294. -o-transition:all 0.8s;
  295. transition:all 0.8s;
  296.  
  297. }
  298.  
  299. /* drop down links */
  300.  
  301. #nav ul li ul li {
  302. background: #fff;
  303. display: block;
  304. color: #333;
  305. -webkit-transition:all 0.8s;
  306. -moz-transition:all 0.8s;
  307. -ms-transition:all 0.8s;
  308. -o-transition:all 0.8s;
  309. transition:all 0.8s;
  310. }
  311.  
  312. #nav ul li ul li a {
  313. color:#333;
  314. text-decoration:none;
  315. -webkit-transition:all 0.8s;
  316. -moz-transition:all 0.8s;
  317. -ms-transition:all 0.8s;
  318. -o-transition:all 0.8s;
  319. transition:all 0.8s;
  320. }
  321.  
  322. /* drop down links on hover */
  323.  
  324. #nav ul li ul li:hover {
  325. background: #fff;
  326. color:#333;
  327. -webkit-transition:all 0.8s;
  328. -moz-transition:all 0.8s;
  329. -ms-transition:all 0.8s;
  330. -o-transition:all 0.8s;
  331. transition:all 0.8s;
  332. }
  333.  
  334. #nav ul li ul li a:hover {
  335. color:#333;
  336. text-decoration:none;
  337. -webkit-transition:all 0.8s;
  338. -moz-transition:all 0.8s;
  339. -ms-transition:all 0.8s;
  340. -o-transition:all 0.8s;
  341. transition:all 0.8s;
  342. }
  343.  
  344. #nav ul li:hover ul {
  345. display: block;
  346. opacity: 1;
  347. visibility: visible;
  348. -webkit-transition:all 0.8s;
  349. -moz-transition:all 0.8s;
  350. -ms-transition:all 0.8s;
  351. -o-transition:all 0.8s;
  352. transition:all 0.8s;
  353. }
  354. #topbox{
  355. position:absolute;
  356. z-index:100000;
  357. }
  358.  
  359. #fic{
  360. border:solid 1px #eee;
  361. padding:13px;
  362. text-align:center;
  363. margin-bottom:5px;
  364. }
  365. #fic a{
  366. color:#333;
  367. -webkit-transition:all 0.8s;
  368. -moz-transition:all 0.8s;
  369. -ms-transition:all 0.8s;
  370. -o-transition:all 0.8s;
  371. transition:all 0.8s;
  372. }
  373.  
  374. #fic a:hover{
  375. color:#eee;
  376. -webkit-transition:all 0.8s;
  377. -moz-transition:all 0.8s;
  378. -ms-transition:all 0.8s;
  379. -o-transition:all 0.8s;
  380. transition:all 0.8s;
  381. }
  382.  
  383. #details{
  384. background:white;
  385. color:white;
  386. padding:3px 8px;
  387. float:left;
  388. margin-left:12px;
  389. -webkit-transition:all 0.8s;
  390. -moz-transition:all 0.8s;
  391. -ms-transition:all 0.8s;
  392. -o-transition:all 0.8s;
  393. transition:all 0.8s;
  394. }
  395.  
  396. #fic:hover #details{
  397. color:#333;
  398. background:#eee;
  399. }
  400.  
  401. #details a{
  402. color:white;
  403. }
  404. #fic:hover #details a{
  405. color:#333;
  406. }
  407.  
  408. </style>
  409.  
  410. </head>
  411.  
  412. <body>
  413. <div id=topbox>
  414. <div id="nav">
  415. <ul>
  416. <li>
  417. length
  418. <ul>
  419.  
  420. <div id="sort">
  421. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  422.  
  423. <li><a href="#filter" data-option-filter=".story">refresh</a></li>
  424. <li><a href="#filter" data-option-filter=".05k">0 - 5k</a></li>
  425. <li><a href="#filter" data-option-filter=".510k">5k - 10k</a></li>
  426. <li><a href="#filter" data-option-filter=".1050k">10k - 50k</a></li>
  427. <li><a href="#filter" data-option-filter=".50100k">50k - 100k</a></li>
  428. <li><a href="#filter" data-option-filter=".100k">100k +</a></li>
  429.  
  430. <!-- to add another filter, copy and paste what's below.
  431.  
  432. <li><a href="#filter" data-option-filter=".YOURFILTER">FILTERTITLE</a></li>
  433.  
  434. -->
  435.  
  436.  
  437. </ul>
  438. </div>
  439.  
  440. </ul>
  441. </li>
  442.  
  443. <li>
  444. fandom
  445. <ul>
  446.  
  447. <div id="sort">
  448. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  449.  
  450. <li><a href="#filter" data-option-filter=".story">refresh</a></li>
  451. <li><a href="#filter" data-option-filter=".a">fandom 1</a></li>
  452. <li><a href="#filter" data-option-filter=".b">fandom 2</a></li>
  453. <li><a href="#filter" data-option-filter=".c">fandom 3</a></li>
  454.  
  455. <!-- to add another filter, copy and paste what's below.
  456.  
  457. <li><a href="#filter" data-option-filter=".YOURFILTER">FILTERTITLE</a></li>
  458.  
  459. -->
  460.  
  461. </ul>
  462. </div>
  463. </ul>
  464. </li>
  465.  
  466. <li>
  467. pairing
  468. <ul>
  469.  
  470. <div id="sort">
  471. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  472.  
  473. <li><a href="#filter" data-option-filter=".story">refresh</a></li>
  474. <li><a href="#filter" data-option-filter=".1">pairing 1</a></li>
  475. <li><a href="#filter" data-option-filter=".2">pairing 2</a></li>
  476. <li><a href="#filter" data-option-filter=".3">pairing 3</a></li>
  477. <li><a href="#filter" data-option-filter=".4">pairing 4</a></li>
  478. <li><a href="#filter" data-option-filter=".5">pairing 5</a></li>
  479.  
  480. <!-- to add another filter, copy and paste what's below.
  481.  
  482. <li><a href="#filter" data-option-filter=".YOURFILTER">FILTERTITLE</a></li>
  483.  
  484. -->
  485.  
  486. </ul>
  487. </div>
  488. </ul>
  489. </li>
  490.  
  491. <li>
  492. rating
  493. <ul>
  494.  
  495. <div id="sort">
  496. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  497.  
  498. <li><a href="#filter" data-option-filter=".story">refresh</a></li>
  499. <li><a href="#filter" data-option-filter=".g">General</a></li>
  500. <li><a href="#filter" data-option-filter=".t">Teen</a></li>
  501. <li><a href="#filter" data-option-filter=".m">Mature</a></li>
  502. <li><a href="#filter" data-option-filter=".e">Explicit</a></li>
  503.  
  504. <!-- i don't see why you'd need to, but if you want to add another filter,
  505. copy and paste what's below.
  506.  
  507. <li><a href="#filter" data-option-filter=".YOURFILTER">FILTERTITLE</a></li>
  508.  
  509. -->
  510.  
  511. </ul>
  512. </div>
  513. </ul>
  514. </li>
  515.  
  516. </ul>
  517. </div>
  518. </div>
  519. <div id=containment>
  520. <div id="container"class="clearfix">
  521. <!---- things go here ----->
  522.  
  523.  
  524. <!--// //////////////////// FIC STARTS //////////////////// //--->
  525. <div id="fic" class="story 05k 1 a b e">
  526. <!-- put your filters after story. IMPORTANT: DO NOT REMOVE THE WORD STORY -->
  527.  
  528. <big><b><a href="LINK TO FIC">fic title</a></b></big><br>
  529.  
  530. <small><o title="list, your, tags, here">tags</o></small></p>
  531.  
  532. <!-- put your fic description here. it can be as long or short as you like -->
  533. Duis saperet per te, ad everti appellantur pro. Ut has atqui theophrastus, eum id legere saperet. Ei odio commodo nec. Cum mucius quidam recteque cu. Eros eligendi vis ei, fugit phaedrum delicata ad cum, vel unum vitae complectitur id.
  534.  
  535. </p>
  536.  
  537. <div id="details">length</div><div id=details>pairing</div><div id=details>rating</div><!-- replace length, pairing, and rating with the fic details -->
  538. </div>
  539. <!--// //////////////////// FIC ENDS //////////////////// //--->
  540.  
  541.  
  542. <!--// //////////////////// FIC STARTS //////////////////// //--->
  543. <div id="fic" class="story 510k 2 c m">
  544. <!-- put your filters after story. IMPORTANT: DO NOT REMOVE THE WORD STORY -->
  545.  
  546. <big><b><a href="LINK TO FIC">fic title</a></b></big><br>
  547.  
  548. <small><o title="list, your, tags, here">tags</o></small></p>
  549.  
  550. <!-- put your fic description here. it can be as long or short as you like -->
  551. Simul dicam ius ei, no nam magna tincidunt, ei dolor adolescens sed. Eu per tota diceret facilisis. Blandit principes interpretaris te eam, eum tation accommodare ea. No modo persius eos, nam atqui summo minimum id, habeo summo complectitur cu sit.</p>
  552. Purto facilisi usu ea, pro et paulo abhorreant, vis ne dicit facilis invidunt. Ea sit putent recusabo inimicus, feugait antiopam id eum. Et pri aperiam splendide, ius errem eloquentiam liberavisse ne, sed mutat legendos cu.
  553.  
  554. </p>
  555.  
  556. <div id="details">length</div><div id=details>pairing</div><div id=details>rating</div><!-- replace length, pairing, and rating with the fic details -->
  557. </div>
  558. <!--// //////////////////// FIC ENDS //////////////////// //--->
  559.  
  560.  
  561. <!--// //////////////////// FIC STARTS //////////////////// //--->
  562. <div id="fic" class="story 1050k 3 4 a t">
  563. <!-- put your filters after story. IMPORTANT: DO NOT REMOVE THE WORD STORY -->
  564.  
  565. <big><b><a href="LINK TO FIC">fic title</a></b></big><br>
  566.  
  567. <small><o title="list, your, tags, here">tags</o></small></p>
  568.  
  569. <!-- put your fic description here. it can be as long or short as you like -->
  570. At ius sale nihil soluta, diam agam unum sed ne, quo nibh expetenda salutatus te. Lucilius legendos instructior mea ad. Qui ex amet adipiscing efficiendi. Per tempor adipisci ut. Qui id modo suas laboramus, minim indoctum referrentur has id, nec cu accusata neglegentur.
  571.  
  572. </p>
  573.  
  574. <div id="details">length</div><div id=details>pairing</div><div id=details>rating</div><!-- replace length, pairing, and rating with the fic details -->
  575. </div>
  576. <!--// //////////////////// FIC ENDS //////////////////// //--->
  577.  
  578.  
  579. <!--// //////////////////// FIC STARTS //////////////////// //--->
  580. <div id="fic" class="story 50100k 5 1 b g">
  581. <!-- put your filters after story. IMPORTANT: DO NOT REMOVE THE WORD STORY -->
  582.  
  583. <big><b><a href="LINK TO FIC">fic title</a></b></big><br>
  584.  
  585. <small><o title="list, your, tags, here">tags</o></small></p>
  586.  
  587. <!-- put your fic description here. it can be as long or short as you like -->
  588. Dicat dicam ea cum. Cetero scripserit sit ei, nec odio platonem ex. Vel cu munere epicuri, nam consetetur scribentur no. Sed at aliquando vituperatoribus.</p>
  589. Sint nemore nostrud et vim. Mei eligendi atomorum intellegam ut. Qui an facer suscipit aliquando. Ea mucius antiopam duo, est vidisse meliore neglegentur an, ius ut everti omittam theophrastus.
  590.  
  591. </p>
  592.  
  593. <div id="details">length</div><div id=details>pairing</div><div id=details>rating</div><!-- replace length, pairing, and rating with the fic details -->
  594. </div>
  595. <!--// //////////////////// FIC ENDS //////////////////// //--->
  596.  
  597.  
  598. <!--// //////////////////// FIC STARTS //////////////////// //--->
  599. <div id="fic" class="story 100k 2 4 a m">
  600. <!-- put your filters after story. IMPORTANT: DO NOT REMOVE THE WORD STORY -->
  601.  
  602. <big><b><a href="LINK TO FIC">fic title</a></b></big><br>
  603.  
  604. <small><o title="list, your, tags, here">tags</o></small></p>
  605.  
  606. <!-- put your fic description here. it can be as long or short as you like -->
  607. Error dolor in pro. Cum ex doming definitiones. Eam ferri facer inimicus at, iisque dolorum at pri, sed recteque expetenda ex. Ex meis labitur torquatos sit. Pri no civibus suscipiantur, novum habemus ei sed.
  608.  
  609. </p>
  610.  
  611. <div id="details">length</div><div id=details>pairing</div><div id=details>rating</div><!-- replace length, pairing, and rating with the fic details -->
  612. </div>
  613. <!--// //////////////////// FIC ENDS //////////////////// //--->
  614.  
  615. </div>
  616. <!---- things end ---->
  617.  
  618. <div id="linkage">
  619. <ul>
  620. <li>
  621. <a href=/>home</a>
  622. </ul>
  623. </li>
  624.  
  625. </div>
  626.  
  627. <!-- change this and be ready to die -->
  628. <div id="credit"><a href="http://speightthemes.tumblr.com">st</a></div>
  629.  
  630.  
  631. </body>
  632.  
  633. </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!