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

further simplify heading links

Browse Source
This commit is contained in:
Joseph Montanaro 2023-12-19 07:51:20 -08:00
parent 9d3a59e554
commit b5ca20d739
1 changed files with 11 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/lib/Heading.svelte
View File

@ -11,7 +11,8 @@
position: relative; position: relative;
} }
.before { /* shift the anchor link to hang off the left side of the content when there's room */
.anchor-wrapper {
/* slightly overlap the span with the heading so that it doesn't /* slightly overlap the span with the heading so that it doesn't
lose its hover state as the cursor moves between them */ lose its hover state as the cursor moves between them */
position: absolute; position: absolute;
@ -19,15 +20,7 @@
left: -1.25em; left: -1.25em;
@media(max-width: 58rem) { @media(max-width: 58rem) {
display: none; position: revert;
}
}
.after {
display: none;
@media(max-width: 58rem) {
display: revert;
} }
} }
@ -46,7 +39,7 @@
} }
/* emphasize anchor link when heading is hovered or when clicked (the latter for mobile) */ /* emphasize anchor link when heading is hovered or when clicked (the latter for mobile) */
.h:hover a, .before:hover a, .h a:active { .h:hover a, .anchor-wrapper:hover a, .h a:active {
color: var(--accent-color); color: var(--accent-color);
opacity: 100%; opacity: 100%;
} }
@ -61,22 +54,16 @@
</style> </style>
<svelte:element this={tag} {id} class="h"> <svelte:element this={tag} {id} class="h">
<span class="before">
<a href="#{id}">
<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">
<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>
</a>
</span>
<span> <span>
<slot></slot> <slot></slot>
</span> </span>
<!-- Icon from https://heroicons.com/ --> <!-- Icon from https://heroicons.com/ -->
<a href="#{id}" class="after"> <span class="anchor-wrapper">
<a href="#{id}" >
<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">
<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" /> <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> </svg>
</a> </a>
</span>
</svelte:element> </svelte:element>