Goodreads widget

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.

Michael’s books

Leviathan Falls
The Trouble with Peace
Interlibrary Loan
Network Effect
Agency
Auberon
A Little Hatred
To Be Taught, If Fortunate
Tiamat's Wrath
The Raven Tower
The Very Best of the Best: 35 Years of the Year's Best Science Fiction
The Winter of the Witch
The Book of Magic
Exit Strategy
The Ravenmaster: My Life with the Ravens at the Tower of London
Rogue Protocol
Record of a Spaceborn Few
Spinning Silver
The Flowers of Vashnoi
Artificial Condition



Michael Horvath’s favorite books ยป

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);
}

Leave a Reply

Proudly powered by WordPress. Theme: Isometricland by Michael Horvath based on Underscores.me GPLv2 or later. This page © Copyright 2009 Michael Horvath. Last modified: January 25 2021 21:35:31.