fix(docs): make the Gitea icon override actually apply, tune GitHub to 1.5x
UnoCSS's .i-pajamas:gitea rule is unlayered CSS; our override lived in @layer starlight.core, and unlayered rules always beat layered ones regardless of specificity or source order. The Gitea icon has silently stayed at UnoCSS's 1em default since it was first added -- confirmed via computed style in the browser, not just reading the stylesheet source. !important restores the override across the layer boundary. Also drops the GitHub icon from 2x to 1.5x per visual feedback.
This commit is contained in:
@@ -20,7 +20,7 @@ const links = config.social || [];
|
||||
return (
|
||||
<a href={href} rel="me" class="sl-flex">
|
||||
<span class="sr-only">{label}</span>
|
||||
{customIcon ? <span class={`social-icon ${customIcon}`} aria-hidden="true" /> : <Icon name={icon} size="2em" />}
|
||||
{customIcon ? <span class={`social-icon ${customIcon}`} aria-hidden="true" /> : <Icon name={icon} size="1.5em" />}
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
@@ -39,8 +39,12 @@ const links = config.social || [];
|
||||
color: var(--sl-color-white);
|
||||
}
|
||||
.social-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
/* !important: the i-pajamas:* class comes from UnoCSS, which emits
|
||||
unlayered CSS. Unlayered rules always win over anything in a
|
||||
@layer regardless of specificity or source order, so a plain
|
||||
override here is silently ignored no matter how it's written. */
|
||||
width: 3rem !important;
|
||||
height: 3rem !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user