jfmonty2/blog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

only show header anchors on hover

Browse Source
This commit is contained in:
Joseph Montanaro 2023-08-23 06:02:12 -07:00
parent 5817d94043
commit 25ce1b2d85
1 changed files with 24 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/lib/Heading.svelte
View File

@ -9,7 +9,8 @@
a { a {
/* Works better to set the size here for line-height reasons */ /* Works better to set the size here for line-height reasons */
font-size: 0.9em; font-size: 0.9em;
color: hsl(0, 0%, 50%); /* color: hsl(0, 0%, 25%); */
color: var(--accent-color);
} }
a:hover { a:hover {
@ -18,31 +19,45 @@
svg { svg {
width: 1em; width: 1em;
/* tiny tweak for optical alignment */
transform: translateY(2px);
} }
.before { .before {
display: none; display: none;
margin-right: 0.5rem; padding-right: 0.25em;
margin-left: calc(-1em - 0.5rem); margin-left: -1.25em;
} }
@media(min-width: 58rem) { @media(min-width: 58rem) {
.before { .before {
display: inline; display: inline;
opacity: 0;
transition: opacity 150ms;
} }
.h:hover .before, .before:hover {
opacity: 1;
}
.after { .after {
display: none; display: none;
} }
.h:hover {
cursor: default;
}
} }
</style> </style>
<svelte:element this={tag} {id} class="h"> <svelte:element this={tag} {id} class="h">
<a href="#{id}" class="before"> <span class="before">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <a href="#{id}">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" /> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
</svg></a><span> <!-- Looks ugly but necessary to get rid of spurious whitespace --> <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
<slot></slot> </svg></a></span><span> <!-- Looks ugly but necessary to get rid of spurious whitespace -->
</span> <slot></slot>
</span>
<!-- Icon from https://heroicons.com/ --> <!-- Icon from https://heroicons.com/ -->
<a href="#{id}" class="after"> <a href="#{id}" class="after">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">