Add comprehensive dark mode support for all components by jbanmol · Pull Request #42 · humanai-foundation/humanai-foundation.github.io

jbanmol · 2026-03-31T20:16:01Z

Added dark mode styles for navbar, alerts, panels, jumbotron, code blocks, and other components.

Copilot

Pull request overview

This PR updates the site’s visual presentation by introducing a new CSS variable-based theme with dark-mode support, and also refreshes several GSoC-related pages/components (proposal listing layout, navbar, and student blog page content).

Changes:

Replaces/modernizes css/hsf.css with CSS variables, component styling updates, and prefers-color-scheme: dark overrides.
Redesigns GSoC proposal listings into a responsive card/grid layout.
Adds/updates GSoC-facing content and navigation (new “How to apply” page, updated navbar, refreshed student blogs page).

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 12 comments.

Show a summary per file

File	Description
`gsoc/how-to-apply.md`	Adds a new “How to Apply” guide for GSoC 2026.
`css/hsf.css`	Introduces new design tokens + component styling and dark-mode rules.
`_layouts/main.html`	Removes large blocks of commented-out legacy markup.
`_includes/navbar.ext`	Reworks the top nav into a GSoC-centric dropdown + quick links.
`_includes/gsoc_proposal.ext`	Switches org proposal listing from a simple list to a card/grid UI.
`_includes/gsoc_project.ext`	Switches project proposal listing from a simple list to a card/grid UI.
`_activities/studentblogs.md`	Expands and restructures the student blog page into richer tables + instructions.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-31T20:21:32Z

+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+


Using CSS @import to load Google Fonts is render-blocking and can delay first paint; it’s generally better to load fonts via a <link rel="stylesheet"> in the document <head> (optionally with preconnect) or to self-host the font files. Consider moving this font load out of hsf.css to avoid the performance penalty and make CSP/network policy easier to manage.

Suggested change

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

Copilot · 2026-03-31T20:21:33Z

+  .navbar-default .navbar-nav > li > a {
+    color: var(--color-text);
+  }



The dark-mode rule .navbar-default .navbar-nav > li > a { color: var(--color-text); } is overridden later in the file by the non-media .navbar-default .navbar-nav > li > a { color: var(--color-nav-text); } rule, so it has no effect when dark mode is active. This makes the dark-mode block harder to reason about; either remove this rule and rely on the CSS variables, or move/adjust it so it actually wins in dark mode.

Suggested change

.navbar-default .navbar-nav > li > a {

color: var(--color-text);

}

Copilot · 2026-03-31T20:21:33Z

+  .dropdown-menu > li > a:hover,
+  .dropdown-menu > li > a:focus {
+    background-color: rgba(255,255,255,0.1);
+    color: #e0e7ff;
+  }


In dark mode, the dropdown hover styling defined here is overridden later by the non-media hover rule (and then only partially overridden again in the later dark-mode block). As a result, the intended hover text color for dark mode does not apply consistently. Consider consolidating dropdown hover styling into a single place (or ensuring the dark-mode override comes after the base hover rule and overrides both background and text color).

Copilot · 2026-03-31T20:21:33Z

+/* Links */
+a {
+  color: var(--color-primary);
+  text-decoration: none;


Removing underlines from all links (text-decoration: none) can hurt accessibility because links may no longer be distinguishable from surrounding text without relying on color alone. Consider keeping underlines for in-content links (and only styling nav/buttons separately), or providing another non-color affordance for links in body text.

Suggested change

text-decoration: none;

text-decoration: underline;

Copilot · 2026-03-31T20:21:34Z

+
+  .tag { background: #312e81; color: #e0e7ff; }
+  .tag-difficulty { background: #78350f; color: #fef3c7; }


.tag / .tag-difficulty dark-mode styles are defined here and then defined again later (including another prefers-color-scheme: dark block). This duplication increases maintenance cost and makes it easy to introduce ordering bugs; consider keeping a single dark-mode override for these selectors.

Suggested change

.tag { background: #312e81; color: #e0e7ff; }

.tag-difficulty { background: #78350f; color: #fef3c7; }

Copilot · 2026-03-31T20:21:34Z

+      {% endfor %}
+    </div>
+    {% if proposal.duration %}
+      <p class="card-duration">⏱ {{ proposal.duration }}</p>


The stopwatch emoji is rendered as part of the duration text; screen readers may announce it verbosely and it can be inconsistent across platforms. Consider marking the emoji as decorative (e.g., aria-hidden="true") and providing an accessible label, or replacing it with text such as "Duration:".

Suggested change

⏱ {{ proposal.duration }}

Duration: {{ proposal.duration }}

Copilot · 2026-03-31T20:21:35Z

+      {% endfor %}
+    </div>
+    {% if proposal.duration %}
+      <p class="card-duration">⏱ {{ proposal.duration }}</p>


The stopwatch emoji is rendered as part of the duration text; screen readers may announce it verbosely and it can be inconsistent across platforms. Consider marking the emoji as decorative (e.g., aria-hidden="true") and providing an accessible label, or replacing it with text such as "Duration:".

Suggested change

⏱ {{ proposal.duration }}

Duration: {{ proposal.duration }}

Copilot · 2026-03-31T20:21:35Z

+    <tr>
+      <td>Shashank Shekhar Singh</td>
+      <td>RenAIssance (OCR)</td>
+      <td><a href="https://medium.com/@shashankshekharsingh1205/from-idea-to-user-tool-continuing-my-journey-with-humanai-in-the-google-summer-of-code-2025-96243994fd4f" target="_blank">Tool for Historical Text Recognition using Weighted CRNN Model →</a></td>


Links opened with target="_blank" should generally include rel="noopener noreferrer" to prevent reverse-tabnabbing and avoid leaking window.opener. Consider adding rel to these external links (at least for newly edited ones).

Suggested change

<td><a href="https://medium.com/@shashankshekharsingh1205/from-idea-to-user-tool-continuing-my-journey-with-humanai-in-the-google-summer-of-code-2025-96243994fd4f" target="_blank">Tool for Historical Text Recognition using Weighted CRNN Model →</a></td>

<td><a href="https://medium.com/@shashankshekharsingh1205/from-idea-to-user-tool-continuing-my-journey-with-humanai-in-the-google-summer-of-code-2025-96243994fd4f" target="_blank" rel="noopener noreferrer">Tool for Historical Text Recognition using Weighted CRNN Model →</a></td>

Copilot · 2026-03-31T20:21:35Z

+---
+title: "How to Apply for GSoC with HumanAI"
+author: "HumanAI Admins"
+layout: default
+description: "A step-by-step guide for students applying to Google Summer of Code 2026 with the HumanAI Foundation."
+---
+
+# How to Apply for GSoC with HumanAI
+
+This guide walks you through every step of applying to [Google Summer of Code](https://summerofcode.withgoogle.com/)
+with the HumanAI Foundation — from finding the right project to submitting your final proposal.
+


This PR introduces a full new GSoC application guide page, which is outside the PR title/description scope of “dark mode support for all components”. Consider splitting content additions into a separate PR or updating the PR metadata to reflect the additional documentation and navigation changes.

Copilot · 2026-03-31T20:21:35Z

+| Now → April 8 | **Application window open** — submit via GSoC portal |
+| April 8 | ⚠️ **Proposal submission deadline** |
+| May 1–26 | Community Bonding Period — meet your mentor, set up tools |
+| May 27 – July 14 | Coding Period 1 |
+| July 14 | Midterm evaluation |
+| July 14 – September 1 | Coding Period 2 |
+| September 1 | Final evaluation & code submission |


jbanmol added 2 commits April 1, 2026 00:23

Clean up HTML comments and add how-to-apply guide

741684c

Add comprehensive dark mode support for all components

faa9b1b

Copilot AI review requested due to automatic review settings March 31, 2026 20:16

Copilot started reviewing on behalf of jbanmol March 31, 2026 20:16 View session

Copilot AI reviewed Mar 31, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add comprehensive dark mode support for all components#42

Add comprehensive dark mode support for all components#42
jbanmol wants to merge 2 commits intohumanai-foundation:masterfrom
jbanmol:dark-mode-v2

jbanmol commented Mar 31, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

	.navbar-default .navbar-nav > li > a {
	color: var(--color-text);
	}


		.tag { background: #312e81; color: #e0e7ff; }
		.tag-difficulty { background: #78350f; color: #fef3c7; }

	<p class="card-duration">⏱ {{ proposal.duration }}</p>
	<p class="card-duration">Duration: {{ proposal.duration }}</p>

	<td><a href="https://medium.com/@shashankshekharsingh1205/from-idea-to-user-tool-continuing-my-journey-with-humanai-in-the-google-summer-of-code-2025-96243994fd4f" target="_blank">Tool for Historical Text Recognition using Weighted CRNN Model →</a></td>
	<td><a href="https://medium.com/@shashankshekharsingh1205/from-idea-to-user-tool-continuing-my-journey-with-humanai-in-the-google-summer-of-code-2025-96243994fd4f" target="_blank" rel="noopener noreferrer">Tool for Historical Text Recognition using Weighted CRNN Model →</a></td>

Conversation

jbanmol commented Mar 31, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants