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 <[email protected]> Change-Id: I1c6110af6fbd39d7eb3722eebbe0c474e54e1fbe Dispatch-Trailer: {"type":"trybot","CL":1172174,"patchset":1,"ref":"refs/changes/74/1172174/1","targetBranch":"alpha"}
cue-lang · Nov 14, 2023 · ce4a769 · ce4a769
1 parent d21aa94
commit ce4a769
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 12 deletions.
diff --git 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 */>}}`.
 {{</* 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 */>}}
@@ -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 `{{</* warning */>}}`.
 
 ```
 {{</* warning */>}}
-**Note:** This function is deprecated and will be removed in the future.
+**Warning:** This function is `deprecated` and will be removed in the future.
 {{</* /warning */>}}
 ```
 
 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 `{{</* cauti
 
 ```
 {{</* caution */>}}
-**Caution:** This version in no longer supported.
+**Caution:** This version in `no longer supported`.
 {{</* /caution */>}}
 ```
 
 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
@@ -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
@@ -13,7 +13,7 @@ In order to show an informative highlight, you can use `{{</* info */>}}`.
 {{</* 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 */>}}
@@ -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 `{{</* warning */>}}`.
 
 ```
 {{</* warning */>}}
-**Note:** This function is deprecated and will be removed in the future.
+**Warning:** This function is `deprecated` and will be removed in the future.
 {{</* /warning */>}}
 ```
 
 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 `{{</* cauti
 
 ```
 {{</* caution */>}}
-**Caution:** This version in no longer supported.
+**Caution:** This version in `no longer supported`.
 {{</* /caution */>}}
 ```
 
 The rendered output looks like this:
 
 {{< caution >}}
-**Caution:** This version in no longer supported.
+**Caution:** This version in `no longer supported`.
 {{< /caution >}}