Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP redesign notes and admonitions #11641

Closed
wants to merge 1 commit into from

Conversation

thaJeztah
Copy link
Member

@thaJeztah thaJeztah commented Oct 27, 2020

follow-up to #11640 (changes are in the last commit). It's still a WIP, but I had this branch lingering around on my machine as part of other changes, so I thought to push it as a PR to share.

This brings the initial work to redesign our notes and admonitions.

The following adminitions are supported:

  • info: generic note with "info" icon
  • tip: note with a "lightbulb" icon
  • check: note with a "check" icon
  • important: note with an exclamation mark
  • warning: note with an exclamation mark in a triangle

There are some alternative icons that I considered (currently commented in the style-sheet, but to be removed)

Things remaining:

  • update the examples and descriptions in "test.md"
  • tweak line-heights / typography
  • review uses of "warning" versus "important"; their purpose needs to be defined better (and styled accordingly)
  • color-schemes: we can likely use the same colors for "dark" and "light" mode. There's also some colors ("warning", e.g.) that use some tweaking.
  • add classes to existing notes to switch between a "regular" note to notes with an icon ("admonition").
  • removing "note" as first line: when using an icon, the icon can replace "note" in many cases; removing the "note" makes the note more compact without loosing meaning, so we should remove those.
  • for other notes, we should do the reverse: replace "note" with a more suitable introduction. I updated some pages to illustrate this. Setting a more descriptive first line can give notes a better context.

Examples

Here's some pages that could be used to view the updates styles:

Screenshots

And some screenshots

Screenshot 2020-10-27 at 13 51 56

Screenshot 2020-10-27 at 13 52 06

Screenshot 2020-10-27 at 13 55 33

Screenshot 2020-10-27 at 13 55 24

@netlify
Copy link

netlify bot commented Oct 27, 2020

✔️ Deploy Preview for docsdocker ready!

🔨 Explore the source changes: fefd8e4

🔍 Inspect the deploy log: https://app.netlify.com/sites/docsdocker/deploys/60e559e104212e0008937f45

😎 Browse the preview: https://deploy-preview-11641--docsdocker.netlify.app

@thaJeztah thaJeztah force-pushed the restyle_blockquotes branch from 79fc5b1 to 3a0f3fc Compare October 27, 2020 12:53
@thaJeztah
Copy link
Member Author

/cc @usha-mandya we can look at this one in our call later

@thaJeztah thaJeztah force-pushed the restyle_blockquotes branch 3 times, most recently from fcd9155 to 5cd787b Compare October 28, 2020 14:52
This brings the initial work to redesign our notes and admonitions.

The following adminitions are supported:

- info: generic note with "info" icon
- tip: note  with a "lightbulb" icon
- check: note with a "check" icon
- important: note with an exclamation mark
- warning: note with an exclamation mark in a triangle

Things remaining:

- update the examples and descriptions in "test.md"
- tweak line-heights / typography
- review uses of "warning" versus "important"; their purpose needs to be
  defined better (and styled accordingly)
- color-schemes: we can likely use the same colors for "dark" and "light"
  mode. There's also some colors ("warning", e.g.) that use some tweaking.
- add classes to existing notes to switch between a "regular" note to
  notes with an icon ("admonition").
- removing "note" as first line: when using an icon, the icon can replace
  "note" in many cases; removing the "note" makes the note more compact
  without loosing meaning, so we should remove those.
- for other notes, we should do the reverse: replace "note" with a more
  suitable introduction. I updated some pages to illustrate this. Setting
  a more descriptive first line can give notes a better context.

Signed-off-by: Sebastiaan van Stijn <[email protected]>
@thaJeztah thaJeztah force-pushed the restyle_blockquotes branch from 5cd787b to fefd8e4 Compare July 7, 2021 07:38
@craig-osterhout craig-osterhout added the area/ux Issue affects functionality of docs.docker.com label Aug 4, 2022
@docker-robott
Copy link
Collaborator

Thanks for the pull request. We'd like to make our product docs better, but haven’t been able to review all the suggestions.
As our docs have also diverged, we do not have the bandwidth to review and rebase old pull requests.

If the updates are still relevant, review our contribution guidelines and rebase your pull request against the latest version of the docs, then mark it as fresh with a /remove-lifecycle stale comment.
If not, this pull request will be closed in 30 days. This helps our maintainers focus on the active pull requests.

Prevent pull requests from auto-closing with a /lifecycle frozen comment.

/lifecycle stale

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/ux Issue affects functionality of docs.docker.com lifecycle/stale
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants