sd/site
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

replace background with gradient

Browse source
This commit is contained in:
Ruben 2024-05-31 09:20:16 -05:00
commit 20126af937
No known key found for this signature in database
GPG key ID: AE181294E97E4802
1 changed files with 52 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

57
style.css
View file

@ -154,10 +154,11 @@ font config, Lexend Deca
background wallpaper, font
*/
body {
background-color: var(--crust);
background: var(--background-image) no-repeat center center fixed;
background-size: cover;
background: linear-gradient(125deg, var(--pink), var(--mauve), var(--maroon), var(--peach), var(--teal));
background-size: 1000% 1000%;
animation: bg-gradient 10s ease infinite;
-moz-animation: bg-gradient 10s ease infinite;
-webkit-animation: bg-gradient 10s ease infinite;
font-family: "JetBrains Mono";
font-size: 18px;
}
@ -250,6 +251,8 @@ styling of the terminal windows
color: var(--text);
margin-left: 9px;
animation: blink .8s linear infinite;
-moz-animation: blink .8s linear infinite;
-webkit-animation: blink .8s linear infinite;
}
}
@ -345,6 +348,8 @@ li {
/* gay ass text */
.rainbow {
animation: 2s linear infinite rainbow;
-webkit-animation: 2s linear infinite rainbow;
-moz-animation: 2s linear infinite rainbow;
}
/* heading 1 is also clickable */
h1 a:hover {
@ -558,6 +563,48 @@ animations
0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
}
@keyframes bg-gradient {
0% { background-position: 0% 27% }
50% { background-position: 100% 74% }
100% { background-position: 0% 27% }
}
@-moz-keyframes blink {
0% { opacity: 0; }
50% { opacity: 1.0; }
100% { opacity: 0; }
}
@-moz-keyframes spin-y {
/* values: 128px, 256px, 348px, 396px*/
0% { transform: perspective(396px) rotateY(0); }
100% { transform: perspective(396px) rotateY(360deg); }
}
@-moz-keyframes rainbow {
0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
}
@-moz-keyframes bg-gradient {
0% { background-position: 0% 27% }
50% { background-position: 100% 74% }
100% { background-position: 0% 27% }
}
@-webkit-keyframes blink {
0% { opacity: 0; }
50% { opacity: 1.0; }
100% { opacity: 0; }
}
@-webkit-keyframes spin-y {
/* values: 128px, 256px, 348px, 396px*/
0% { transform: perspective(396px) rotateY(0); }
100% { transform: perspective(396px) rotateY(360deg); }
@-webkit-keyframes rainbow {
0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
}
@-webkit-keyframes bg-gradient {
0% { background-position: 0% 27% }
50% { background-position: 100% 74% }
100% { background-position: 0% 27% }
}
/*
modify widths and spacing depending on the size of the display
@ -576,4 +623,4 @@ modify widths and spacing depending on the size of the display
.socials-contacts-list {
grid-template-columns: repeat(1, 1fr);
}
}
}