sass-site/source/assets/sass/components/_link-header.scss
Jonny Gerig Meyer c0075a337a
Merge branch 'main' into syntax-highlighting
* main:
  Add docs on templates
  lint
  revert to shorthand nesting padding for now
  Quick negative css variables over using calc repeatedly
  Use {% render %} instead of deprecated {% include %}
  Do not auto-typogr for markdown
  Add alerts.yml data file
  More consistent use of typogr for all contents
2023-02-03 13:35:26 -05:00

81 lines
1.0 KiB
SCSS

@use '../visual-design/theme';
h1,
h2,
h3,
h4,
h5,
h6,
.signature {
a.anchor {
display: block;
float: left;
vertical-align: middle;
margin-top: -3px;
width: var(--gutter-sesqui);
background: none;
border: 0;
&::after {
visibility: hidden;
font: {
size: 1rem;
weight: normal;
}
content: '\1F517';
}
}
&:hover a.anchor::after {
visibility: visible;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
a.anchor {
margin-left: var(--gutter-sesqui-negative);
}
&:target {
animation-name: highlight-header;
animation-duration: 5s;
}
}
@keyframes highlight-header {
from {
background-color: theme.$sl-color--dawn-pink;
}
to {
background-color: unset;
}
}
.signature {
a.anchor {
margin-left: -2.5rem;
}
.sl-c-callout--function:target & {
animation-name: highlight-signature;
animation-duration: 5s;
}
}
@keyframes highlight-signature {
from {
background-color: theme.$sl-color--dawn-pink;
}
to {
background-color: #f8f8f8;
}
}