From fefd8e42a7ddcd3aabc9475c57ee5a3a5f1eb405 Mon Sep 17 00:00:00 2001 From: Sebastiaan van Stijn Date: Mon, 26 Oct 2020 22:22:29 +0100 Subject: [PATCH] WIP redesign notes and admonitions 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 --- _includes/install-script.md | 1 + _scss/_night-mode.scss | 12 ++--- _scss/_notes.scss | 84 +++++++++++++++---------------- _scss/_variables.scss | 6 ++- engine/install/binaries.md | 3 -- engine/install/centos.md | 3 +- engine/install/debian.md | 28 +++++++---- engine/install/fedora.md | 3 +- engine/install/ubuntu.md | 20 +++++--- engine/security/protect-access.md | 21 +++++--- 10 files changed, 100 insertions(+), 81 deletions(-) diff --git a/_includes/install-script.md b/_includes/install-script.md index a8a7f816996..179b31d776f 100644 --- a/_includes/install-script.md +++ b/_includes/install-script.md @@ -64,6 +64,7 @@ As the message indicates, non-root users cannot run Docker commands by default. > Docker can also be installed without `root` privileges, or configured to run > in rootless mode. For instructions on running Docker in rootless mode, refer to > [run the Docker daemon as a non-root user (rootless mode)](/engine/security/rootless/). +{:.tip} #### Install pre-releases diff --git a/_scss/_night-mode.scss b/_scss/_night-mode.scss index b1453f1b2f0..72c9c6fd874 100755 --- a/_scss/_night-mode.scss +++ b/_scss/_night-mode.scss @@ -69,16 +69,10 @@ body.night { border: 1px solid #192837; } blockquote { - color: $note-color-night; background: $note-bg-color-night; - &.warning, &.warning p:first-child { - color: $warning-color-night !important; - } - &.important { - border-left-color: #f5ac45 !important; - } - &.important, &.important p:first-child { - color: $important-color-night !important; + + &::before { + color: $note-icon-color-night; } } table { diff --git a/_scss/_notes.scss b/_scss/_notes.scss index 32142859d79..c573df71b33 100644 --- a/_scss/_notes.scss +++ b/_scss/_notes.scss @@ -1,53 +1,59 @@ //noinspection CssNoGenericFontName blockquote { - background-color: $note-bg-color; - border-left-color: $note-color; - font-size: unset; // override bootstrap font-size for blockquotes + background-color: $note-bg-color; + border-left: 5px solid $note-color; + font-size: unset; // override bootstrap font-size for blockquotes + // Use relative position to allow the optional icon (::before) to be positioned. + // Also set a min-height to reserve height for the icon to fit. + position: relative; + min-height: 50px; + + // The ::before is used for the icon in admonitions. By default, no icon is + // present (content: none), and these rules do not have an effect. + &::before { + font-family: FontAwesome; + font-size: 24px; + line-height: 50px; + text-align: center; + color: $note-icon-color; + display: inline-block; + position: absolute; + top: 0; + bottom: 0; + content: none; // default note has no icon + } + + // Vertically align first line with icon (if present) and make first line bold > p:first-child { - color: $note-color; font-weight: 700; margin-top: 0; - - &::before { - font-family: FontAwesome; - content: "\f058 \00a0"; - } + line-height: 30px; } - // Maintain backwards compatibility with old note style + // Maintain backwards compatibility with old, single-line, note style > p:only-child { color: inherit; font-weight: inherit; - - &::before { - content: none; - } } - &.important { - border-left-color: $important-color; - - > p:first-child { - color: $important-color; + &.info, &.check, &.tip, &.important, &.warning { + border-radius: 5px 0 0 5px; + border-style: solid; + border-width: 1px 1px 1px 50px; - &::before { - content: "\f06a \00a0"; - } + &::before { + width: 50px; + left: -50px; } } - &.warning { - border-left-color: $warning-color; - - > p:first-child { - color: $warning-color; - &::before { - content: "\f057 \00a0"; - } - } - } + &.info { border-color: $note-color; &::before{ content: "\f129"; }} // fa-info + &.check { border-color: hsl(130, 100%, 32%); &::before{ content: "\f00c"; }} // fa-check + &.tip { border-color: hsl( 44, 100%, 45%); &::before{ content: "\f0eb"; }} // fa-lightbulb + &.important { border-color: $important-color; &::before{ content: "\f12a"; }} // fa-exclamation + &.warning { border-color: $warning-color; &::before{ content: "\f071"; }} // fa-exclamation-triangle } /* For Bootstrap badges */ @@ -64,16 +70,8 @@ span { vertical-align: baseline; white-space: nowrap; - &.badge-info { - background-color: $note-color; - } - - &.badge-danger { - background-color: $warning-color; - } - - &.badge-warning { - background-color: $important-color; - } + &.badge-info { background-color: $note-color; } + &.badge-danger { background-color: $warning-color; } + &.badge-warning { background-color: $important-color; } } } diff --git a/_scss/_variables.scss b/_scss/_variables.scss index 5f3babc9469..e0d6cffe38d 100755 --- a/_scss/_variables.scss +++ b/_scss/_variables.scss @@ -30,8 +30,9 @@ $bg-component: hsl(240, 14%, 99%); $bg-card: hsl( 0, 0%, 100%); // notes, warnings -$note-color: hsl(206, 82%, 43%); $note-bg-color: hsl(206, 83%, 98%); +$note-icon-color: hsl(206, 0%, 100%); +$note-color: hsl(206, 82%, 43%); $important-color: hsl( 35, 91%, 35%); $warning-color: hsl( 2, 58%, 54%); @@ -59,8 +60,9 @@ $bg-component-night: hsl(203, 44%, 10%); $bg-card-night: hsl(203, 33%, 8%); // notes, warnings -$note-color-night: hsl(180, 1%, 83%); $note-bg-color-night: hsl(203, 35%, 19%); +$note-icon-color-night: hsl(203, 0%, 100%); +$note-color-night: hsl(180, 1%, 83%); $important-color-night: hsl( 35, 90%, 62%); $warning-color-night: hsl( 2, 100%, 74%); diff --git a/engine/install/binaries.md b/engine/install/binaries.md index e76756ac09f..0cf476e4830 100644 --- a/engine/install/binaries.md +++ b/engine/install/binaries.md @@ -9,9 +9,6 @@ redirect_from: - /installation/binaries/ --- -> **Note**: You may have been redirected to this page because there is no longer -> a dynamically-linked Docker package for your Linux distribution. - If you want to try Docker or use it in a testing environment, but you're not on a supported platform, you can try installing from static binaries. If possible, you should use packages built for your operating system, and use your operating diff --git a/engine/install/centos.md b/engine/install/centos.md index fe52d6cf11c..debd3b1d99e 100644 --- a/engine/install/centos.md +++ b/engine/install/centos.md @@ -134,12 +134,13 @@ $ sudo yum-config-manager \ If prompted to accept the GPG key, verify that the fingerprint matches `060A 61C5 1B55 8A7F 742B 77AA C52F EB6B 621E 9F35`, and if so, accept it. - > Got multiple Docker repositories? + > Got multiple Docker repositories enabled? > > If you have multiple Docker repositories enabled, installing > or updating without specifying a version in the `yum install` or > `yum update` command always installs the highest possible version, > which may not be appropriate for your stability needs. + {:.tip} Docker is installed but not started. The `docker` group is created, but no users are added to the group. diff --git a/engine/install/debian.md b/engine/install/debian.md index b5c80eba650..01915134692 100644 --- a/engine/install/debian.md +++ b/engine/install/debian.md @@ -71,6 +71,7 @@ from the repository. > > For Raspbian, installing using the repository is not yet supported. You must > instead use the [convenience script](#install-using-the-convenience-script). +{:.important} #### Set up the repository @@ -100,12 +101,16 @@ from the repository. **nightly** or **test** repository, add the word `nightly` or `test` (or both) after the word `stable` in the commands below. [Learn about **nightly** and **test** channels](index.md). - > **Note**: The `lsb_release -cs` sub-command below returns the name of your - > Debian distribution, such as `helium`. Sometimes, in a distribution + > **Other distributions** + > + > The `lsb_release -cs` sub-command below returns the name of your + > Debian distribution, such as `stretch`. Sometimes, in a distribution > like BunsenLabs Linux, you might need to change `$(lsb_release -cs)` > to your parent Debian distribution. For example, if you are using - > `BunsenLabs Linux Helium`, you could use `stretch`. Docker does not offer any guarantees on untested - > and unsupported Debian distributions. + > `BunsenLabs Linux Helium`, you could use `stretch`. + > Docker does not offer any guarantees on untested and unsupported Debian + > derivatives. + {:.important}