source ⟩ hypertext ⟩ public ⟩ cosmetics ⟩ sidenotes.css 

/*

Instructions:

Use <sup class="note"> to mark up the notes in-line.
Put the text of the notes in an <aside> like so:

<aside>
    <div class="note">
        <span class="note-number">0</span>
        <div>What on earth?</div>
    </div>
</aside>

Place this <aside> at the end of your <body>:

<aside id="sidenotes">
</aside>

*/

body, #body-container {
	/*Display stuff*/
	display: flex;
	justify-content: center;
}

main {
	margin: 0;
	flex-shrink: 2;
}

#sidenotes, .sidenotes {
	max-inline-size: 25ch;
}

.sidenote-exempt {
	display: none;
}

aside.note {
	margin-inline-start: 1em;
	padding-block-end: 1em;

	display: flex;
	align-items: flex-start;

	font-size: 0.85rem;
}

aside.note>div {
	max-block-size: 20em;
	overflow-y: auto;
	scrollbar-width: thin;
	padding-inline-end: 5px;
}

aside.note>div::-webkit-scrollbar {
	width: 5px;
	background-color: transparent;
}

aside.note>div::-webkit-scrollbar-thumb {
	background-color: var(--accent);
}

aside.note p, aside.note blockquote, aside.note img {
	margin-block-start: 0;
}

aside.note *:last-child {
	margin-block-end: 0;
}

aside.note ul, aside.note ol {
	margin: 0;
	padding-inline-start: 1em
}

aside.note blockquote {
	margin-block-start: 0;
	margin-block-end: initial;
	margin-inline: 1em;

	font-size: 0.95em;
}

.sidenote-link {
	text-decoration: none;
}

a.sidenote-ref {
	text-decoration: none;
}

sup.note, .note-number {
	margin-block: 0;
	margin-inline: 0.2em;
	padding-block: 0;
	padding-inline: 0.2em;

	text-align: center;
	border-block-end: 1px solid var(--accent);

	background: var(--accent-seethrough);
	color: var(--accent);
	text-decoration: none;
	white-space: nowrap;
	padding-block-end: 0.1em;
	margin-block-start: -0.1em;
}

.note-number {
	margin-inline-end: 0.5em;
	font-style: normal;
	color: var(--accent);
	display: inline;
}

@media only screen and (max-width: 800px) {
	aside.note {
		padding-block: 0.5em;
	}
}