48 lines
1.2 KiB
CSS
48 lines
1.2 KiB
CSS
html {
|
|
/*
|
|
* The body does not span the entire viewport, so the background color must go in the `html`.
|
|
* This difference in behavior is not visible normally, but appears to be triggered by the Dark Reader plugin for Firefox.
|
|
*/
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
body {
|
|
margin: auto;
|
|
|
|
/** I love me some easily-readable text. */
|
|
max-width: 60ch;
|
|
font: 1.4rem/1.8em sans-serif;
|
|
}
|
|
|
|
.icon-list img {
|
|
width: 1.3em;
|
|
height: 1.3em;
|
|
|
|
/* The icon should be located where the bullet would be. */
|
|
position: relative;
|
|
left: -1.3em;
|
|
/*
|
|
* The text doesn't know that the image isn't actually there, so it must be re-aligned with a negative margin.
|
|
* I don't move over the entire 1.3 em gap, because there needs to be space between the icon and text.
|
|
*/
|
|
margin-right: -1em;
|
|
}
|
|
|
|
/* My webcomic icons are favicon rips (for now) and look bad at large sizes. */
|
|
.icon-list.low-res img {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
.icon-list li {
|
|
/* Vertically align the text w.r.t. the icon. This has the simultaneous effect of removing the list bullet. */
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
img.svg-icon {
|
|
filter: invert(1);
|
|
}
|
|
}
|