docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve upgrade CTA for dark mode, remove some now-unused variables from notes restyles

This commit is contained in:
Mark H 2021-07-12 12:00:44 +01:00
parent 0e3f31e807
commit c45879262e
5 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/upgrade-cta.html
View File

@ -1,5 +1,5 @@
<div class="docker-upgrade-cta" role="alert"> <div class="docker-upgrade-cta" role="alert">
<div class="docker-upgrade-cta__heading">This feature requires a Pro or Team plan.</div> <div class="docker-upgrade-cta__heading">{{include.header-text}}</div>
{{ include.body | markdownify }} {{ include.body | markdownify }}

2
_scss/_night-mode.scss
View File

@ -25,7 +25,7 @@ body.night {
div#side-toc-title { div#side-toc-title {
color: $white; color: $white;
} }
a { a:not(.btn) {
color: $primary-links-night; color: $primary-links-night;
} }
.header { .header {

1
_scss/_upgrade-cta.scss
View File

@ -1,5 +1,6 @@
.docker-upgrade-cta { .docker-upgrade-cta {
background-color: $orange-10; background-color: $orange-10;
color: $body-text; // we want this irrespective of light/dark mode
padding: 16px 25px; padding: 16px 25px;
margin: 0 0 20px; margin: 0 0 20px;

7
_scss/_variables.scss
View File

@ -31,7 +31,6 @@ $bg-card: hsl( 0, 0%, 100%);
// notes, warnings // notes, warnings
$note-color: hsl(206, 82%, 43%); $note-color: hsl(206, 82%, 43%);
$note-bg-color: hsl(206, 83%, 98%);
$important-color: hsl( 35, 91%, 35%); $important-color: hsl( 35, 91%, 35%);
$warning-color: hsl( 2, 58%, 54%); $warning-color: hsl( 2, 58%, 54%);
@ -58,12 +57,6 @@ $bg-footer-landing-night: hsl(214, 100%, 20%);
$bg-component-night: hsl(203, 44%, 10%); $bg-component-night: hsl(203, 44%, 10%);
$bg-card-night: hsl(203, 33%, 8%); $bg-card-night: hsl(203, 33%, 8%);
// notes, warnings
$note-color-night: hsl(180, 1%, 83%);
$note-bg-color-night: hsl(203, 35%, 19%);
$important-color-night: hsl( 35, 90%, 62%);
$warning-color-night: hsl( 2, 100%, 74%);
$active-sidebar-night: hsl(203, 85%, 79%); $active-sidebar-night: hsl(203, 85%, 79%);
$bg-search-results-night: hsla(0, 0%, 4%, 0.95); $bg-search-results-night: hsla(0, 0%, 4%, 0.95);

13
test.md
View File

@ -663,12 +663,19 @@ It will render like this with a colored sidebar and icon:
Use the `upgrade-cta.html` include to render a CTA asking the user to upgrade their plan. There are two parameters: Use the `upgrade-cta.html` include to render a CTA asking the user to upgrade their plan. There are two parameters:
- `target-url`: This will typically be something like https://www.docker.com/pricing, possibly with a utm code. - `target-url`: This is what the upgrade button will link to. Will typically be something like `https://www.docker.com/pricing`, possibly with a utm code.
- `header-text`: The text shown in the bolded header at the top of the CTA. Only accepts strings, no Markdown support.
- `body`: This forms the body of the CTA. It accepts Markdown. To use multi-line bodies, use named captures as explained in [the Jekyll docs](https://jekyllrb.com/docs/includes/#passing-parameter-variables-to-includes). - `body`: This forms the body of the CTA. It accepts Markdown. To use multi-line bodies, use named captures as explained in [the Jekyll docs](https://jekyllrb.com/docs/includes/#passing-parameter-variables-to-includes).
{% raw %}
```liquid
{% include upgrade-cta.html
body="Upgrade to gain access to this feature"
header-text="This feature is restricted to X and Y plans"
target-url="https://www.example.com/
%}
``` ```
{% include upgrade-cta.html body="Upgrade to gain access to this feature" target-url="https://www.example.com/" %} {% endraw %}
```
## Code blocks ## Code blocks