apple books style card

Continuing on with my screenshot mimicry project, I've been looking through Tumblr's web weaving tag for ideas^[1] and one of the things that pops up with regularity is Apple Books screenshots.

Quo usque tandem abutere, Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet? quem ad finem sese effrenata iactabit audacia? Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae, nihil timor populi, nihil concursus bonorum omnium, nihil hic munitissimus habendi senatus locus, nihil horum ora voltusque moverunt? Patere tua consilia non sentis, constrictam iam horum omnium scientia teneri coniurationem tuam non vides? Quid proxima, quid superiore nocte egeris, ubi fueris, quos convocaveris, quid consilii ceperis, quem nostrum ignorare arbitraris?

As my styles go, this was not the most challenging, even with all the different hightlight colors, so I decided to make both light mode and dark mode styles, based on Apple Books' "paper" and "quiet" styles respectively.^[2] To be honest, I like the "paper" style a lot better, but you know, to each their own, and it's kind of nice to have the style match the general vibe of the site.

There isn't much to be said about the code itself; it's fairly straightforward. The only thing that is at all notable is how I made the highlight styles: all are variations on the <mark> tag; the basic one is the yellow highlight, and the others all take the form <mark class="{{name}}"> (with the "{{name}}" being either the highlight color or "underline").

code

base code

Since my site is light mode by default, this base code is for the light theme, and the dark theme is an add-on that I keep in my much-shorter dark mode CSS file.^[3]

.books {
	padding: 1em;
	margin: 1em 0;
	border: 0.1rem solid rgb(221, 125, 44);
	border-radius: 0.5rem;
	background-color: #F2F1F1;
	color: #000;
	font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
	line-height: 1.55;
	font-size: 18px;

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

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

	::selection {
		background-color: rgba(0, 0, 0, .23);
	}

	mark {
		background-color: #E9D16E;
		color: inherit;
		border-radius: 0.2em;
		padding: 0 0;
	}

	mark.green {
		background-color: #A9D38F;
	}

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

	mark.purple {
		background-color: #C4B7E9;
	}

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

	mark.underline {
		background-color: inherit;
		text-decoration: 2px solid #DD594B underline;
	}
}

dark mode code

.books {
	background-color: #4A4A4D;
	color: #EBEBF4;

	mark {
		background-color: #4A3A25;
		color: #EAB974;
	}

	mark.green {
		background-color: #32522B;
		color: #9FEC88;
	}

	mark.blue {
		background-color: #324291;
		color: #9FD3F8;
	}

	mark.purple {
		background-color: #41357B;
		color: #CEA9F7;
	}

	mark.pink {
		background-color: #74313E;
		color: #F09BC3;
	}

	mark.underline {
		background-color: inherit;
		color: inherit;
		text-decoration: 2px solid #CC312B underline;
	}
}

As an aside: holy fuck, there are a lot of web-weavings for racecar drivers. I do not get the appeal, but I am kind of fascinated against my will.^{^}
As always, you can use the theme switcher to the left side of your screen to toggle between light and dark (and high contrast) modes.^{^}
For more on how I have my themes set up, see my JS theme switcher tutorial here.^{^}