Goofing around with grid and more


by Jeremy Caudle
code

Today I wanted to try and build a display of books that would animated when you hovered over them, and when you clicked on them they would display the cover image and more. I quickly got a bit discouraged at the thought of working through how complex that would be, so I went with something more simple. I was watching/listening to this week's new episode of You Look Nice Today while building this. It provided me with plenty of potential titles for books. I'll get back to finishing this idea at a later time.

  • Big Tub Boost
  • Human Stone Soup
  • Shabu Shabu Sometimes
  • Warm Presoup
  • I'm Walkin'
  • Pea, Nut, Butter, and Gel-e
  • Soup Bros
  • Crystallization of Anger
  • Edibles and Anger

View the code:

HTML and JS 
<section class="code-block">
            <div class="bookshelf">

                <ul class="shelf" title="Fiction">
                    <li class="book" style="--book-color: red; --book-text: gold; --font-weight: 600;"><span class="booktitle">Big Tub Boost</span><img src="" alt="" /></li>
                    <li class="book" style="--book-color: rgb(91, 104, 218); --book-text: gold; --font-weight: 600;"><span class="booktitle">Human Stone Soup</span><img src="" alt="" /></li>
                    <li class="book"><span class="booktitle">Shabu Shabu Sometimes</span><img src="" alt="" /></li>
                </ul>
                
                <ul class="shelf flex-align-right" title="Non-Fiction"><li class="book"><span class="booktitle">Warm Presoup</span><img src="" alt="" /></li>
                    <li class="book"><span class="booktitle">I'm Walkin'</span><img src="" alt="" /></li>
                    <li class="book"><span class="booktitle">Pea, Nut, Butter, and Gel-e</span><img src="" alt="" /></li>
                    <li class="book"><span class="booktitle">Soup Bros</span><img src="" alt="" /></li></ul>

                <ul class="shelf flex-align-center" title="Self-Help"><li class="book"><span class="booktitle">Crystallization of Anger</span><img src="" alt="" /></li>
                    <li class="book" title="2021"><span class="booktitle">Edibles and Anger</span><img src="" alt="" /></li></ul>
               
            </div>
        </section>
CSS 
section.code-block {
                font-family: Helvetica, Arial, sans-serif;
            }

            .bookshelf {
                background-color: rgb(202, 193, 165);
                padding: 1rem;
            }

            .shelf {
                list-style: none;
                margin:0;
                padding:0;
                padding-left: 0;
            }

            .book {
        margin: 0;
        cursor: pointer;
        z-index:1;
				margin: 0 2px;
           }

           .booktitle {
        min-width: 1.5rem;
        margin: 0 1px;
        background-color: white;
        background-color: var(--book-color, white);
        font-weight: 300;
        font-weight: var(--font-weight, 300);
        padding: .5rem .25rem;
        transition: transform .25s ease-out, box-shadow .25s ease-out, outline .25s ease-out;
        will-change: transform;
        color: black;
        color: var(--book-text, black);
    }

    .book:hover > .booktitle{
        transform: translateY(-.25rem);
        box-shadow: 0 -5px 10px 5px rgba(0, 0, 0, 0.3);
    }

@supports (display: grid) {

    @media (max-width: 414px) {
        .bookshelf {
        display: grid;
        gap: 1rem;
        grid-template-columns: auto;
        grid-template-rows: auto auto;
			}
    }

    @media (min-width: 415px) and (max-width: 667px) {
        .bookshelf {
        display: grid;
        gap: 1rem;
        grid-template-columns: auto;
        grid-template-rows: auto auto;
        background-color: rgb(202, 193, 165);
        padding: 1rem;
    } 
    }

    @media (min-width: 668px) {

    .bookshelf {
        display: grid;
        gap: 1rem;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        background-color: rgb(202, 193, 165);
        padding: 1rem;
    }

    }

    .booktitle {
        display: block;
        writing-mode: vertical-rl;
    }

    .book > img {
        width:0;
        height:0;
        display: none;
    }

}

@supports (display: flex) {

    .shelf {
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        background-color: rgb(143, 137, 120);
        padding: .25rem .25rem 0 .25rem;
        box-shadow: -2px 0 10px 10px rgba(68, 65, 57, 0.25) inset; 
        min-height: 250px;   
        position: relative;
        }

    .flex-align-left {
        justify-content: flex-start;
    }

    .flex-align-right {
        justify-content: flex-end;
    }

    .flex-align-center {
        justify-content: center;
    }

    .shelf::after {
        content: attr(title);
        display: block;
        position: absolute;
        top: -.875rem;
        left: 0;
        text-transform: uppercase;
        font-size: .5rem;
        padding: .125rem;
        background-color: darkgoldenrod;

    }

}

Tags