diff options
author | Kristóf Marussy <kristof@marussy.com> | 2024-08-18 20:05:04 +0200 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2024-08-18 20:43:53 +0200 |
commit | bd8cef8e6ad283fff82e25efd7a71851b3bcd2d3 (patch) | |
tree | 92f567fd2cc79115364214b29f47c61aa3ff027b /src | |
parent | Blog post readability (diff) | |
download | blog-bd8cef8e6ad283fff82e25efd7a71851b3bcd2d3.tar.gz blog-bd8cef8e6ad283fff82e25efd7a71851b3bcd2d3.tar.zst blog-bd8cef8e6ad283fff82e25efd7a71851b3bcd2d3.zip |
Improve landing page accessibility
Diffstat (limited to 'src')
-rw-r--r-- | src/components/landing/Section.tsx | 4 | ||||
-rw-r--r-- | src/components/landing/Subtitle.tsx | 5 | ||||
-rw-r--r-- | src/components/landing/sections/Contact.module.css | 7 | ||||
-rw-r--r-- | src/components/landing/sections/Contact.tsx | 5 | ||||
-rw-r--r-- | src/components/landing/sections/Hero.tsx | 3 | ||||
-rw-r--r-- | src/components/landing/sections/Software.module.css | 25 | ||||
-rw-r--r-- | src/components/landing/sections/Software.tsx | 9 |
7 files changed, 42 insertions, 16 deletions
diff --git a/src/components/landing/Section.tsx b/src/components/landing/Section.tsx index caec6b6..c51b5da 100644 --- a/src/components/landing/Section.tsx +++ b/src/components/landing/Section.tsx | |||
@@ -30,7 +30,3 @@ export default function Section({ | |||
30 | </section> | 30 | </section> |
31 | ); | 31 | ); |
32 | } | 32 | } |
33 | |||
34 | Section.defaultProps = { | ||
35 | children: undefined, | ||
36 | }; | ||
diff --git a/src/components/landing/Subtitle.tsx b/src/components/landing/Subtitle.tsx index 862ea3c..24df29d 100644 --- a/src/components/landing/Subtitle.tsx +++ b/src/components/landing/Subtitle.tsx | |||
@@ -22,8 +22,3 @@ export default function Subtitle({ | |||
22 | </h3> | 22 | </h3> |
23 | ); | 23 | ); |
24 | } | 24 | } |
25 | |||
26 | Subtitle.defaultProps = { | ||
27 | icon: undefined, | ||
28 | children: undefined, | ||
29 | }; | ||
diff --git a/src/components/landing/sections/Contact.module.css b/src/components/landing/sections/Contact.module.css index 2eb9f06..7b64a5e 100644 --- a/src/components/landing/sections/Contact.module.css +++ b/src/components/landing/sections/Contact.module.css | |||
@@ -118,6 +118,7 @@ | |||
118 | } | 118 | } |
119 | 119 | ||
120 | .contact__action { | 120 | .contact__action { |
121 | display: block; | ||
121 | position: relative; | 122 | position: relative; |
122 | --ifm-link-color: var(--marussy-contact-muted-color); | 123 | --ifm-link-color: var(--marussy-contact-muted-color); |
123 | } | 124 | } |
@@ -173,3 +174,9 @@ | |||
173 | .contacts:has(.contact--address:focus-within) .photo { | 174 | .contacts:has(.contact--address:focus-within) .photo { |
174 | transform: scale(140%); | 175 | transform: scale(140%); |
175 | } | 176 | } |
177 | |||
178 | @media (prefers-reduced-motion: reduce) { | ||
179 | .photo { | ||
180 | transform: none !important; | ||
181 | } | ||
182 | } | ||
diff --git a/src/components/landing/sections/Contact.tsx b/src/components/landing/sections/Contact.tsx index 94da73a..f9eb56d 100644 --- a/src/components/landing/sections/Contact.tsx +++ b/src/components/landing/sections/Contact.tsx | |||
@@ -198,14 +198,13 @@ export default function Contact() { | |||
198 | </Link> | 198 | </Link> |
199 | </p> | 199 | </p> |
200 | <p className={styles.contact__description}> | 200 | <p className={styles.contact__description}> |
201 | On the{' '} | ||
202 | <Link | 201 | <Link |
203 | to="https://fediverse.info" | 202 | to="https://fediverse.info" |
204 | className={styles.contact__action} | 203 | className={styles.contact__action} |
205 | > | 204 | > |
206 | Fediverse | 205 | On the Fediverse, a diverse community of interconnected |
206 | platforms | ||
207 | </Link> | 207 | </Link> |
208 | , a diverse community of interconnected platforms | ||
209 | </p> | 208 | </p> |
210 | </div> | 209 | </div> |
211 | </div> | 210 | </div> |
diff --git a/src/components/landing/sections/Hero.tsx b/src/components/landing/sections/Hero.tsx index 3087dd3..10026a1 100644 --- a/src/components/landing/sections/Hero.tsx +++ b/src/components/landing/sections/Hero.tsx | |||
@@ -41,7 +41,8 @@ export default function Hero() { | |||
41 | width={avatar.width} | 41 | width={avatar.width} |
42 | height={avatar.height} | 42 | height={avatar.height} |
43 | sizes="(min-width: 1384px) 298px, (min-width: 996px) calc(25vw - 48px), (min-width: 300px) 298px, calc(100vw - 32px)" | 43 | sizes="(min-width: 1384px) 298px, (min-width: 996px) calc(25vw - 48px), (min-width: 300px) 298px, calc(100vw - 32px)" |
44 | fetchPriority="high" | 44 | // @ts-expect-error See https://github.com/vercel/next.js/pull/65235#issue-2273613138 |
45 | fetchpriority="high" | ||
45 | alt="My photo" | 46 | alt="My photo" |
46 | className={styles.avatar__image} | 47 | className={styles.avatar__image} |
47 | /> | 48 | /> |
diff --git a/src/components/landing/sections/Software.module.css b/src/components/landing/sections/Software.module.css index fddc727..5287bc8 100644 --- a/src/components/landing/sections/Software.module.css +++ b/src/components/landing/sections/Software.module.css | |||
@@ -374,3 +374,28 @@ | |||
374 | height: 3rem; | 374 | height: 3rem; |
375 | } | 375 | } |
376 | } | 376 | } |
377 | |||
378 | @media (prefers-reduced-motion: reduce) { | ||
379 | .software { | ||
380 | box-shadow: none !important; | ||
381 | } | ||
382 | |||
383 | .software--refinery { | ||
384 | box-shadow: var(--ifm-global-shadow-md) !important; | ||
385 | } | ||
386 | |||
387 | .refinery__background { | ||
388 | transform: none !important; | ||
389 | } | ||
390 | |||
391 | .software--screenshot { | ||
392 | z-index: 0 !important; | ||
393 | transform: none !important; | ||
394 | } | ||
395 | |||
396 | .overlay--screenshot { | ||
397 | padding: 1rem 2rem 2rem 2rem; | ||
398 | font-size: 1rem; | ||
399 | transform: none !important; | ||
400 | } | ||
401 | } | ||
diff --git a/src/components/landing/sections/Software.tsx b/src/components/landing/sections/Software.tsx index c44a6ad..34178cc 100644 --- a/src/components/landing/sections/Software.tsx +++ b/src/components/landing/sections/Software.tsx | |||
@@ -30,8 +30,8 @@ function ScreenshotImage() { | |||
30 | // Force re-render in browser. | 30 | // Force re-render in browser. |
31 | // https://github.com/facebook/docusaurus/blob/e012e0315862b2ca02cad40c58d11d31c319ff75/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx#L32-L36 | 31 | // https://github.com/facebook/docusaurus/blob/e012e0315862b2ca02cad40c58d11d31c319ff75/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx#L32-L36 |
32 | const isBrowser = useIsBrowser(); | 32 | const isBrowser = useIsBrowser(); |
33 | const { isDarkTheme } = useColorMode(); | 33 | const { colorMode } = useColorMode(); |
34 | const refineryScreenshot = isDarkTheme | 34 | const refineryScreenshot = colorMode === 'dark' |
35 | ? refineryScreenshotLight | 35 | ? refineryScreenshotLight |
36 | : refineryScreenshotDark; | 36 | : refineryScreenshotDark; |
37 | 37 | ||
@@ -190,7 +190,10 @@ export default function Software() { | |||
190 | )} | 190 | )} |
191 | > | 191 | > |
192 | <div className={styles.ferdium__icon}> | 192 | <div className={styles.ferdium__icon}> |
193 | <FerdiumLogo className={styles.ferdium__logo} /> | 193 | <FerdiumLogo |
194 | className={styles.ferdium__logo} | ||
195 | aria-hidden="true" | ||
196 | /> | ||
194 | </div> | 197 | </div> |
195 | <div | 198 | <div |
196 | className={clsx(styles.ferdium__content, styles.description)} | 199 | className={clsx(styles.ferdium__content, styles.description)} |