Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <head>
- <!----
- melbourne
- revamped 1/3/2019
- @loranhale
- ----->
- <title>{Title}</title>
- <link rel="shortcut icon" href="{Favicon}">
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- <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">
- <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
- <style type="text/css">
- /* scrollbar */
- ::-webkit-scrollbar {
- height:8px;
- width:.5px;
- background:#fafafa;
- }
- ::-webkit-scrollbar-thumb { background:#eee; }
- /* tumblr controls */
- iframe.tmblr-iframe {
- z-index:99999999999999!important;
- top:0!important;
- right:0!important;
- opacity:0.4;
- /* delete invert(1) from here */
- filter:invert(1) contrast(150%);
- -webkit-filter:invert(1) contrast(150%);
- -o-filter:invert(1) contrast(150%);
- -moz-filter:invert(1) contrast(150%);
- -ms-filter:invert(1) contrast(150%);
- /* to here if your blog has a dark background */
- transform:scale(0.65);
- transform-origin:100% 0;
- -webkit-transform:scale(0.65);
- -webkit-transform-origin:100% 0;
- -o-transform:scale(0.65);
- -o-transform-origin:100% 0;
- -moz-transform:scale(0.65);
- -moz-transform-origin:100% 0;
- -ms-transform:scale(0.65);
- -ms-transform-origin:100% 0;
- transition:all .6s ease;
- }
- iframe.tmblr-iframe:hover { opacity:0.6!important; }
- /* tooltips */
- #s-m-t-tooltip {
- max-width:300px;
- margin:15px;
- padding:4px 6px;
- z-index:99999999;
- color:#000;
- border:1px solid #f7cac9;
- background:#fff;
- }
- /* body */
- body {
- background:#fff;
- color:#555;
- letter-spacing:.5px;
- font-family:'open sans', arial, sans-serif;
- font-size:10px;
- line-height:130%;
- -moz-osx-font-smoothing:grayscale;
- -webkit-font-smoothing:antialiased;
- font-smoothing:antialiased;
- }
- a {
- color:#91a8d0; /* links */
- text-decoration:none;
- transition:all .6s ease;
- }
- a:hover { color:#ff6f61; }
- b { font-style:bold; color:#222; }
- i { font-style:italic; }
- section {
- width:calc(250px * 4);
- box-sizing:border-box;
- margin:90px auto;
- margin-left:230px;
- }
- /* sidebar */
- nav {
- top:0;
- left:0;
- width:150px;
- height:100%;
- position:fixed;
- padding:0 30px;
- margin-left:20px;
- }
- .sidebar { margin-top:100px; }
- .t {
- font-size:20px;
- display:block;
- font-weight:600;
- letter-spacing:1px;
- text-transform:lowercase;
- color:#222;
- margin-bottom:10px;
- font-family:'inconsolata', monospace;
- }
- .icon { display:block; margin-bottom:10px; }
- .icon img {
- width:60px;
- height:auto;
- border-radius:3px;
- }
- .links { margin-bottom:15px; }
- .links a { margin-right:7px; }
- .d { margin-bottom:10px; width:125px; }
- /* filters */
- nav ul { margin-left:-40px; overflow-y:scroll; max-height:220px; }
- nav ul li {
- list-style-type:none;
- display:block;
- margin-bottom:5px;
- }
- nav ul li a { color:#444; font-weight:400; }
- nav ul li a:hover { margin-left:8px; }
- /* selected filter */
- nav ul li a.selected { color:#ff6f61; font-weight:600; }
- nav ul b {
- padding:2px 5px;
- border:1px solid #eee;
- font-size:11px;
- background:#fafafa;
- }
- /* boxes */
- .grid .item {
- display:block;
- width:250px;
- float:left;
- margin:10px 25px 25px;
- box-sizing:border-box;
- border:1px solid #eee;
- background:#fff;
- }
- .top { padding:10px; height:150px; overflow:hidden; }
- .img {
- float:left;
- display:inline;
- margin-right:10px;
- }
- .img img { width:100px; height:auto;}
- .title {
- letter-spacing:1px;
- font-weight:600;
- text-transform:uppercase;
- font-size:11.5px;
- color:#222;
- }
- .title i {
- display:block;
- text-transform:lowercase;
- letter-spacing:.5px;
- font-weight:400;
- font-size:11px;
- margin-top:3px;
- font-family:georgia;
- }
- .info {
- border-bottom:1px solid #eee;
- padding-bottom:10px;
- margin-bottom:10px;
- }
- .rate b { margin-right:5px; }
- .heart { margin-top:8px; }
- .heart .th {
- width:11px;
- height:11px;
- font-size:11px;
- text-align:center;
- padding:5px;
- border:1px solid #ff6f61;
- border-radius:2px;
- color:#ffb7b0;
- }
- /* description */
- .bottom { padding:10px 10px 5px; border-top:1px solid #eee; }
- .desc { padding-bottom:5px; }
- .desc-alt { overflow-y:scroll; max-height:180px; }
- /* do not disturb */
- .lo { bottom:20px; right:20px; position:fixed; }
- .lo a { text-transform:uppercase; padding:5px; font-size:12px; }
- </style>
- <body>
- <nav>
- <div class="sidebar">
- <div class="icon"><img src="{PortraitURL-128}" /></div>
- <!-- optional description -->
- <div class="d">this is a description </div>
- <div class="t">bookshelf</div>
- <div class="links">
- <a href="/">home</a>
- <a href="/ask">message</a>
- <a href="/">explore</a>
- </div>
- </div>
- <!-- IMPORTANT // filters
- below is a template for a new filter
- do NOT remove the dot "." before FILTER.
- <li><a href="#" data-filter-value=".FILTER">FILTER NAME</a></li>
- below is a template for a whole set of filters that you can add
- REMEMBER to change group1 to group2 if it's a different set of filters
- <ul class="filter option-set exclusive" data-filter-group="group1">
- <li style="margin:20px 0 10px;"><b>OPTIONAL CATEGORY NAME</b></li>
- <li><a href="#" data-filter-value="" class="selected">FILTER NAME</a></li>
- <li><a href="#" data-filter-value=".FILTER">FILTER NAME</a></li>
- <li><a href="#" data-filter-value=".FILTER">FILTER NAME</a></li>
- <li><a href="#" data-filter-value=".FILTER">FILTER NAME</a></li>
- </ul>
- -->
- <ul class="filter option-set exclusive" data-filter-group="group1">
- <!-- add <li><b>category name</b></li> if you want a category name -->
- <li><a href="#" data-filter-value="" class="selected">everything</a></li>
- <li><a href="#" data-filter-value=".current">currently reading</a></li>
- <li><a href="#" data-filter-value=".fave">favourites</a></li>
- <li><a href="#" data-filter-value=".tbr">to be read</a></li>
- </ul>
- <ul class="filter option-set exclusive" data-filter-group="group2">
- <li style="margin:20px 0 10px;"><b>genres</b></li>
- <li><a href="#" data-filter-value="" class="selected">all genres</a></li>
- <li><a href="#" data-filter-value=".ya">young adult</a></li>
- <li><a href="#" data-filter-value=".na">new adult</a></li>
- <li><a href="#" data-filter-value=".adult">adult</a></li>
- <li><a href="#" data-filter-value=".fantasy">fantasy</a></li>
- <li><a href="#" data-filter-value=".romance">romance</a></li>
- <li><a href="#" data-filter-value=".contemporary">contemporary</a></li>
- </ul>
- </nav>
- <section>
- <!-- BOX TEMPLATE
- replace FILTER with your desired filter name. make sure it is same as the
- '.FILTER' class name in the filters section.
- <div class="grid">
- <div class="item FILTER FILTER">
- <div class="top">
- <div class="img">
- <img src="IMAGE URL" />
- </div>
- <div class="info">
- <div class="title">BOOK TITLE <i>author</i></div>
- </div>
- <div class="rate"><b>rating</b> ★★★★★</div>
- <div class="rate"><b>goodreads</b> <a href="/">link</a></div>
- <div class="rate"><b>genre</b> text here</div>
- <div class="rate"><b>blog review</b> <a href="/">link</a></div>
- <div class="heart"><span class="th th-heart-1"></span></div>
- </div>
- <div class="bottom">
- <div class="desc">
- description here.
- </div>
- </div>
- </div>
- </div>
- -->
- <div class="grid">
- <div class="item fave ya">
- <div class="top">
- <div class="img">
- <img src="IMAGE URL" />
- </div>
- <div class="info">
- <div class="title">title <i>author</i></div>
- </div>
- <div class="rate"><b>rating</b> ★★★★★</div>
- <div class="rate"><b>goodreads</b> <a href="/">link</a></div>
- <div class="rate"><b>genre</b> text</div>
- <div class="rate"><b>blog review</b> <a href="/">link</a></div>
- <!-- i recommend four lines maximum -->
- <!-- optional -->
- <div class="heart"><span class="th th-heart-1"></span></div>
- </div>
- <!-- you can remove the desc section below if you want -->
- <div class="bottom">
- <div class="desc">
- <!-- if you want your description to scroll, add '-alt' after desc so
- <div class="desc-alt"> -->
- description
- </div>
- </div>
- </div>
- </div>
- </section>
- <!-- do not disturb -->
- <div class="lo">
- <a href="http://loranhale.tumblr.com" title="theme">j</a>
- </div>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
- <script>
- jQuery.noConflict();
- (function($){
- $(document).ready(function(){
- $("a[title],img[title],[title]").style_my_tooltips({
- tip_follows_cursor:true,
- tip_delay_time:200,
- tip_fade_speed:300,
- attribute:"title"
- });
- });
- })(jQuery);
- </script>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
- <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
- <script src="https://static.tumblr.com/p0knose/FpAp5c11c/magnusthemes.combofilters.js"></script>
- <script>
- $(document).ready(function() {
- var $container = $("section"); // the container with all the elements to filter inside
- var filters = {}; //should be outside the scope of the filtering function
- /* --- read the documentation on isotope.metafizzy.co for more options --- */
- var $grid = $container.isotope({
- itemSelector: ".item", // the elements to filter
- percentPosition: false // put true if you use percentage widths, otherwise put false
- });
- $(".option-set a").click(function(e) {
- var $this = $(this); // cache the clicked link
- var filterAttr = "data-filter-value";
- var filterValue = $this.attr(filterAttr); // cache the filter
- var $optionSet = $this.parents(".option-set"); // cache the parent element
- var group = $optionSet.attr("data-filter-group"); // cache the parent filter group
- var filterGroup = filters[group];
- if (!filterGroup) {
- filterGroup = filters[group] = [];
- }
- var $selectAll = $optionSet.find('a['+filterAttr+'=""]'); // the 'select all' button in the current group
- var activeClass = "selected", // the class for active links
- exclClass = "exclusive"; // the class for exclusive groups
- comboFiltering($this,filters,filterAttr,filterValue,$optionSet,group,$selectAll,activeClass,exclClass);
- var comboFilter = getComboFilter(filters);
- $grid.isotope({
- filter: comboFilter
- });
- $this.toggleClass(activeClass);
- e.preventDefault();
- });
- });
- </script>
- </head>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement