bookshelf / CANDLELIGHT

<!DOCTYPE html>
<head>
<!------


                            candlelight

                            @odeysseus


- please check what the page looks like when you exit customise and open it in a new tab before telling me it's not working!
- if you tag books with "fave" a heart will appear in the corner.
- to replace the accent color, search for #a4afc1 and replace it with a color of your choice using colorpicker.


------>
    <title> 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=Merriweather:400,400italic,700,700italic' rel='stylesheet' type='text/css'><script src="https://kit.fontawesome.com/4573bcadd3.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script src="https://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script><script src="https://static.tumblr.com/aptzszz/s5fp15zyp/candlelight.js"></script>

<style type="text/css">

@-webkit-keyframes fadein {
        0%   {opacity: 0;}
        100% { opacity: 1; }
}

@-moz-keyframes fadein {
        0%   { opacity: 0; }
        100% { opacity: 1; }
}

@keyframes fadein {
        0%   { opacity: 0; }
        100% { opacity: 1; }
}


::-webkit-scrollbar{ height:3px;width:1px;}
::-webkit-scrollbar-thumb {background:#eee;}
::-webkit-scrollbar-track {background:transparent;}
.tmblr-iframe { display:none; }
a,.button { transition:0.2s ease-in;-webkit-transition:0.2s ease-in;-moz-transition:0.2s ease-in;}
b,strong { color:#444; /* color of bold text */ }

a:hover {
    color:#444; /*link hover*/
    text-decoration:none;
}


body {
    background:#fff; /*background*/
    font-family:'Merriweather', serif; /*font*/
    font-size:10px; /* font size */
    font-weight:300;
    line-height:190%;
    color:#767676; /* text color */
    -webkit-animation-name: fadein;-webkit-animation-duration: 1s;
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-smoothing:antialiased;
    font-smoothing:antialiased;

}

a {
    color:#a4afc1; /*links*/
    text-decoration:none;
}

#container {
    width:900px;
    margin:100px auto;
}
h1 {
    font-weight:400;
    color:#444;
    font-size:12px;
    display:inline;
    border-bottom:1px solid #a4afc1;
}

header a,h1 { margin-right:7px;}
header a:first-of-type,article b:first-of-type { margin-left:7px; }
header { width:860px;margin:auto;}
article b:first-of-type { font-weight:300;color:#a4afc1; }

.button {
    background:#fff;
    border:0;
    border-radius:0;
    outline:0;
    padding:0;
    display:inline-block;
    cursor:help;
    text-shadow:none;
    box-shadow:none;
    line-height:inherit;
    color:#777;
    font-size:inherit;
    font-family:inherit;
    letter-spacing:inherit;
    margin-right:10px;
}
.button:hover { color:#a4afc1; }
.button:active,.button.is-checked {color:#444;}
.button-group:last-of-type { border:none; }
.button-group:first-of-type { margin-top:5px;}

article {
    position:relative;
    width:260px;
    margin:20px;
    box-sizing:border-box;
    padding:15px;
    border:1px solid #eee;
    display:inline-block;
    transition-duration:.35s;
    -moz-transition-duration:.35s;
    -webkit-transition-duration:.35s;
    -o-transition-duration:.35s;
}

section { margin-top:40px;}
.fave:after {font-size:10px;top:2px;right:5px;content:"\f004";position:absolute;color:#aa4271;font-family:"Font Awesome 5 Free"; }
.d { margin-top:10px;display:block;position:relative;}
span {
    border-top:1px solid #eee;
    display:inline-block;
    color:#a4afc1;
    width:110px;
    padding:5px 0px;
}
article span:last-of-type { margin-bottom:5px; }
.d i { color:#444;display:block}
.d img { width:100px;float:left;margin-right:15px;}
.c { bottom:27px;right:27px;position:fixed; }

</style>
</head>
<body>
<div id="container">

<header> <!--start header-->

        <h1>bookshelf</h1> <!--main title--> ::

        <!--links: add or delete as you wish-->
        <a href="/">home</a>
        <a href="/ask">inbox</a>
        <a href="http://tumblr.com/dashboard">dash</a>

<div class="filters">
<!--start filters - you can add or delete as required.  -->

<div class="button-group js-radio-button-group" data-filter-group="misc">
<button class="button is-checked" data-filter="">everything</button>
<button class="button" data-filter=".ya">young adult</button>
<button class="button" data-filter=".con">contemporary</button>
<button class="button" data-filter=".classic">classic</button>
<button class="button" data-filter=".series">series</button>
<button class="button" data-filter=".standalone">standalone</button>
<button class="button" data-filter=".fave">favourites</button>
<button class="button" data-filter=".tbr">to read</button>

<!--filter template:

<button class="button" data-filter=".FILTER"> FILTER NAME </button>

-->

<!--end filters-->
</div>
</div>
</header>

<section><!--start books

NOTE:

when tagging each book below, the filters should correspond to the .FILTER in the filters section above. if you wanted it to show up for the filters .ya, .fave and .series, for example, you'd tag it like this: <article class="ya fave series">

you can have as many filters as you like for each book.

-->

<!--example book-->
<article class="filter filter fave">
<h1>book title</h1> :: <b>author</b>

<div class="d">

<span><a href="link url">goodreads</a></span> <!--goodreads link-->
<span>★★★★★</span> <!--star rating-->

<img src="image url"/> <!--book cover - this is optional!-->

book description goes here.


</div>
</article>
<!--end example book-->

<!--example book-->
<article class="filter filter">
<h1>book title</h1> :: <b>author</b>

<div class="d">

<span><a href="link url">goodreads</a></span> <!--goodreads link-->
<span>★★★★★</span> <!--star rating-->

<img src="image url"/> <!--book cover - this is optional!-->

book description goes here.


</div>
</article>
<!--end example book-->

<!--end books - don't edit beyond this point-->
</section>
</div>

<div class="c"><a href="http://odeysseus.tumblr.com">O</a></div>
</body>
</html>