mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 06:06:37 +03:00
Redesign install section as two-step flow with Substack newsletter
Restructure the Install section into a "Get Started" two-step flow: 1. Install the skills (npx as primary, alternatives collapsible) 2. Stay up to date (embedded Substack subscribe form) - Elevate npx command as the sole primary install method - Collapse Claude Code marketplace and manual ZIP into expandable alternatives - Replace hidden prefix toggle with prominent radio card selector - Download button dynamically updates label based on prefix choice - Add Substack newsletter embed (impeccablestyle.substack.com) - Add newsletter link to footer alongside blog link - Normalize button styles for consistency (square corners for actions) - Add newsletter icon assets (SVG + PNG) for Substack branding Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
9d368b777d
commit
685728b992
@@ -227,6 +227,20 @@ function renderPatternsWithTabs(patterns, antipatterns) {
|
||||
// EVENT HANDLERS
|
||||
// ============================================
|
||||
|
||||
// Sync prefix radio buttons to hidden checkbox + update download button label
|
||||
document.querySelectorAll('input[name="prefix-choice"]').forEach((radio) => {
|
||||
radio.addEventListener('change', () => {
|
||||
const prefixToggle = document.getElementById('prefix-toggle');
|
||||
if (prefixToggle) prefixToggle.checked = radio.value === 'prefixed';
|
||||
const btnLabel = document.querySelector('#download-zip-btn span');
|
||||
if (btnLabel) {
|
||||
btnLabel.textContent = radio.value === 'prefixed'
|
||||
? 'Download prefixed zip'
|
||||
: 'Download universal zip';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Handle bundle download clicks via event delegation
|
||||
document.addEventListener("click", (e) => {
|
||||
const bundleBtn = e.target.closest("[data-bundle]");
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
@@ -0,0 +1,18 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="256" height="256">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#1f1f1f"/>
|
||||
<stop offset="100%" stop-color="#141414"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="accent" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#d4456a"/>
|
||||
<stop offset="100%" stop-color="#b03058"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- Background -->
|
||||
<rect width="256" height="256" rx="48" fill="url(#bg)"/>
|
||||
<!-- Subtle accent line -->
|
||||
<rect x="56" y="196" width="144" height="2.5" rx="1.25" fill="url(#accent)" opacity="0.6"/>
|
||||
<!-- Slash mark -->
|
||||
<text x="128" y="178" font-family="system-ui, -apple-system, 'Helvetica Neue', sans-serif" font-size="160" font-weight="400" fill="#f5f3ef" text-anchor="middle" letter-spacing="-8">/</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 887 B |
+358
-54
@@ -2184,10 +2184,126 @@ code {
|
||||
max-width: 60ch;
|
||||
}
|
||||
|
||||
/* Install steps layout */
|
||||
.install-steps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xl);
|
||||
max-width: 640px;
|
||||
margin: 0 auto var(--spacing-xl);
|
||||
}
|
||||
|
||||
.install-step-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.install-step-number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid var(--color-accent);
|
||||
color: var(--color-accent);
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.install-step-meta {
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.install-step-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.install-step-desc {
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-ash);
|
||||
margin: 2px 0 0;
|
||||
}
|
||||
|
||||
/* Subscribe card (step 2) */
|
||||
.install-subscribe {
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.install-subscribe iframe {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.install-subscribe-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--color-paper);
|
||||
text-decoration: none;
|
||||
padding: 1rem 2rem;
|
||||
background: var(--color-ink);
|
||||
border: 1px solid var(--color-ink);
|
||||
transition: all var(--duration-base) var(--ease-out);
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.install-subscribe-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--color-accent);
|
||||
transform: translateY(100%);
|
||||
transition: transform var(--duration-base) var(--ease-out);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.install-subscribe-btn:hover::before {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.install-subscribe-btn svg,
|
||||
.install-subscribe-btn span {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.install-subscribe-btn:hover {
|
||||
color: var(--color-paper);
|
||||
}
|
||||
|
||||
.install-subscribe-note {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-ash);
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.install-subscribe {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
/* Install terminal (glass terminal style) */
|
||||
.install-terminal {
|
||||
max-width: 640px;
|
||||
margin: 0 auto var(--spacing-xl);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.install-terminal .glass-terminal {
|
||||
@@ -2314,88 +2430,276 @@ code {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Prefix toggle (inline with download button) */
|
||||
.install-terminal-cmd--download {
|
||||
/* Install alternatives (collapsible) */
|
||||
.install-alternatives {
|
||||
max-width: 640px;
|
||||
margin: var(--spacing-sm) auto 0;
|
||||
}
|
||||
|
||||
.install-alternatives-toggle {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--color-ash);
|
||||
cursor: pointer;
|
||||
padding: var(--spacing-sm) 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
transition: color var(--duration-fast) var(--ease-out);
|
||||
}
|
||||
|
||||
.prefix-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
padding: 6px 12px;
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 6px;
|
||||
transition: border-color var(--duration-fast) var(--ease-out);
|
||||
.install-alternatives-toggle::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.prefix-toggle:hover {
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.prefix-toggle input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
.install-alternatives-toggle::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.prefix-toggle-slider {
|
||||
position: relative;
|
||||
width: 32px;
|
||||
height: 18px;
|
||||
background: var(--color-mist);
|
||||
border-radius: 18px;
|
||||
transition: background var(--duration-fast) var(--ease-out);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.prefix-toggle-slider::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: var(--color-paper);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
border-left: 5px solid currentColor;
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
transition: transform var(--duration-fast) var(--ease-out);
|
||||
}
|
||||
|
||||
.prefix-toggle input:checked + .prefix-toggle-slider {
|
||||
.install-alternatives[open] .install-alternatives-toggle::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.install-alternatives-toggle:hover {
|
||||
color: var(--color-charcoal);
|
||||
}
|
||||
|
||||
.install-alternatives-content {
|
||||
border: 1px solid var(--color-mist);
|
||||
border-radius: 8px;
|
||||
background: var(--color-paper);
|
||||
overflow: hidden;
|
||||
animation: altFadeIn 0.2s var(--ease-out);
|
||||
}
|
||||
|
||||
@keyframes altFadeIn {
|
||||
from { opacity: 0; transform: translateY(-4px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.install-alt-method {
|
||||
padding: var(--spacing-md) var(--spacing-lg);
|
||||
}
|
||||
|
||||
.install-alt-label {
|
||||
display: block;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.625rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--color-ash);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.install-alt-method .install-terminal-cmd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.install-alt-method .terminal-prompt {
|
||||
color: var(--color-accent);
|
||||
font-family: var(--font-mono);
|
||||
font-weight: bold;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.install-alt-method code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.install-alt-note {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-ash);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.install-alt-note code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.6875rem;
|
||||
background: var(--color-mist);
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.install-alt-download {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.install-alt-divider {
|
||||
height: 1px;
|
||||
background: var(--color-mist);
|
||||
}
|
||||
|
||||
.install-prefix-options {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-sm);
|
||||
margin-top: var(--spacing-md);
|
||||
}
|
||||
|
||||
.install-prefix-option {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
border: 1.5px solid var(--color-mist);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all var(--duration-fast) var(--ease-out);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.install-prefix-option:hover {
|
||||
border-color: var(--color-charcoal);
|
||||
}
|
||||
|
||||
.install-prefix-option:has(input:checked) {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.install-prefix-option input {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1.5px solid var(--color-mist);
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
transition: all var(--duration-fast) var(--ease-out);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.install-prefix-option input:checked {
|
||||
border-color: var(--color-accent);
|
||||
background: var(--color-accent);
|
||||
}
|
||||
|
||||
.prefix-toggle input:checked + .prefix-toggle-slider::after {
|
||||
transform: translateX(14px);
|
||||
.install-prefix-option input:checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--color-paper);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.prefix-toggle input:focus-visible + .prefix-toggle-slider {
|
||||
.install-prefix-option input:focus-visible {
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.prefix-toggle-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-charcoal);
|
||||
white-space: nowrap;
|
||||
.install-prefix-option-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
padding-top: 1px;
|
||||
}
|
||||
|
||||
.prefix-toggle-label code {
|
||||
.install-prefix-option-label {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-ink);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.install-prefix-option-examples {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.install-prefix-option-examples code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.6875rem;
|
||||
background: var(--color-accent-dim);
|
||||
color: var(--color-accent);
|
||||
padding: 1px 4px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.install-prefix-option-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.install-prefix-reason {
|
||||
font-size: 0.6875rem;
|
||||
color: var(--color-ash);
|
||||
line-height: 1.4;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.install-prefix-option-label code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.6875rem;
|
||||
background: var(--color-accent-dim);
|
||||
color: var(--color-accent);
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.install-alt-method .install-prefix-options {
|
||||
margin-top: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.install-alt-method .install-alt-download {
|
||||
margin-top: var(--spacing-sm);
|
||||
}
|
||||
|
||||
/* Hidden prefix checkbox for download logic */
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.install-prefix-options {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.install-alt-method {
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
}
|
||||
|
||||
.install-alt-method code {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tooltips */
|
||||
.has-tooltip {
|
||||
position: relative;
|
||||
|
||||
+311
-47
@@ -3814,10 +3814,108 @@ code {
|
||||
.platforms-section .section-subtitle {
|
||||
max-width: 60ch;
|
||||
}
|
||||
.install-terminal {
|
||||
.install-steps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xl);
|
||||
max-width: 640px;
|
||||
margin: 0 auto var(--spacing-xl);
|
||||
}
|
||||
.install-step-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
.install-step-number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid var(--color-accent);
|
||||
color: var(--color-accent);
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
}
|
||||
.install-step-meta {
|
||||
padding-top: 6px;
|
||||
}
|
||||
.install-step-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.install-step-desc {
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-ash);
|
||||
margin: 2px 0 0;
|
||||
}
|
||||
.install-subscribe {
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.install-subscribe iframe {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
.install-subscribe-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--color-paper);
|
||||
text-decoration: none;
|
||||
padding: 1rem 2rem;
|
||||
background: var(--color-ink);
|
||||
border: 1px solid var(--color-ink);
|
||||
transition: all var(--duration-base) var(--ease-out);
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.install-subscribe-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--color-accent);
|
||||
transform: translateY(100%);
|
||||
transition: transform var(--duration-base) var(--ease-out);
|
||||
z-index: 0;
|
||||
}
|
||||
.install-subscribe-btn:hover::before {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.install-subscribe-btn svg, .install-subscribe-btn span {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.install-subscribe-btn:hover {
|
||||
color: var(--color-paper);
|
||||
}
|
||||
.install-subscribe-note {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-ash);
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.install-subscribe {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
.install-terminal {
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.install-terminal .glass-terminal {
|
||||
height: auto;
|
||||
}
|
||||
@@ -3922,76 +4020,242 @@ code {
|
||||
.install-provider-badge img {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.install-terminal-cmd--download {
|
||||
.install-alternatives {
|
||||
max-width: 640px;
|
||||
margin: var(--spacing-sm) auto 0;
|
||||
}
|
||||
.install-alternatives-toggle {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--color-ash);
|
||||
cursor: pointer;
|
||||
padding: var(--spacing-sm) 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
transition: color var(--duration-fast) var(--ease-out);
|
||||
}
|
||||
.install-alternatives-toggle::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
.install-alternatives-toggle::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 5px solid currentColor;
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
transition: transform var(--duration-fast) var(--ease-out);
|
||||
}
|
||||
.install-alternatives[open] .install-alternatives-toggle::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.install-alternatives-toggle:hover {
|
||||
color: var(--color-charcoal);
|
||||
}
|
||||
.install-alternatives-content {
|
||||
border: 1px solid var(--color-mist);
|
||||
border-radius: 8px;
|
||||
background: var(--color-paper);
|
||||
overflow: hidden;
|
||||
animation: altFadeIn 0.2s var(--ease-out);
|
||||
}
|
||||
@keyframes altFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.install-alt-method {
|
||||
padding: var(--spacing-md) var(--spacing-lg);
|
||||
}
|
||||
.install-alt-label {
|
||||
display: block;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.625rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--color-ash);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.install-alt-method .install-terminal-cmd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.prefix-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
padding: 6px 12px;
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 6px;
|
||||
transition: border-color var(--duration-fast) var(--ease-out);
|
||||
.install-alt-method .terminal-prompt {
|
||||
color: var(--color-accent);
|
||||
font-family: var(--font-mono);
|
||||
font-weight: bold;
|
||||
user-select: none;
|
||||
}
|
||||
.prefix-toggle:hover {
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
.install-alt-method code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
.prefix-toggle input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
.install-alt-note {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-ash);
|
||||
margin-top: 4px;
|
||||
}
|
||||
.prefix-toggle-slider {
|
||||
position: relative;
|
||||
width: 32px;
|
||||
height: 18px;
|
||||
.install-alt-note code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.6875rem;
|
||||
background: var(--color-mist);
|
||||
border-radius: 18px;
|
||||
transition: background var(--duration-fast) var(--ease-out);
|
||||
flex-shrink: 0;
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
.prefix-toggle-slider::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: var(--color-paper);
|
||||
.install-alt-download {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
.install-alt-divider {
|
||||
height: 1px;
|
||||
background: var(--color-mist);
|
||||
}
|
||||
.install-prefix-options {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-sm);
|
||||
margin-top: var(--spacing-md);
|
||||
}
|
||||
.install-prefix-option {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
border: 1.5px solid var(--color-mist);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all var(--duration-fast) var(--ease-out);
|
||||
line-height: 1;
|
||||
}
|
||||
.install-prefix-option:hover {
|
||||
border-color: var(--color-charcoal);
|
||||
}
|
||||
.install-prefix-option:has(input:checked) {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
.install-prefix-option input {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1.5px solid var(--color-mist);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
transition: transform var(--duration-fast) var(--ease-out);
|
||||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
transition: all var(--duration-fast) var(--ease-out);
|
||||
position: relative;
|
||||
}
|
||||
.prefix-toggle input:checked + .prefix-toggle-slider {
|
||||
.install-prefix-option input:checked {
|
||||
border-color: var(--color-accent);
|
||||
background: var(--color-accent);
|
||||
}
|
||||
.prefix-toggle input:checked + .prefix-toggle-slider::after {
|
||||
transform: translateX(14px);
|
||||
.install-prefix-option input:checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--color-paper);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.prefix-toggle input:focus-visible + .prefix-toggle-slider {
|
||||
.install-prefix-option input:focus-visible {
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.prefix-toggle-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-charcoal);
|
||||
white-space: nowrap;
|
||||
.install-prefix-option-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
padding-top: 1px;
|
||||
}
|
||||
.prefix-toggle-label code {
|
||||
.install-prefix-option-label {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-ink);
|
||||
line-height: 1;
|
||||
}
|
||||
.install-prefix-option-examples {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
.install-prefix-option-examples code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.6875rem;
|
||||
background: var(--color-accent-dim);
|
||||
color: var(--color-accent);
|
||||
padding: 1px 4px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.install-prefix-option-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.install-prefix-reason {
|
||||
font-size: 0.6875rem;
|
||||
color: var(--color-ash);
|
||||
line-height: 1.4;
|
||||
padding-left: 2px;
|
||||
}
|
||||
.install-prefix-option-label code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.6875rem;
|
||||
background: var(--color-accent-dim);
|
||||
color: var(--color-accent);
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.install-alt-method .install-prefix-options {
|
||||
margin-top: var(--spacing-sm);
|
||||
}
|
||||
.install-alt-method .install-alt-download {
|
||||
margin-top: var(--spacing-sm);
|
||||
}
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.install-prefix-options {
|
||||
flex-direction: column;
|
||||
}
|
||||
.install-alt-method {
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
}
|
||||
.install-alt-method code {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
.has-tooltip {
|
||||
position: relative;
|
||||
cursor: default;
|
||||
|
||||
@@ -830,6 +830,7 @@
|
||||
animation: faqFadeIn 0.3s var(--ease-out);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
FAQ SECTION
|
||||
============================================ */
|
||||
|
||||
+110
-57
@@ -208,74 +208,119 @@
|
||||
<section class="platforms-section" id="downloads">
|
||||
<div class="section-header" data-reveal>
|
||||
<span class="section-number">04</span>
|
||||
<h2 class="section-title">Install</h2>
|
||||
<p class="section-subtitle">One command. Every provider.</p>
|
||||
<h2 class="section-title">Get Started</h2>
|
||||
<p class="section-subtitle">Two steps to impeccable design.</p>
|
||||
</div>
|
||||
|
||||
<!-- Primary install: glass terminal style -->
|
||||
<div class="install-terminal" data-reveal>
|
||||
<div class="glass-terminal">
|
||||
<div class="terminal-header">
|
||||
<span class="terminal-dot red"></span>
|
||||
<span class="terminal-dot yellow"></span>
|
||||
<span class="terminal-dot green"></span>
|
||||
<span class="terminal-title">install</span>
|
||||
<div class="install-steps">
|
||||
<!-- Step 1: Install -->
|
||||
<div class="install-step" data-reveal>
|
||||
<div class="install-step-header">
|
||||
<span class="install-step-number">1</span>
|
||||
<div class="install-step-meta">
|
||||
<h3 class="install-step-title">Install the skills</h3>
|
||||
<p class="install-step-desc">One command. Every provider.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="terminal-body">
|
||||
<div class="install-terminal-row">
|
||||
<span class="install-terminal-label">All tools</span>
|
||||
<div class="install-terminal-cmd">
|
||||
<span class="terminal-prompt">$</span>
|
||||
<code>npx skills add pbakaus/impeccable</code>
|
||||
<button class="copy-btn" aria-label="Copy command" data-copy="npx skills add pbakaus/impeccable">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||||
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Primary: npx command -->
|
||||
<div class="install-terminal">
|
||||
<div class="glass-terminal">
|
||||
<div class="terminal-header">
|
||||
<span class="terminal-dot red"></span>
|
||||
<span class="terminal-dot yellow"></span>
|
||||
<span class="terminal-dot green"></span>
|
||||
<span class="terminal-title">install</span>
|
||||
</div>
|
||||
<span class="install-terminal-note">Auto-detects your AI harness and installs to the right location</span>
|
||||
</div>
|
||||
<div class="install-terminal-divider"></div>
|
||||
<div class="install-terminal-row">
|
||||
<span class="install-terminal-label">Claude Code</span>
|
||||
<div class="install-terminal-cmd">
|
||||
<span class="terminal-prompt">$</span>
|
||||
<code>/plugin marketplace add pbakaus/impeccable</code>
|
||||
<button class="copy-btn" aria-label="Copy command" data-copy="/plugin marketplace add pbakaus/impeccable">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||||
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="terminal-body">
|
||||
<div class="install-terminal-row">
|
||||
<div class="install-terminal-cmd">
|
||||
<span class="terminal-prompt">$</span>
|
||||
<code>npx skills add pbakaus/impeccable</code>
|
||||
<button class="copy-btn" aria-label="Copy command" data-copy="npx skills add pbakaus/impeccable">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||||
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<span class="install-terminal-note">Works with Cursor, Claude Code, Gemini CLI, Codex CLI, and more. Auto-detects your AI harness.</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="install-terminal-note">Then open <code>/plugin</code> to install from Discover tab</span>
|
||||
</div>
|
||||
<div class="install-terminal-divider"></div>
|
||||
<div class="install-terminal-row">
|
||||
<span class="install-terminal-label">Manual</span>
|
||||
<div class="install-terminal-cmd install-terminal-cmd--download">
|
||||
<button class="btn btn-secondary btn-small" data-bundle="universal" aria-label="Download universal ZIP">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
|
||||
</svg>
|
||||
<span>Download universal ZIP</span>
|
||||
</button>
|
||||
<label class="prefix-toggle">
|
||||
<input type="checkbox" id="prefix-toggle" />
|
||||
<span class="prefix-toggle-slider"></span>
|
||||
<span class="prefix-toggle-label">
|
||||
Prefix with <code>/i-</code>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Alternatives (collapsible) -->
|
||||
<details class="install-alternatives">
|
||||
<summary class="install-alternatives-toggle">Other install methods</summary>
|
||||
<div class="install-alternatives-content">
|
||||
<div class="install-alt-method">
|
||||
<span class="install-alt-label">Claude Code plugin</span>
|
||||
<div class="install-terminal-cmd">
|
||||
<span class="terminal-prompt">$</span>
|
||||
<code>/plugin marketplace add pbakaus/impeccable</code>
|
||||
<button class="copy-btn" aria-label="Copy command" data-copy="/plugin marketplace add pbakaus/impeccable">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||||
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<span class="install-alt-note">Then open <code>/plugin</code> to install from Discover tab</span>
|
||||
</div>
|
||||
<div class="install-alt-divider"></div>
|
||||
<div class="install-alt-method">
|
||||
<span class="install-alt-label">Manual download</span>
|
||||
<span class="install-alt-note">Contains all provider directories. Extract to your project root.</span>
|
||||
<div class="install-prefix-options">
|
||||
<label class="install-prefix-option" data-prefix="default">
|
||||
<input type="radio" name="prefix-choice" value="default" checked />
|
||||
<div class="install-prefix-option-content">
|
||||
<span class="install-prefix-option-label">Default names</span>
|
||||
<span class="install-prefix-option-examples"><code>/polish</code> <code>/audit</code> <code>/typeset</code></span>
|
||||
</div>
|
||||
</label>
|
||||
<div class="install-prefix-option-wrap">
|
||||
<label class="install-prefix-option" data-prefix="prefixed">
|
||||
<input type="radio" name="prefix-choice" value="prefixed" />
|
||||
<div class="install-prefix-option-content">
|
||||
<span class="install-prefix-option-label">Prefixed with <code>/i-</code></span>
|
||||
<span class="install-prefix-option-examples"><code>/i-polish</code> <code>/i-audit</code> <code>/i-typeset</code></span>
|
||||
</div>
|
||||
</label>
|
||||
<span class="install-prefix-reason">Avoids conflicts with built-in commands or other skill packs</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="install-alt-download">
|
||||
<button class="btn btn-primary" data-bundle="universal" aria-label="Download universal zip" id="download-zip-btn">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
|
||||
</svg>
|
||||
<span>Download universal zip</span>
|
||||
</button>
|
||||
</div>
|
||||
<input type="checkbox" id="prefix-toggle" class="sr-only" />
|
||||
</div>
|
||||
<span class="install-terminal-note">Contains all provider directories — extract to project root</span>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Subscribe -->
|
||||
<div class="install-step" data-reveal>
|
||||
<div class="install-step-header">
|
||||
<span class="install-step-number">2</span>
|
||||
<div class="install-step-meta">
|
||||
<h3 class="install-step-title">Stay up to date</h3>
|
||||
<p class="install-step-desc">New skills, pattern updates, and design tips.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="install-subscribe">
|
||||
<iframe src="https://impeccablestyle.substack.com/embed" width="100%" height="150" style="border: 1px solid #e8e4df; border-radius: 8px; background: white;" frameborder="0" scrolling="no"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="download-tip" data-reveal>Once installed, keep the <a href="/cheatsheet">command cheatsheet</a> handy for quick reference. To update, run <code>npx skills update</code>.</p>
|
||||
<p class="download-tip" data-reveal>Keep the <a href="/cheatsheet">command cheatsheet</a> handy for quick reference. To update skills, run <code>npx skills update</code>.</p>
|
||||
</section>
|
||||
|
||||
<!-- 5. CHANGELOG -->
|
||||
@@ -379,6 +424,7 @@
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- 6. FAQ -->
|
||||
@@ -490,7 +536,14 @@
|
||||
</a>
|
||||
<span class="footer-author-divider"></span>
|
||||
<a href="https://www.paulbakaus.com" class="footer-newsletter" target="_blank" rel="noopener">
|
||||
Renaissance Geek
|
||||
Blog
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="footer-author-divider"></span>
|
||||
<a href="https://impeccablestyle.substack.com" class="footer-newsletter" target="_blank" rel="noopener">
|
||||
Newsletter
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
|
||||
Reference in New Issue
Block a user