feat: accessibility improvements, minor changes
7757
package-lock.json
generated
Normal file → Executable file
58
package.json
Normal file → Executable 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
|
Before Width: | Height: | Size: 678 KiB After Width: | Height: | Size: 783 KiB |
BIN
public/assets/images/showcase/network.png
Normal file → Executable file
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 142 KiB |
BIN
public/assets/images/showcase/pcmouse.png
Normal file → Executable file
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 112 KiB |
BIN
public/assets/images/showcase/wiiuchat.png
Normal file → Executable file
|
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 1.5 MiB |
6
src/app/layout.js
Normal file → Executable 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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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
|
|
@ -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% {
|
||||
|
|
|
|||
|
|
@ -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
|
|
@ -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>
|
||||
*
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
|
@ -131,7 +131,7 @@
|
|||
}
|
||||
|
||||
.footer {
|
||||
gap: 1rem;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.footer > div {
|
||||
|
|
|
|||
6
src/components/Hero/Hero.js
Normal file → Executable 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
|
|
@ -50,6 +50,8 @@
|
|||
|
||||
.images .lightCircle .n2ds {
|
||||
transform: translateX(-7.5%);
|
||||
width: 540px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.images svg {
|
||||
|
|
|
|||
|
|
@ -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%"
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
|
|
|
|||