diff --git a/addon/styles/addon.css b/addon/styles/addon.css index eb1a76df..27ae2f2c 100644 --- a/addon/styles/addon.css +++ b/addon/styles/addon.css @@ -14,6 +14,7 @@ @import 'icon.css'; @import 'sidebar-container.css'; @import 'well.css'; +@import 'header-anchor'; /* Helpers */ @import 'helpers/index.css'; diff --git a/addon/styles/header-anchor.css b/addon/styles/header-anchor.css new file mode 100644 index 00000000..b9bca7a9 --- /dev/null +++ b/addon/styles/header-anchor.css @@ -0,0 +1,38 @@ +h1 > a, +h2 > a, +h3 > a, +h4 > a, +h5 > a, +h6 > a { + margin-left: 12px; + vertical-align: middle; +} + +main h1 > a:link, +main h2 > a:link, +main h3 > a:link, +main h4 > a:link, +main h5 > a:link, +main h6 > a:link { + background: none; +} + +h1 > a > svg, +h2 > a > svg, +h3 > a > svg, +h4 > a > svg, +h5 > a > svg, +h6 > a > svg { + height: 18px; + fill: var(--color-gray-600); + transform: rotate(45deg); +} + +h1 > a:hover > svg, +h2 > a:hover > svg, +h3 > a:hover > svg, +h4 > a:hover > svg, +h5 > a:hover > svg, +h6 > a:hover > svg { + fill: var(--color-brand); +} diff --git a/docs/concepts/header-anchor.md b/docs/concepts/header-anchor.md new file mode 100644 index 00000000..3a7894df --- /dev/null +++ b/docs/concepts/header-anchor.md @@ -0,0 +1,15 @@ +# Header anchor + +In our documentation we want to be able to link to specific headers, that's why we introduce this pattern. The `` includes the `` that includes the link ``. This removes the link underline default styling from all ``s wrapped in ``-elements and rotates all `svg`s by 45 degrees if they are wrapped in both. + +```html +

+ Multiple Dynamic Segments + + + + + +

+```