kogakure/website-astro-stefanimhoff.de
1
0
Fork 0
mirror of https://github.com/kogakure/website-astro-stefanimhoff.de.git synced 2026-02-03 20:15:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add focus states

Browse Source
This commit is contained in:
Stefan Imhoff
2023-06-14 17:34:30 +02:00
parent 7f2470157d
commit 6914009ecf
9 changed files with 71 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/DownloadLink.astro
View File

@@ -17,7 +17,7 @@ const { href, text, ...props } = Astro.props;
<Sprite
name="ri:download-line"
aria-hidden="true"
class="h-icon w-icon group-hover:translate-y-1 transition-transform duration-500 ease-in-out"
class="h-icon w-icon transition-transform duration-500 ease-in-out group-hover:translate-y-1 group-focus:translate-y-1"
/>
</span>
</TextLink>

2
src/components/EmailLink.astro
View File

@@ -19,7 +19,7 @@ const { text = 'Email', icon = true, ...props } = Astro.props;
<Sprite
name="ri:mail-send-line"
aria-hidden="true"
class="h-icon w-icon transition-transform duration-500 ease-in-out group-hover:translate-x-1"
class="h-icon w-icon transition-transform duration-500 ease-in-out group-hover:translate-x-1 group-focus:translate-x-1"
/>
</span>
)

55
src/components/JournalList.astro
View File

@@ -20,32 +20,39 @@ const { entries } = Astro.props;
{
entries.map(({ slug, data }) => (
<li class="journal-card image-shadow group" {...animation}>
<Link title={data.title} href={`/${slug}/`} class="relative block h-full w-full">
<div class="absolute z-10 flex h-full w-full flex-col items-center justify-center p-10 text-center leading-tight text-white">
<Link
class="journal-card-link group relative block h-full w-full group-hover:scale-100"
href={`/${slug}/`}
tabIndex={0}
title={data.title}
>
<div class="absolute z-10 h-full w-full">
{data.cover ? (
<>
{data.cover.endsWith('.svg') ? (
<img src={data.cover} alt={data.title} />
) : (
<Picture
alt={data.title}
aspect={0.6}
breakpoints={[300, 500, 1000]}
format={['avif']}
src={data.cover}
/>
)}
</>
) : (
<div
class="h-full w-full bg-gray-800 transition duration-300 ease-in-out group-hover:brightness-[90%] group-focus:brightness-[90%] dark:brightness-[50%] dark:group-hover:brightness-[100%] dark:group-focus:brightness-[100%]"
style={`background-image: linear-gradient(to bottom left, ${
pickTwoRandomColors()[0]
} 0%, ${pickTwoRandomColors()[1]} 100%)`}
/>
)}
</div>
<div class="absolute z-20 flex h-full w-full flex-col items-center justify-center p-10 text-center leading-tight text-white">
<Subsubheadline class="!m-0 leading-tight">{data.title}</Subsubheadline>
</div>
{data.cover ? (
<>
{data.cover.endsWith('.svg') ? (
<img src={data.cover} alt={data.title} />
) : (
<Picture
alt={data.title}
aspect={0.6}
breakpoints={[300, 500, 1000]}
format={['avif']}
src={data.cover}
/>
)}
</>
) : (
<div
class="h-full w-full scale-105 bg-gray-800 blur-sm brightness-[80%] filter transition duration-300 ease-in-out group-hover:brightness-[90%] dark:brightness-[50%] dark:group-hover:brightness-[100%]"
style={`background-image: linear-gradient(to bottom left, ${
pickTwoRandomColors()[0]
} 0%, ${pickTwoRandomColors()[1]} 100%)`}
/>
)}
</Link>
</li>
))

2
src/components/MainNavigation.astro
View File

@@ -14,7 +14,7 @@ import navigation from '../data/navigation.json';
navigation.map(({ title, url }) => (
<li class="mie-[10px] xs:mie-[15px]">
<Link
class="text-3 font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20"
class="text-3 font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 focus:underline focus:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20 dark:focus:decoration-shibui-100/20"
href={url}
>
{title}

2
src/components/MoreLink.astro
View File

@@ -17,7 +17,7 @@ const { href, text, ...props } = Astro.props;
<Sprite
name="ri:arrow-right-line"
aria-hidden="true"
class="h-icon w-icon group-hover:translate-x-1 transition-transform duration-500 ease-in-out"
class="h-icon w-icon transition-transform duration-500 ease-in-out group-hover:translate-x-1 group-focus:translate-x-1"
/>
</span>
</TextLink>

2
src/components/RSSLink.astro
View File

@@ -9,7 +9,7 @@ import { Link, Subsubheadline } from '.';
<p>
<Sprite name="ri:rss-fill" class="inline h-icon w-icon" />
<Link
class="font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20"
class="font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 focus:underline focus:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20 dark:focus:decoration-shibui-100/20"
href="/rss.xml"
target="_blank"
>

4
src/components/Subnavigation.astro
View File

@@ -11,7 +11,7 @@ import { Link } from '.';
<li>
<Link
href={url}
class="font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20"
class="font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 focus:underline focus:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20 dark:focus:decoration-shibui-100/20"
>
{title}
</Link>
@@ -25,7 +25,7 @@ import { Link } from '.';
<li>
<Link
href={url}
class="font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20"
class="font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 focus:underline focus:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20 dark:focus:decoration-shibui-100/20"
>
{title}
</Link>

2
src/components/Tag.tsx
View File

@@ -21,7 +21,7 @@ export const Tag: FunctionalComponent<Props> = ({
const classes = cx(
'capitalize border-3 relative inline-flex items-center justify-center rounded-25 border-2 border-shibui-350 bg-shibui-200 px-3 py-1 text-1 font-normal leading-none text-black mie-1 pbs-3 dark:border-shibui-750 dark:bg-shibui-950 dark:text-white min-w-[50px] print:hidden',
{
'!bg-shibui-500 !text-white hover:!bg-shibui-700 dark:!border-shibui-500 dark:!bg-shibui-700 hover:dark:!bg-shibui-400':
'!bg-shibui-500 !text-white hover:!bg-shibui-700 focus:!bg-shibui-700 dark:!border-shibui-500 dark:!bg-shibui-700 hover:dark:!bg-shibui-400 focus:dark:!bg-shibui-400':
href,
'active [&.active]:!border-black/25 !text-white [&.active]:!bg-accent': active,
},

44
src/styles/global.css
View File

@@ -163,6 +163,11 @@
img.image-no-border {
@apply border-0 bg-transparent shadow-none;
}
/** Swup */
main[tabindex='-1'] {
outline: none;
}
}
@layer components {
@@ -187,21 +192,36 @@
}
}
.journal-card {
@apply relative col-span-2 row-span-3 inline-block overflow-hidden rounded-4 border-1 border-black/25 hover:scale-105 dark:border-white/25 md:row-span-5;
.journal-card,
.journal-card-link {
@apply relative col-span-2 row-span-3 inline-block overflow-hidden rounded-4 border-1 border-black/25 outline outline-2 outline-offset-2 outline-transparent hover:scale-105 focus:scale-105 dark:border-white/25 md:row-span-5;
}
& img,
& picture {
@apply !h-full w-full object-cover;
}
.journal-card-link {
@apply relative block h-full w-full focus:scale-100;
}
& img {
@apply !h-full scale-100 blur-0 brightness-[80%] filter transition duration-300 ease-in-out dark:brightness-[50%];
}
.journal-card:focus-within {
@apply outline-current;
}
&:hover img {
@apply scale-105 blur-sm brightness-[100%] dark:brightness-[70%];
}
.journal-card img,
.journal-card picture,
.journal-card-link img,
.journal-card-link picture {
@apply !h-full w-full object-cover;
}
.journal-card img,
.journal-card-link img {
@apply !h-full scale-100 blur-0 brightness-[80%] filter transition duration-300 ease-in-out dark:brightness-[50%];
}
.journal-card:hover img,
.journal-card:focus img,
.journal-card-link:hover img,
.journal-card-link:focus img {
@apply scale-105 blur-sm brightness-[100%] dark:brightness-[70%];
}
/** YouTube Lite */