skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-12 06:06:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Simplify download cards to essentials only

Browse Source 
- Remove redundant "Full Featured" badges (all are full featured)
- Remove paragraph descriptions (didn't add value)
- Center-align cards for cleaner visual
- Add "Commands only (no skills yet)" note for Gemini
- Slightly larger icons, tighter spacing

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-01-07 20:11:33 -08:00
co-authored by Claude Opus 4.5
parent 3083f8addc
commit 123f4eb520
2 changed files with 19 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/main.css
+12 -32
View File
@@ -1353,6 +1353,8 @@ code {
.download-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--spacing-lg);
background: var(--color-cream);
border: 1px solid var(--color-mist);
@@ -1366,53 +1368,31 @@ code {
}
.download-card-icon {
color: var(--color-accent);
margin-bottom: var(--spacing-md);
margin-bottom: var(--spacing-sm);
}
.download-card-icon img {
width: 32px;
height: 32px;
width: 40px;
height: 40px;
object-fit: contain;
border-radius: 6px;
}
.download-card-content {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
border-radius: 8px;
}
.download-card-title {
font-family: var(--font-display);
font-size: 1.5rem;
font-size: 1.25rem;
font-weight: 400;
margin: 0;
margin: 0 0 var(--spacing-sm) 0;
}
.download-card-badge {
display: inline-block;
align-self: flex-start;
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
background: var(--color-accent-dim);
color: var(--color-accent);
border-radius: 4px;
}
.download-card-desc {
font-size: 0.9375rem;
line-height: 1.6;
.download-card-note {
font-size: 0.75rem;
color: var(--color-ash);
flex: 1;
margin-bottom: var(--spacing-xs);
}
.download-card .btn {
margin-top: var(--spacing-md);
margin-top: auto;
}
/* ============================================
public/index.html
+7 -23
View File
@@ -351,11 +351,7 @@
<div class="download-card-icon">
<img src="https://img.logo.dev/cursor.com?token=pk_dtRHfeTyRzG5zZInUc65Xw&size=64&format=png" alt="Cursor logo" width="32" height="32" loading="lazy">
</div>
<div class="download-card-content">
<h3 class="download-card-title">Cursor</h3>
<span class="download-card-badge">Full Featured</span>
<p class="download-card-desc">Full Agent Skills support. Requires Cursor nightly for skills.</p>
</div>
<h3 class="download-card-title">Cursor</h3>
<button class="btn btn-primary" data-bundle="cursor" aria-label="Download Cursor bundle">
<span>Download</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
@@ -368,11 +364,7 @@
<div class="download-card-icon">
<img src="https://img.logo.dev/claude.ai?token=pk_dtRHfeTyRzG5zZInUc65Xw&size=64&format=png" alt="Claude logo" width="32" height="32" loading="lazy">
</div>
<div class="download-card-content">
<h3 class="download-card-title">Claude Code</h3>
<span class="download-card-badge">Full Featured</span>
<p class="download-card-desc">The most complete version with all features. Works with Claude's native skills system.</p>
</div>
<h3 class="download-card-title">Claude Code</h3>
<button class="btn btn-primary" data-bundle="claude-code" aria-label="Download Claude Code bundle">
<span>Download</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
@@ -381,15 +373,12 @@
</button>
</article>
<article class="download-card" data-reveal>
<article class="download-card download-card--limited" data-reveal>
<div class="download-card-icon">
<img src="https://img.logo.dev/gemini.google.com?token=pk_dtRHfeTyRzG5zZInUc65Xw&size=64&format=png" alt="Gemini logo" width="32" height="32" loading="lazy">
</div>
<div class="download-card-content">
<h3 class="download-card-title">Gemini CLI</h3>
<span class="download-card-badge">Full Featured</span>
<p class="download-card-desc">Native integration with Gemini's command system and context files.</p>
</div>
<h3 class="download-card-title">Gemini CLI</h3>
<span class="download-card-note">Commands only (no skills yet)</span>
<button class="btn btn-primary" data-bundle="gemini" aria-label="Download Gemini CLI bundle">
<span>Download</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
@@ -402,11 +391,7 @@
<div class="download-card-icon">
<img src="https://img.logo.dev/openai.com?token=pk_dtRHfeTyRzG5zZInUc65Xw&size=64&format=png" alt="OpenAI logo" width="32" height="32" loading="lazy">
</div>
<div class="download-card-content">
<h3 class="download-card-title">Codex CLI</h3>
<span class="download-card-badge">Full Featured</span>
<p class="download-card-desc">Full Agent Skills support with OpenAI's native prompt and skill system.</p>
</div>
<h3 class="download-card-title">Codex CLI</h3>
<button class="btn btn-primary" data-bundle="codex" aria-label="Download Codex CLI bundle">
<span>Download</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
@@ -414,8 +399,7 @@
</svg>
</button>
</article>
</div>
</div>
</section>
<!-- 7. OPEN SOURCE -->