Skip to content

refactor(website): improving web UI for home and contact section & including news section (#273)#445

Open
torialfaro wants to merge 1 commit into
jvondermarck:mainfrom
torialfaro:main
Open

refactor(website): improving web UI for home and contact section & including news section (#273)#445
torialfaro wants to merge 1 commit into
jvondermarck:mainfrom
torialfaro:main

Conversation

@torialfaro

Copy link
Copy Markdown

βœ… PR Checklist

  • My PR title follows the format: type(scope): description (#issue) (scope and #issue optional)
  • I used the correct type: feat, fix, refactor, docs, test, chore
  • [x ] I reviewed my code and removed unnecessary debug logs or comments.
  • I tested my changes and verified they work as expected.
  • I ran the project to confirm it compiles and runs correctly.
  • I read the Code of Conduct and the Contribution Guidelines.

πŸ“ What does this PR do?

Website UI β€” Interface fixes & improvements

Bug fixes

  • Horizontal scroll / navbar overflow β€” added overflow-x: hidden to body and the main layout wrapper.

Navbar

  • Logo is left-aligned, EXPLODER breaks onto a second line.
  • GitHub / Star / Sponsor buttons moved to the top utility bar (left side, icon-only) β€” same row as the language and theme dropdowns.
  • "How game works" is highlighted in orange as the primary CTA.
  • External link buttons removed from the nav itself since they now live in the top bar.

Home page

  • Hero is now a true 50/50 split: video on the left, text on the right. Video is 9:16 portrait (matches the game's screen), height matches the text column, and has player controls (pause/seek).
  • Feature badges ("PIXEL DINO ACTION", etc.) moved from a grid section at the bottom into the hero text column as inline pill tags β€” informational, not buttons.
  • Sponsor card is properly centered.

Contact page

  • 3 social channels (GitHub, Discord, Twitter/X) in a 3-column row with their brand icons.
  • Sponsor + Contribute at the same visual level below in a 2-column row.

News section (new)

  • Inspired by OpenRA's news archive β€” specifically the year-grouped panels with post title, author, date, and a "read more" link per row. Colors and typography adapted to fit this project's green retro theme.

  • Posts are written in Markdown files under content/news/ with frontmatter (title, author, date, excerpt).

  • Routes: /[lang]/news (list) and /[lang]/news/[slug] (detail with Giscus comments).

  • ⚠️ The two existing posts (2026-07-02-welcome and 2026-06-15-v1-release) are placeholder/fictional content written to demonstrate the layout. They should be replaced or deleted by the maintainer.

  • New dependencies: gray-matter, remark, remark-html.

  • All 5 language dictionaries updated with news translations.

  • ...

πŸ”— Related Issue

Link to the issue this PR addresses (if any)

πŸ“Έ Screenshots / Demos (if applicable)

image image image image image

πŸ’¬ Extra Notes (Optional)

I thought that was important to highlight the "How game works" button on the header, I also noticed that the amount of things that were inside the navbar made it wider and broke the original width of the page, making it horizontally scrollable. Also, I took your idea on making a news section and took inspiration off of OpenRa website. For the homepage I added a little glimpse of the gameplay thats shown later on the website so its the first thing you see, and replace the cards with tags so its visible that "classic gameplay" and "open source and free" are characteristics. Lastly, I added icons on the contact page and changed the hierarchy of the cards below.

@vercel

vercel Bot commented Jul 2, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
dinosaur-exploder Ready Ready Preview, Comment Jul 2, 2026 6:41pm

@github-actions github-actions Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

πŸ‘‹ Hello @torialfaro, thank you for submitting in Dinosaur Exploder πŸ¦– PR! To allow your work to be integrated as seamlessly as possible, we advise you to:

  • βœ… Verify your PR is up-to-date with the repository /dinosaur-exploder main branch. If your PR is behind you can update your code by clicking the 'Update branch' button or by running git pull and git merge master locally.
  • βœ… Verify all Dinosaur Exploder Continuous Integration (CI) checks are passing.
  • βœ… Verify that you have well fill out the different checkboxes in the PR template.
  • ⚠️ Check that your code is clean: no code redundancy, variable and method names are correct, your code is understandable to everyone, and so on.
  • πŸ’‘ Reduce changes to the absolute minimum required for your bug fix or feature addition. "It is not daily increase but daily decrease, hack away the unessential. The closer to the source, the less wastage there is." β€” Bruce Lee

@sonarqubecloud

sonarqubecloud Bot commented Jul 2, 2026

Copy link
Copy Markdown

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

Labels

None yet

Projects

Development

Successfully merging this pull request may close these issues.

[Website]: πŸ†• Contribute to the new Website of this open-source project

1 participant