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

[Mathieu Othacehe]

This is an automated email from the git hooks/post-receive script.

mothacehe pushed a commit to branch master
in repository guix-artwork.

The following commit(s) were added to refs/heads/master by this push:
     new 306049a  website: header: Make dropdowns width vary according to their 
content.
306049a is described below

commit 306049a93c3ede1808d02144977b932d34c59b75
Author: Luis Felipe <luis.felipe.la@protonmail.com>
AuthorDate: Mon Apr 5 16:29:39 2021 -0500

    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>
---
 website/static/base/css/navbar.css | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/website/static/base/css/navbar.css 
b/website/static/base/css/navbar.css
index 2274aa1..974516a 100644
--- a/website/static/base/css/navbar.css
+++ b/website/static/base/css/navbar.css
@@ -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;
     }