gsadmin/KoalaSync
1
0
Fork 0
mirror of https://github.com/Shik3i/KoalaSync.git synced 2026-08-07 01:43:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(website): integrate KoalaDeploy mascot, enlarge Juggler mascot by 15%, and add premium interactive hover effects to all main mascots

Browse Source
This commit is contained in:
Timo
2026-05-30 19:48:53 +02:00
parent 54ffbfa4bd
commit fb1451022b
3 changed files with 37 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/assets/KoalaDeploy.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

website/index.html
+7 -1
View File
@@ -750,11 +750,17 @@
<h2 style="font-size: 2.5rem; text-align: center; margin-bottom: 1rem;">
<span lang="en">For Self-Hosters</span><span lang="de">Für Self-Hoster</span>
</h2>
<p style="text-align: center; color: var(--text-muted); margin-bottom: 3rem; max-width: 600px; margin-left: auto; margin-right: auto;">
<p style="text-align: center; color: var(--text-muted); margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto;">
<span lang="en">Maintain full data sovereignty. Deploy your own private relay server in minutes.</span>
<span lang="de">Behalte die volle Datenhoheit. Richte deinen eigenen privaten Relay-Server in wenigen Minuten ein.</span>
</p>
<!-- Mascot Self-Hosting / Deploy Illustration -->
<div style="display: flex; justify-content: center; margin-bottom: 2.5rem;" data-reveal>
<img src="assets/KoalaDeploy.webp" alt="A cute koala sitting at a laptop deploying a Docker container for self-hosting" class="selfhost-mascot" lang="en" width="300" height="201" loading="lazy">
<img src="assets/KoalaDeploy.webp" alt="Ein niedlicher Koala sitzt am Laptop und deployt einen Docker-Container für das Self-Hosting" class="selfhost-mascot" lang="de" width="300" height="201" loading="lazy">
</div>
<div class="terminal-container" data-reveal>
<div class="terminal-header">
<div class="terminal-dots">
website/style.css
+30 -2
View File
@@ -1327,9 +1327,14 @@ html.lang-de [lang="en"] {
.compat-mascot {
display: block;
margin: 0 auto 0.5rem auto;
max-width: 320px;
max-width: 368px;
width: 100%;
height: auto;
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.compat-mascot:hover {
transform: scale(1.05) translateY(-5px) rotate(1deg);
}
.compat-heading {
@@ -1548,6 +1553,11 @@ html.lang-de [lang="en"] {
max-width: 250px;
height: auto;
margin: -1.5rem auto 0.2rem auto;
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.features-questions-mascot:hover {
transform: scale(1.05) translateY(-4px) rotate(-1.5deg);
}
.comparison-mascot {
@@ -1556,6 +1566,11 @@ html.lang-de [lang="en"] {
max-width: 260px;
height: auto;
margin: -2.2rem auto 0.2rem auto;
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.comparison-mascot:hover {
transform: scale(1.05) translateY(-4px) rotate(1deg);
}
.use-case-icon {
@@ -1792,7 +1807,20 @@ html.lang-de [lang="en"] {
}
.legal-mascot:hover {
transform: scale(1.06) rotate(1.5deg);
transform: scale(1.06) translateY(-4px) rotate(1.5deg);
}
.selfhost-mascot {
display: block;
width: 300px;
height: auto;
margin: 0 auto;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.selfhost-mascot:hover {
transform: scale(1.05) translateY(-4px) rotate(-1deg);
}
.status-ring {