Footer tooltips (#3) · samanthanguyen.me/www@ef5fa6e

+56 -15

2 changed files

expand all

src

lib

Quote.svelte

layout

Footer.svelte

+1 -1

src/lib/Quote.svelte

··· 5 5 <p> 6 6 {'"'}{@render children()}{'"'} 7 7 </p> 8 - <cite class="text-right">—{author}</cite> 8 + <cite class="text-right">— {author}</cite> 9 9 </blockquote>

+55 -14

src/lib/layout/Footer.svelte

··· 1 1 <script lang="ts"> 2 2 import ExternalLink from '$lib/ExternalLink.svelte' 3 - import { IconArrowUpRight } from '@tabler/icons-svelte' 4 3 5 4 const socials = [ 6 5 { ··· 28 27 ]}> 29 28 <span class={[ 30 29 'flex flex-row gap-4 lg:gap-6 justify-end', 31 - '', 32 30 ]}> 33 31 {#each socials as link} 34 - <ExternalLink 35 - href={link.href} 36 - title={link.title} 37 - class={[ 38 - 'flex flex-row items-center gap-0.5 lg:gap-1', 39 - 'text-xs lg:text-sm font-mono', 40 - 'hover:bg-zinc-900 hover:text-zinc-100', 41 - 'dark:hover:bg-zinc-100 dark:hover:text-zinc-900', 42 - ]} 43 - > 44 - {link.text}<IconArrowUpRight size={20} /> 45 - </ExternalLink> 32 + <span> 33 + <ExternalLink 34 + href={link.href} 35 + id={`socials-anchor-${link.text.toLowerCase()}`} 36 + class={[ 37 + 'socials-anchor', 38 + 'flex flex-row items-center gap-1 lg:gap-2', 39 + 'text-xs lg:text-sm font-mono', 40 + 'hover:bg-zinc-900 hover:text-zinc-100', 41 + 'dark:hover:bg-zinc-100 dark:hover:text-zinc-900' 42 + // 'hover:bg-blue-600 hover:text-zinc-100', 43 + // 'dark:hover:bg-zinc-100 dark:hover:text-zinc-900', 44 + ]} 45 + > 46 + {`${link.text} \u{2197}`} 47 + </ExternalLink> 48 + <span 49 + class={[ 50 + 'socials-target hidden absolute p-2 mt-1', 51 + 'bg-white border-2 border-black', 52 + 'dark:bg-zinc-900 dark:border-zinc-100', 53 + 'text-xs', 54 + 'text-zinc-900 dark:text-zinc-100', 55 + 'transition-all' 56 + ]} 57 + id={`socials-target-${link.text.toLowerCase()}`} 58 + > 59 + {`\u{00ab} ${link.title} \u{00bb}`} 60 + </span> 61 + </span> 46 62 {/each} 47 63 </span> 48 64 </footer> 65 + 66 + <style> 67 + .socials-target { 68 + position-area: span-bottom start; 69 + position-visibility: no-overflow; 70 + box-shadow: 4px 4px #000; 71 + } 72 + @media (prefers-color-scheme: dark) { 73 + .socials-target { 74 + box-shadow: 4px 4px #fff; 75 + } 76 + } 77 + 78 + :global(#socials-anchor-email) { anchor-name: --email-anchor; } 79 + :global(#socials-target-email) { position-anchor: --email-anchor; } 80 + :global(#socials-anchor-bluesky) { anchor-name: --bluesky-anchor; } 81 + :global(#socials-target-bluesky) { position-anchor: --bluesky-anchor; } 82 + :global(#socials-anchor-github) { anchor-name: --github-anchor; } 83 + :global(#socials-target-github) { position-anchor: --github-anchor; } 84 + @media (hover: hover) { 85 + :global(.socials-anchor:hover ~ .socials-target) { 86 + display: block; 87 + } 88 + } 89 + </style>

Configure Feed

Configure Feed