User:Mcint/WikiStyling - Revision history

Mcint: /* Link underline animation, on mouseover */

2024-07-01T23:33:16Z

Link underline animation, on mouseover

← Older revision		Revision as of 16:33, 1 July 2024
Line 12:		Line 12:
	* styling customized for homepage		* styling customized for homepage

	== Link underline animation, on mouseover ==		== 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.		From https://romgrk.com/posts/optimizing-javascript, the snippet following provides a nice effect. Eye catching, a little unique, not too distracting. Enticing.

Mcint: add notes about Vector / -2022 compatibility work

2024-07-01T23:32:49Z

add notes about Vector / -2022 compatibility work

← Older revision		Revision as of 16:32, 1 July 2024
Line 1:		Line 1:
			__TOC__
			== Vector-2022 styling ==
			In [[Special:Preferences#mw-prefsection-rendering\|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

	== Link underline animation, on mouseover ==		== Link underline animation, on mouseover ==

Mcint: add link underline interactive animation

2024-07-01T23:26:16Z

add link underline interactive animation

New page

== 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.

<pre>
.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;
}
</pre>