Advertisement
loranhale

melbourne

Dec 24th, 2016
4,113
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.96 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!----
  5.  
  6.  
  7. melbourne
  8. revamped 1/3/2019
  9.  
  10. @loranhale
  11.  
  12.  
  13. ----->
  14.  
  15. <title>{Title}</title>
  16. <link rel="shortcut icon" href="{Favicon}">
  17. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  18.  
  19. <link href="https://fonts.googleapis.com/css?family=Cutive+Mono|Lora:400,400i,700,700i|Open+Sans:400,400i,600,600i|Inconsolata:400,700" rel="stylesheet">
  20. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  21.  
  22. <style type="text/css">
  23.  
  24. /* scrollbar */
  25.  
  26. ::-webkit-scrollbar {
  27. height:8px;
  28. width:.5px;
  29. background:#fafafa;
  30. }
  31.  
  32. ::-webkit-scrollbar-thumb { background:#eee; }
  33.  
  34. /* tumblr controls */
  35.  
  36. iframe.tmblr-iframe {
  37. z-index:99999999999999!important;
  38. top:0!important;
  39. right:0!important;
  40. opacity:0.4;
  41. /* delete invert(1) from here */
  42. filter:invert(1) contrast(150%);
  43. -webkit-filter:invert(1) contrast(150%);
  44. -o-filter:invert(1) contrast(150%);
  45. -moz-filter:invert(1) contrast(150%);
  46. -ms-filter:invert(1) contrast(150%);
  47. /* to here if your blog has a dark background */
  48. transform:scale(0.65);
  49. transform-origin:100% 0;
  50. -webkit-transform:scale(0.65);
  51. -webkit-transform-origin:100% 0;
  52. -o-transform:scale(0.65);
  53. -o-transform-origin:100% 0;
  54. -moz-transform:scale(0.65);
  55. -moz-transform-origin:100% 0;
  56. -ms-transform:scale(0.65);
  57. -ms-transform-origin:100% 0;
  58. transition:all .6s ease;
  59. }
  60.  
  61. iframe.tmblr-iframe:hover { opacity:0.6!important; }
  62.  
  63. /* tooltips */
  64.  
  65. #s-m-t-tooltip {
  66. max-width:300px;
  67. margin:15px;
  68. padding:4px 6px;
  69. z-index:99999999;
  70. color:#000;
  71. border:1px solid #f7cac9;
  72. background:#fff;
  73. }
  74.  
  75. /* body */
  76.  
  77. body {
  78. background:#fff;
  79. color:#555;
  80. letter-spacing:.5px;
  81. font-family:'open sans', arial, sans-serif;
  82. font-size:10px;
  83. line-height:130%;
  84. -moz-osx-font-smoothing:grayscale;
  85. -webkit-font-smoothing:antialiased;
  86. font-smoothing:antialiased;
  87. }
  88.  
  89. a {
  90. color:#91a8d0; /* links */
  91. text-decoration:none;
  92. transition:all .6s ease;
  93. }
  94.  
  95. a:hover { color:#ff6f61; }
  96.  
  97. b { font-style:bold; color:#222; }
  98. i { font-style:italic; }
  99.  
  100. section {
  101. width:calc(250px * 4);
  102. box-sizing:border-box;
  103. margin:90px auto;
  104. margin-left:230px;
  105. }
  106.  
  107. /* sidebar */
  108.  
  109. nav {
  110. top:0;
  111. left:0;
  112. width:150px;
  113. height:100%;
  114. position:fixed;
  115. padding:0 30px;
  116. margin-left:20px;
  117. }
  118.  
  119. .sidebar { margin-top:100px; }
  120.  
  121. .t {
  122. font-size:20px;
  123. display:block;
  124. font-weight:600;
  125. letter-spacing:1px;
  126. text-transform:lowercase;
  127. color:#222;
  128. margin-bottom:10px;
  129. font-family:'inconsolata', monospace;
  130. }
  131.  
  132. .icon { display:block; margin-bottom:10px; }
  133. .icon img {
  134. width:60px;
  135. height:auto;
  136. border-radius:3px;
  137. }
  138.  
  139. .links { margin-bottom:15px; }
  140. .links a { margin-right:7px; }
  141.  
  142. .d { margin-bottom:10px; width:125px; }
  143.  
  144. /* filters */
  145.  
  146. nav ul { margin-left:-40px; overflow-y:scroll; max-height:220px; }
  147. nav ul li {
  148. list-style-type:none;
  149. display:block;
  150. margin-bottom:5px;
  151. }
  152.  
  153. nav ul li a { color:#444; font-weight:400; }
  154. nav ul li a:hover { margin-left:8px; }
  155.  
  156. /* selected filter */
  157.  
  158. nav ul li a.selected { color:#ff6f61; font-weight:600; }
  159.  
  160. nav ul b {
  161. padding:2px 5px;
  162. border:1px solid #eee;
  163. font-size:11px;
  164. background:#fafafa;
  165. }
  166.  
  167. /* boxes */
  168.  
  169. .grid .item {
  170. display:block;
  171. width:250px;
  172. float:left;
  173. margin:10px 25px 25px;
  174. box-sizing:border-box;
  175. border:1px solid #eee;
  176. background:#fff;
  177. }
  178.  
  179. .top { padding:10px; height:150px; overflow:hidden; }
  180.  
  181. .img {
  182. float:left;
  183. display:inline;
  184. margin-right:10px;
  185. }
  186.  
  187. .img img { width:100px; height:auto;}
  188.  
  189. .title {
  190. letter-spacing:1px;
  191. font-weight:600;
  192. text-transform:uppercase;
  193. font-size:11.5px;
  194. color:#222;
  195. }
  196.  
  197. .title i {
  198. display:block;
  199. text-transform:lowercase;
  200. letter-spacing:.5px;
  201. font-weight:400;
  202. font-size:11px;
  203. margin-top:3px;
  204. font-family:georgia;
  205. }
  206.  
  207. .info {
  208. border-bottom:1px solid #eee;
  209. padding-bottom:10px;
  210. margin-bottom:10px;
  211. }
  212.  
  213. .rate b { margin-right:5px; }
  214.  
  215. .heart { margin-top:8px; }
  216. .heart .th {
  217. width:11px;
  218. height:11px;
  219. font-size:11px;
  220. text-align:center;
  221. padding:5px;
  222. border:1px solid #ff6f61;
  223. border-radius:2px;
  224. color:#ffb7b0;
  225. }
  226.  
  227. /* description */
  228.  
  229. .bottom { padding:10px 10px 5px; border-top:1px solid #eee; }
  230. .desc { padding-bottom:5px; }
  231. .desc-alt { overflow-y:scroll; max-height:180px; }
  232.  
  233. /* do not disturb */
  234.  
  235. .lo { bottom:20px; right:20px; position:fixed; }
  236. .lo a { text-transform:uppercase; padding:5px; font-size:12px; }
  237.  
  238. </style>
  239.  
  240. <body>
  241.  
  242. <nav>
  243.  
  244. <div class="sidebar">
  245. <div class="icon"><img src="{PortraitURL-128}" /></div>
  246.  
  247. <!-- optional description -->
  248. <div class="d">this is a description </div>
  249.  
  250. <div class="t">bookshelf</div>
  251. <div class="links">
  252. <a href="/">home</a>
  253. <a href="/ask">message</a>
  254. <a href="/">explore</a>
  255. </div>
  256. </div>
  257.  
  258. <!-- IMPORTANT // filters
  259.  
  260. below is a template for a new filter
  261. do NOT remove the dot "." before FILTER.
  262. <li><a href="#" data-filter-value=".FILTER">FILTER NAME</a></li>
  263.  
  264.  
  265. below is a template for a whole set of filters that you can add
  266. REMEMBER to change group1 to group2 if it's a different set of filters
  267.  
  268. <ul class="filter option-set exclusive" data-filter-group="group1">
  269. <li style="margin:20px 0 10px;"><b>OPTIONAL CATEGORY NAME</b></li>
  270. <li><a href="#" data-filter-value="" class="selected">FILTER NAME</a></li>
  271. <li><a href="#" data-filter-value=".FILTER">FILTER NAME</a></li>
  272. <li><a href="#" data-filter-value=".FILTER">FILTER NAME</a></li>
  273. <li><a href="#" data-filter-value=".FILTER">FILTER NAME</a></li>
  274. </ul>
  275.  
  276.  
  277. -->
  278.  
  279. <ul class="filter option-set exclusive" data-filter-group="group1">
  280. <!-- add <li><b>category name</b></li> if you want a category name -->
  281. <li><a href="#" data-filter-value="" class="selected">everything</a></li>
  282. <li><a href="#" data-filter-value=".current">currently reading</a></li>
  283. <li><a href="#" data-filter-value=".fave">favourites</a></li>
  284. <li><a href="#" data-filter-value=".tbr">to be read</a></li>
  285.  
  286. </ul>
  287.  
  288. <ul class="filter option-set exclusive" data-filter-group="group2">
  289. <li style="margin:20px 0 10px;"><b>genres</b></li>
  290. <li><a href="#" data-filter-value="" class="selected">all genres</a></li>
  291. <li><a href="#" data-filter-value=".ya">young adult</a></li>
  292. <li><a href="#" data-filter-value=".na">new adult</a></li>
  293. <li><a href="#" data-filter-value=".adult">adult</a></li>
  294. <li><a href="#" data-filter-value=".fantasy">fantasy</a></li>
  295. <li><a href="#" data-filter-value=".romance">romance</a></li>
  296. <li><a href="#" data-filter-value=".contemporary">contemporary</a></li>
  297. </ul>
  298.  
  299. </nav>
  300.  
  301.  
  302. <section>
  303.  
  304. <!-- BOX TEMPLATE
  305.  
  306. replace FILTER with your desired filter name. make sure it is same as the
  307. '.FILTER' class name in the filters section.
  308.  
  309. <div class="grid">
  310. <div class="item FILTER FILTER">
  311.  
  312. <div class="top">
  313. <div class="img">
  314. <img src="IMAGE URL" />
  315. </div>
  316.  
  317. <div class="info">
  318. <div class="title">BOOK TITLE <i>author</i></div>
  319. </div>
  320.  
  321. <div class="rate"><b>rating</b> ★★★★★</div>
  322. <div class="rate"><b>goodreads</b> <a href="/">link</a></div>
  323. <div class="rate"><b>genre</b> text here</div>
  324. <div class="rate"><b>blog review</b> <a href="/">link</a></div>
  325.  
  326. <div class="heart"><span class="th th-heart-1"></span></div>
  327.  
  328. </div>
  329.  
  330. <div class="bottom">
  331. <div class="desc">
  332. description here.
  333. </div>
  334. </div>
  335.  
  336. </div>
  337. </div>
  338.  
  339. -->
  340.  
  341.  
  342. <div class="grid">
  343. <div class="item fave ya">
  344.  
  345. <div class="top">
  346. <div class="img">
  347. <img src="IMAGE URL" />
  348. </div>
  349.  
  350. <div class="info">
  351. <div class="title">title <i>author</i></div>
  352. </div>
  353.  
  354. <div class="rate"><b>rating</b> ★★★★★</div>
  355. <div class="rate"><b>goodreads</b> <a href="/">link</a></div>
  356. <div class="rate"><b>genre</b> text</div>
  357. <div class="rate"><b>blog review</b> <a href="/">link</a></div>
  358. <!-- i recommend four lines maximum -->
  359.  
  360. <!-- optional -->
  361. <div class="heart"><span class="th th-heart-1"></span></div>
  362.  
  363. </div>
  364.  
  365. <!-- you can remove the desc section below if you want -->
  366. <div class="bottom">
  367. <div class="desc">
  368. <!-- if you want your description to scroll, add '-alt' after desc so
  369. <div class="desc-alt"> -->
  370. description
  371. </div>
  372. </div>
  373.  
  374. </div>
  375. </div>
  376.  
  377.  
  378. </section>
  379.  
  380. <!-- do not disturb -->
  381. <div class="lo">
  382. <a href="http://loranhale.tumblr.com" title="theme">j</a>
  383. </div>
  384.  
  385. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  386. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  387. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  388. <script>
  389. jQuery.noConflict();
  390. (function($){
  391. $(document).ready(function(){
  392. $("a[title],img[title],[title]").style_my_tooltips({
  393. tip_follows_cursor:true,
  394. tip_delay_time:200,
  395. tip_fade_speed:300,
  396. attribute:"title"
  397. });
  398. });
  399. })(jQuery);
  400. </script>
  401.  
  402. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  403. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
  404. <script src="https://static.tumblr.com/p0knose/FpAp5c11c/magnusthemes.combofilters.js"></script>
  405. <script>
  406. $(document).ready(function() {
  407. var $container = $("section"); // the container with all the elements to filter inside
  408. var filters = {}; //should be outside the scope of the filtering function
  409. /* --- read the documentation on isotope.metafizzy.co for more options --- */
  410. var $grid = $container.isotope({
  411. itemSelector: ".item", // the elements to filter
  412. percentPosition: false // put true if you use percentage widths, otherwise put false
  413. });
  414. $(".option-set a").click(function(e) {
  415. var $this = $(this); // cache the clicked link
  416. var filterAttr = "data-filter-value";
  417. var filterValue = $this.attr(filterAttr); // cache the filter
  418. var $optionSet = $this.parents(".option-set"); // cache the parent element
  419. var group = $optionSet.attr("data-filter-group"); // cache the parent filter group
  420. var filterGroup = filters[group];
  421. if (!filterGroup) {
  422. filterGroup = filters[group] = [];
  423. }
  424. var $selectAll = $optionSet.find('a['+filterAttr+'=""]'); // the 'select all' button in the current group
  425. var activeClass = "selected", // the class for active links
  426. exclClass = "exclusive"; // the class for exclusive groups
  427. comboFiltering($this,filters,filterAttr,filterValue,$optionSet,group,$selectAll,activeClass,exclClass);
  428. var comboFilter = getComboFilter(filters);
  429. $grid.isotope({
  430. filter: comboFilter
  431. });
  432. $this.toggleClass(activeClass);
  433. e.preventDefault();
  434. });
  435. });
  436. </script>
  437.  
  438. </head>
  439. </body>
  440. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement