public/code-crispies
2
1
Fork 0
Code Issues Pull Requests Actions Activity

fix: improve playground templates layout and typography

Browse Source 
- Add font-family: system-ui, sans-serif to all template bodies
- Wrap pricing cards in .pricing flex container
- Wrap animation boxes in .animation-demo flex container
- Wrap flexbox layout in .layout container
- Simplify navigation (fewer links to fit preview)
- Reduce sizes to better fit preview area

🤖 Generated with [Claude Code](https://claude.com/claude-code)
This commit is contained in:
Michael Czechowski
2026-01-15 12:21:43 +01:00
parent 1ec3576fe6
commit b9a4ff2118
1 changed files with 126 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

233
src/config/playground-templates.js
View File

@@ -7,6 +7,12 @@ export const playgroundTemplates = [
{ {
name: "Card Component", name: "Card Component",
code: `<style> code: `<style>
body {
font-family: system-ui, sans-serif;
padding: 1.5rem;
background: #f0f2f5;
}
.card { .card {
max-width: 320px; max-width: 320px;
background: white; background: white;
@@ -42,30 +48,36 @@ export const playgroundTemplates = [
<div class="card-image"></div> <div class="card-image"></div>
<div class="card-content"> <div class="card-content">
<h2 class="card-title">Card Title</h2> <h2 class="card-title">Card Title</h2>
<p class="card-text">This is a simple card component with an image placeholder and text content.</p> <p class="card-text">A simple card component with an image placeholder and text content.</p>
</div> </div>
</article>` </article>`
}, },
{ {
name: "Navigation Bar", name: "Navigation Bar",
code: `<style> code: `<style>
body {
font-family: system-ui, sans-serif;
margin: 0;
padding: 0;
}
.navbar { .navbar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1rem 2rem; padding: 1rem 1.5rem;
background: #1a1a2e; background: #1a1a2e;
} }
.logo { .logo {
font-size: 1.5rem; font-size: 1.25rem;
font-weight: bold; font-weight: bold;
color: white; color: white;
} }
.nav-links { .nav-links {
display: flex; display: flex;
gap: 2rem; gap: 1.5rem;
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -74,7 +86,6 @@ export const playgroundTemplates = [
.nav-links a { .nav-links a {
color: #ccc; color: #ccc;
text-decoration: none; text-decoration: none;
transition: color 0.2s;
} }
.nav-links a:hover { .nav-links a:hover {
@@ -87,6 +98,7 @@ export const playgroundTemplates = [
color: white; color: white;
border: none; border: none;
border-radius: 6px; border-radius: 6px;
font-size: 0.9rem;
cursor: pointer; cursor: pointer;
} }
</style> </style>
@@ -96,7 +108,6 @@ export const playgroundTemplates = [
<ul class="nav-links"> <ul class="nav-links">
<li><a href="#">Home</a></li> <li><a href="#">Home</a></li>
<li><a href="#">About</a></li> <li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li> <li><a href="#">Contact</a></li>
</ul> </ul>
<button class="nav-btn">Sign Up</button> <button class="nav-btn">Sign Up</button>
@@ -106,6 +117,7 @@ export const playgroundTemplates = [
name: "Profile Card", name: "Profile Card",
code: `<style> code: `<style>
body { body {
font-family: system-ui, sans-serif;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 2rem; padding: 2rem;
@@ -121,8 +133,8 @@ export const playgroundTemplates = [
} }
.avatar { .avatar {
width: 100px; width: 80px;
height: 100px; height: 80px;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(135deg, #f093fb, #f5576c); background: linear-gradient(135deg, #f093fb, #f5576c);
margin: 0 auto 1rem; margin: 0 auto 1rem;
@@ -142,7 +154,7 @@ export const playgroundTemplates = [
.stats { .stats {
display: flex; display: flex;
gap: 2rem; gap: 1.5rem;
justify-content: center; justify-content: center;
padding-top: 1rem; padding-top: 1rem;
border-top: 1px solid #eee; border-top: 1px solid #eee;
@@ -154,7 +166,7 @@ export const playgroundTemplates = [
} }
.stat-label { .stat-label {
font-size: 0.8rem; font-size: 0.75rem;
color: #999; color: #999;
} }
</style> </style>
@@ -183,11 +195,11 @@ export const playgroundTemplates = [
name: "Button Styles", name: "Button Styles",
code: `<style> code: `<style>
body { body {
font-family: system-ui, sans-serif;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 1rem; gap: 1rem;
padding: 2rem; padding: 2rem;
font-family: system-ui, sans-serif;
} }
.btn { .btn {
@@ -248,19 +260,24 @@ export const playgroundTemplates = [
name: "Pricing Table", name: "Pricing Table",
code: `<style> code: `<style>
body { body {
display: flex; font-family: system-ui, sans-serif;
gap: 1.5rem;
padding: 2rem; padding: 2rem;
background: #f8f9fa; background: #f8f9fa;
}
.pricing {
display: flex;
gap: 1rem;
justify-content: center; justify-content: center;
align-items: flex-start;
} }
.plan { .plan {
background: white; background: white;
border-radius: 12px; border-radius: 12px;
padding: 2rem; padding: 1.5rem;
text-align: center; text-align: center;
width: 200px; width: 140px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
} }
@@ -271,30 +288,31 @@ export const playgroundTemplates = [
} }
.plan-name { .plan-name {
font-size: 0.9rem; font-size: 0.8rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
opacity: 0.8; opacity: 0.8;
} }
.plan-price { .plan-price {
font-size: 2.5rem; font-size: 2rem;
font-weight: bold; font-weight: bold;
margin: 0.5rem 0; margin: 0.5rem 0;
} }
.plan-period { .plan-period {
font-size: 0.85rem; font-size: 0.8rem;
opacity: 0.7; opacity: 0.7;
} }
.plan-btn { .plan-btn {
margin-top: 1.5rem; margin-top: 1rem;
padding: 0.75rem 1.5rem; padding: 0.5rem 1rem;
border: none; border: none;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
font-weight: 500; font-weight: 500;
font-size: 0.85rem;
} }
.plan .plan-btn { .plan .plan-btn {
@@ -308,31 +326,32 @@ export const playgroundTemplates = [
} }
</style> </style>
<div class="plan"> <div class="pricing">
<div class="plan-name">Basic</div> <div class="plan">
<div class="plan-price">$9</div> <div class="plan-name">Basic</div>
<div class="plan-period">per month</div> <div class="plan-price">$9</div>
<button class="plan-btn">Get Started</button> <div class="plan-period">per month</div>
</div> <button class="plan-btn">Get Started</button>
</div>
<div class="plan featured"> <div class="plan featured">
<div class="plan-name">Pro</div> <div class="plan-name">Pro</div>
<div class="plan-price">$29</div> <div class="plan-price">$29</div>
<div class="plan-period">per month</div> <div class="plan-period">per month</div>
<button class="plan-btn">Get Started</button> <button class="plan-btn">Get Started</button>
</div> </div>
<div class="plan">
<div class="plan"> <div class="plan-name">Team</div>
<div class="plan-name">Team</div> <div class="plan-price">$99</div>
<div class="plan-price">$99</div> <div class="plan-period">per month</div>
<div class="plan-period">per month</div> <button class="plan-btn">Get Started</button>
<button class="plan-btn">Get Started</button> </div>
</div>` </div>`
}, },
{ {
name: "Form Layout", name: "Form Layout",
code: `<style> code: `<style>
body { body {
font-family: system-ui, sans-serif;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 2rem; padding: 2rem;
@@ -343,7 +362,7 @@ export const playgroundTemplates = [
background: white; background: white;
padding: 2rem; padding: 2rem;
border-radius: 12px; border-radius: 12px;
width: 320px; width: 280px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
} }
@@ -409,41 +428,41 @@ export const playgroundTemplates = [
name: "Feature Grid", name: "Feature Grid",
code: `<style> code: `<style>
body { body {
padding: 2rem;
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
padding: 1.5rem;
background: #f8f9fa;
} }
.features { .features {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 1.5rem; gap: 1rem;
max-width: 800px;
} }
.feature { .feature {
padding: 1.5rem; padding: 1.25rem;
background: white; background: white;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
} }
.feature-icon { .feature-icon {
width: 48px; width: 40px;
height: 48px; height: 40px;
border-radius: 12px; border-radius: 10px;
background: linear-gradient(135deg, #667eea, #764ba2); background: linear-gradient(135deg, #667eea, #764ba2);
margin-bottom: 1rem; margin-bottom: 0.75rem;
} }
.feature-title { .feature-title {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
font-size: 1.1rem; font-size: 1rem;
} }
.feature-text { .feature-text {
margin: 0; margin: 0;
color: #666; color: #666;
font-size: 0.9rem; font-size: 0.85rem;
line-height: 1.5; line-height: 1.5;
} }
</style> </style>
@@ -452,17 +471,17 @@ export const playgroundTemplates = [
<div class="feature"> <div class="feature">
<div class="feature-icon"></div> <div class="feature-icon"></div>
<h3 class="feature-title">Fast</h3> <h3 class="feature-title">Fast</h3>
<p class="feature-text">Lightning quick performance for all your needs.</p> <p class="feature-text">Lightning quick performance.</p>
</div> </div>
<div class="feature"> <div class="feature">
<div class="feature-icon"></div> <div class="feature-icon"></div>
<h3 class="feature-title">Secure</h3> <h3 class="feature-title">Secure</h3>
<p class="feature-text">Enterprise-grade security built in from day one.</p> <p class="feature-text">Enterprise-grade security.</p>
</div> </div>
<div class="feature"> <div class="feature">
<div class="feature-icon"></div> <div class="feature-icon"></div>
<h3 class="feature-title">Simple</h3> <h3 class="feature-title">Simple</h3>
<p class="feature-text">Intuitive interface that anyone can master.</p> <p class="feature-text">Intuitive interface.</p>
</div> </div>
</div>` </div>`
}, },
@@ -470,11 +489,11 @@ export const playgroundTemplates = [
name: "Badge Collection", name: "Badge Collection",
code: `<style> code: `<style>
body { body {
font-family: system-ui, sans-serif;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.75rem; gap: 0.75rem;
padding: 2rem; padding: 2rem;
font-family: system-ui, sans-serif;
} }
.badge { .badge {
@@ -540,18 +559,22 @@ export const playgroundTemplates = [
name: "CSS Animation", name: "CSS Animation",
code: `<style> code: `<style>
body { body {
font-family: system-ui, sans-serif;
padding: 2rem;
}
.animation-demo {
display: flex; display: flex;
gap: 2rem; gap: 2rem;
padding: 3rem;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-height: 200px; min-height: 120px;
} }
.box { .box {
width: 60px; width: 50px;
height: 60px; height: 50px;
border-radius: 12px; border-radius: 10px;
} }
.pulse { .pulse {
@@ -561,12 +584,12 @@ export const playgroundTemplates = [
@keyframes pulse { @keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; } 0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.7; } 50% { transform: scale(1.15); opacity: 0.7; }
} }
.spin { .spin {
background: #f093fb; background: #f093fb;
animation: spin 3s linear infinite; animation: spin 2s linear infinite;
} }
@keyframes spin { @keyframes spin {
@@ -576,52 +599,49 @@ export const playgroundTemplates = [
.bounce { .bounce {
background: #10b981; background: #10b981;
animation: bounce 1s ease infinite; animation: bounce 0.8s ease infinite;
} }
@keyframes bounce { @keyframes bounce {
0%, 100% { transform: translateY(0); } 0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); } 50% { transform: translateY(-15px); }
} }
.shake { .shake {
background: #f5576c; background: #f5576c;
animation: shake 0.5s ease infinite; animation: shake 0.4s ease infinite;
} }
@keyframes shake { @keyframes shake {
0%, 100% { transform: translateX(0); } 0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); } 25% { transform: translateX(-4px); }
75% { transform: translateX(5px); } 75% { transform: translateX(4px); }
} }
</style> </style>
<div class="box pulse"></div> <div class="animation-demo">
<div class="box spin"></div> <div class="box pulse"></div>
<div class="box bounce"></div> <div class="box spin"></div>
<div class="box shake"></div>` <div class="box bounce"></div>
<div class="box shake"></div>
</div>`
}, },
{ {
name: "Flexbox Layout", name: "Flexbox Layout",
code: `<style> code: `<style>
body { body {
padding: 1rem;
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
padding: 1rem;
margin: 0;
} }
.container { .layout {
display: flex;
flex-direction: column;
gap: 1rem;
}
.row {
display: flex; display: flex;
gap: 1rem; gap: 1rem;
} }
.sidebar { .sidebar {
width: 200px; width: 120px;
flex-shrink: 0; flex-shrink: 0;
background: #1a1a2e; background: #1a1a2e;
color: white; color: white;
@@ -636,9 +656,10 @@ export const playgroundTemplates = [
border-radius: 8px; border-radius: 8px;
} }
.card-row { .cards {
display: flex; display: flex;
gap: 1rem; gap: 0.75rem;
margin-top: 1rem;
} }
.card { .card {
@@ -650,35 +671,33 @@ export const playgroundTemplates = [
box-shadow: 0 2px 4px rgba(0,0,0,0.05); box-shadow: 0 2px 4px rgba(0,0,0,0.05);
} }
h3 { margin: 0 0 0.5rem; } h3 { margin: 0 0 0.5rem; font-size: 0.95rem; }
p { margin: 0; color: #666; font-size: 0.9rem; } p { margin: 0; color: #666; font-size: 0.8rem; }
</style> </style>
<div class="container"> <div class="layout">
<div class="row"> <aside class="sidebar">
<aside class="sidebar"> <h3>Sidebar</h3>
<h3>Sidebar</h3> <p>Fixed width</p>
<p>Fixed width</p> </aside>
</aside> <main class="main">
<main class="main"> <h3>Main Content</h3>
<h3>Main Content</h3> <p>Flexible width</p>
<p>Flexible width - grows to fill space</p> <div class="cards">
<div class="card-row" style="margin-top: 1rem;"> <div class="card">
<div class="card"> <h3>Card 1</h3>
<h3>Card 1</h3> <p>Equal</p>
<p>Equal flex</p>
</div>
<div class="card">
<h3>Card 2</h3>
<p>Equal flex</p>
</div>
<div class="card">
<h3>Card 3</h3>
<p>Equal flex</p>
</div>
</div> </div>
</main> <div class="card">
</div> <h3>Card 2</h3>
<p>Equal</p>
</div>
<div class="card">
<h3>Card 3</h3>
<p>Equal</p>
</div>
</div>
</main>
</div>` </div>`
} }
]; ];