Skip to content

Commit

Permalink
Move header anchor styling into styleguide
Browse files Browse the repository at this point in the history
  • Loading branch information
MinThaMie committed Oct 20, 2023
1 parent d7ba17a commit dc33a0a
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 0 deletions.
1 change: 1 addition & 0 deletions addon/styles/addon.css
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
@import 'icon.css';
@import 'sidebar-container.css';
@import 'well.css';
@import 'header-anchor';

/* Helpers */
@import 'helpers/index.css';
Expand Down
38 changes: 38 additions & 0 deletions addon/styles/header-anchor.css
Original file line number Diff line number Diff line change
@@ -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);
}
15 changes: 15 additions & 0 deletions docs/concepts/header-anchor.md
Original file line number Diff line number Diff line change
@@ -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 `<h>` includes the `<a>` that includes the link `<svg>`. This removes the link underline default styling from all `<a>`s wrapped in `<h>`-elements and rotates all `svg`s by 45 degrees if they are wrapped in both.

```html
<h2 id="toc_multiple-dynamic-segments">
Multiple Dynamic Segments
<a href="#multiple-dynamic-segments">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path>
</svg>
</a>
</h2>
```

0 comments on commit dc33a0a

Please sign in to comment.