57 lines
1.4 KiB
CSS
57 lines
1.4 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;
|
|
/* experimenting with a smaller font */
|
|
/* font: 1.4rem/1.8em sans-serif; */
|
|
font: 21px/1.5em sans-serif;
|
|
}
|
|
|
|
.icon-list img {
|
|
width: 30px;
|
|
height: 30px;
|
|
|
|
/* The icon should be located where the bullet would be. */
|
|
position: relative;
|
|
left: -30px;
|
|
/*
|
|
* 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: 23px;
|
|
height: 23px;
|
|
}
|
|
|
|
.icon-list.high-res img {
|
|
width: 64px;
|
|
height: 64px;
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|