Skip to content

Add comprehensive dark mode support for all components #42

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jbanmol wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add comprehensive dark mode support for all components #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
741684c
Clean up HTML comments and add how-to-apply guide
jbanmol Mar 31, 2026
faa9b1b
Add comprehensive dark mode support for all components
jbanmol Mar 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
154 changes: 97 additions & 57 deletions _activities/studentblogs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,81 +1,121 @@
---
title: "Blogs"
title: "Student Blogs"
author: "Emanuele Usai"
layout: default
description: "Read blog posts written by HumanAI GSoC students about their research projects in AI and Arts & Humanities."
---

<img src="/images/humanai.jpg" alt="HumanAI Logo" width="200"/>

<img src="/images/humanai.jpg" alt="HumanAI" width="200"/>

# Google Summer of Code blog posts
# Google Summer of Code — Student Blogs

## Introduction

This is a collection of blog posts from GSoC students who worked with HumanAI.
Each year, HumanAI students share their GSoC journey through blog posts, covering everything from their
first lines of code to final results. These are real stories from real researchers applying machine
learning to arts, humanities, music, literature, and more.

---

### Google Summer of Code 2025

<table class="table table-hover table-striped">

<tr>
<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" by Shashank Shekhar Singh</a></td>
</tr>
<thead>
<tr>
<th>Student</th>
<th>Project</th>
<th>Blog Post</th>
</tr>
</thead>
<tbody>
<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>
Copy link

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

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

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 uses AI. Check for mistakes.
</tr>
</tbody>
</table>

---

### Google Summer of Code 2024

<table class="table table-hover table-striped">
<thead>
<tr>
<th>Student</th>
<th>Project</th>
<th>Blog Post</th>
</tr>
</thead>
<tbody>
<tr>
<td>Domenico Lacavalla</td>
<td>Dark Web Language Evolution</td>
<td><a href="https://medium.com/@domenicolacavalla8/examination-of-the-evolution-of-language-among-dark-web-users-67fd3397e0fb" target="_blank">Examination of the Evolution of Language Among Dark Web Users →</a></td>
</tr>
<tr>
<td>Yukinori Yamamoto</td>
<td>RenAIssance (OCR)</td>
<td><a href="https://medium.com/@yamanko1234/historical-ocr-with-self-supervised-learning-c4f00da6637f" target="_blank">Historical OCR with Self-Supervised Learning →</a></td>
</tr>
<tr>
<td>Shashank Shekhar Singh</td>
<td>RenAIssance (OCR)</td>
<td><a href="https://medium.com/@shashankshekharsingh1205/my-journey-with-humanai-in-the-google-summer-of-code24-program-part-2-bb42abce3495" target="_blank">Historical Text Recognition using CRNN Model →</a></td>
</tr>
<tr>
<td>Soyoung Park</td>
<td>ArtExtract</td>
<td><a href="https://medium.com/@soyoungpark.psy/how-i-designed-hidden-art-extraction-tool-with-siamese-networks-part4-gsoc-24-e3387b3ae50b" target="_blank">ArtExtract: Hidden Art Extraction with Siamese Networks →</a></td>
</tr>
<tr>
<td>Luis Zerkowski</td>
<td>ChoreoAI</td>
<td><a href="https://medium.com/@luisvz/duet-choreaigraphy-dance-meets-ai-again-part-2-b8f459a0e3d6" target="_blank">ChoreoAI: Dance Meets AI Again →</a></td>
</tr>
<tr>
<td>Zixuan Wang</td>
<td>ChoreoAI</td>
<td><a href="https://wang-zixuan.github.io/posts/2024/gsoc_2024" target="_blank">AI-Generated Choreography — from Solos to Duets →</a></td>
</tr>
<tr>
<td>Rashi Gupta</td>
<td>ISSR / Social Sciences</td>
<td><a href="https://medium.com/@rashiguptaofficial/exploring-gender-roles-in-education-a-grade-wise-analysis-cb87db14bc7d" target="_blank">Gender, Roles &amp; Careers: Exploring Congruity Theories →</a></td>
</tr>
<tr>
<td>Shao Jin</td>
<td>ISSR / Program Evaluation</td>
<td><a href="https://medium.com/@sj3192/18c818d77527" target="_blank">Enhancing Program Evaluation Research with AI for Mixed-Methods Data →</a></td>
</tr>
<tr>
<td>Aditya Arvind</td>
<td>ISSR / Fatigue Detection</td>
<td><a href="https://medium.com/@aditya.arvind97/fatigue-detection-and-driver-distraction-monitoring-b895a5ee287c" target="_blank">Fatigue Detection and Driver Distraction Monitoring →</a></td>
</tr>
<tr>
<td>Arsh Ahmed Faisal Khan</td>
<td>RenAIssance (OCR)</td>
<td><a href="https://medium.com/@khanarsh0124/gsoc-2024-with-humanai-text-recognition-with-transformer-models-de86522cdc17" target="_blank">Text Recognition using Transformer Models →</a></td>
</tr>
<tr>
<td>Utsav Rai</td>
<td>RenAIssance (OCR)</td>
<td><a href="https://utsavrai.substack.com/p/decoding-history-advancing-text-recognition" target="_blank">Decoding History: Advancing Text Recognition →</a></td>
</tr>
</tbody>
</table>

<tr>
<td><a href="https://medium.com/@domenicolacavalla8/examination-of-the-evolution-of-language-among-dark-web-users-67fd3397e0fb" target="_blank">"Examination of the evolution of language among Dark Web users" by Domenico Lacavalla</a></td>
</tr>

<tr>
<td><a href="https://medium.com/@yamanko1234/historical-ocr-with-self-supervised-learning-c4f00da6637f" target="_blank">"RenAIssance" by Yukinori Yamamoto</a></td>
</tr>

<tr>
<td><a href="https://medium.com/@shashankshekharsingh1205/my-journey-with-humanai-in-the-google-summer-of-code24-program-part-2-bb42abce3495" target="_blank">"Historical Text Recognition using CRNN Model" by Shashank Shekhar Singh</a></td>
</tr>

<tr>
<td><a href="https://medium.com/@soyoungpark.psy/how-i-designed-hidden-art-extraction-tool-with-siamese-networks-part4-gsoc-24-e3387b3ae50b" target="_blank">"ArtExtract" by Soyoung Park</a></td>
</tr>

<tr>
<td><a href="https://medium.com/@luisvz/duet-choreaigraphy-dance-meets-ai-again-part-2-b8f459a0e3d6" target="_blank">"ChoreoAI" by Luis Zerkowski</a></td>
</tr>

<tr>
<td><a href="https://wang-zixuan.github.io/posts/2024/gsoc_2024" target="_blank">"AI-Generated Choreography - from Solos to Duets" by Zixuan Wang</a></td>
</tr>

<tr>
<td><a href="https://medium.com/@rashiguptaofficial/exploring-gender-roles-in-education-a-grade-wise-analysis-cb87db14bc7d" target="_blank">"Gender, Roles & Careers: Exploring Congruity Theories" by Rashi Gupta</a></td>
</tr>

<tr>
<td><a href="https://medium.com/@sj3192/18c818d77527" target="_blank">"Enhancing Program Evaluation Research by Leveraging AI for Integrated Analysis of Mixed-Methods Data" by Shao Jin</a></td>
</tr>

<tr>
<td><a href="https://medium.com/@aditya.arvind97/fatigue-detection-and-driver-distraction-monitoring-b895a5ee287c" target="_blank">"Fatigue detection" by Aditya Arvind</a></td>
</tr>

<tr>
<td><a href="https://medium.com/@khanarsh0124/gsoc-2024-with-humanai-text-recognition-with-transformer-models-de86522cdc17" target="_blank">"Text Recognition using Transformer Models" by Arsh Ahmed Faisal Khan</a></td>
</tr>

<tr>
<td><a href="https://utsavrai.substack.com/p/decoding-history-advancing-text-recognition" target="_blank">"Decoding History: Advancing Text Recognition" by Utsav Rai</a></td>
</tr>


---

</table>
## Write Your Blog Post

Are you a current GSoC student with HumanAI? Share your experience!
Write about a challenge you solved, a surprising finding, or your overall journey.
Publish on [Medium](https://medium.com) or your personal site, then email the link to
[human-ai@cern.ch](mailto:human-ai@cern.ch) to have it added here.

## Contacts

*HumanAI GSoC Admins* [human-ai@cern.ch](mailto:human-ai@cern.ch)

*HumanAI GSoC Admins* — [human-ai@cern.ch](mailto:human-ai@cern.ch)
20 changes: 19 additions & 1 deletion _includes/gsoc_project.ext
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ Use the project name as the page title if none has been specified (they are typi

## Project Proposals

<div class="proposal-grid">
{% for proposal in site.gsocproposals %}
{% assign url_tokens = proposal.url | split: '/' %}
{% assign year_position = url_tokens.size | minus: 2 %}
Expand All @@ -35,9 +36,26 @@ Use the project name as the page title if none has been specified (they are typi
{% capture u_proposal_project %}{{ project | upcase }}{% endcapture %}
{% capture u_project %}{{ page.project | upcase }}{% endcapture %}
{% if u_proposal_project == u_project %}
* [ {{ proposal.title }} ]( {{ proposal.url }} )
<div class="proposal-card">
<h4><a href="{{ proposal.url }}">{{ proposal.title }}</a></h4>
<div class="card-meta">
{% if proposal.difficulty %}
<span class="tag tag-difficulty">{{ proposal.difficulty }}</span>
{% endif %}
{% for req in proposal.requirements limit:5 %}
<span class="tag">{{ req }}</span>
{% endfor %}
{% for tag in proposal.tags limit:5 %}
<span class="tag">{{ tag }}</span>
{% endfor %}
</div>
{% if proposal.duration %}
<p class="card-duration">⏱ {{ proposal.duration }}</p>
Copy link

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

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

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
<p class="card-duration">⏱ {{ proposal.duration }}</p>
<p class="card-duration">Duration: {{ proposal.duration }}</p>

Copilot uses AI. Check for mistakes.
{% endif %}
</div>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</div>

20 changes: 19 additions & 1 deletion _includes/gsoc_proposal.ext
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ grouping by organization and is case insensitive.

## Project List

<div class="proposal-grid">
{% for proposal in site.gsocproposals %}
{% assign url_tokens = proposal.url | split: '/' %}
{% assign year_position = url_tokens.size | minus: 2 %}
Expand All @@ -30,9 +31,26 @@ grouping by organization and is case insensitive.
{% capture u_proposal_org %}{{ organization | upcase }}{% endcapture %}
{% capture u_org %}{{ page.organization | upcase }}{% endcapture %}
{% if u_proposal_org == u_org %}
* [ {{ proposal.title }} ]( {{ proposal.url }} )
<div class="proposal-card">
<h4><a href="{{ proposal.url }}">{{ proposal.title }}</a></h4>
<div class="card-meta">
{% if proposal.difficulty %}
<span class="tag tag-difficulty">{{ proposal.difficulty }}</span>
{% endif %}
{% for req in proposal.requirements limit:5 %}
<span class="tag">{{ req }}</span>
{% endfor %}
{% for tag in proposal.tags limit:5 %}
<span class="tag">{{ tag }}</span>
{% endfor %}
</div>
{% if proposal.duration %}
<p class="card-duration">⏱ {{ proposal.duration }}</p>
Copy link

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

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

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
<p class="card-duration">⏱ {{ proposal.duration }}</p>
<p class="card-duration">Duration: {{ proposal.duration }}</p>

Copilot uses AI. Check for mistakes.
{% endif %}
</div>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</div>

54 changes: 31 additions & 23 deletions _includes/navbar.ext
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,35 @@

<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="/" class="navbar-brand">HumanAI</a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="/index.html" id="activities_menu">Activities<span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="activities_menu">
{% for activity in site.activities %}
<li><a href="{{ activity.url }}">{{ activity.title }}</a></li>
{% endfor %}
</ul>
</li>
<div class="container">
<div class="navbar-header">
<a href="/" class="navbar-brand">HumanAI</a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main" aria-expanded="false" aria-label="Toggle navigation">
Copy link

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

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

The dropdown toggle button is missing aria-controls="navbar-main", which helps assistive technologies understand what region the control expands/collapses. Consider adding aria-controls pointing at the collapsible container id.

Suggested change
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main" aria-expanded="false" aria-label="Toggle navigation">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main" aria-controls="navbar-main" aria-expanded="false" aria-label="Toggle navigation">

Copilot uses AI. Check for mistakes.
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">

<!-- GSoC Menu -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="gsoc_menu" aria-haspopup="true" aria-expanded="false">
GSoC <span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="gsoc_menu">
<li><a href="/activities/gsoc2026.html">Google Summer of Code 2026</a></li>
<li><a href="/gsoc/2026/summary.html">All 2026 Proposals</a></li>
<li role="separator" class="divider"></li>
<li><a href="/activities/gsoc2025.html">GSoC 2025</a></li>
<li><a href="/activities/gsoc2024.html">GSoC 2024</a></li>
</ul>
</li>


</div>
</div>
<!-- Quick Links -->
<li><a href="/get_involved.html">Get Involved</a></li>
<li><a href="/activities/studentblogs.html">Student Blogs</a></li>

Comment on lines +14 to +31
Copy link

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

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

This change substantially alters the global site navigation (e.g., replacing the previous menu structure with a GSoC-focused dropdown and removing other top-level sections). That’s a larger scope than the PR title/description (“dark mode support”) and may merit a separate PR or an updated PR description to reflect the navigation/IA change.

Copilot uses AI. Check for mistakes.
</ul>
</div>
</div>
</div>
56 changes: 5 additions & 51 deletions _layouts/main.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,34 +40,9 @@
<hr>
{% endif %}

<!-- Various boxes with more information -->
<!-- <div class="row"> -->

<!-- <div class="col-lg-4">
<h2>Meetings</h2>
<p>
The HSF holds <a href="/future-events.html" target="_hsf_indico">regular meetings</a>
in its activity areas and has bi-weekly coordination meetings as well.
All of our meetings are open for everyone to join.
</p>
<ul class="list list-simple">
{% assign pagedate = site.time | date: "%Y-%m-%d" %}
{% for post in site.categories.organization limit: 3 %}
<li><a href="{{ post.url }}">{{ post.title }}</a></li>
{% endfor %}
</ul>
<p><a href="/future-events.html" role="button">Upcoming HSF and community events &raquo;</a></p>
<p><a href="/organization/minutes.html" role="button">Full list of past meetings &raquo;</a></p>
</div> -->


<!-- <div class="col-lg-4"> width="560" height="315"-->

<!-- <p style="text-align:center;position:relative;width:100%;height:0;padding-bottom:56.25%;"><iframe style="position:absolute;top:0;left:0;width:100%;height:100%;" src="https://www.youtube.com/embed/lc8wBg8HBd8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></p> -->

<!--
<h1>For Students: The 2026 GSoC term has not yet started. Please check this website for more information on February 19th.</h1>
-->



<h2>HumanAI in GSoC 2026</h2>
<p class="lead">
The HumanAI open source umbrella organization plans to participate in the <a href="https://summerofcode.withgoogle.com/">2026 Google Summer of Code</a>. If you are a student interested in our <a href="/activities/gsoc2026.html">projects</a> please check our <a href="/gsoc/2026/summary.html">ideas page</a>.
Expand All @@ -77,19 +52,11 @@ <h2>HumanAI in GSoC 2026</h2>
alt="GSoC-logo" style="display: block; width:15%; margin-left: auto; margin-right: auto;">
<p class="lead">Please take a look at our <a href="/activities/gsoc2026.html">GSoC Page</a> for more details.</p>

<!-- <p class="lead">If you are interested in our activities please join our <a href="https://simba3.web.cern.ch/simba3/SelfSubscription.aspx?groupName=ml4sci-announce" target="_blank">announcements mailing list</a>.
To join, you will need to create a <a href="https://account.cern.ch/account/externals/" target="_blank">CERN lightweight account</a>.</p> -->


<p class="lead">You can also find us on <a href="https://matrix.to/#/#humanai-foundation:gitter.im" target="_blank">Gitter</a>.</p>

<!-- <div style="color: darkmagenta;
background: lightpink;
border: 3px solid darkred;
font-size: 30px;
padding: 10px;
margin: 10px;">
Evaluation tests for GSoC 202 will be published after Monday, February 26.
</div> -->



<p class="lead">Organization administrators:<br>
Expand All @@ -102,20 +69,7 @@ <h2>HumanAI in GSoC 2026</h2>
</p>


<!-- </div> -->


<!-- <div class="col-lg-4">
<h2>Activities</h2>
<p>We organise many activities, from our <a href="/what_are_WGs.html">working groups</a>,
to organising <a href="/events.html">events</a>, to supporting projects as
<a href="/projects.html">HSF projects</a>, and helping communication within the
community through our <a href="/forums.html">discussion forums</a>
and <a href="/technical_notes.html">technical notes</a>.
</p>
<p><a href="/get_involved.html" role="button">How to get involved &raquo;</a></p>
</div> -->
<!-- </div> -->

{{ content }}

Expand Down
Loading
Loading