Fix icon sizing - use emojis instead of SVGs for all services
This commit is contained in:
parent
890665e4d7
commit
4fd5f593ea
58
index.html
58
index.html
|
|
@ -267,9 +267,7 @@
|
|||
<div class="services-grid">
|
||||
<a href="https://git.lemonlink.eu" class="service-card public" target="_blank" rel="noopener">
|
||||
<div class="service-glow"></div>
|
||||
<div class="service-icon" style="--icon-color: #609926;">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C6.477 0 2 4.477 2 10c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.341-3.369-1.341-.454-1.155-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z"/></svg>
|
||||
</div>
|
||||
<div class="service-icon" style="--icon-color: #609926; font-size: 28px;">🍵</div>
|
||||
<h3 class="service-name">Gitea</h3>
|
||||
<p class="service-desc">Self-hosted Git service for code repositories</p>
|
||||
<div class="service-status checking" data-status-url="https://git.lemonlink.eu/api/v1/version">
|
||||
|
|
@ -285,9 +283,7 @@
|
|||
|
||||
<a href="https://tool.lemonlink.eu" class="service-card public" target="_blank" rel="noopener">
|
||||
<div class="service-glow"></div>
|
||||
<div class="service-icon" style="--icon-color: #f59e0b;">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></svg>
|
||||
</div>
|
||||
<div class="service-icon" style="--icon-color: #f59e0b; font-size: 28px;">🔧</div>
|
||||
<h3 class="service-name">IT-Tools</h3>
|
||||
<p class="service-desc">Handy tools for developers and IT professionals</p>
|
||||
<div class="service-status checking" data-status-url="https://tool.lemonlink.eu">
|
||||
|
|
@ -303,10 +299,8 @@
|
|||
|
||||
<a href="https://retro.lemonlink.eu" class="service-card public" target="_blank" rel="noopener">
|
||||
<div class="service-glow"></div>
|
||||
<div class="service-icon" style="--icon-color: #8b5cf6;">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-10 7H8v3H6v-3H3v-2h3V8h2v3h3v2zm4.5 2c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4-3c-.83 0-1.5-.67-1.5-1.5S18.67 9 19.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></svg>
|
||||
</div>
|
||||
<h3 class="service-name">🎮 Retro Arcade</h3>
|
||||
<div class="service-icon" style="--icon-color: #8b5cf6; font-size: 28px;">👾</div>
|
||||
<h3 class="service-name">Retro Arcade</h3>
|
||||
<p class="service-desc">Play classic DOS games including Doom! (Legally free)</p>
|
||||
<div class="service-status checking" data-status-url="https://retro.lemonlink.eu">
|
||||
<span class="status-dot"></span>
|
||||
|
|
@ -330,9 +324,7 @@
|
|||
<div class="services-grid">
|
||||
<div class="service-card private-service" data-service="nextcloud">
|
||||
<div class="service-glow"></div>
|
||||
<div class="service-icon" style="--icon-color: #0082c9;">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
|
||||
</div>
|
||||
<div class="service-icon" style="--icon-color: #0082c9; font-size: 28px;">☁️</div>
|
||||
<h3 class="service-name">Nextcloud</h3>
|
||||
<p class="service-desc">Private cloud storage, files, and collaboration</p>
|
||||
<div class="service-status checking" data-status-url="https://cloud.lemonlink.eu/status.php">
|
||||
|
|
@ -348,9 +340,7 @@
|
|||
|
||||
<div class="service-card private-service" data-service="netdata">
|
||||
<div class="service-glow"></div>
|
||||
<div class="service-icon" style="--icon-color: #00ab44;">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 3v18h18v-2H5V3H3zm11 12.5l-4-4-5 5L4 16l5-5 4 4 6.5-6.5 1.5 1.5-8 8z"/></svg>
|
||||
</div>
|
||||
<div class="service-icon" style="--icon-color: #00ab44; font-size: 28px;">📈</div>
|
||||
<h3 class="service-name">Netdata</h3>
|
||||
<p class="service-desc">Real-time system monitoring and metrics</p>
|
||||
<div class="service-status checking" data-status-url="https://stats.lemonlink.eu/api/v1/info">
|
||||
|
|
@ -366,9 +356,7 @@
|
|||
|
||||
<div class="service-card private-service" data-service="immich">
|
||||
<div class="service-glow"></div>
|
||||
<div class="service-icon" style="--icon-color: #ad5c5c;">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>
|
||||
</div>
|
||||
<div class="service-icon" style="--icon-color: #ad5c5c; font-size: 28px;">🖼️</div>
|
||||
<h3 class="service-name">Immich</h3>
|
||||
<p class="service-desc">Self-hosted photo and video backup solution</p>
|
||||
<div class="service-status checking" data-status-url="https://photos.lemonlink.eu/api/server-info/ping">
|
||||
|
|
@ -384,9 +372,7 @@
|
|||
|
||||
<div class="service-card private-service" data-service="homarr">
|
||||
<div class="service-glow"></div>
|
||||
<div class="service-icon" style="--icon-color: #ff5c5c;">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
|
||||
</div>
|
||||
<div class="service-icon" style="--icon-color: #ff5c5c; font-size: 28px;">🎛️</div>
|
||||
<h3 class="service-name">Homarr</h3>
|
||||
<p class="service-desc">Customizable dashboard for all your services</p>
|
||||
<div class="service-status checking" data-status-url="https://dash.lemonlink.eu">
|
||||
|
|
@ -402,9 +388,7 @@
|
|||
|
||||
<div class="service-card private-service" data-service="tailscale">
|
||||
<div class="service-glow"></div>
|
||||
<div class="service-icon" style="--icon-color: #7b68ee;">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/></svg>
|
||||
</div>
|
||||
<div class="service-icon" style="--icon-color: #7b68ee; font-size: 28px;">🔒</div>
|
||||
<h3 class="service-name">Tailscale</h3>
|
||||
<p class="service-desc">Zero-config VPN for secure remote access</p>
|
||||
<div class="service-status checking" data-status-url="https://login.tailscale.com">
|
||||
|
|
@ -528,9 +512,7 @@
|
|||
<!-- Virtualization -->
|
||||
<div class="tech-card">
|
||||
<div class="tech-header">
|
||||
<div class="tech-icon" style="--icon-bg: rgba(229, 126, 32, 0.15); --icon-color: #e57e20;">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div class="tech-icon" style="--icon-bg: rgba(229, 126, 32, 0.15); --icon-color: #e57e20;">📦</div>
|
||||
<h3 class="tech-title">Virtualization</h3>
|
||||
</div>
|
||||
<div class="tech-items">
|
||||
|
|
@ -544,9 +526,7 @@
|
|||
<!-- Containerization -->
|
||||
<div class="tech-card">
|
||||
<div class="tech-header">
|
||||
<div class="tech-icon" style="--icon-bg: rgba(36, 150, 237, 0.15); --icon-color: #2496ed;">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M13.983 11.078h2.119a.186.186 0 00.186-.185V9.006a.186.186 0 00-.186-.186h-2.119a.185.185 0 00-.185.185v1.888c0 .102.083.185.185.185zm-2.954-5.43h2.118a.186.186 0 00.186-.186V3.574a.186.186 0 00-.186-.185h-2.118a.185.185 0 00-.185.185v1.888c0 .102.082.185.185.186zm0 2.716h2.118a.187.187 0 00.186-.186V6.29a.186.186 0 00-.186-.185h-2.118a.185.185 0 00-.185.185v1.887c0 .102.082.186.185.186zm-2.93 0h2.12a.186.186 0 00.184-.186V6.29a.185.185 0 00-.185-.185H8.1a.185.185 0 00-.185.185v1.887c0 .102.083.186.185.186zm-2.964 0h2.119a.186.186 0 00.185-.186V6.29a.185.185 0 00-.185-.185H5.136a.186.186 0 00-.186.185v1.887c0 .102.084.186.186.186zm5.893 2.715h2.118a.186.186 0 00.186-.185V9.006a.186.186 0 00-.186-.186h-2.118a.185.185 0 00-.185.185v1.888c0 .102.082.185.185.185zm-2.93 0h2.12a.185.185 0 00.184-.185V9.006a.185.185 0 00-.184-.186h-2.12a.185.185 0 00-.184.185v1.888c0 .102.083.185.185.185zm-2.964 0h2.119a.185.185 0 00.185-.185V9.006a.185.185 0 00-.184-.186h-2.12a.186.186 0 00-.186.186v1.887c0 .102.084.185.186.185zm-2.92 0h2.12a.185.185 0 00.184-.185V9.006a.185.185 0 00-.184-.186h-2.12a.185.185 0 00-.184.185v1.888c0 .102.082.185.185.185zm20.744 1.3c-.66-1.305-2.348-1.816-3.376-1.128-.18.117-.348.244-.507.374-.468.383-.978.696-1.51.912-.532.217-1.09.333-1.65.342-.56.01-1.12-.087-1.657-.287-.538-.2-1.04-.502-1.476-.89-.435-.388-.793-.856-1.053-1.38-.26-.525-.417-1.096-.46-1.678h9.217c.44 0 .84-.26 1.02-.665l1.03-2.35c.145-.33.08-.715-.167-.977-.246-.26-.626-.35-.965-.228l-1.92.74c-.36-1.09-1.09-2.01-2.06-2.58-1.88-1.08-4.24-.67-5.66.95l-4.04 4.7c-1.02 1.18-1.3 2.82-.73 4.26.5 1.27 1.59 2.2 2.9 2.46.34.07.69.09 1.03.06h7.92c.13 0 .26-.01.38-.03.89-.14 1.62-.72 1.95-1.5l.01-.02c.27-.62.32-1.33.14-1.99z"/></svg>
|
||||
</div>
|
||||
<div class="tech-icon" style="--icon-bg: rgba(36, 150, 237, 0.15); --icon-color: #2496ed;">🐳</div>
|
||||
<h3 class="tech-title">Containers</h3>
|
||||
</div>
|
||||
<div class="tech-items">
|
||||
|
|
@ -560,9 +540,7 @@
|
|||
<!-- Networking -->
|
||||
<div class="tech-card">
|
||||
<div class="tech-header">
|
||||
<div class="tech-icon" style="--icon-bg: rgba(34, 211, 238, 0.15); --icon-color: #22d3ee;">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
|
||||
</div>
|
||||
<div class="tech-icon" style="--icon-bg: rgba(34, 211, 238, 0.15); --icon-color: #22d3ee;">🌐</div>
|
||||
<h3 class="tech-title">Networking</h3>
|
||||
</div>
|
||||
<div class="tech-items">
|
||||
|
|
@ -576,9 +554,7 @@
|
|||
<!-- Storage -->
|
||||
<div class="tech-card">
|
||||
<div class="tech-header">
|
||||
<div class="tech-icon" style="--icon-bg: rgba(139, 92, 246, 0.15); --icon-color: #8b5cf6;">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M2 20h20v-4H2v4zm2-3h2v2H4v-2zM2 4v4h20V4H2zm4 3H4V5h2v2zm-4 7h20v-4H2v4zm2-3h2v2H4v-2z"/></svg>
|
||||
</div>
|
||||
<div class="tech-icon" style="--icon-bg: rgba(139, 92, 246, 0.15); --icon-color: #8b5cf6;">💾</div>
|
||||
<h3 class="tech-title">Storage</h3>
|
||||
</div>
|
||||
<div class="tech-items">
|
||||
|
|
@ -592,9 +568,7 @@
|
|||
<!-- Monitoring -->
|
||||
<div class="tech-card">
|
||||
<div class="tech-header">
|
||||
<div class="tech-icon" style="--icon-bg: rgba(34, 197, 94, 0.15); --icon-color: #22c55e;">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 3v18h18v-2H5V3H3zm11 12.59l-4-4-5 5L4 16l5-5 4 4 6.5-6.5 1.5 1.5-8 8z"/></svg>
|
||||
</div>
|
||||
<div class="tech-icon" style="--icon-bg: rgba(34, 197, 94, 0.15); --icon-color: #22c55e;">📊</div>
|
||||
<h3 class="tech-title">Monitoring</h3>
|
||||
</div>
|
||||
<div class="tech-items">
|
||||
|
|
@ -608,9 +582,7 @@
|
|||
<!-- Development -->
|
||||
<div class="tech-card">
|
||||
<div class="tech-header">
|
||||
<div class="tech-icon" style="--icon-bg: rgba(245, 158, 11, 0.15); --icon-color: #f59e0b;">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
|
||||
</div>
|
||||
<div class="tech-icon" style="--icon-bg: rgba(245, 158, 11, 0.15); --icon-color: #f59e0b;">⚡</div>
|
||||
<h3 class="tech-title">Development</h3>
|
||||
</div>
|
||||
<div class="tech-items">
|
||||
|
|
|
|||
15
styles.css
15
styles.css
|
|
@ -797,14 +797,11 @@ body {
|
|||
justify-content: center;
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--icon-color);
|
||||
font-size: 28px;
|
||||
line-height: 1;
|
||||
transition: var(--transition-normal);
|
||||
}
|
||||
|
||||
.service-icon svg {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.service-card:hover .service-icon {
|
||||
transform: scale(1.1);
|
||||
background: rgba(234, 179, 8, 0.1);
|
||||
|
|
@ -1895,7 +1892,8 @@ body {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--icon-color);
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
|
|
@ -1903,11 +1901,6 @@ body {
|
|||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.tech-icon svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.tech-title {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 1.1rem;
|
||||
|
|
|
|||
Loading…
Reference in New Issue