Fix hero alignment and edge readability in GitHub Pages by adding responsive safe-spacing CSS

[Copilot]

Problem

The deployed GitHub Pages site (https://hutoczky.github.io/FormatX/scifi-ui/) had visual alignment and spacing issues:

• Hero title "FORMÁZÁS A JÖVŐBŐL" was left-aligned instead of centered
• Text content was too close to rounded borders in panels and cards
• Inner content felt cramped without adequate breathing room

These issues affected the user experience across all three sci-fi themes (LCARS, Hologram, and Cyberpunk).

Solution

Added responsive safe-spacing variables and centering rules to docs/scifi-ui/styles/site.css to fix layout and readability issues on the deployed GitHub Pages site.

Key Changes

1. Responsive Spacing Variables
Added three CSS custom properties using clamp() for fluid, viewport-responsive spacing:

--safe-inline: clamp(1rem, 3vw, 2rem);
--panel-safe: clamp(1rem, 2.5vw, 1.5rem);
--card-safe: clamp(.95rem, 2vw, 1.3rem);

2. Hero Section Centering

• Centered hero title and subtitle using text-align: center and margin-inline: auto
• Centered CTA buttons using flexbox justify-content: center
• Added extra inline padding for small screens (< 520px)

3. Safe Edge Spacing

• Applied safe padding to panels, cards, and download grids to prevent text from touching borders
• Updated panel pseudo-element borders to maintain consistent spacing
• Ensured readable inner spacing across all container elements

Visual Verification

LCARS Theme (Star Trek)

Hero title properly centered with adequate panel spacing:

Hologram Theme (Star Wars)

Centered layout with safe edge spacing:

Cyberpunk Theme

Glitch effect properly centered with improved readability:

Mobile Responsive

Proper centering and spacing maintained on small screens:

Testing

✅ Verified centering across all three themes (LCARS, Hologram, Cyberpunk)
✅ Tested responsive behavior on mobile viewport (480px)
✅ Confirmed no layout regressions or console errors
✅ CSS syntax validated (balanced braces, proper structure)

Impact

• CSS-only changes - No JavaScript or HTML modifications
• Non-destructive - Existing styles preserved, only layout/spacing enhanced
• Responsive - Uses clamp() for fluid spacing that adapts to viewport size
• Theme-agnostic - Works consistently across all sci-fi themes

The deployed GitHub Pages site will now have properly centered hero content and readable spacing throughout all panels and cards.

Original prompt

Fix hero alignment and edge readability in the deployed GitHub Pages by updating the CSS in the docs path as well. The live site appears to serve assets from docs/scifi-ui/styles/site.css, so the previously merged centering and safe padding changes in scifi-ui/styles/site.css are not applied in production.

Reference URL: https://hutoczky.github.io/FormatX/scifi-ui/
Repository path to update: docs/scifi-ui/styles/site.css

Issue shown in the latest screenshot: the hero title ("FORMÁZÁS A JÖVŐBŐL") still hugs the left side visually and the inner content feels close to borders in the downloads panel. We need to mirror the safe spacing and centering rules in the docs path.

Visual reference of the problem:

Changes to implement (CSS only)

1. Append responsive safe-spacing variables and centering rules to the end of docs/scifi-ui/styles/site.css:
   • Add root vars: --safe-inline, --panel-safe, --card-safe using clamp().
   • .shell { padding-inline: var(--safe-inline) }
   • .hero { text-align:center }; .title/.subtitle center via margin-inline:auto; .cta-row { display:flex; justify-content:center }
   • .panel { padding: var(--panel-safe) ... } and .panel::before { inset: calc(var(--panel-safe) - .05rem) }
   • .panel-title { margin: .1rem var(--panel-safe) .9rem }
   • .download-grid { padding: 0 var(--panel-safe) var(--panel-safe) }
   • .card { padding: var(--card-safe) calc(var(--card-safe) + .2rem) var(--card-safe) }
   • Small-screen tweak: extra inline padding for .hero under 520px.

Constraints

• Do not change colors or theme variables; CSS only.
• Keep changes non-destructive and scoped to layout/spacing.

Acceptance criteria

• The hero title and subtitle render centered across all themes in the live Pages site.
• Text does not touch rounded borders; panels/cards maintain readable inner spacing.
• No layout regressions and no console errors.

Testing notes

• Verify at: https://hutoczky.github.io/FormatX/scifi-ui/?theme=lcars, /?theme=holo, /?theme=cyber
• Compare hero alignment and panel/card inner spacing before vs after.

This pull request was created as a result of the following prompt from Copilot chat.

Fix hero alignment and edge readability in the deployed GitHub Pages by updating the CSS in the docs path as well. The live site appears to serve assets from docs/scifi-ui/styles/site.css, so the previously merged centering and safe padding changes in scifi-ui/styles/site.css are not applied in production.

Reference URL: https://hutoczky.github.io/FormatX/scifi-ui/
Repository path to update: docs/scifi-ui/styles/site.css

Issue shown in the latest screenshot: the hero title ("FORMÁZÁS A JÖVŐBŐL") still hugs the left side visually and the inner content feels close to borders in the downloads panel. We need to mirror the safe spacing and centering rules in the docs path.

Visual reference of the problem:

Changes to implement (CSS only)

1. Append responsive safe-spacing variables and centering rules to the end of docs/scifi-ui/styles/site.css:
   • Add root vars: --safe-inline, --panel-safe, --card-safe using clamp().
   • .shell { padding-inline: var(--safe-inline) }
   • .hero { text-align:center }; .title/.subtitle center via margin-inline:auto; .cta-row { display:flex; justify-content:center }
   • .panel { padding: var(--panel-safe) ... } and .panel::before { inset: calc(var(--panel-safe) - .05rem) }
   • .panel-title { margin: .1rem var(--panel-safe) .9rem }
   • .download-grid { padding: 0 var(--panel-safe) var(--panel-safe) }
   • .card { padding: var(--card-safe) calc(var(--card-safe) + .2rem) var(--card-safe) }
   • Small-screen tweak: extra inline padding for .hero under 520px.

Constraints

• Do not change colors or theme variables; CSS only.
• Keep changes non-destructive and scoped to layout/spacing.

Acceptance criteria

• The hero title and subtitle render centered across all themes in the live Pages site.
• Text does not touch rounded borders; panels/cards maintain readable inner spacing.
• No layout regressions and no console errors.

Testing notes

• Verify at: https://hutoczky.github.io/FormatX/scifi-ui/?theme=lcars, /?theme=holo, /?theme=cyber
• Compare hero alignment and panel/card inner spacing before vs after.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.