0xalivecow/senju
1
0
Fork 0
mirror of https://github.com/senju1337/senju.git synced 2025-12-23 23:39:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: remove parallax effect from info box and adjust colours

Browse source 
Refs: OPS-90
This commit is contained in:
0xjrx 2025-03-27 15:41:29 +01:00
parent 2e1800027c
commit 690b716562
No known key found for this signature in database
GPG key ID: 61C53033867D0271
1 changed files with 72 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

30
senju/templates/info.html
View file

@ -15,13 +15,13 @@
display: flex;
align-items: center;
gap: 20px;
transition: 0.5s;
position: relative;
}
/* Parallax Image Effect */
.grid-item img {
--f: .1; /* the parallax factor */
--r: 10px; /* radius */
--f: .1; /* Parallax factor */
--r: 10px; /* Radius */
--_f: calc(100% * var(--f) / (1 + var(--f)));
--_a: calc(90deg * var(--f));
@ -39,16 +39,14 @@
--_t: translateX(calc(-1 * var(--_f))) rotateY(calc(-1 * var(--_a)));
}
/* Member Info Box */
/* Info Box (No effect, solid background) */
.info-box {
width: 250px;
padding: 12px;
background: rgba(255, 255, 255, 0.2);
background: #fff; /* Solid white */
border-radius: 10px;
color: white;
color: black;
text-align: left;
backdrop-filter: blur(5px);
transition: 0.5s;
font-family: Arial, sans-serif;
}
@ -82,12 +80,6 @@
background-color: #8b5cf6;
}
/* Make both image & info box move on hover */
.grid-item:hover img,
.grid-item:hover .info-box {
transform: translateX(calc(-1 * var(--_f))) rotateY(calc(-1 * var(--_a)));
}
</style>
<div class="grid-container">
@ -95,7 +87,7 @@
<img src="https://avatars.githubusercontent.com/u/58274330?v=4" alt="PlexSheep">
<div class="info-box">
<h2>PlexSheep</h2>
<p class="title text-violet-300">Backend Developer</p>
<p class="title text-violet-900">Backend Developer</p>
<p>Cyber Security Student, passionate Hobbyist, Networkadmin and Sotware Engineer</p>
<a href="https://github.com/PlexSheep">Github</a>
@ -108,7 +100,7 @@
<img src="https://avatars.githubusercontent.com/u/119286812?v=4" alt="0xjrx" style="--f:.12;--r:5px">
<div class="info-box">
<h2>0xjrx</h2>
<p class="title text-violet-300">Frontend Developer</p>
<p class="title text-violet-900">Frontend Developer</p>
<p>Cyber Security Student working on malware research and development.</p>
<a href="https://github.com/0xjrx">Github</a>
@ -121,7 +113,7 @@
<img src="https://avatars.githubusercontent.com/u/45919207?v=4" alt="0xalivecow" style="--f:.08;--r:20px">
<div class="info-box">
<h2>0xalivecow</h2>
<p class="title text-violet-300" >Backend Developer</p>
<p class="title text-violet-900" >Backend Developer</p>
<p>Cyber Security Student with a focus on Linux Security</p>
<a href="https://github.com/0xalivecow">Github</a>
@ -134,8 +126,8 @@
<img src="https://avatars.githubusercontent.com/u/134395490?v=4" alt="Amrasil" style="--f:.08;--r:20px">
<div class="info-box">
<h2>Amrasil</h2>
<p class="title text-violet-300">Documentation and Code coverage</p>
<p>Cyber Security student passionate about BDO and Machine Learning.</p>
<p class="title text-violet-900">Documentation and Code coverage</p>
<p>Cyber Security student passionate about Mathematics and Machine Learning.</p>
<a href="https://github.com/Amrasil">Github</a>