Bring over the gradient from erynwells.me as a .text-color--gradient class
This commit is contained in:
parent
11a677476b
commit
16536744ee
1 changed files with 57 additions and 0 deletions
|
@ -20,6 +20,12 @@
|
||||||
--gray6: rgb(200 204 217);
|
--gray6: rgb(200 204 217);
|
||||||
--gray7: rgb(249 251 255);
|
--gray7: rgb(249 251 255);
|
||||||
|
|
||||||
|
--light-blue: rgb(69 212 243);
|
||||||
|
--blue: rgb(28 168 239);
|
||||||
|
--dark-blue: rgb(63 46 231);
|
||||||
|
--lilac: rgb(187 121 245);
|
||||||
|
--purple: rgb(197 141 244);
|
||||||
|
|
||||||
--light: var(--gray7);
|
--light: var(--gray7);
|
||||||
--dark: var(--gray1);
|
--dark: var(--gray1);
|
||||||
|
|
||||||
|
@ -70,6 +76,57 @@ hr {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/***********
|
||||||
|
# GRADIENT
|
||||||
|
***********/
|
||||||
|
|
||||||
|
.text-color--gradient {
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 20% 70%, var(--purple), transparent 40%),
|
||||||
|
radial-gradient(circle at 30% 30%, var(--light-blue), var(--blue) 20%, transparent 80%),
|
||||||
|
radial-gradient(ellipse at 95% 20%, var(--dark-blue), var(--blue) 70%, transparent 80%),
|
||||||
|
radial-gradient(circle at 100% 100%, var(--purple), var(--lilac) 100%),
|
||||||
|
radial-gradient(circle at 45% 100%, var(--lilac), var(--purple) 60%),
|
||||||
|
radial-gradient(ellipse at 50% 50%, var(--dark-blue), transparent 80%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
|
||||||
|
a[href] {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
|
||||||
|
.text-color--gradient {
|
||||||
|
--color1: rgb(103 128 229);
|
||||||
|
--color2: rgb(130 90 227);
|
||||||
|
--color3: rgb(135 101 228);
|
||||||
|
--color4: rgb(125 115 229);
|
||||||
|
--color5: rgb(107 130 230);
|
||||||
|
--color6: rgb(77 153 232);
|
||||||
|
--color7: rgb(74 136 230);
|
||||||
|
--color8: rgb(71 128 228);
|
||||||
|
--color9: rgb(65 80 224);
|
||||||
|
--color10: rgb(61 58 223);
|
||||||
|
|
||||||
|
span:nth-child(10n + 1) { color: var(--color1); }
|
||||||
|
span:nth-child(10n + 2) { color: var(--color2); }
|
||||||
|
span:nth-child(10n + 3) { color: var(--color3); }
|
||||||
|
span:nth-child(10n + 4) { color: var(--color4); }
|
||||||
|
span:nth-child(10n + 5) { color: var(--color5); }
|
||||||
|
span:nth-child(10n + 6) { color: var(--color6); }
|
||||||
|
span:nth-child(10n + 7) { color: var(--color7); }
|
||||||
|
span:nth-child(10n + 8) { color: var(--color8); }
|
||||||
|
span:nth-child(10n + 9) { color: var(--color9); }
|
||||||
|
span:nth-child(10n) { color: var(--color10); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**********************
|
/**********************
|
||||||
# SYNTAX HIGHLIGHTING
|
# SYNTAX HIGHLIGHTING
|
||||||
**********************/
|
**********************/
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue