fujin/gruvbox-wallpapers
1
0
Fork 0
mirror of https://github.com/AngelJumbo/gruvbox-wallpapers.git synced 2026-10-06 22:29:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add hover colors for .s[1-7] classes

Browse Source
This commit is contained in:
Katy248
2024-06-05 13:10:57 +00:00
parent 96eef9616a
commit 841e75f581
2 changed files with 60 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
build.sh
+1 -1
View File
@@ -22,7 +22,7 @@
write_section_header(){
echo "<h2 class='clickable s$1' onclick='activeSection(\"$2\")' >" >> $3
echo "<h2 class='s s$1' onclick='activeSection(\"$2\")' >" >> $3
echo "$2" | tr a-z A-Z >> $3
echo "</h2>" >> $3
}
style.css
+59 -8
View File
@@ -11,6 +11,22 @@
--bg-color-3-switch: light-dark(#665c54, #bdae93);
--bg-color-hard: light-dark(#f9f5d7, #1d2021);
--gray: light-dark(#7c6f64, #a89984);
--orange: #d65d0e;
--red: #cc241d;
--green: #98971a;
--yellow: #d79921;
--blue: #458588;
--purple: #b16286;
--aqua: #689d6a;
--orange-dim: light-dark(#af3a03, #fe8019);
--red-dim: light-dark(#9d0006, #fb4934);
--green-dim: light-dark(#79740e, #b8bb26);
--yellow-dim: light-dark(#b57614, #fabd2f);
--blue-dim: light-dark(#076678, #83a598);
--purple-dim: light-dark(#8f3f71, #d3869d);
--aqua-dim: light-dark(#427b58, #8ec07c);
}
body {
@@ -39,39 +55,74 @@ h2 {
color: var(--fg-color-reverse);
}
h2 {
cursor: pointer;
}
.s {
transition: all 0.7s ease-in-out;
}
.s1 {
background-color: #d65d0e;
background-color: var(--orange);
&:hover {
background-color: var(--orange-dim);
}
}
.s2 {
background-color: #cc241d;
background-color: var(--red);
&:hover {
background-color: var(--red-dim);
}
}
.s3 {
background-color: #98971a;
background-color: var(--green);
&:hover {
background-color: var(--green-dim);
}
}
.s4 {
background-color: #d79921;
background-color: var(--yellow);
&:hover {
background-color: var(--yellow-dim);
}
}
.s5 {
background-color: #458588;
background-color: var(--blue);
&:hover {
background-color: var(--blue-dim);
}
}
.s6 {
background-color: #b16286;
background-color: var(--purple);
&:hover {
background-color: var(--purple-dim);
}
}
.s7 {
background-color: #689d6a;
background-color: var(--aqua);
&:hover {
background-color: var(--aqua-dim);
}
}
.c {
padding: 1em;
background-color: var(--bg-color-3);
text-align: center;
/*border-radius: 8px; */
}
img {