Tweak icon size and alignment

Use em units so it matches the text size automatically. Using sub for
vertical-align seems to look a little nicer? Maybe only so because now
the height of icon matches the font size now.
This commit is contained in:
2025-07-01 02:09:15 -05:00
parent c06e7eb938
commit 16f08dce7f

View File

@ -291,17 +291,12 @@ table.simple tbody tr:nth-child(even) {
/* Icons */ /* Icons */
.icon { .icon {
width: 20px; width: 1em;
height: 20px; height: 1em;
color: var(--text-1); color: var(--text-1);
text-align: center; text-align: center;
display: inline; display: inline;
vertical-align: middle; vertical-align: sub;
}
h1 svg.icon {
width: 30px;
height: 30px;
} }
/* }}} */ /* }}} */
@ -315,11 +310,6 @@ h1 svg.icon {
font-weight: bold; font-weight: bold;
} }
.heading-link svg {
width: 15px;
height: 15px;
}
/* }}} */ /* }}} */
/* Top bar formatting {{{ */ /* Top bar formatting {{{ */
@ -676,6 +666,7 @@ h1 svg.icon {
display: flex; display: flex;
gap: 8px; gap: 8px;
justify-content: center; justify-content: center;
font-size: 32px;
} }
.share-buttons a { .share-buttons a {
@ -690,8 +681,7 @@ h1 svg.icon {
} }
.share-buttons svg { .share-buttons svg {
width: 32px; display: block;
height: 32px;
} }
/* https://stackoverflow.com/a/72073682/19003757 */ /* https://stackoverflow.com/a/72073682/19003757 */