Book cover bling

Scratching this totally unnecessary itch in the middle of the night - Book cover bling. Added a section in Books to display book covers. Initially this books page was written in markdown. In order to add an image gallery of book covers, I had to use an html page instead and embed the markdown content in this manner:

<div id="readinglist">
	<div id="booklist">
		{% capture listofbooks %}{% include booklist.md %}{% endcapture %}
		{{ listofbooks | markdownify }}
	</div>
	<div id="cover">
		{% include bookwall.html %}
	</div>
</div>

This way both content stays separate in their own files. The booklist.md holds the list of books I have read in a markdown format and bookwall.html holds the image tags to the book cover image files. The container div readinglist helps maintain the list and the images in a responsive layout on the page. The responsive layout works for the most part. @edgren helped in getting the landscape mode on iOS right. Turns out I wasn’t resetting all the attributes for the readinglist container 😅. The images don’t render on the terminal but the alt-text shows the name of the books. On the Kindle though, the experimental browser is very basic and images are aligned vertically. Unfortunately, there’s nothing much we can do about the lack of full CSS support. Both the solutions aren’t ideal but its good enough. At least, the text content gets displayed first without breaking anything.

Day 93 - Join Me in #100DaysToOffload