API tools faq
paste
Advertisement
paigeh987

Books Page 1

paigeh987
Aug 16th, 2017
5,518
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.84 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. BOOKS 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:820px;
  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:180px;
  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">Books</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. stars to copy paste:
  300. ★☆☆☆☆
  301. ★★☆☆☆
  302. ★★★☆☆
  303. ★★★★☆
  304. ★★★★★
  305.  
  306. -->
  307.  
  308.  
  309. </ul>
  310. </div>
  311.  
  312.  
  313. <!-- START CONTAINER --->
  314. <div class="container clearfix" >
  315. <!-- paste any new sections after this line -->
  316.  
  317.  
  318.  
  319. <!-- START SECTION -->
  320. <article class="story HERES WHERE YOU WILL LIST TAGS">
  321. <!-- (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.-->
  322. <div class="sectiontitle">
  323. <a href="http://link to buy the book">Book Example</a>
  324. </div>
  325. <div class="txt">author</div>
  326. <div class="abt">
  327. Cras eleifend odio nec nulla tincidunt, ut vulputate neque maximus. Proin tempor, massa vel maximus vehicula, est velit fermentum elit, quis venenatis tellus lorem vel ex. Aliquam erat volutpat. Cras vel neque at ex imperdiet venenatis. Phasellus accumsan finibus sapien, eu sagittis libero elementum id. Praesent sollicitudin quam nulla, volutpat dictum ligula eleifend quis.
  328. </div>
  329. <div class="txt"> genre / ★★★★☆ <div>
  330.  
  331. </article>
  332. <!-- END SECTION -->
  333.  
  334.  
  335. <!-- START SECTION -->
  336. <article class="story fic scifi">
  337. <img src="https://images-na.ssl-images-amazon.com/images/I/41ge7%2BYdIYL.jpg">
  338. <!-- to use an image, you will need to paste the image source code. to get this code, find the picture on the internet somehwere, right click on it, and select "copy image url" -->
  339. <div class="sectiontitle">
  340. <a href="/">Book Example With Image</a>
  341. </div>
  342. <div class="txt">by author</div>
  343. <div class="abt">
  344. Phasellus accumsan finibus sapien, eu sagittis libero elementum id. Praesent sollicitudin quam nulla, volutpat dictum ligula eleifend quis. Duis ut elit vestibulum, vestibulum diam in, sollicitudin ante.
  345. </div>
  346. <div class="txt"> genre / ★★★★☆ <div>
  347.  
  348. </article>
  349. <!-- END SECTION -->
  350.  
  351.  
  352. <!-- START SECTION -->
  353. <article class="story fic romance">
  354. <div class="sectiontitle">
  355. <a href="/">Book Example Without Image</a>
  356. </div>
  357. <div class="txt">by author</div>
  358. <div class="abt">
  359. Phasellus accumsan finibus sapien, eu sagittis libero elementum id. Praesent sollicitudin quam nulla, volutpat dictum ligula eleifend quis. Duis ut elit vestibulum, vestibulum diam in, sollicitudin ante.
  360. </div>
  361. <div class="txt"> genre / ★★★★☆ <div>
  362.  
  363. </article>
  364. <!-- END SECTION -->
  365.  
  366. <!-- START SECTION -->
  367. <article class="story fic fv">
  368. <img src="https://images-na.ssl-images-amazon.com/images/I/41ge7%2BYdIYL.jpg">
  369. <div class="sectiontitle">
  370. <a href="/">Book Example With Image</a>
  371. </div>
  372. <div class="txt">by author</div>
  373. <div class="abt">
  374. Phasellus accumsan finibus sapien, eu sagittis libero elementum id. Praesent sollicitudin quam nulla, volutpat dictum ligula eleifend quis. Duis ut elit vestibulum, vestibulum diam in, sollicitudin ante.
  375. </div>
  376. <div class="txt"> genre / ★★★★☆ <div>
  377.  
  378. </article>
  379. <!-- END SECTION -->
  380.  
  381.  
  382.  
  383. <!-- Tto make new sections, paste before this line! -->
  384. </div>
  385. </div>
  386.  
  387.  
  388. <!------- filter scripts -------->
  389. <script src="http://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
  390. <script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  391. <script>
  392. $(function(){
  393. var $container = $('.container');
  394. $container.isotope({
  395. itemSelector : '.story'
  396. });
  397. var $optionSets = $('#sort .option-set'),
  398. $optionLinks = $optionSets.find('a');
  399.  
  400. $optionLinks.click(function(){
  401. var $this = $(this);
  402. // don't proceed if already selected
  403. if ( $this.hasClass('selected') ) {
  404. return false;
  405. }
  406. var $optionSet = $this.parents('.option-set');
  407. $optionSet.find('.selected').removeClass('selected');
  408. $this.addClass('selected');
  409. // make option object dynamically, i.e. { filter: '.my-filter-class' }
  410. var options = {},
  411. key = $optionSet.attr('data-option-key'),
  412. value = $this.attr('data-option-filter');
  413. // parse 'false' as false boolean
  414. value = value === 'false' ? false : value;
  415. options[ key ] = value;
  416. if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  417. // changes in layout modes need extra logic
  418. changeLayoutMode( $this, options )
  419. } else {
  420. // otherwise, apply new options
  421. $container.isotope( options );
  422. }
  423. return false;
  424. });
  425. });
  426. </script>
  427. <!-----end filter scripts------>
  428.  
  429.  
  430. </body>
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!