Skip to content

Redesign fpgas.online with wafer.space aesthetic#52

Draft
mithro wants to merge 3 commits intoCarlFK:mainfrom
mithro:fpgas-online-redesign
Draft

Redesign fpgas.online with wafer.space aesthetic#52
mithro wants to merge 3 commits intoCarlFK:mainfrom
mithro:fpgas-online-redesign

Conversation

@mithro
Copy link
Contributor

@mithro mithro commented Mar 3, 2026

Summary

Visual refresh of fpgas.online to match the wafer.space sponsor aesthetic and prepare for multi-board type support.

  • Add board_type field to Pi model with choices (Arty A7, NeTV2, ULX3S, Fomu, Tiny Tapeout ASIC/FPGA)
  • Redesign CSS with custom properties, CSS Grid/Flexbox, responsive breakpoints
  • New base.html shared template with sticky header, footer, viewport meta (fixes mobile)
  • Rewrite index with hero section and auto-fill card grid grouped by board type
  • Rewrite detail pages (fpga.html, tt.html) with toolbar, CSS Grid panels, dark code blocks
  • Remove jQuery/f4pga dependencies — replaced click-to-copy with 8-line vanilla JS
  • Add Makefile for local dev setup (make serve)

Screenshots

Screenshots are attached as a comment below.

Note: Screenshots show local dev server with sample fixture data. Video players show loading spinners (no live HLS streams locally) and WebSocket status is unavailable (dcws.js requires pistat collectstatic).

Local Testing

cd ansible/roles/site/files/pib
make serve
# Visit http://localhost:8000/fpgas/

Test plan

  • make serve starts cleanly, pages load at /fpgas/
  • Board cards grouped by type on index page
  • /fpgas/pi<N>.html auto-selects tt.html for TT boards
  • Responsive layout: cards reflow at various widths, panels stack on mobile
  • Copy buttons work on detail pages
  • Video players load (on production with live streams)
  • Demo buttons trigger correctly
  • Admin shows board_type field with filter

Generated with Claude Code

mithro and others added 3 commits March 3, 2026 16:30
Add BOARD_TYPES choices (arty_a7, netv2, ulx3s, fomu, tt_asic, tt_fpga)
and board_type CharField to Pi model. Update admin with list_display and
list_filter. Update views to group boards by type on index and auto-select
tt.html template for Tiny Tapeout boards. Add board_type to fixtures.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Rewrite pib.css as design system with CSS custom properties, CSS Grid,
and Flexbox. Add base.html with shared header/footer and viewport meta
tag (fixes mobile). Rewrite index.html with hero section and auto-fill
card grid. Rewrite fpga.html and tt.html with toolbar, grid panels, and
vanilla JS copyCode() replacing jQuery/f4pga dependencies. Style upload
form button.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Provides make serve (full setup + launch), make setup, make migrate,
make fixtures, and make clean. Uses uv for venv and pip, generates
local_settings.py with InMemoryChannelLayer (no Redis needed).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@mithro mithro force-pushed the fpgas-online-redesign branch from 3823861 to 5d4cba8 Compare March 3, 2026 05:31
@mithro
Copy link
Contributor Author

mithro commented Mar 3, 2026

Screenshots

Homepage (Desktop 1280px)

Homepage (Desktop 1280px)

FPGA Board Detail

FPGA Board Detail

Tiny Tapeout Detail

Tiny Tapeout Detail

Mobile View (375px)

Mobile View (375px)

Note: Screenshots show local dev server with sample fixture data. Video players show loading spinners (no live HLS streams locally) and WebSocket status is unavailable (dcws.js requires pistat collectstatic).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant