eryn/erynwells.me
1
0
Fork 0
Code Issues 8 Pull requests 1 Projects Releases Packages Activity Actions

Simulate background-clip: text for browsers that don't support it

Browse source 
Move the heading generating to a partial that iteratively wraps each character
of the heading in a <span>. The CSS for the site heading uses :nth-child to
color each span a different color.
This commit is contained in:
Eryn Wells 2023-05-17 08:18:52 -07:00
parent 0e81f019a7
commit fc35499d6c
5 changed files with 31 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

24
assets/styles/root.css
View file

@ -309,9 +309,33 @@ h1, h2, h3, h4, h5, h6 {
}
h1.site {
--site-title-color1: rgb(103, 128, 229);
--site-title-color2: rgb(130, 90, 227);
--site-title-color3: rgb(135, 101, 228);
--site-title-color4: rgb(125, 115, 229);
--site-title-color5: rgb(107, 130, 230);
--site-title-color6: rgb(77, 153, 232);
--site-title-color7: rgb(74, 136, 230);
--site-title-color8: rgb(71, 128, 228);
--site-title-color9: rgb(65, 80, 224);
--site-title-color10: rgb(61, 58, 223);
color: rgb(var(--mid-blue));
font-size: 2.5em;
}
@supports not (background-clip: text) {
h1.site span:nth-child(10n + 1) { color: var(--site-title-color1); }
h1.site span:nth-child(10n + 2) { color: var(--site-title-color2); }
h1.site span:nth-child(10n + 3) { color: var(--site-title-color3); }
h1.site span:nth-child(10n + 4) { color: var(--site-title-color4); }
h1.site span:nth-child(10n + 5) { color: var(--site-title-color5); }
h1.site span:nth-child(10n + 6) { color: var(--site-title-color6); }
h1.site span:nth-child(10n + 7) { color: var(--site-title-color7); }
h1.site span:nth-child(10n + 8) { color: var(--site-title-color8); }
h1.site span:nth-child(10n + 9) { color: var(--site-title-color9); }
h1.site span:nth-child(10n) { color: var(--site-title-color10); }
}
@supports (background-clip: text) {
h1.site {
background: