refactor: Replace inline SVGs with Material Design Icons

This commit is contained in:
Paul Gauthier (aider) 2025-03-24 13:09:21 -10:00
parent 46cef723b7
commit 43ece9c644
2 changed files with 14 additions and 25 deletions

View file

@ -329,9 +329,12 @@ nav {
}
.feature-icon {
font-size: 24px;
width: 48px;
height: 48px;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: rgba(18, 184, 134, 0.1);
color: var(--secondary);

View file

@ -15,6 +15,8 @@ layout: none
<link rel="stylesheet" href="/assets/home.css">
<!-- Add Prism.js CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
<!-- Material Design Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/css/materialdesignicons.min.css">
</head>
<body>
<header>
@ -96,9 +98,7 @@ cog.out(text)
<div class="feature-grid">
<a href="/docs/llms.html" class="feature-card">
<div class="feature-card-header">
<svg class="feature-icon" viewBox="0 0 24 24">
<path fill="currentColor" d="M19.35,10.04C18.67,6.59 15.64,4 12,4C9.11,4 6.6,5.64 5.35,8.04C2.34,8.36 0,10.91 0,14A6,6 0 0,0 6,20H19A5,5 0 0,0 24,15C24,12.36 21.95,10.22 19.35,10.04Z" />
</svg>
<i class="mdi mdi-weather-cloudy feature-icon"></i>
<h3 class="feature-title">
Cloud and local LLMs
</h3>
@ -107,9 +107,7 @@ cog.out(text)
</a>
<a href="/docs/repomap.html" class="feature-card">
<div class="feature-card-header">
<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>
<i class="mdi mdi-map-outline feature-icon"></i>
<h3 class="feature-title">Maps your codebase</h3>
</div>
<p>
@ -119,9 +117,7 @@ cog.out(text)
</a>
<a href="/docs/languages.html" class="feature-card">
<div class="feature-card-header">
<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>
<i class="mdi mdi-code-tags feature-icon"></i>
<h3 class="feature-title">100+ code languages</h3>
</div>
<p>
@ -132,9 +128,7 @@ cog.out(text)
</a>
<a href="/docs/git.html" class="feature-card">
<div class="feature-card-header">
<svg class="feature-icon" viewBox="0 0 24 24">
<path fill="currentColor" d="M2.6,10.59L8.38,4.8L10.07,6.5C9.83,7.35 10.22,8.28 11,8.73V14.27C10.4,14.61 10,15.26 10,16A2,2 0 0,0 12,18A2,2 0 0,0 14,16C14,15.26 13.6,14.61 13,14.27V9.41L15.07,11.5C15,11.65 15,11.82 15,12A2,2 0 0,0 17,14A2,2 0 0,0 19,12A2,2 0 0,0 17,10C16.82,10 16.65,10 16.5,10.07L13.93,7.5C14.19,6.57 13.71,5.55 12.78,5.16C12.35,5 11.9,4.96 11.5,5.07L9.8,3.38L10.59,2.6C11.37,1.81 12.63,1.81 13.41,2.6L21.4,10.59C22.19,11.37 22.19,12.63 21.4,13.41L13.41,21.4C12.63,22.19 11.37,22.19 10.59,21.4L2.6,13.41C1.81,12.63 1.81,11.37 2.6,10.59Z" />
</svg>
<i class="mdi mdi-git feature-icon"></i>
<h3 class="feature-title">Git integration</h3>
</div>
<p>
@ -146,9 +140,7 @@ cog.out(text)
</a>
<a href="/docs/usage/watch.html" class="feature-card">
<div class="feature-card-header">
<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>
<i class="mdi mdi-monitor feature-icon"></i>
<h3 class="feature-title">In your IDE</h3>
</div>
<p>
@ -172,9 +164,7 @@ cog.out(text)
</a>
<a href="/docs/usage/voice.html" class="feature-card">
<div class="feature-card-header">
<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>
<i class="mdi mdi-microphone feature-icon"></i>
<h3 class="feature-title">Voice-to-code</h3>
</div>
<p>
@ -185,9 +175,7 @@ cog.out(text)
</a>
<a href="/docs/usage/lint-test.html" class="feature-card">
<div class="feature-card-header">
<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>
<i class="mdi mdi-check-all feature-icon"></i>
<h3 class="feature-title">Linting & testing</h3>
</div>
<p>
@ -197,9 +185,7 @@ cog.out(text)
</a>
<a href="/docs/usage/copypaste.html" class="feature-card">
<div class="feature-card-header">
<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>
<i class="mdi mdi-content-copy feature-icon"></i>
<h3 class="feature-title">Copy/paste to web chat</h3>
</div>
<p>