chrisryn/fiddle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add version history, screenshots, embed generator, collections, npm search, format-on-save, and custom fonts

Browse Source
This commit is contained in:
root
2026-02-27 01:47:16 -06:00
parent 6ca8519250
commit 0d84c56008
14 changed files with 1046 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
public/css/browse.css
View File

@@ -107,18 +107,22 @@ html, body {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 16px;
text-decoration: none;
color: var(--text);
transition: border-color 0.15s, transform 0.1s;
display: flex;
flex-direction: column;
gap: 8px;
overflow: hidden;
}
.fiddle-card:hover {
border-color: var(--accent);
transform: translateY(-1px);
}
.card-thumbnail {
width: 100%; height: 160px; object-fit: cover;
background: #2a2a2a; display: block;
}
.card-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.card-title {
font-size: 14px;
font-weight: 600;
@@ -194,6 +198,52 @@ html, body {
font-size: 14px;
}
/* Collections */
.browse-tabs {
display: flex; gap: 0; padding: 0 24px; border-bottom: 1px solid var(--border);
margin-bottom: 12px;
}
.browse-tab {
background: transparent; color: var(--text-dim); border: none;
border-bottom: 2px solid transparent; padding: 8px 16px;
font-size: 13px; font-weight: 500; cursor: pointer;
}
.browse-tab:hover { color: var(--text); }
.browse-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.collections-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 12px;
padding: 0 24px 24px;
}
.collection-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 16px;
text-decoration: none;
color: var(--text);
cursor: pointer;
transition: border-color 0.15s;
}
.collection-card:hover { border-color: var(--accent); }
.collection-card-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.collection-card-desc { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.collection-card-count { font-size: 11px; color: var(--text-dim); }
.collection-back-btn {
background: var(--surface); color: var(--text-dim); border: 1px solid var(--border);
padding: 4px 12px; border-radius: 4px; font-size: 12px; cursor: pointer;
margin: 0 24px 12px;
}
.collection-back-btn:hover { color: var(--text); border-color: var(--accent); }
.collection-header {
padding: 0 24px 8px; font-size: 16px; font-weight: 600;
}
.collection-desc {
padding: 0 24px 12px; font-size: 12px; color: var(--text-dim);
}
/* Mobile responsive */
@media (max-width: 768px) {
.browse-header { padding: 10px 16px; }