add modules gruvbox, rainbow
This commit is contained in:
parent
0c1f593312
commit
249821fa46
17
modules/gruvbox.css
Normal file
17
modules/gruvbox.css
Normal 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
18
modules/rainbow.css
Normal 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); }
|
||||
}
|
5
modules/readmes/gruvbox.txt
Normal file
5
modules/readmes/gruvbox.txt
Normal 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
|
9
modules/readmes/rainbow.txt
Normal file
9
modules/readmes/rainbow.txt
Normal 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`
|
Loading…
Reference in New Issue
Block a user