diff --git a/src/lib/components/LabCard.svelte b/src/lib/components/LabCard.svelte index 9acfe46..df43118 100644 --- a/src/lib/components/LabCard.svelte +++ b/src/lib/components/LabCard.svelte @@ -40,13 +40,16 @@ {#if isClickable} - window.location.href = projectUrl} + on:keydown={(e) => e.key === 'Enter' && (window.location.href = projectUrl)} + role="button" + tabindex="0" style:transform >
@@ -62,7 +65,7 @@ target="_blank" rel="noopener noreferrer" iconPosition="right" - onclick={(e) => e.stopPropagation()} + on:click={(e) => e.stopPropagation()} > Visit site Password Protected
{/if} - + {:else}
@@ -187,14 +190,12 @@ transform-style: preserve-3d; will-change: transform; - // Prevent overflow issues with 3D transforms - -webkit-mask-image: -webkit-radial-gradient(white, black); - mask-image: radial-gradient(white, black); + // Remove mask-image to allow shadows to render properly &:hover { box-shadow: - 0 10px 30px rgba(0, 0, 0, 0.12), - 0 2px 10px rgba(0, 0, 0, 0.08); + 0 10px 30px rgba(0, 0, 0, 0.1), + 0 1px 8px rgba(0, 0, 0, 0.06); .project-title { color: $red-60; @@ -203,6 +204,15 @@ &.clickable { cursor: pointer; + + &:focus { + outline: 2px solid $red-60; + outline-offset: 2px; + } + + &:focus:not(:focus-visible) { + outline: none; + } } @include breakpoint('phone') { diff --git a/src/lib/components/Mention.svelte b/src/lib/components/Mention.svelte index b10176f..62c5dd2 100644 --- a/src/lib/components/Mention.svelte +++ b/src/lib/components/Mention.svelte @@ -1,9 +1,19 @@ -