diff --git a/content/blog/example/en.md b/content/blog/example/en.md index 0f68d9812..a6c4a7707 100644 --- 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 index b6a025359..75ffd784e 100644 --- a/content/examples/_en.html +++ b/content/examples/_en.html @@ -100,11 +100,6 @@

Examples

Shortcodes

@@ -147,6 +142,11 @@

Examples

Spinner +
  • + + Spotlight + +
  • Step diff --git a/content/examples/shortcodes/spotlight/en.md b/content/examples/shortcodes/spotlight/en.md index 7aea275b4..34cea2660 100644 --- 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 ``` -{{}} +{{}} ### 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 index 8118161c3..d186657b4 100644 --- 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 index 0f68d9812..a6c4a7707 100644 --- 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 index b6a025359..75ffd784e 100644 --- a/hugo/content/en/examples/_index.html +++ b/hugo/content/en/examples/_index.html @@ -100,11 +100,6 @@

    Examples

    Shortcodes

     @@ -147,6 +142,11 @@

    Examples

    Spinner
    • +
  • + + Spotlight + +
  • Step diff --git a/hugo/content/en/examples/shortcodes/spotlight/index.md b/hugo/content/en/examples/shortcodes/spotlight/index.md index 7aea275b4..34cea2660 100644 --- 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 ``` -{{}} +{{}} ### 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 index dda9e47a5..3b4f508a6 100644 --- 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" -}} -
    +{{ if $theme }} + {{ $cssClass = print $cssClass " spotlight--" $theme }} +{{ end }} + +{{ if $modifier }} + {{ $cssClass = print $cssClass " spotlight--" $modifier }} +{{ end }} + +
    {{ with $title }}

    {{ . }}

    {{ end }}