Hugo: finetune spacing Spotlight shortcode

- Added modifier attribute to spotlight shortcode - Added the new modifier attribute to the example pages - Rearranged the example page overview - Improved spacing around spotlight blocks - Moved 'last-child' styling to the related-content modifier Testing: - check out the example page (/examples/shortcodes/spotlight/) - or the blog example (/blog/example/) - or this docs page (/docs/howto/encode-json-yaml-with-cue/) For https://linear.app/usmedia/issue/CUE-328 Closes #444 as merged as of commit d786fd3. Signed-off-by: Anne van Gorkom <[email protected]> Change-Id: I8936528fe17cd187febe1ba5b5a615c846262e0a Dispatch-Trailer: {"type":"trybot","CL":1172310,"patchset":1,"ref":"refs/changes/10/1172310/1","targetBranch":"alpha"}
cue-lang · Nov 17, 2023 · add5691 · add5691
1 parent 0185c95
commit add5691
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 37 deletions.
diff --git a/content/blog/example/en.md b/content/blog/example/en.md
@@ -32,7 +32,7 @@ Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac tu
 
 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
 
-{{< spotlight title="Related content" >}}
+{{< spotlight title="Related content" modifier="related-content" >}}
 
 ### Documentation
 

diff --git a/content/examples/_en.html b/content/examples/_en.html
@@ -100,11 +100,6 @@ <h1 class="section__title">Examples</h1>
                     <p class="nav__title">Shortcodes</p>
 
                     <ul class="nav__list">
-                        <li class="nav__item">
-                            <a class="nav__link" href="/examples/shortcodes/spotlight/">
-                                <span class="nav__text">Spotlight</span>
-                            </a>
-                        </li>
                         <li class="nav__item">
                             <a class="nav__link" href="/examples/shortcodes/info/">
                                 <span class="nav__text">Info Block</span>
@@ -126,13 +121,13 @@ <h1 class="section__title">Examples</h1>
                             </a>
                         </li>
                         <li class="nav__item">
-                            <a class="nav__link" href="/examples/shortcodes/sidenote/">
-                                <span class="nav__text">Sidenote</span>
+                            <a class="nav__link" href="/examples/shortcodes/search/">
+                                <span class="nav__text">Search</span>
                             </a>
                         </li>
                         <li class="nav__item">
-                            <a class="nav__link" href="/examples/shortcodes/search/">
-                                <span class="nav__text">Search</span>
+                            <a class="nav__link" href="/examples/shortcodes/sidenote/">
+                                <span class="nav__text">Sidenote</span>
                             </a>
                         </li>
                     </ul>
@@ -147,6 +142,11 @@ <h1 class="section__title">Examples</h1>
                                 <span class="nav__text">Spinner</span>
                             </a>
                         </li>
+                        <li class="nav__item">
+                            <a class="nav__link" href="/examples/shortcodes/spotlight/">
+                                <span class="nav__text">Spotlight</span>
+                            </a>
+                        </li>
                         <li class="nav__item">
                             <a class="nav__link" href="/examples/shortcodes/step/">
                                 <span class="nav__text">Step</span>

diff --git a/content/examples/shortcodes/spotlight/en.md b/content/examples/shortcodes/spotlight/en.md
@@ -37,12 +37,13 @@ title
 theme
 : options - default is `blue`, other option is `yellow`.
 
-Also, if the spotlight is the last part of the content (like when it is used for the related content), there is more whitespace above the spotlight.
+modifier
+: optional - add `related-content` as the modifier when used as a related content block at the end of the page. Using the `related-content` modifier results in more whitespace above the spotlight.
 
 ## Example
 
 ```
-{{</* spotlight title="Related content" theme="yellow" */>}}
+{{</* spotlight title="Related content" theme="yellow" modifier="related-content" */>}}
 
 ### Prerequisites
 
@@ -54,7 +55,7 @@ Also, if the spotlight is the last part of the content (like when it is used for
 
 The rendered output looks like this:
 
-{{< spotlight title="Related content" theme="yellow" >}}
+{{< spotlight title="Related content" theme="yellow" modifier="related-content" >}}
 
 ### Prerequisites
 

diff --git a/hugo/assets/scss/components/spotlight.scss b/hugo/assets/scss/components/spotlight.scss
@@ -7,13 +7,9 @@
     $self: &;
 
     background-color: var(--spotlight-bg-color, $c-blue--lighter);
-    margin: 0 (-$p-gutter) 1.5rem;
+    margin: 1.5rem (-$p-gutter);
     padding: $p-gutter--large $p-gutter;
 
-    &:last-child {
-        margin-top: 3rem;
-    }
-
     &__title {
         @include style-heading-2;
 
@@ -37,17 +33,21 @@
         --spotlight-bg-color: #{ $c-yellow--light }
     }
 
+    &--related-content {
+        margin-top: 3rem;
+    }
+
     @include screen($screen-normal) {
         border-radius: $b-radius;
-        margin: 0 (-50px) 1.5rem; // 50px because of difference between article container and content container
+        margin: 1.5rem (-50px); // 50px because of difference between article container and content container
         padding: 3rem 50px; // 50px because of difference between article container and content container
 
-        &:last-child {
-            margin-top: 5rem;
-        }
-
         .anchor {
             left: -1.5rem;
         }
+
+        &--related-content {
+            margin-top: 5rem;
+        }
     }
 }
diff --git a/hugo/content/en/blog/example/index.md b/hugo/content/en/blog/example/index.md
@@ -32,7 +32,7 @@ Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac tu
 
 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
 
-{{< spotlight title="Related content" >}}
+{{< spotlight title="Related content" modifier="related-content" >}}
 
 ### Documentation
 

diff --git a/hugo/content/en/examples/_index.html b/hugo/content/en/examples/_index.html
@@ -100,11 +100,6 @@ <h1 class="section__title">Examples</h1>
                     <p class="nav__title">Shortcodes</p>
 
                     <ul class="nav__list">
-                        <li class="nav__item">
-                            <a class="nav__link" href="/examples/shortcodes/spotlight/">
-                                <span class="nav__text">Spotlight</span>
-                            </a>
-                        </li>
                         <li class="nav__item">
                             <a class="nav__link" href="/examples/shortcodes/info/">
                                 <span class="nav__text">Info Block</span>
@@ -126,13 +121,13 @@ <h1 class="section__title">Examples</h1>
                             </a>
                         </li>
                         <li class="nav__item">
-                            <a class="nav__link" href="/examples/shortcodes/sidenote/">
-                                <span class="nav__text">Sidenote</span>
+                            <a class="nav__link" href="/examples/shortcodes/search/">
+                                <span class="nav__text">Search</span>
                             </a>
                         </li>
                         <li class="nav__item">
-                            <a class="nav__link" href="/examples/shortcodes/search/">
-                                <span class="nav__text">Search</span>
+                            <a class="nav__link" href="/examples/shortcodes/sidenote/">
+                                <span class="nav__text">Sidenote</span>
                             </a>
                         </li>
                     </ul>
@@ -147,6 +142,11 @@ <h1 class="section__title">Examples</h1>
                                 <span class="nav__text">Spinner</span>
                             </a>
                         </li>
+                        <li class="nav__item">
+                            <a class="nav__link" href="/examples/shortcodes/spotlight/">
+                                <span class="nav__text">Spotlight</span>
+                            </a>
+                        </li>
                         <li class="nav__item">
                             <a class="nav__link" href="/examples/shortcodes/step/">
                                 <span class="nav__text">Step</span>

diff --git a/hugo/content/en/examples/shortcodes/spotlight/index.md b/hugo/content/en/examples/shortcodes/spotlight/index.md
@@ -37,12 +37,13 @@ title
 theme
 : options - default is `blue`, other option is `yellow`.
 
-Also, if the spotlight is the last part of the content (like when it is used for the related content), there is more whitespace above the spotlight.
+modifier
+: optional - add `related-content` as the modifier when used as a related content block at the end of the page. Using the `related-content` modifier results in more whitespace above the spotlight.
 
 ## Example
 
 ```
-{{</* spotlight title="Related content" theme="yellow" */>}}
+{{</* spotlight title="Related content" theme="yellow" modifier="related-content" */>}}
 
 ### Prerequisites
 
@@ -54,7 +55,7 @@ Also, if the spotlight is the last part of the content (like when it is used for
 
 The rendered output looks like this:
 
-{{< spotlight title="Related content" theme="yellow" >}}
+{{< spotlight title="Related content" theme="yellow" modifier="related-content" >}}
 
 ### Prerequisites
 

diff --git a/hugo/layouts/shortcodes/spotlight.html b/hugo/layouts/shortcodes/spotlight.html
@@ -1,7 +1,17 @@
 {{- $title := .Get "title" | default false -}}
 {{- $theme := .Get "theme" | default "blue" -}}
+{{- $modifier := .Get "modifier" | default false -}}
+{{- $cssClass := "spotlight" -}}
 
-<div class="spotlight{{if $theme }} spotlight--{{ $theme }}{{ end }}">
+{{ if $theme }}
+    {{ $cssClass = print $cssClass " spotlight--" $theme }}
+{{ end }}
+
+{{ if $modifier }}
+    {{ $cssClass = print $cssClass " spotlight--" $modifier }}
+{{ end }}
+
+<div class="{{ $cssClass }}">
     {{ with $title }}
         <h2 class="spotlight__title">{{ . }}</h2>
     {{ end }}