guix
/
guix-artwork
mirror of git://git.savannah.gnu.org/guix/guix-artwork.git
2
0
Fork 0
Code Issues Releases Wiki Activity

website: header: Make dropdowns width vary according to their content. 

This change avoids breaking menu items in separate lines when they are
longer than their container box. When they are wrapped, they become
hard to read because they look like two separate items.

The "Medios" menu in the Spanish version of the website, equivalent to
the "Media" menu in the English version, illustrates this odd behavior.
It looks as if there were four menu items, when there's actually two.

* website/static/base/css/navbar.css (.dropdown:hover .submenu)
  (.submenu:focus-within): Make submenus adapt to their widest item.
  (.hline): Limit its width so that submenus are not as wide as the
  original separator image.

Signed-off-by: Mathieu Othacehe <othacehe@gnu.org>
This commit is contained in:
Luis Felipe 2021-04-05 16:29:39 -05:00 committed by Mathieu Othacehe
parent 1f7cd6c323
commit 306049a93c
No known key found for this signature in database
GPG Key ID: 8354763531769CA6
1 changed files with 4 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
website/static/base/css/navbar.css
View File

@ -163,8 +163,7 @@ label.menu-item {
.dropdown:hover .submenu {
min-width: 150px;
/* reset to initial values: */
width: auto;
width: max-content;
height: auto;
overflow: visible;
}
@ -174,8 +173,7 @@ label.menu-item {
the browser does not support :focus-within. */
.submenu:focus-within {
min-width: 150px;
/* reset to initial values: */
width: auto;
width: max-content;
height: auto;
overflow: visible;
}
@ -205,7 +203,8 @@ label.menu-item {
.hline {
display: block;
width: 100%;
margin: auto;
width: 150px;
height: 1px;
}