Lil Virtual Bookshelf 📚

This was originally just a simple visualization of books on a bookshelf using some CSS transforms to give the effect of picking out the book when you hover over it, but now, it also allows for dropdowns about each book. Now you can share your thoughts about the books on your shelf.

It integrates nicely with static site generators, and well, just about anything since it's all CSS and HTML.

How do I add more books?

A book is defined as follows:

<article>
    <label>
        <input type="radio" name="bookshelf">
            <div class="book">
                <div class="side spine">
                    <span class="spine-title"> Book Title </span>
                </div>
                <div class="side top"></div>
                <img src="book_cover.jpg" class="side cover">
            </div>
        </input>
    </label>
    <div class="description">
        <hgroup>
            <h2> Book Title </h2>
            <p> Author Name </p>
        </hgroup>
        <p> Your thoughts, review, description, etc. </p>
    </div>
</article>

Simply add this snippet for each book you want inside <div class="bookshelf">.

What happened to the JS?

The JavaScript was removed from the project, because colors and heights are no longer randomized. The height of each book is automatically determined by the dimensions of the cover image.

The default spines are an edited picture of a real book spine. Two CSS variables are provided to manually change the colors of this image for each book. They're attached to hue-rotate and saturate filters.

Changing color via in-line CSS:

<div class="book" style="--spine-hue:-50deg;--spine-saturation:150%;">

Changine color via class:

.turquoise {
    --spine-hue: -50deg;
    --spine-saturation: 150%;
}

Is this free to use?

Yep! Do whatever you want with it.

If you found this project useful you can make use of the following badge to spread the word:

Or check out the original:

Is it perfect?

Nope! Doesn't handle long titles well (but adding a <br> can help). I wrote this fork in a day so don't expect much. Feel free to submit pull requests and issues!