1904084 - Improve the "breadcrumb" bar

Status: RESOLVED FIXED

(SeaMonkey :: Website, enhancement)

Description

[Matt A. Tobin [:nsITobin]]

On the SeaMonkey website's front page under the banner is a thinish blue line that on sub-pages is revealed to be for navigation breadcrumbs. This change in bar height is jarring UX wise. Also, the breadcrumb bar is using an tiled image for its background that can be accomplished with css gradients.

Addressing the background is obvious but the breadcrumb bar could be useful on the front page where breadcrumbs aren't needed as a ticker or a latest post thing.. Initially, though I will just have it have the blue Home text and will set the height for good measure.

Comment 1

[Matt A. Tobin [:nsITobin]]

Attachment: Image vs CSS

Comment 2

[Matt A. Tobin [:nsITobin]]

For reference the entire bar can be recreated independently by:

#xxx {
  height: 24px;
  max-height: 24px;
  background-color: #000089;
  background-image: linear-gradient(to bottom, #000089 0%, #000089 15%, #30309f 99%, #000089 100%);
  border-top: 1px solid rgb(159, 203, 247);
  border-bottom: 1px solid #000089;
  box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.15);
  /* Padding for contents rules */
}

Comment 3

[Matt A. Tobin [:nsITobin]]

Attachment: Improve the breadcrumb bar

Comment 4

[Matt A. Tobin [:nsITobin]]

Some limitations both in the origin design of the website and in my first patch cropped up so I will be submitting a new patch tomorrow.

The design limitation is reliance on a Microsoft system font falling back to whatever the browser has set as sans. This can be solved by use of a webfont. Namely DejaVu Sans.

Changing the site to a webfont is a much larger task where every page needs verified so that would have to be a different bug.

Comment 5

[Matt A. Tobin [:nsITobin]]

Attachment: v2

Comment 6

[Frank-Rainer Grahl (:frg)]

Comment on attachment 9409088 [details]
v2

tested on staging and looks good

Comment 7

[Frank-Rainer Grahl (:frg)]

https://foss.heptapod.net/seamonkey/website/-/commit/e5af260006571077f08021ba8d22529a561ecaaf
https://gitlab.com/seamonkey-project/website/-/commit/b08006fe51197119e1129376198605e569d64a00
Style the Navigation breadcrumbs bar consistently. r=frg