Skip to content

Phase 7: Migrate sections#145

Merged
Kocal merged 1 commit into
symfony:mainfrom
Kocal:feat/tailwind-phase7-sections
Jun 11, 2026
Merged

Phase 7: Migrate sections#145
Kocal merged 1 commit into
symfony:mainfrom
Kocal:feat/tailwind-phase7-sections

Conversation

@Kocal

@Kocal Kocal commented Jun 11, 2026

Copy link
Copy Markdown
Member
Q A
Issues Related to #34
License MIT

Damn, Claude Opus 4.8 was insanely useful here, computed for ~25min

@Kocal Kocal self-assigned this Jun 11, 2026
@Kocal Kocal force-pushed the feat/tailwind-phase7-sections branch from eb62a61 to 80a50b0 Compare June 11, 2026 22:34
@Kocal Kocal added this to the TailwindCSS migration milestone Jun 11, 2026
Phase 7 of the Bootstrap -> Tailwind migration (symfony#34).

Header / nav are now fully utility-first, with no dedicated stylesheet:
- Express the whole header in Tailwind utilities in _header.html.twig,
  including the blurred ::before overlay (before:* utilities), the open
  transition (@starting-style via the starting: variant +
  transition-discrete), the mobile slide-in menu and social reveal
  (nav:/max-nav:, group-[.open]:), and the light/white theming through
  conditional classes (text-white / dark:invert / before:bg-*) instead of
  CSS custom properties.
- Extract the repeated markup into Twig components to avoid duplicating
  long class lists: AppNav:Item (nav link, optional badge + responsive
  hide), AppNav:Badge, AppNav:IconLink (social icon).
- Scroll-lock now toggles the Tailwind overflow-y-hidden class on body
  from the ux-header controller (was a custom .locked rule).
- The ThemeSwitcher icon inherits the header color (text-current) so it
  stays white on the white package header.

Hero:
- Convert .hero/.hero-background/.hero-sub-text to utilities across the
  ~14 templates that used them (pt-20/pt-16, w-1/2 + responsive widths,
  text-balance). Drop the unused .hero-terminal rule.

Cleanup:
- Remove the three section imports from app.scss and delete _header.scss,
  _nav.scss, _hero.scss. No section stylesheet remains.
- Update IconsTest to look for the Icons link in the header element
  (the .AppNav_menu class no longer exists).

Verified light/dark on desktop, white package header, and mobile
(slide-in menu, blur overlay with starting-style fade, social reveal,
body scroll lock).
@Kocal Kocal force-pushed the feat/tailwind-phase7-sections branch from 80a50b0 to 4da5dea Compare June 11, 2026 22:40
@Kocal Kocal merged commit 97e8362 into symfony:main Jun 11, 2026
3 checks passed
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