style: replace emoji icons with material design SVGs and hover effects

This commit is contained in:
Paul Gauthier (aider) 2025-03-24 12:54:19 -10:00
parent 059cd23543
commit dea4d16e87
2 changed files with 39 additions and 15 deletions

View file

@ -329,14 +329,20 @@ nav {
}
.feature-icon {
font-size: 1.8rem;
color: var(--primary);
margin-right: 12px;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 8px;
border-radius: 8px;
background: rgba(76, 110, 245, 0.1);
color: var(--primary);
margin-right: 12px;
flex-shrink: 0;
transition: transform 0.3s, background 0.3s;
}
.feature-card:hover .feature-icon {
transform: scale(1.1);
background: rgba(76, 110, 245, 0.2);
}
.feature-title {

View file

@ -96,7 +96,9 @@ cog.out(text)
<div class="feature-grid">
<a href="/docs/llms.html" class="feature-card">
<div class="feature-card-header">
<div class="feature-icon">🧠</div>
<svg class="feature-icon" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,3C10,3 8,5 8,7H6A4,4 0 0,1 10,3H12M18,7A4,4 0 0,1 22,11V13H18V11A2,2 0 0,0 16,9A2,2 0 0,0 14,11V13H10V11A4,4 0 0,1 14,7H16A2,2 0 0,0 18,5H20A4,4 0 0,1 24,9V17A4,4 0 0,1 20,21H4A4,4 0 0,1 0,17V9A4,4 0 0,1 4,5H6A2,2 0 0,0 8,7H10A4,4 0 0,1 14,3H16A4,4 0 0,1 20,7H18M4,11V17H20V11H4Z" />
</svg>
<h3 class="feature-title">
Cloud and local LLMs
</h3>
@ -105,7 +107,9 @@ cog.out(text)
</a>
<a href="/docs/repomap.html" class="feature-card">
<div class="feature-card-header">
<div class="feature-icon">🗺️</div>
<svg class="feature-icon" viewBox="0 0 24 24">
<path fill="currentColor" d="M20.5,3L20.34,3.03L15,5.1L9,3L3.36,4.9C3.15,4.97 3,5.15 3,5.38V20.5A0.5,0.5 0 0,0 3.5,21L3.66,20.97L9,18.9L15,21L20.64,19.1C20.85,19.03 21,18.85 21,18.62V3.5A0.5,0.5 0 0,0 20.5,3M15,19L9,16.89V5L15,7.11V19Z" />
</svg>
<h3 class="feature-title">Maps your codebase</h3>
</div>
<p>
@ -115,7 +119,9 @@ cog.out(text)
</a>
<a href="/docs/languages.html" class="feature-card">
<div class="feature-card-header">
<div class="feature-icon" style="font-family: monospace; font-weight: bold; font-size: 1.5rem;">&lt;/&gt;</div>
<svg class="feature-icon" viewBox="0 0 24 24">
<path fill="currentColor" d="M14.6,16.6L19.2,12L14.6,7.4L16,6L22,12L16,18L14.6,16.6M9.4,16.6L4.8,12L9.4,7.4L8,6L2,12L8,18L9.4,16.6Z" />
</svg>
<h3 class="feature-title">100+ code languages</h3>
</div>
<p>
@ -126,7 +132,9 @@ cog.out(text)
</a>
<a href="/docs/git.html" class="feature-card">
<div class="feature-card-header">
<div class="feature-icon">🔀</div>
<svg class="feature-icon" viewBox="0 0 24 24">
<path fill="currentColor" d="M7,17V14L3,18L7,22V19H21V17H7M21,7V9H7V12L3,8L7,4V7H21Z" />
</svg>
<h3 class="feature-title">Git integration</h3>
</div>
<p>
@ -138,7 +146,9 @@ cog.out(text)
</a>
<a href="/docs/usage/watch.html" class="feature-card">
<div class="feature-card-header">
<div class="feature-icon">🖥️</div>
<svg class="feature-icon" viewBox="0 0 24 24">
<path fill="currentColor" d="M21,16H3V4H21M21,2H3C1.89,2 1,2.89 1,4V16A2,2 0 0,0 3,18H10V20H8V22H16V20H14V18H21A2,2 0 0,0 23,16V4C23,2.89 22.1,2 21,2Z" />
</svg>
<h3 class="feature-title">In your IDE</h3>
</div>
<p>
@ -149,7 +159,9 @@ cog.out(text)
</a>
<a href="/docs/usage/images-urls.html" class="feature-card">
<div class="feature-card-header">
<div class="feature-icon">🖼️</div>
<svg class="feature-icon" viewBox="0 0 24 24">
<path fill="currentColor" d="M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z" />
</svg>
<h3 class="feature-title">Images & web pages</h3>
</div>
<p>
@ -160,7 +172,9 @@ cog.out(text)
</a>
<a href="/docs/usage/voice.html" class="feature-card">
<div class="feature-card-header">
<div class="feature-icon">🎤</div>
<svg class="feature-icon" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z" />
</svg>
<h3 class="feature-title">Voice-to-code</h3>
</div>
<p>
@ -171,7 +185,9 @@ cog.out(text)
</a>
<a href="/docs/usage/lint-test.html" class="feature-card">
<div class="feature-card-header">
<div class="feature-icon"></div>
<svg class="feature-icon" viewBox="0 0 24 24">
<path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
</svg>
<h3 class="feature-title">Linting & testing</h3>
</div>
<p>
@ -181,7 +197,9 @@ cog.out(text)
</a>
<a href="/docs/usage/copypaste.html" class="feature-card">
<div class="feature-card-header">
<div class="feature-icon">📋</div>
<svg class="feature-icon" viewBox="0 0 24 24">
<path fill="currentColor" d="M19,3H14.82C14.4,1.84 13.3,1 12,1C10.7,1 9.6,1.84 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M7,7H17V5H19V19H5V5H7V7Z" />
</svg>
<h3 class="feature-title">Copy/paste to web chat</h3>
</div>
<p>