Skip to content
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

Jump to bottom

css: place dark-mode icon next to tagline on mobile #21

Merged
merged 1 commit into from
Mar 19, 2025
Merged

css: place dark-mode icon next to tagline on mobile #21

merged 1 commit into from
Mar 19, 2025

Conversation

To1ne
Copy link

@To1ne To1ne commented Mar 19, 2025

Because it looks better to have the whole width for the search bar on mobile, move the dark-mode icon above the search bar, next to the tagline. To achieve this, use CSS grid where we can name the grid-areas and reposition them within media queries.

Screenshots

Without search With search
Mobile Screen Shot 2025-03-19 at 14 53 36 Screen Shot 2025-03-19 at 14 53 30
Tablet (portrait) Screen Shot 2025-03-19 at 14 53 20 Screen Shot 2025-03-19 at 14 53 26
Tablet (landscape) Screen Shot 2025-03-19 at 14 53 13 Screen Shot 2025-03-19 at 14 53 08
Desktop Screen Shot 2025-03-19 at 14 52 48 Screen Shot 2025-03-19 at 14 53 00

@To1ne
css: place dark-mode icon next to tagline on mobile
f99dd15 
Because it looks better to have the whole width for the search bar on
mobile, move the dark-mode icon above the search bar, next to the
tagline. To achieve this, use CSS grid where we can name the grid-areas
and reposition them within media queries.

Signed-off-by: Toon Claes <[email protected]>
@To1ne
Copy link
Author

To1ne commented Mar 19, 2025

@dscho I'm done now.

I'm not sure if I hate the cyan box touching the git logo when search dropdown is open. But I didn't want to create extra space when the dropdown isn't visible. So I'm taking this compromise.

@To1ne
Copy link
Author

To1ne commented Mar 19, 2025

image

Nice!

dscho
dscho approved these changes Mar 19, 2025
View reviewed changes
Copy link
Owner

@dscho dscho left a comment

Choose a reason for hiding this comment

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

Very, very nice!

@dscho dscho merged commit cb4826f into dscho:gh-pages Mar 19, 2025
1 check passed
@dscho
Copy link
Owner

dscho commented Mar 19, 2025

I'm not sure if I hate the cyan box touching the git logo when search dropdown is open.

How are we feeling about cyan in dark mode?

image

@To1ne
Copy link
Author

To1ne commented Mar 19, 2025

Works fine on iPhone too!

image

@To1ne
Copy link
Author

To1ne commented Mar 19, 2025

How are we feeling about cyan in dark mode?

@dscho It's okay. It would be a bit better if we drop the shadow from #search-results table td.matches a.highlight and a:hover. Only I failed to write such patch myself because I don't understand how the css dark mode is injected.

@dscho
Copy link
Owner

dscho commented Mar 19, 2025

It would be a bit better if we drop the shadow from #search-results table td.matches a.highlight and a:hover. Only I failed to write such patch myself because I don't understand how the css dark mode is injected.

Ah, my mistake, I should have explained better. Dark mode CSS is injected via this override.

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

@dscho dscho dscho approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@To1ne @dscho