0xalivecow/senju
1
0
Fork 0
mirror of https://github.com/senju1337/senju.git synced 2025-12-24 07:39:29 +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

68
senju/templates/info.html
View file

@ -9,19 +9,19 @@
justify-content: center; justify-content: center;
align-items: start; align-items: start;
padding: 50px; padding: 50px;
} }
.grid-item { .grid-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 20px; gap: 20px;
transition: 0.5s;
position: relative; position: relative;
} }
.grid-item img { /* Parallax Image Effect */
--f: .1; /* the parallax factor */ .grid-item img {
--r: 10px; /* radius */ --f: .1; /* Parallax factor */
--r: 10px; /* Radius */
--_f: calc(100% * var(--f) / (1 + var(--f))); --_f: calc(100% * var(--f) / (1 + var(--f)));
--_a: calc(90deg * var(--f)); --_a: calc(90deg * var(--f));
@ -32,41 +32,39 @@
transform: perspective(400px) var(--_t, rotateY(var(--_a))); transform: perspective(400px) var(--_t, rotateY(var(--_a)));
transition: 0.5s; transition: 0.5s;
cursor: pointer; cursor: pointer;
} }
.grid-item img:hover { .grid-item img:hover {
clip-path: inset(0 0 0 var(--_f) round var(--r)); clip-path: inset(0 0 0 var(--_f) round var(--r));
--_t: translateX(calc(-1 * var(--_f))) rotateY(calc(-1 * var(--_a))); --_t: translateX(calc(-1 * var(--_f))) rotateY(calc(-1 * var(--_a)));
} }
/* Member Info Box */ /* Info Box (No effect, solid background) */
.info-box { .info-box {
width: 250px; width: 250px;
padding: 12px; padding: 12px;
background: rgba(255, 255, 255, 0.2); background: #fff; /* Solid white */
border-radius: 10px; border-radius: 10px;
color: white; color: black;
text-align: left; text-align: left;
backdrop-filter: blur(5px);
transition: 0.5s;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
} }
.info-box h2 { .info-box h2 {
margin: 5px 0; margin: 5px 0;
font-size: 18px; font-size: 18px;
} }
.info-box p { .info-box p {
margin: 5px 0; margin: 5px 0;
font-size: 14px; font-size: 14px;
} }
.info-box .title { .info-box .title {
font-weight: bold; font-weight: bold;
} }
.button { .button {
background-color: #7c3aed; background-color: #7c3aed;
border: none; border: none;
color: white; color: white;
@ -76,17 +74,11 @@
cursor: pointer; cursor: pointer;
border-radius: 5px; border-radius: 5px;
transition: background 0.3s; transition: background 0.3s;
} }
.button:hover { .button:hover {
background-color: #8b5cf6; 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> </style>
@ -95,7 +87,7 @@
<img src="https://avatars.githubusercontent.com/u/58274330?v=4" alt="PlexSheep"> <img src="https://avatars.githubusercontent.com/u/58274330?v=4" alt="PlexSheep">
<div class="info-box"> <div class="info-box">
<h2>PlexSheep</h2> <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> <p>Cyber Security Student, passionate Hobbyist, Networkadmin and Sotware Engineer</p>
<a href="https://github.com/PlexSheep">Github</a> <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"> <img src="https://avatars.githubusercontent.com/u/119286812?v=4" alt="0xjrx" style="--f:.12;--r:5px">
<div class="info-box"> <div class="info-box">
<h2>0xjrx</h2> <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> <p>Cyber Security Student working on malware research and development.</p>
<a href="https://github.com/0xjrx">Github</a> <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"> <img src="https://avatars.githubusercontent.com/u/45919207?v=4" alt="0xalivecow" style="--f:.08;--r:20px">
<div class="info-box"> <div class="info-box">
<h2>0xalivecow</h2> <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> <p>Cyber Security Student with a focus on Linux Security</p>
<a href="https://github.com/0xalivecow">Github</a> <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"> <img src="https://avatars.githubusercontent.com/u/134395490?v=4" alt="Amrasil" style="--f:.08;--r:20px">
<div class="info-box"> <div class="info-box">
<h2>Amrasil</h2> <h2>Amrasil</h2>
<p class="title text-violet-300">Documentation and Code coverage</p> <p class="title text-violet-900">Documentation and Code coverage</p>
<p>Cyber Security student passionate about BDO and Machine Learning.</p> <p>Cyber Security student passionate about Mathematics and Machine Learning.</p>
<a href="https://github.com/Amrasil">Github</a> <a href="https://github.com/Amrasil">Github</a>