API tools faq
paste
odeysseus_thm

bookshelf / PEPPERMINT

odeysseus_thm
Jul 9th, 2016
14,197
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.44 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5. peppermint
  6.  
  7. @odeysseus
  8. -->
  9.  
  10.  
  11. <link rel="shortcut icon" href="{Favicon}">
  12. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  13.  
  14. <title>bookshelf</title> <!--title-->
  15.  
  16. <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,700,700italic' rel='stylesheet' type='text/css'>
  17.  
  18. <style type="text/css">
  19.  
  20. /* to hide tumblr controls */
  21. iframe#tumblr_controls, iframe.tmblr-iframe.tmblr-iframe--desktop-loggedin-controls.iframe-controls--desktop,iframe.tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop { display:none!important; }
  22.  
  23.  
  24. ::-webkit-scrollbar{ height:3px;width:1px;background:inherit;}
  25. ::-webkit-scrollbar-thumb {background:#eee;}
  26. ::-webkit-scrollbar-track {background:transparent;}
  27.  
  28. body {
  29. background:#f7f7f7; /* main background */
  30. color:#767676; /* text color */
  31. font-family:'Open Sans', sans-serif;
  32. font-size:9.5px; /* font size */
  33. font-weight:300;
  34. -moz-osx-font-smoothing:grayscale;
  35. -webkit-font-smoothing:antialiased;
  36. font-smoothing:antialiased;
  37. }
  38.  
  39. a, nav a:after,.sort a:after,.book {
  40. transition:all .4s ease;
  41. -webkit-transition:all .4s ease;
  42. -moz-transition:all .4s ease;
  43. -o-transition:all .4s ease;
  44. }
  45.  
  46. a {
  47. color:#999; /* link color */
  48. text-decoration:none;
  49. }
  50.  
  51. a:hover { text-decoration:none; color:#222; }
  52.  
  53. aside { top:0;left:0;width:120px;height:100%;position:fixed;background:#fff;text-align:right;padding-right:30px;padding-left:30px; }
  54. aside img { margin-top:150px;margin-bottom:10px;width:40px;height:40px;border-radius:5px; }
  55. h8 { color:#444;font-size:13px;letter-spacing:.5px;display:block;margin-bottom:10px;font-style:italic;font-weight:400; }
  56.  
  57. nav a { display:block;margin-top:3px; }
  58. nav a:after,.sort a:after { content:'··';color:#666;margin-left:5px;font-weight:bold;} nav a:hover:after,.sort a:hover:after { margin-left:13px; }
  59.  
  60. .sort li { list-style:none;margin-top:3px;}
  61. .sort ul { margin-left:0px;padding-top:10px;border-top:1px solid #eee; }
  62. .sort li a.selected { color:#222;font-weight:400; } .sort li a.selected:after { margin-left:13px; }
  63. section { margin:60px;left:180px;width:calc(270px * 3); }
  64. .book { width:200px;background:#fff;padding:15px;float:left;line-height:180%;margin:20px;} .book h1 { width:185px;font-weight:400;font-style:italic;margin:0 0 10px 0;padding:0 0 10px 0;color:#444;font-size:11px;border-bottom:1px solid #eee; }
  65. .book h1 b { display:block;font-size:8.5px;text-transform:uppercase;letter-spacing:1px;font-weight:300;font-style:normal;margin-top:3px;}
  66. .link { margin-top:10px;text-align:center;padding-top:10px;border-top:1px solid #eee; } .link a { border-right:1px solid #eee;margin-right:10px;padding-right:10px; font-size:9px;text-transform:uppercase;letter-spacing:.5px;margin-left:-10px;}
  67. .fave:after {
  68. top:5px;right:5px;content:' ♥ ';position:absolute;padding:2px 6px;background:#fafafa;color:#D490B0;border:1px solid #eee;border-radius:3px;
  69. }
  70. .d { max-height:140px;overflow-y:auto;padding-right:5px; }
  71. .nice { bottom:20px;right:20px;position:fixed; }
  72. </style>
  73.  
  74. </head>
  75.  
  76. <body>
  77.  
  78. <aside>
  79. <img src="{PortraitURL-64}"/>
  80. <h8>bookshelf</h8> <!--main title-->
  81.  
  82. <nav> <!--sidebar links: add or delete as you wish-->
  83. <a href="/">return</a>
  84. <a href="http://tumblr.com/dashboard">dashboard</a>
  85. <a href="http://odeysseus.tumblr.com">theme</a>
  86. </nav>
  87.  
  88. <div class="sort">
  89. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  90.  
  91. <!--these are your filters. an example:
  92. <li><a href="#filter" data-option-filter=".FILTER">filter name</a></li>
  93. -->
  94. <li><a href="#filter" data-option-filter=".book">everything</a></li>
  95. <li><a href="#filter" data-option-filter=".fave">favorites</a></li>
  96. <li><a href="#filter" data-option-filter=".series">series</a></li>
  97. <li><a href="#filter" data-option-filter=".standalone">standalone</a></li>
  98. <li><a href="#filter" data-option-filter=".ya">young adult</a></li>
  99.  
  100. </ul>
  101. </div>
  102. </aside>
  103.  
  104. <section>
  105. <!-- start books
  106.  
  107. for filters: where it says <div class="book">, you can add filters corresponding to the filters above. for example, for a favorite ya series, you would tag it <div class="book fave ya series"> and it would show up under all those filters. the "book" needs to be there for all of them. you can add new filters above by copying and pasting the example above, then adding the filter class to your book. for example, if i wanted to add a category for classics, i would add the filter like this:
  108.  
  109. <li><a href="#filter" data-option-filter=".classic">classics</a></li>
  110.  
  111. then tag the book like this: <div class="book classic"> for it to work.
  112. -->
  113.  
  114. <!----- START EXAMPLE BOOK ----->
  115. <div class="book"> <h1>book name <b>book author</b></h1>
  116. <div class="d"> book description goes here </div>
  117. <div class="link"> <a href="GOODREADS LINK">goodreads</a>
  118. ★★★★★ <!--star rating-->
  119. </div>
  120. </div>
  121. <!----- END EXAMPLE BOOK ----->
  122.  
  123. <!--end books - do not edit beyond this point-->
  124. </section>
  125.  
  126. <div class="nice"><a href="http://odeysseus.tumblr.com">O</a></div>
  127. </body>
  128.  
  129.  
  130. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script> <script src="http://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script> <script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  131. <script>
  132. $(window).load(function () {
  133. $('section').masonry({
  134. itemSelector : ".book", },
  135. function() { $('section').masonry({ appendedContent: $(this) }); } ); });
  136. $(function(){ var $container = $('section');
  137. $container.isotope({
  138. itemSelector : '.book' });
  139. var $optionSets = $('.sort .option-set'),
  140. $optionLinks = $optionSets.find('a');
  141. $optionLinks.click(function(){
  142. var $this = $(this); if ( $this.hasClass('selected') ) { return false; }
  143. var $optionSet = $this.parents('.option-set');
  144. $optionSet.find('.selected').removeClass('selected');
  145. $this.addClass('selected');
  146. var options = {},
  147. key = $optionSet.attr('data-option-key'),
  148. value = $this.attr('data-option-filter');
  149. value = value === 'false' ? false : value;
  150. options[ key ] = value;
  151. if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  152. changeLayoutMode( $this, options )
  153. } else { $container.isotope( options ); }
  154. return false; });
  155. });
  156. </script>
  157. </html>
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!