Add QoL features: preview theme, external resources, shortcuts, mobile layout

- Dark/light preview theme toggle with localStorage persistence and
  dark CSS injection in preview, export, and embed
- External CSS/JS resources modal with per-fiddle persistence in
  options column, injected as link/script tags
- Keyboard shortcuts cheat sheet modal (? button or ? key)
- Mobile-responsive CSS with breakpoints at 768px and 480px
  for both editor and browse pages
This commit is contained in:
root
2026-02-26 15:39:16 -06:00
parent 77f64d2862
commit b18c9c1dc8
8 changed files with 239 additions and 10 deletions

View File

@@ -193,3 +193,16 @@ html, body {
color: var(--text-dim);
font-size: 14px;
}
/* Mobile responsive */
@media (max-width: 768px) {
.browse-header { padding: 10px 16px; }
.browse-toolbar { padding: 10px 16px; }
.tags-bar { padding: 0 16px 10px; }
.fiddle-grid { grid-template-columns: 1fr; padding: 0 16px 16px; gap: 12px; }
.pagination { padding: 0 16px 16px; }
}
@media (max-width: 480px) {
.fiddle-grid { grid-template-columns: 1fr; }
#search-input { min-width: 0; }
}