924799 - [In-content] Summary boxes

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Design, defect)

Description

[Jean-Yves Perrier [:teoli]]

Several kinds of articles use summary boxes near the top of the article.

These boxes serve several purposes:
- they put reference information in the same way in articles w/ a common subjects. It allows users to use their eye/muscle memory to spot very quickly the information contained in them
- with the color coding, it allows the user to know the category of the reference article: HTML, JavaScript, CSS, ... without even needing to read it.

Example of pages using this are:
CSS Summary Box: https://developer.mozilla.org/en-US/docs/Web/CSS/mask-type
HTML Summary Box: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside
JS Summary box (old look): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/PI
Web Audio Summary Box: https://developer.mozilla.org/en-US/docs/Web/API/ChannelMergerNode
Event summary box (old look): https://developer.mozilla.org/en-US/docs/Web/Reference/Events/readystatechange

So we need a common look for all these boxes and a color scheme to use with them. As we plan to extend the use of such boxes, we probably need 3-4 more colors than the 5 needed now.

Comment 1

[Jean-Yves Perrier [:teoli]]

Attachment: JS Summary Box

Comment 2

[Jean-Yves Perrier [:teoli]]

Attachment: Events Summary Box

Comment 3

[Jean-Yves Perrier [:teoli]]

Attachment: Web Audio Summary Box

Comment 4

[Jean-Yves Perrier [:teoli]]

Attachment: CSS Summary Box

Comment 5

[Jean-Yves Perrier [:teoli]]

Attachment: HTML Summary Box

Comment 6

[Jean-Yves Perrier [:teoli]]

Also a note: I'm not sure if the current look scale to small screens (phones, ...). It may be interested to have a widget that work for these too (not sure if we want to support phones anyway).