max/chookchat
max/chookchat
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Fix the gradient

Browse Source
This commit is contained in:
Maxwell Jeffress 2024-11-26 08:32:22 +11:00
parent 500ac029df
commit c07a2c7fce
1 changed files with 15 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
client-web/gradient.css
View File

@ -1,43 +1,21 @@
/* Reset default margin and ensure full viewport coverage */ /* Credit to Manuel Pinto on Codepen for the code!
https://codepen.io/P1N2O/pen/pyBNzX */
body { body {
margin: 0; background: linear-gradient(-33deg, #721c7a, #612bd4, #3aa5c5, #30cf7f);
min-height: 100vh; background-size: 400% 400%;
background: linear-gradient(
30deg,
#50C878, /* green */
#7FFFD4, /* aqua */
#87CEEB, /* light blue */
#00008B, /* dark blue */
#800080, /* purple */
#50C878, /* green */
#7FFFD4, /* aqua */
#87CEEB, /* light blue */
#00008B, /* dark blue */
#800080, /* purple */
#50C878 /* green */
);
background-size: 1000% 1000%;
animation: gradient 120s ease infinite; animation: gradient 120s ease infinite;
height: 100vh;
} }
/* Gradient animation keyframes */
@keyframes gradient { @keyframes gradient {
0% { 0% {
background-position: 0% 50%; background-position: 0% 50%;
} }
50% {
background-position: 100% 50%;
}
100% { 100% {
background-position: 200% 50%; background-position: 0% 50%;
} }
} }
/* Optional: styling for centered content */
.content {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-family: sans-serif;
font-size: 2rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}