eryn/hugo-theme-termlite
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Bring over the gradient from erynwells.me as a .text-color--gradient class

Browse source
This commit is contained in:
Eryn Wells 2024-06-29 10:28:41 -07:00
parent 11a677476b
commit 16536744ee
1 changed files with 57 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

57
assets/css/010_colors.css
View file

@ -20,6 +20,12 @@
--gray6: rgb(200 204 217);
--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);
--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
**********************/