Improve Codeheat WordPress Website Layout and Restore Elements from Previous Versions

[mariobehling]

The Codeheat WordPress website needs several updates to align the 2026 version with the design and structure of previous contests. The goal is to restore visual consistency, remove incomplete elements, and reintroduce missing sections.

Tasks

1. Remove the yellow styling of the “Global mentors” link. Keep the link but remove the different design so it matches the default link style.

2. Add the section “Proudly organized by”.

3. Improve the “Codeheat Issues” section
   a. Adjust the gray background to look more similar to the previous website version. Use a gradient or reuse the same background image from the old site.
   b. Adjust font and spacing where needed to match the old site, for example row spacing and text formatting.

4. In the “About Codeheat” section adjust the picture to full height. On the 2026 version keep this section with a dark background.

5. Implement a yellow “info section” as in the original site and add information about the Summit 2026.

6. Fix the 2026 page structure. Restore sections similar to previous years.
   Remove incomplete content for now.
   Remove placeholder content in projects and only keep tech stack details.

To be done later
These parts are not required in the current update but should be added in future revisions.

1. Add sections for GOALS, ELIGIBILITY, EVALUATION, PRIZES.
2. Add “How to Participate” steps: pick a project → join community → claim an issue → submit PRs → log submissions.
3. Add Judging and Prizes overview including criteria, selection process, and recognition.

[Ubayed-Bin-Sufian]

Task 1: Remove the yellow styling of the “Global mentors” link — DONE ✔️

Summary

The “Global mentors” link inside the UAG Info Box was inheriting the Astra Global → Colors → Links yellow color.
The task was to keep the link functional but remove the special styling so it matches the default text style.

Implementation Steps

1. Added a custom CSS class in
   Appearance → Customize → Additional CSS

   .no-link-color {
       color: inherit !important;
       text-decoration: none !important;
   }

2. Applied the class to the specific link by editing the block HTML:

   <a href="#mentors" class="no-link-color" target="_blank" rel="noreferrer noopener">
       Global Mentors
   </a>

NB:
I have also applied the above in the Templates files too.

[Ubayed-Bin-Sufian]

Task 2: Add the section “Proudly organized by” in 2026 version — DONE ✔️

[Ubayed-Bin-Sufian]

Task 3: Improve the “Codeheat Issues” section — DONE ✔️

1. Reused the same background image from the old site.
2. Adjusted font size, row spacing and section height.

Reference sites:

1. https://codeheat.org/
2. https://codeheat.org/2020

[Ubayed-Bin-Sufian]

Task 4: In the “About Codeheat” section adjust the picture to full height. — DONE ✔️

1. Adjusted the picture to full height in all the webpages: Homepage, 2016, 2017, 2018, 2019, 2020 and the template files.
2. I have added a dark background to 2026 version similar to previous websites.

[Ubayed-Bin-Sufian]

Task 5: Implement a yellow “info section” as in the original site and add information about the Summit 2026 — DONE ✔️

1. The task is done for version 2026.

Remaining:

1. Add this version for home page, 2016, 2017, 2018, 2019, 2020
2. Responsiveness for tablet and phone layout

[Ubayed-Bin-Sufian]

Task 6: Fix the 2026 page structure — DONE ✔️

1. Restored sections similar to previous years.
2. Removed incomplete content.
3. Removed placeholder content in projects and only kept tech stack details.

[Ubayed-Bin-Sufian]

Continuation of Task 3: Improve the “Codeheat Issues” section

#380 (comment)

• Enhanced mobile and tablet responsiveness

[Ubayed-Bin-Sufian]

Continuation of Task 4: In the “About Codeheat” section adjust the picture to full height

#380 (comment)

• Enhanced mobile and tablet responsiveness

[Ubayed-Bin-Sufian]

Continuation of Task 5:

#380 (comment)

• Enhanced mobile and tablet responsiveness

[Ubayed-Bin-Sufian]

Continuation of Task 5:

#380 (comment)

• Add the yellow section for home page, 2016, 2017, 2018, 2019, 2020
  • https://codeheat.org/
• Responsiveness for tablet and phone layout