feat(website): fit the language menu on narrow screens
The menu's list opened leftward past the screen edge on phones, and at 320px the fourth header button overlapped the brand. Open the list to the right below 640px, and hide the GitHub star count below 360px when a page has a language menu. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
ce58aebc0e
commit
4db6ff461f
1 file changed
+10
@@ -2650,6 +2650,10 @@ main:not(.container) > .translation-notice {
|
||||
margin-inline: auto;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.language-list {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
.language-current {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
@@ -2662,3 +2666,9 @@ main:not(.container) > .translation-notice {
|
||||
width: calc(100% - 2.5rem);
|
||||
}
|
||||
}
|
||||
/* The language menu adds a fourth header button; make room beside the brand. */
|
||||
@media (max-width: 359px) {
|
||||
.header-social:has(.language-menu) .nav-github-count {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user