impulsivefps
/
lemonlink
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add private class for red styling, keep public services green

This commit is contained in:
Roberth Rajala 2026-02-02 15:32:33 +01:00
parent 46a8b18908
commit 343c6ab951
2 changed files with 9 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -322,7 +322,7 @@
Private Services Private Services
</h3> </h3>
<div class="services-grid"> <div class="services-grid">
<a href="/services/nextcloud.html" class="service-card public" target="_blank" rel="noopener"> <a href="/services/nextcloud.html" class="service-card private" target="_blank" rel="noopener">
<div class="service-glow"></div> <div class="service-glow"></div>
<div class="service-icon" style="--icon-color: #0082c9; font-size: 28px;">☁️</div> <div class="service-icon" style="--icon-color: #0082c9; font-size: 28px;">☁️</div>
<h3 class="service-name">Nextcloud</h3> <h3 class="service-name">Nextcloud</h3>
@ -338,7 +338,7 @@
</div> </div>
</a> </a>
<a href="/services/netdata.html" class="service-card public" target="_blank" rel="noopener"> <a href="/services/netdata.html" class="service-card private" target="_blank" rel="noopener">
<div class="service-glow"></div> <div class="service-glow"></div>
<div class="service-icon" style="--icon-color: #00ab44; font-size: 28px;">📈</div> <div class="service-icon" style="--icon-color: #00ab44; font-size: 28px;">📈</div>
<h3 class="service-name">Netdata</h3> <h3 class="service-name">Netdata</h3>
@ -354,7 +354,7 @@
</div> </div>
</a> </a>
<a href="/services/immich.html" class="service-card public" target="_blank" rel="noopener"> <a href="/services/immich.html" class="service-card private" target="_blank" rel="noopener">
<div class="service-glow"></div> <div class="service-glow"></div>
<div class="service-icon" style="--icon-color: #ad5c5c; font-size: 28px;">🖼️</div> <div class="service-icon" style="--icon-color: #ad5c5c; font-size: 28px;">🖼️</div>
<h3 class="service-name">Immich</h3> <h3 class="service-name">Immich</h3>
@ -370,7 +370,7 @@
</div> </div>
</a> </a>
<a href="/services/portainer.html" class="service-card public" target="_blank" rel="noopener"> <a href="/services/portainer.html" class="service-card private" target="_blank" rel="noopener">
<div class="service-glow"></div> <div class="service-glow"></div>
<div class="service-icon" style="--icon-color: #13b6a6; font-size: 28px;">🐳</div> <div class="service-icon" style="--icon-color: #13b6a6; font-size: 28px;">🐳</div>
<h3 class="service-name">Portainer</h3> <h3 class="service-name">Portainer</h3>
@ -386,7 +386,7 @@
</div> </div>
</a> </a>
<a href="/services/pihole.html" class="service-card public" target="_blank" rel="noopener"> <a href="/services/pihole.html" class="service-card private" target="_blank" rel="noopener">
<div class="service-glow"></div> <div class="service-glow"></div>
<div class="service-icon" style="--icon-color: #f97316; font-size: 28px;">🛡️</div> <div class="service-icon" style="--icon-color: #f97316; font-size: 28px;">🛡️</div>
<h3 class="service-name">Pi-hole</h3> <h3 class="service-name">Pi-hole</h3>

21
styles.css
View File

@ -1754,7 +1754,7 @@ body {
color: #ef4444; color: #ef4444;
} }
/* Public Service Styling */ /* Public Service Styling (Green) */
.service-card.public { .service-card.public {
border-color: rgba(34, 197, 94, 0.2); border-color: rgba(34, 197, 94, 0.2);
} }
@ -1764,29 +1764,16 @@ body {
box-shadow: 0 8px 32px rgba(34, 197, 94, 0.1); box-shadow: 0 8px 32px rgba(34, 197, 94, 0.1);
} }
/* Private Service Styling */ /* Private Service Styling (Red) */
.service-card.private-service { .service-card.private {
border-color: rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.2);
cursor: pointer;
display: block;
z-index: 1;
} }
.service-card.private-service a { .service-card.private:hover {
position: relative;
z-index: 10;
}
.service-card.private-service:hover {
border-color: rgba(239, 68, 68, 0.5); border-color: rgba(239, 68, 68, 0.5);
box-shadow: 0 8px 32px rgba(239, 68, 68, 0.1); box-shadow: 0 8px 32px rgba(239, 68, 68, 0.1);
} }
.service-card.private-service .service-arrow svg {
width: 20px;
height: 20px;
}
/* ======================================== /* ========================================
Skills Section Skills Section