feat: accessibility improvements, minor changes

This commit is contained in:
gitlimes 2023-09-17 11:16:08 +02:00
parent df6aa3e825
commit 6c7eb24e95
No known key found for this signature in database
GPG Key ID: 91BBFE7959F81F68
17 changed files with 3942 additions and 3918 deletions

7757
package-lock.json generated Normal file → Executable file

File diff suppressed because it is too large Load Diff

58
package.json Normal file → Executable file
View File

@ -1,29 +1,33 @@
{
"name": "pretendo",
"version": "2.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"chalk": "^5.3.0",
"classnames": "^2.3.2",
"eslint": "^8.46.0",
"fs-extra": "^11.1.1",
"lodash.merge": "^4.6.2",
"next": "^13.4.19",
"phosphor-react": "^1.4.1",
"phosphor-react-sc": "^1.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"server-only": "^0.0.1",
"sharp": "^0.32.4"
},
"devDependencies": {
"eslint-config-next": "^13.4.19"
}
"name": "pretendo",
"version": "2.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"chalk": "^5.3.0",
"classnames": "^2.3.2",
"eslint": "^8.46.0",
"fs-extra": "^11.1.1",
"lodash.merge": "^4.6.2",
"next": "^13.4.19",
"phosphor-react": "^1.4.1",
"phosphor-react-sc": "^1.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"server-only": "^0.0.1",
"sharp": "^0.32.5"
},
"devDependencies": {
"eslint-config-next": "^13.4.19"
},
"browserslist": [
"defaults",
"dead"
]
}

BIN
public/assets/images/showcase/juxt.png Normal file → Executable file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 678 KiB

After

Width:  |  Height:  |  Size: 783 KiB

BIN
public/assets/images/showcase/network.png Normal file → Executable file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 142 KiB

BIN
public/assets/images/showcase/pcmouse.png Normal file → Executable file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 112 KiB

BIN
public/assets/images/showcase/wiiuchat.png Normal file → Executable file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

6
src/app/layout.js Normal file → Executable file
View File

@ -1,5 +1,6 @@
import '../styles/globals.css';
import Footer from '@/components/Footer/Footer';
import Script from 'next/script';
import { Poppins } from 'next/font/google';
const poppins = Poppins({
@ -15,6 +16,11 @@ export default function RootLayout({ children }) {
<body>
{children}
<Footer />
<Script
strategy='lazyOnLoad'
src="https://static.cloudflareinsights.com/beacon.min.js"
data-cf-beacon='{"token": "ea6695987d664a7f90874c9c0dee9385"}'
/>
</body>
</html>
);

View File

@ -118,6 +118,7 @@ export default function Home(ctx) {
pic={el.picture}
link={el.github}
key={i}
tabIndex={(Math.round(ar.length / 4) >= i) - 1}
/>
);
});
@ -139,6 +140,7 @@ export default function Home(ctx) {
pic={el.picture}
link={el.github}
key={i}
tabIndex={(Math.round(ar.length / 4) >= i) - 1}
/>
);
});

9
src/components/Bandwidth/Bandwidth.module.css Normal file → Executable file
View File

@ -47,8 +47,11 @@
.bandwidth {
cursor: pointer;
transform: rotate(0);
transition: transform 250ms ease-in-out;
transition: transform 150ms ease-in-out;
}
.bandwidth:hover {
transform: translateY(-4px) rotate(15deg);
}
.active .bandwidth {
@ -56,7 +59,7 @@
}
.active .bandwidth.jump {
animation: jump 250ms ease-in-out;
animation: jump 200ms ease-in-out;
}
@keyframes jump {
0% {

View File

@ -50,7 +50,7 @@ export default function Button(ctx) {
};
return href ? (
<Link href={href} target={target}>
<Link href={href} target={target} tabIndex="-1">
<BtnEl />
</Link>
) : (

4
src/components/CoolHover/CoolHover.js Normal file → Executable file
View File

@ -12,11 +12,11 @@ import classNames from 'classnames';
* @param {string} radius - The radius of the hover effect.
*
* @example
* <a href="/pizza">
* <Link href="/pizza">
* <CoolHover hoverColor="var(--accent-shade-3)" bgColor="var(--accent-shade-2)">
* Click for Pizza
* </CoolHover>
* </a>
* </Link>
*
*/

View File

@ -24,7 +24,12 @@ export default function Footer(ctx) {
<div>
<p>
Copyright ©{' '}
<Link href={`https://wikipedia.org/wiki/${year}`} target="_blank" className={styles.link}>
<Link
href={`https://wikipedia.org/wiki/${year}`}
target="_blank"
className={styles.link}
tabIndex="-1"
>
{year}
</Link>
</p>

2
src/components/Footer/Footer.module.css Normal file → Executable file
View File

@ -131,7 +131,7 @@
}
.footer {
gap: 1rem;
gap: 1.5rem;
}
.footer > div {

6
src/components/Hero/Hero.js Normal file → Executable file
View File

@ -26,7 +26,7 @@ export default function Hero() {
<div>
<Button icon href="https://discord.gg/pretendo" target="_blank" aria-label="Discord server">
<DiscordLogo size={32} weight="fill" />
<DiscordLogo size={32} weight="fill" alt="" />
</Button>
<Button
@ -35,11 +35,11 @@ export default function Hero() {
target="_blank"
aria-label="GitHub organization"
>
<GithubLogo size={32} weight="fill" />
<GithubLogo size={32} weight="fill" alt="" />
</Button>
<Button icon href="/account/upgrade" target="_blank" aria-label="Upgrade page">
<Heart size={32} weight="fill" />
<Heart size={32} weight="fill" alt="" />
</Button>
</div>
</div>

2
src/components/Hero/Hero.module.css Normal file → Executable file
View File

@ -50,6 +50,8 @@
.images .lightCircle .n2ds {
transform: translateX(-7.5%);
width: 540px;
height: auto;
}
.images svg {

View File

@ -35,7 +35,7 @@ export default function Logo(ctx) {
{text && (
<text
fill="#fff"
fontFamily="Poppins-Bold, Poppins"
fontFamily="var(--font-poppins), Poppins-Bold, Poppins, Inter, Arial, sans-serif"
fontSize="17"
fontWeight="700"
x="100%"

View File

@ -22,7 +22,7 @@ import classNames from 'classnames';
*/
export default function TeamCard(ctx) {
const { name, caption, pic, link, compact, special, className } = ctx;
const { name, caption, pic, link, compact, special, className, tabIndex } = ctx;
return (
<Link
@ -32,6 +32,7 @@ export default function TeamCard(ctx) {
{ [styles.compact]: compact, [styles.special]: Boolean(special) },
className
)}
tabIndex={tabIndex}
>
<div className={styles.imageWrapper}>
<ImageFix src={pic} width={110} height={110} alt="" className={styles.image} />