Smaller breadcrumbs

Created on 12 March 2023, over 1 year ago
Updated 21 April 2023, over 1 year ago

Problem/Motivation

Breadcrumbs as a concept should mainly function as a means to navigate one or two levels up, and allow users to maintain awareness of their locations within the website, as originally intended and can be seen in its name "breadcrumb".

In my opinion, the breadcrumb link fonts are too big on drupal.org, since they push down the content, due to the large font size.

As an unintended consequence, documentation page titles might be kept a bit too short, to avoid the breadcrumb from ballooning, and taking over the screen. If that's the case, we should deal with the big fonts in the breadcrumb, if it leads to slightly truncated titles, for fear of the breadcrumb growing too big.

Current breadcrumb size

Suggested breadcrumb size, and <h1> padding-right removed

From https://www.drupal.org/about/core/policies/core-release-cycles/schedule β†’ .

Steps to reproduce

Visit the documentation page, and see that in may pages the breadcrumb breaks into multiple lines.

Proposed resolution

I tried reducing the breadcrumb font size to 1em, and it looks great:

.new-style .breadcrumb {
  font-size: 1em;
}

Also, there's a right margin in <h1> forcing titles to break over multiple lines. Perhaps it can be removed?

.node-type-guide h1, .node-type-documentation h1 {
  padding-right: 166px;
}

Remaining tasks

User interface changes

API changes

Data model changes

πŸ“Œ Task
Status

Active

Version

2.0

Component

User interface

Created by

πŸ‡©πŸ‡°Denmark ressa Copenhagen

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @ressa
  • πŸ‡ΊπŸ‡ΈUnited States drumm NY, US

    Moving to the theme used on Drupal.org.

  • πŸ‡ΊπŸ‡ΈUnited States drumm NY, US

    I went ahead and reduced the breadcrumb size, this will be deployed the next time Drupal.org is deployed.

    We may be able to simplify the breadcrumb markup in bluecheese_breadcrumb() since all the styles on .new-style .breadcrumb are all contained within the next span selector.

    Also, there's a right margin in <h1> forcing titles to break over multiple lines.

    This is there to make room for the local tasks rendered as a dropdown menu. We would have to do something like scoping the selection with that rule to only match when a page has local tasks. Having 2 local task styles throughout the site is not ideal for maintenance. Before spending too much time on this, we should decide if we want the dropdown or links across the top everywhere.

  • πŸ‡©πŸ‡°Denmark ressa Copenhagen

    Nice, thanks @drumm, and for the great work you do on maintaining drupal.org, I very much appreciate it. Have a nice day.

  • πŸ‡·πŸ‡ΊRussia allexim

    @ressa, i was inspired by your idea to suggest something which could make the drupal website looking better.

    My suggestion:

    dashboard badge - counter of watched topics and etc.

Production build 0.71.5 2024