I’m not sure where I can squeeze this onto my site since there’s so little room, but I stumbled across this widget on Goodreads that I like a lot. It shows a list of the twenty-four most recently published books I’ve read, in reverse order of publication. If I kept reliable records on the order in which I read books I could use those instead, but this is still a pretty good alternative. (And maybe more useful for visitors.) If you have JavaScript disabled in your browser you will see a static list that is current as of the date of this post.
The book covers are centered with respect to each other, and are separated by 2 pixels. I also added a black background and a hover effect that changes the cover graphics to appear lighter and grayer. I couldn’t figure out how to style the extra link Goodreads places at the bottom of the grid, so I hid the link using the associated URL parameter that Goodreads provides. I had to manually add Flexbox styling to the widget since it does not include any by default, and the default styling conflicts with my website. The grid should be responsive, though I haven’t tested the widget on my phone yet.
Here is the custom CSS code:
div#gr_grid_widget_1615614778 {
background-color: #000000;
max-width: 600px;
margin: auto;
}
div#gr_grid_widget_1615614778 h2 {
display: inline-block;
padding: 4px;
margin: 0px;
}
div#gr_grid_widget_1615614778 h2 a {
color: #ffffff;
}
div.gr_grid_container {
/* customize grid container div here. eg: width: 500px; */
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
padding: 0px;
margin: 0px;
}
div.gr_grid_container a {
}
div.gr_grid_book_container {
/* customize book cover container div here */
width: 98px;
height: 160px;
padding: 0px;
margin: 0px;
overflow: hidden;
}
div.gr_grid_book_container:hover {
filter: grayscale(1) brightness(1.5);
}
