sass-site/source/assets/css/components/_link-header.scss
Natalie Weizenbaum 7cc3b1b375 Automatically add nice header linking behavior (#280)
* Make link headers look and work more like GitHub's

* Automatically generate links for all headers

* Flash headers when they're selected

* update readme
2019-03-04 15:16:52 -06:00

43 lines
635 B
SCSS

h1, h2, h3, h4, h5, h6 {
a.anchor {
display: block;
float: left;
vertical-align: middle;
margin: {
left: -1.5rem;
top: -3px;
}
width: 1.5rem;
background: none;
border: 0;
&::after {
visibility: hidden;
font: {
size: 1rem;
weight: normal;
}
content: "\1F517";
}
}
&:hover a.anchor::after {
visibility: visible;
}
&:target {
animation-name: highlight-header;
animation-duration: 5s;
}
}
@keyframes highlight-header {
from {
background-color: $sl-color--dawn-pink;
}
to {
background-color: unset;
}
}