add modules gruvbox, rainbow

This commit is contained in:
Akbar Rahman 2022-04-13 00:49:31 +01:00
parent 0c1f593312
commit 249821fa46
Signed by: alvierahman90
GPG Key ID: 20609519444A1269
4 changed files with 49 additions and 0 deletions

17
modules/gruvbox.css Normal file
View File

@ -0,0 +1,17 @@
:root {
--gruvbox-orange: #d65d0e;
--gruvbox-red: #cc242d;
--gruvbox-green: #98971a;
--gruvbox-yellow: #d79921;
--gruvbox-blue: #458588;
--gruvbox-purple: #b16286;
--gruvbox-aqua: #689d6a;
--gruvbox-orange-light: #fe8019;
--gruvbox-red-light: #fb4934;
--gruvbox-green-light: #b8bb26;
--gruvbox-yellow-light: #fabd2f;
--gruvbox-blue-light: #83a598;
--gruvbox-purple-light: #d3869b;
--gruvbox-aqua-light: #8ec07c;
}

18
modules/rainbow.css Normal file
View File

@ -0,0 +1,18 @@
@import url("./gruvbox.css")
:root {
--rainbow-duration: 8s
}
.rainbow { animation: colorchange var(--rainbow-duration) infinite alternate; }
@keyframes colorchange {
0% { color: var(--gruvbox-blue); }
14.3% { color: var(--gruvbox-aqua); }
28.6% { color: var(--gruvbox-green); }
42.9% { color: var(--gruvbox-yellow); }
57.1% { color: var(--gruvbox-orange); }
71.4% { color: var(--gruvbox-red); }
85.7% { color: var(--gruvbox-purple); }
100% { color: var(--gruvbox-blue); }
}

View File

@ -0,0 +1,5 @@
in the css
@import url("https://styles.alv.cx/modules/gruvbox.css");
and use the variables created in the file

View File

@ -0,0 +1,9 @@
in the css
@import url("https://styles.alv.cx/modules/rainbow.css");
and add the class `rainbow` to any element you want.
it works by changing the `color` property of the element.
the duration is determined by the variable `--rainbow-duration`