User:Mcint/WikiStyling

Vector-2022 styling

In Special:Preferences > Appearance, you can preview "Vector (2022)".

By default it had a number of styling conflicts with Noisebridge accumulated CSS, and differed in critical ways from the conventions of the origin Vector style sheets, so overrides were also incompatible.

Most notably,

• background layer / masking layer used
• layout of header, footer, body, sidebars -- including togglability
• addition of curves in many places, rounded rectangles and introduction of large buffering spaces that change the layout and density of imformation
  • curve radii, gaps between major page sections, gaps and space buffering of nested elements, table layouts, footer layouts,
• styling customized for homepage

Want / To-Try: Link underline animation, on mouseover

From https://romgrk.com/posts/optimizing-javascript, the snippet following provides a nice effect. Eye catching, a little unique, not too distracting. Enticing.

.markdown-content a {
    color: var(--color-link-fg);
    text-decoration: none;
    background: linear-gradient(to right, var(--color-link-fg), var(--color-link-fg)), linear-gradient(to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1));
    background-size: 100% 1px, 0 1px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size .4s;
}