From ce04bba1c1e8cd5e5822f9b4769e5421a2ba8f04 Mon Sep 17 00:00:00 2001 From: Anne van Gorkom Date: Tue, 14 Nov 2023 11:22:43 +0100 Subject: [PATCH] Hugo: code text in info blocks more legible - Added inline code blocks to info block examples (/examples/shortcodes/info/) for testing - Adjusted the background color of the inline code - Made the text color of the inline code grey instead of white For https://linear.app/usmedia/issue/CUE-331 Closes #432 as merged as of commit 55f9f1cc. Signed-off-by: Anne van Gorkom Change-Id: I1c6110af6fbd39d7eb3722eebbe0c474e54e1fbe --- content/examples/shortcodes/info/en.md | 12 ++++++------ hugo/assets/scss/components/note.scss | 9 +++++++++ hugo/content/en/examples/shortcodes/info/index.md | 12 ++++++------ 3 files changed, 21 insertions(+), 12 deletions(-) diff --git a/content/examples/shortcodes/info/en.md b/content/examples/shortcodes/info/en.md index a6330f14b9..c9b00443de 100644 --- a/content/examples/shortcodes/info/en.md +++ b/content/examples/shortcodes/info/en.md @@ -13,7 +13,7 @@ In order to show an informative highlight, you can use `{{}}`. {{}} #### Info -Lorem ipsum *dolor sit amet*, consectetur adipiscing elit. Phasellus tristique lectus ut bibendum tincidunt. Vestibulum posuere nisl quis bibendum fermentum. +Lorem ipsum *dolor sit amet*, consectetur adipiscing elit. Phasellus tristique lectus ut bibendum tincidunt. Vestibulum `posuere nisl` quis bibendum fermentum. Aenean viverra commodo erat ac porttitor. Suspendisse **a interdum leo**. Etiam volutpat lectus auctor, porttitor urna et, egestas quam. Curabitur sodales, turpis id tristique blandit, purus orci efficitur velit, nec [molestie tortor est eget](#link) erat. {{}} @@ -24,7 +24,7 @@ The rendered output looks like this: {{< info >}} #### Info -Lorem ipsum *dolor sit amet*, consectetur adipiscing elit. Phasellus tristique lectus ut bibendum tincidunt. Vestibulum posuere nisl quis bibendum fermentum. +Lorem ipsum *dolor sit amet*, consectetur adipiscing elit. Phasellus tristique lectus ut bibendum tincidunt. Vestibulum `posuere nisl` quis bibendum fermentum. Aenean viverra commodo erat ac porttitor. Suspendisse **a interdum leo**. Etiam volutpat lectus auctor, porttitor urna et, egestas quam. Curabitur sodales, turpis id tristique blandit, purus orci efficitur velit, nec [molestie tortor est eget](#link) erat. {{< /info >}} @@ -35,14 +35,14 @@ In order to show a warning, you can use `{{}}`. ``` {{}} -**Note:** This function is deprecated and will be removed in the future. +**Warning:** This function is `deprecated` and will be removed in the future. {{}} ``` The rendered output looks like this: {{< warning >}} -**Warning:** This function is deprecated and will be removed in the future. +**Warning:** This function is `deprecated` and will be removed in the future. {{< /warning >}} ## Caution @@ -51,12 +51,12 @@ In order to show a destructive / dangerous information, you can use `{{}} -**Caution:** This version in no longer supported. +**Caution:** This version in `no longer supported`. {{}} ``` The rendered output looks like this: {{< caution >}} -**Caution:** This version in no longer supported. +**Caution:** This version in `no longer supported`. {{< /caution >}} diff --git a/hugo/assets/scss/components/note.scss b/hugo/assets/scss/components/note.scss index 585540b37d..702aedb403 100644 --- a/hugo/assets/scss/components/note.scss +++ b/hugo/assets/scss/components/note.scss @@ -25,18 +25,27 @@ @include marginless-child; position: relative; + + code { + background-color: var(--note-code-bg-color, $c-grey-blue); + border-radius: 2px; + color: $c-grey--darkest; + padding: 0 4px; + } } &--warn { --heading-color: #{ $c-blue--darker }; --list-color: #{ $c-blue--darker }; --note-bg-color: #{ $c-yellow }; + --note-code-bg-color: #{ $c-yellow--light }; --text-color: #{ $c-blue--darker }; --text-link-color: #{ $c-blue--darker }; } &--caution { --note-bg-color: #{ $c-red--light }; + --note-code-bg-color: #{ $c-red--lighter }; } @include screen($screen-simple) { diff --git a/hugo/content/en/examples/shortcodes/info/index.md b/hugo/content/en/examples/shortcodes/info/index.md index a6330f14b9..c9b00443de 100644 --- a/hugo/content/en/examples/shortcodes/info/index.md +++ b/hugo/content/en/examples/shortcodes/info/index.md @@ -13,7 +13,7 @@ In order to show an informative highlight, you can use `{{}}`. {{}} #### Info -Lorem ipsum *dolor sit amet*, consectetur adipiscing elit. Phasellus tristique lectus ut bibendum tincidunt. Vestibulum posuere nisl quis bibendum fermentum. +Lorem ipsum *dolor sit amet*, consectetur adipiscing elit. Phasellus tristique lectus ut bibendum tincidunt. Vestibulum `posuere nisl` quis bibendum fermentum. Aenean viverra commodo erat ac porttitor. Suspendisse **a interdum leo**. Etiam volutpat lectus auctor, porttitor urna et, egestas quam. Curabitur sodales, turpis id tristique blandit, purus orci efficitur velit, nec [molestie tortor est eget](#link) erat. {{}} @@ -24,7 +24,7 @@ The rendered output looks like this: {{< info >}} #### Info -Lorem ipsum *dolor sit amet*, consectetur adipiscing elit. Phasellus tristique lectus ut bibendum tincidunt. Vestibulum posuere nisl quis bibendum fermentum. +Lorem ipsum *dolor sit amet*, consectetur adipiscing elit. Phasellus tristique lectus ut bibendum tincidunt. Vestibulum `posuere nisl` quis bibendum fermentum. Aenean viverra commodo erat ac porttitor. Suspendisse **a interdum leo**. Etiam volutpat lectus auctor, porttitor urna et, egestas quam. Curabitur sodales, turpis id tristique blandit, purus orci efficitur velit, nec [molestie tortor est eget](#link) erat. {{< /info >}} @@ -35,14 +35,14 @@ In order to show a warning, you can use `{{}}`. ``` {{}} -**Note:** This function is deprecated and will be removed in the future. +**Warning:** This function is `deprecated` and will be removed in the future. {{}} ``` The rendered output looks like this: {{< warning >}} -**Warning:** This function is deprecated and will be removed in the future. +**Warning:** This function is `deprecated` and will be removed in the future. {{< /warning >}} ## Caution @@ -51,12 +51,12 @@ In order to show a destructive / dangerous information, you can use `{{}} -**Caution:** This version in no longer supported. +**Caution:** This version in `no longer supported`. {{}} ``` The rendered output looks like this: {{< caution >}} -**Caution:** This version in no longer supported. +**Caution:** This version in `no longer supported`. {{< /caution >}}