kindle style card

At it again with my screenshot mimicry project. Since I already had an Apple Books style, I decided to make a largely redundant Amazon Kindle style, partially for variety but primarily because it pleases me to make it.

This is basically exactly the same as my Books style, with fewer highlight styles and a different font. This font does require downloading, which can be done for free (and without an account) from Amazon's developer site here (the page talks about the Emberly font and Amazon's Echo, but the download link includes Bookerly). You can put it on your site like any other file (I have a dedicated /fonts file) and include it in a stylesheet with an @font-face rule as described here.^[1]

code

Again, the base code is for light mode, with a dark mode add-on.

base code

.kindle {
	padding: 1em;
	margin: 1em 0;
	border: 0.1rem solid rgb(221, 125, 44);
	border-radius: 0.5rem;
	background-color: #FFF;
	color: #000;
	font-family: 'Bookerly', serif;
	line-height: 1.55;
	font-size: 18px;

	*:first-child {
		margin-top: 0;
	}

	*:last-child {
		margin-bottom: 0;
	}

	::selection {
		background-color: rgba(10, 63, 255, .23);
	}

	mark {
		background-color: #FEF7B7;
		color: inherit;
		border-radius: 0;
		padding: 0 0;
	}

	mark.orange {
		background-color: #F9D9B3;
	}

	mark.pink {
		background-color: #F5C1CE;
	}

	mark.blue {
		background-color: #B7CCF7;
	}
}

dark mode code

.kindle {
	background-color: #000;
	color: #ACACAC;

	mark {
		background-color: #4C4711;
	}

	mark.orange {
		background-color: #49331B;
	}

	mark.pink {
		background-color: #512E32;
	}

	mark.blue {
		background-color: #353E4C;
	}
}

1. I also converted the .ttf files to .woff2 files using CloudConvert—WOFF2 files have better compression, so they load faster and use less bandwidth.^{^}