WolfspyreLabs HugoSite Skeleton/ Snippits & Exemplars/ WolfspyreLabs Exemplars/ WolfspyreLabs Shortcodes/ Divider/ Divider I found this shortcode1 on making a fancypants divider. I’ve implemented it in our rig as the divider shortcode: {{<divider >}} Should work as expected: 🐾 You can’t leave good enough alone, Can you Wolf? #So, of course, I arted it up a bit. I added a handful of parameters that can be fed to the shortcode to enhance it’s awesomeness. Full parameter list # Click here to see the full parameter list ↕ glyph #String (Default: “🐾”) The emoji-like 🎨 icon that’s placed in the very middle of the space. 🎨 glyphColor #String (Default: #4f46e5 ) The color used for any text used in/for the glyph. ↔ glyphPosition #String (Default: 50%) The percentage from the left the glyph will align to. The shortcode actually subtracts 10px from the percentage: style=“position:absolute; left:calc( {{ $.Scratch.Get “glyphPosition” }} - 10px) …" 🧭 gradientDirection #String (Default: right) Supported options: left,right,top, top left, top right,bottom, bottom left, bottom right. This sets the linear gradient’s2 to ___ directive declared in the div element’s background spanColor #String (Default: #4f46e5 ) Sets the color(s) declared between two transparent endcaps to the linear-gradient. Can be a compound list of colors and percentages. spanFadeIn #String (Default: 1%) Sets the percentage that the transparent element on the gradient direction begins to blend with the span color. spanFadeOut #String (Default: 90%) Sets the percentage that the span color element on the gradient direction begins to transition to translucent. spanHeight #String (Default: 2px) The height of the span element. Examples {{< divider >}} 🐾 {{< divider glyph="❤️” >}} ❤️ {{< divider glyph="❤️" spanHeight=“30” >}} ❤️ {{< divider glyph="❤️" gradientDirection=“bottom” spanHeight=“50” >}} ❤️ {{< divider glyph="❤️" gradientDirection=“top right” spanColor="#055,transparent,#0A0,transparent,#550" spanHeight=“50” >}} ❤️ {{< divider glyph="❤️" gradientDirection=“top right” spanFadeIn=“20%” spanColor="#055,transparent,#0a0,transparent,#550,transparent,#055,transparent,#0a0,transparent,#550" spanHeight=“50” >}} ❤️ {{< divider glyph="❤️" gradientDirection=“top right” spanFadeIn=“20%” spanFadeOut=“80%” spanColor="#055,transparent,#0a0,transparent,#550,transparent,#055,transparent,#0a0,transparent,#550,transparent" spanHeight=“50” >}} ❤️ This is managed by the file layouts/shortcodes/divider.html https://livebook.manning.com/book/hugo-in-action/chapter-4/213 ↩︎ https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient ↩︎