Help:Shortcode Dot

Do foo as described in {{< dot 1 >}} on the image.
See also {{< dot 42 >}} or {{< dot -2 >}}.

<!-- 

  Dot Shortcode
  =============

  Contributors: Michael Sasser
  Maintainer: Michael Sasser
  License: MIT
  Version: 1
  Child Shortcodes: None
  Parent Shortcodes: None

  LAYOUT: /layouts/shortcodes/dot.html
  STYLE:  /assets/scss/components/_shortcode_dot.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Dot.md

  Description
  -----------

  Display a red dot with a number in it.

  Changelog
  =========

  Version 1 (2022-08-30)
  ----------------------

  Initial release

-->
{{/* prettier-ignore-start */}}

{{ $number := (index .Params 0) }}


{{- with $number -}}
  {{- if or (gt . 99) (lt . -9) -}}
      {{ errorf "Failed to process dot shortcode: %s. The integer as parameter can only be between -9..99. The given integre was %d" $.Position $number }}
  {{- end -}}
  <span class="mp-dot{{- if or (gt . 9) (lt . 0) -}}-two{{- end -}}">
    {{- . -}}
  </span>
{{- else -}}
    {{ errorf "Failed to process dot shortcode: %s. Missing integer as parameter." $.Position }}
{{- end -}}
{{/* prettier-ignore-end */}}

/*

  Dot Shortcode
  =============

  Contributors: Michael Sasser
  Maintainer: Michael Sasser
  License: MIT
  Version: 1
  Child Shortcodes: None
  Parent Shortcodes: None

  LAYOUT: /layouts/shortcodes/dot.html
  STYLE:  /assets/scss/components/_shortcode_dot.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Dot.md

*/

.mp-dot-two,
.mp-dot {
  display: inline-block;
  border-radius: 50%;
  background: #f23c3c;

  /* font stays that color in dark and light mode */
  color: $body-color-dark;
  font-size: $font-size-base * 0.8;
  font-weight: 600;
  margin-left: 2px;
  margin-right: 2px;
}

.mp-dot-two::before,
.mp-dot-two::after,
.mp-dot::before,
.mp-dot::after {
  content: "\200B";
  display: inline-block;
  line-height: 0px;
  padding-top: 50%;
  padding-bottom: 50%;
}

.mp-dot::before {
  padding-left: 7px;
}

.mp-dot::after {
  padding-right: 7px;
}

.mp-dot-two::before {
  padding-left: 3px;
}

.mp-dot-two::after {
  padding-right: 3px;
}