aheh/monkeygg2.github.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

gradient title and slight modifications

Browse Source
This commit is contained in:
MonkeyGG2
2023-08-22 16:34:29 +05:30
parent d7d9527711
commit e052ecc8a8
3 changed files with 29 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+15 -4
View File
@@ -1,5 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Trispace:wght@100&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Trispace:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300&display=swap');
/*i titled these poorly, without trying how any of it looks*/ /*i titled these poorly, without trying how any of it looks*/
:root { :root {
@@ -8,7 +8,7 @@
--button-color: #373737; --button-color: #373737;
--hover-color: #3c3c3c; --hover-color: #3c3c3c;
--font-color: #dcddde; --font-color: #dcddde;
--font-family: 'Lato', sans-serif; --font-family: 'Work Sans', sans-serif;
} }
html { html {
@@ -73,15 +73,21 @@ body.noscript {
h1 { h1 {
z-index: 50; z-index: 50;
position: relative; position: relative;
display: flex; display: inline-block;
justify-self: center; justify-self: center;
text-align: center; text-align: center;
width: fit-content;
height: fit-content;
margin-top: 3.5rem; margin-top: 3.5rem;
font-size: 128px; font-size: 128px;
font-weight: 100; font-weight: 100;
font-family: 'Trispace', sans-serif; font-family: 'Trispace', sans-serif;
letter-spacing: 5px; letter-spacing: 5px;
color: -webkit-linear-gradient(white, #38495a) color: transparent;
background-image: linear-gradient(white, #38495a);
-webkit-background-clip: text;
background-clip: text;
pointer-events: none;
} }
logo img { logo img {
@@ -125,4 +131,9 @@ logo img {
color: var(--font-color); color: var(--font-color);
font-family: var(--font-family); font-family: var(--font-family);
transition: all 0.2s ease-in; transition: all 0.2s ease-in;
cursor: pointer;
}
.card:hover {
background-color: var(--hover-color);
} }
js/bg.js
+7
View File
@@ -16,6 +16,8 @@ const opt = {
strokeWeight: 2, strokeWeight: 2,
tail: 82 }; tail: 82 };
changeTitleColor();
const Particles = []; const Particles = [];
let time = 0; let time = 0;
document.body.addEventListener("click", () => { document.body.addEventListener("click", () => {
@@ -26,6 +28,7 @@ document.body.addEventListener("click", () => {
opt.l1 = rand(30, 80); opt.l1 = rand(30, 80);
opt.l2 = rand(30, 80); opt.l2 = rand(30, 80);
opt.angle += deg(random(60, 60)) * (Math.random() > 0.5 ? 1 : -1); opt.angle += deg(random(60, 60)) * (Math.random() > 0.5 ? 1 : -1);
changeTitleColor();
for (let p of Particles) { for (let p of Particles) {
p.randomize(); p.randomize();
@@ -157,4 +160,8 @@ Resize
--------------------*/ --------------------*/
function windowResized() { function windowResized() {
resizeCanvas(windowWidth, windowHeight); resizeCanvas(windowWidth, windowHeight);
}
function changeTitleColor() {
document.querySelector("#everything-else h1").style.background = `text linear-gradient(hsl(${opt.h1}, ${opt.s1}, ${opt.l1}), hsl(${opt.h2}, ${opt.s2}, ${opt.l2}));`;
} }
jsconfig.json
+7
View File
@@ -0,0 +1,7 @@
{
"typeAcquisition": {
"include": [
"jquery"
]
}
}