Skip to content

fix #18: set GitHub panel color to match on mobile/small screens#19

Merged
egrace479 merged 4 commits intomainfrom
bug/color-fix
Dec 18, 2025
Merged

fix #18: set GitHub panel color to match on mobile/small screens#19
egrace479 merged 4 commits intomainfrom
bug/color-fix

Conversation

@egrace479
Copy link
Copy Markdown
Member

When the browser window is narrower, the GitHub panel shows up in the menu on the side and its color must be set manually. This PR does that so that it will match the the primary color. See screenshots below.

lightmode fix GH panel matches primary color darkmode fix GH panel matches primary color

Fixes #18.

@egrace479 egrace479 requested a review from NetZissou December 13, 2025 00:38
@egrace479 egrace479 added bug Something isn't working design UX or presentation needs attention labels Dec 13, 2025
Copy link
Copy Markdown

@NetZissou NetZissou left a comment

Choose a reason for hiding this comment

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

Changes look good!

@annavik
Copy link
Copy Markdown
Member

annavik commented Dec 18, 2025

Nice work fixing the GitHub panel color @egrace479 !

I made a tweak for the active parent text color. Turned out to be important to apply this only for the small screen case. Sorry about the breakpoint being a bit strange, but I had to match the main theme :)

Before vs. after:
Screenshot 2025-12-18 at 16 50 40Screenshot 2025-12-18 at 16 50 16

@annavik annavik mentioned this pull request Dec 18, 2025
Also needed manual setting now the color is
@egrace479
Copy link
Copy Markdown
Member Author

Noticed the active hover color also needed to be reset, so added that in.

@egrace479 egrace479 merged commit 1551d25 into main Dec 18, 2025
@egrace479 egrace479 deleted the bug/color-fix branch December 18, 2025 17:08
egrace479 added a commit to Imageomics/Imageomics-guide that referenced this pull request Dec 18, 2025
egrace479 added a commit to Imageomics/Imageomics-guide that referenced this pull request Dec 18, 2025
* fix #87: set gh panel color to match on mobile/small screens

* fix menu sidbar links in darkmode mobile/narrow screen

* Set color variables for more efficient and clear code

* Add fix for #87, following what was done in ABC Guide
ref: ABC-Center/ABC-guide#19
egrace479 added a commit to Imageomics/Collaborative-distributed-science-guide that referenced this pull request Feb 18, 2026
Pull from ABC Guide [PR 19](ABC-Center/ABC-guide#19)

* fix [18](ABC-Center/ABC-guide#18): set gh panel color to match on mobile/small screens

* fix: adjust text color for active parent item in small screen sidebar

* Fix the active hover color for active parent item in small screen sidebar
Also needed manual setting for this part or it stays constant

---------

Co-authored-by: Anna Viklund <annamariaviklund@gmail.com>
egrace479 added a commit to Imageomics/Collaborative-distributed-science-guide that referenced this pull request Mar 24, 2026
* Set color scheme to match ABC Colors

Pull from ABC-Guide [PR 7](ABC-Center/ABC-guide#7)

---------

Co-authored-by: Anna Viklund <annamariaviklund@gmail.com>

* fix 18: set GitHub panel color to match on mobile/small screens

Pull from ABC Guide [PR 19](ABC-Center/ABC-guide#19)

---------

Co-authored-by: Anna Viklund <annamariaviklund@gmail.com>

* Set colors to be more modular with some added instructions
Use Imageomics Guide colors for light mode and ABC for dark mode

* Add color-specification instructions

* Try green-teal color scheme with purple accents

* Implement suggested color scheme from #59

Co-authored-by: Anna Viklund <annamariaviklund@gmail.com>

* Revise default color note to point to palette definition

* Small tweaks to color scheme (#61)

* Adjust colors for admonition tip

* Adjust colors for small screen navigation

* Make links more distinguishable

* Adjust colors for admonition info

* Tweak link appearance

* Apply link tweak suggestions from code review

Co-authored-by: Elizabeth Campolongo <38985481+egrace479@users.noreply.github.com>

* Tweak logic for admonition colors

* Set colors for summary component

* Add background color definition clarification

from main theme, not overridden

---------

Co-authored-by: Elizabeth Campolongo <38985481+egrace479@users.noreply.github.com>

* Add acknowledgment for Anna's help with color scheme

---------

Co-authored-by: Anna Viklund <annamariaviklund@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working design UX or presentation needs attention

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Fix color on mobile

3 participants