CSS bug fixes and accessibility improvements #8

Merged
DorianNiemiecSVRJS merged 16 commits from main into main 2024-07-29 22:20:35 +02:00
22 changed files with 96 additions and 44 deletions

View file

@ -54,7 +54,7 @@ const LogsPage: React.FC = () => {
id="logs" id="logs"
className="wrapper container py-24 md:py-28 gap-4 flex flex-col" className="wrapper container py-24 md:py-28 gap-4 flex flex-col"
> >
<h1 className="text-3xl md:text-5xl font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400"> <h1 className="text-3xl md:text-5xl md:pb-2 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
Server LOGS Server LOGS
</h1> </h1>
<p className="text-lg text-muted-foreground text-start mb-4"> <p className="text-lg text-muted-foreground text-start mb-4">

View file

@ -12,7 +12,7 @@ const Contribute = () => {
id="tos" id="tos"
className="wrapper container py-24 md:py-28 gap-4 flex flex-col" className="wrapper container py-24 md:py-28 gap-4 flex flex-col"
> >
<h1 className="text-3xl md:text-5xl font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400"> <h1 className="text-3xl md:text-5xl md:pb-2 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
Contributing to SVR.JS Contributing to SVR.JS
</h1> </h1>
<p className="text-lg text-muted-foreground text-start mb-4"> <p className="text-lg text-muted-foreground text-start mb-4">

View file

@ -58,7 +58,7 @@ const DownloadPage: React.FC = () => {
id="download" id="download"
className="wrapper container py-24 md:py-28 gap-4 flex flex-col" className="wrapper container py-24 md:py-28 gap-4 flex flex-col"
> >
<h1 className="text-3xl md:text-5xl font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400"> <h1 className="text-3xl md:text-5xl md:pb-2 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
Downloads Downloads
</h1> </h1>
<p className="text-lg text-muted-foreground text-start mb-4"> <p className="text-lg text-muted-foreground text-start mb-4">

View file

@ -38,10 +38,10 @@ export default function PageLayout({
children: React.ReactNode; children: React.ReactNode;
}) { }) {
return ( return (
<main className="flex flex-col min-h-screen"> <div className="flex flex-col min-h-screen">
<Navbar /> <Navbar />
<div className="flex-grow flex-1">{children}</div> <div className="flex-grow flex-1 overflow-x-hidden">{children}</div>
<Footer /> <Footer />
</main> </div>
); );
} }

View file

@ -58,7 +58,7 @@ const ModsPage: React.FC = () => {
id="mods" id="mods"
className="wrapper container py-24 md:py-28 gap-4 flex flex-col" className="wrapper container py-24 md:py-28 gap-4 flex flex-col"
> >
<h1 className="text-3xl md:text-5xl font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400"> <h1 className="text-3xl md:text-5xl md:pb-2 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
SvrJS Mods SvrJS Mods
</h1> </h1>
<p className="text-lg text-muted-foreground text-start mb-4"> <p className="text-lg text-muted-foreground text-start mb-4">

View file

@ -14,7 +14,7 @@ const PrivacyPolicy = () => {
id="privacy-policy" id="privacy-policy"
className="wrapper container py-24 md:py-28 gap-4 flex flex-col" className="wrapper container py-24 md:py-28 gap-4 flex flex-col"
> >
<h1 className="text-3xl md:text-5xl font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400"> <h1 className="text-3xl md:text-5xl md:pb-2 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
Privacy Policy Privacy Policy
</h1> </h1>
<p className="text-lg text-muted-foreground text-start mb-4"> <p className="text-lg text-muted-foreground text-start mb-4">

View file

@ -12,7 +12,7 @@ const TermsOfService = () => {
id="tos" id="tos"
className="wrapper container py-24 md:py-28 gap-4 flex flex-col" className="wrapper container py-24 md:py-28 gap-4 flex flex-col"
> >
<h1 className="text-3xl md:text-5xl font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400"> <h1 className="text-3xl md:text-5xl md:pb-2 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
Terms and Conditions Terms and Conditions
</h1> </h1>
<p className="text-lg text-muted-foreground text-start mb-4"> <p className="text-lg text-muted-foreground text-start mb-4">

View file

@ -12,7 +12,7 @@ const Vulnerabilities = () => {
id="tos" id="tos"
className="wrapper container py-24 md:py-28 gap-4 flex flex-col" className="wrapper container py-24 md:py-28 gap-4 flex flex-col"
> >
<h1 className="text-3xl md:text-5xl font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400"> <h1 className="text-3xl md:text-5xl md:pb-2 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
SVR.JS Vulnerabilities SVR.JS Vulnerabilities
</h1> </h1>
<p className="text-lg text-muted-foreground text-start mb-4"> <p className="text-lg text-muted-foreground text-start mb-4">

View file

@ -6,12 +6,10 @@ html {
height: 100%; height: 100%;
width: 100%; width: 100%;
font-family: "Poppins", sans-serif; font-family: "Poppins", sans-serif;
overflow-x: hidden;
} }
body { body {
user-select: text; user-select: text;
overflow-x: clip;
} }
* { * {

View file

@ -30,7 +30,7 @@ export default function RootLayout({
disableTransitionOnChange disableTransitionOnChange
> >
<AuthProvider> <AuthProvider>
<main>{children}</main> {children}
<Toaster /> <Toaster />
</AuthProvider> </AuthProvider>
</ThemeProvider> </ThemeProvider>

View file

@ -12,7 +12,7 @@ const About = () => {
alt="aboutpicture" alt="aboutpicture"
width={300} width={300}
height={300} height={300}
className="w-[300px] object-contain rounded-lg" className="w-[300px] object-contain rounded-lg flex-shrink-0"
/> />
<div className="flex flex-col justify-between"> <div className="flex flex-col justify-between">

View file

@ -10,10 +10,10 @@ import {
const Faq = () => { const Faq = () => {
return ( return (
<section id="faq" className="wrapper container py-24 md:py-28"> <section id="faq" className="wrapper container py-24 md:py-28">
<h2 className="text-3xl md:text-5xl font-bold mb-4 text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400"> <h2 className="text-3xl md:text-5xl font-bold mb-4 md:mb-2 md:pb-2 text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
Frequently Asked Question Frequently Asked Question
</h2> </h2>
<p className="text-lg text-muted-foreground text-start mt-4 mb-8"> <p className="text-lg text-muted-foreground text-start mt-4 md:mt-2 mb-8">
Find answers to common questions about SVRJS Find answers to common questions about SVRJS
</p> </p>
<Accordion <Accordion

View file

@ -9,7 +9,7 @@ const Footer = () => {
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
return ( return (
<> <>
<footer className="flex flex-col w-full transition-all bg-zinc-100 text-black dark:bg-[#0308033b] border-t dark:text-white"> <footer className="flex flex-col w-full transition-all bg-zinc-50 text-black dark:bg-[#0308033b] border-t dark:text-white">
<div className="px-6 md:px-12 lg:px-24 py-10 w-full mx-auto max-w-screen-2xl"> <div className="px-6 md:px-12 lg:px-24 py-10 w-full mx-auto max-w-screen-2xl">
<div className="flex flex-col lg:flex-row justify-between max-lg:items-start max-md:items-center items-center mb-6 "> <div className="flex flex-col lg:flex-row justify-between max-lg:items-start max-md:items-center items-center mb-6 ">
<div className="flex items-center mb-6 lg:mb-0"> <div className="flex items-center mb-6 lg:mb-0">

View file

@ -65,7 +65,7 @@ const Hero = () => {
</AnimatedGradientText> </AnimatedGradientText>
<main className="text-5xl md:text-6xl font-bold"> <main className="text-5xl md:text-6xl font-bold">
<h1 className="inline custom-title"> <h1 className="inline custom-title">
<span className="bg-primary bg-clip-text text-transparent bg-gradient-to-r from-green-300 to-primary"> <span className="text-transparent bg-gradient-to-r from-green-300 to-primary bg-clip-text">
Simplify Simplify
</span>{" "} </span>{" "}
your server logic performance your server logic performance
@ -120,6 +120,7 @@ const Hero = () => {
variant={"ghost"} variant={"ghost"}
onClick={() => handleButtonClick("linux")} onClick={() => handleButtonClick("linux")}
> >
<span className="sr-only">Linux</span>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width={200} width={200}
@ -142,6 +143,7 @@ const Hero = () => {
variant={"ghost"} variant={"ghost"}
onClick={() => handleButtonClick("docker")} onClick={() => handleButtonClick("docker")}
> >
<span className="sr-only">Docker</span>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width={200} width={200}

View file

@ -11,7 +11,7 @@ const HowItWorks = () => {
development development
</span> </span>
</h2> </h2>
<p className="md:w-3/4 mx-auto mt-4 mb-8 text-xl text-muted-foreground"> <p className="md:w-3/4 mx-auto mt-4 mb-8 text-lg md:text-xl text-muted-foreground">
Beautifully designed components that you can copy and paste into your Beautifully designed components that you can copy and paste into your
apps. Accessible. Customizable. Open Source. apps. Accessible. Customizable. Open Source.
</p> </p>

View file

@ -19,6 +19,7 @@ const MobileNav = () => {
<ThemeToggle /> <ThemeToggle />
<Sheet> <Sheet>
<SheetTrigger> <SheetTrigger>
<span className="sr-only">Menu</span>
<Menu className="w-5 h-5" /> <Menu className="w-5 h-5" />
</SheetTrigger> </SheetTrigger>
<SheetContent> <SheetContent>

View file

@ -20,17 +20,21 @@ const Navbar = () => {
<header className="sticky border-b top-0 z-40 w-full shadow-md bg-white dark:border-b-slate-800 dark:bg-background"> <header className="sticky border-b top-0 z-40 w-full shadow-md bg-white dark:border-b-slate-800 dark:bg-background">
{/* LOGO LEFT NAVBAR */} {/* LOGO LEFT NAVBAR */}
<NavigationMenu className="mx-auto"> <NavigationMenu className="mx-auto">
<NavigationMenuList className="container h-16 px-4 w-screen flex justify-between items-center"> <NavigationMenuList className="container h-16 px-4 w-full flex justify-between items-center">
<NavigationMenuItem className="font-bold flex items-center"> <NavigationMenuItem className="font-bold flex items-center">
<Link href="/#" className="inline-flex items-center gap-2"> <Link href="/#" className="inline-flex items-center gap-2">
<span className="sr-only">SVR.JS</span>
<Logo width={120} height={40} /> <Logo width={120} height={40} />
</Link> </Link>
</NavigationMenuItem> </NavigationMenuItem>
{/* Mobile view */} {/* Mobile view */}
<NavigationMenuItem className="flex md:hidden">
<MobileNav /> <MobileNav />
</NavigationMenuItem>
{/* Desktop Menu */} {/* Desktop Menu */}
<NavigationMenuItem className="hidden md:flex">
<nav className="hidden md:flex gap-4"> <nav className="hidden md:flex gap-4">
{NAVBAR.centerLinks?.map(({ href, label, target }) => ( {NAVBAR.centerLinks?.map(({ href, label, target }) => (
<Link <Link
@ -47,8 +51,9 @@ const Navbar = () => {
</Link> </Link>
))} ))}
</nav> </nav>
</NavigationMenuItem>
<div className="hidden md:flex gap-2 items-center"> <NavigationMenuItem className="hidden md:flex gap-2 items-center">
{NAVBAR.rightLinks?.map(({ href = "", label, target }) => ( {NAVBAR.rightLinks?.map(({ href = "", label, target }) => (
<Link <Link
key={label} key={label}
@ -75,7 +80,7 @@ const Navbar = () => {
</Link> </Link>
))} ))}
<ThemeToggle /> <ThemeToggle />
</div> </NavigationMenuItem>
</NavigationMenuList> </NavigationMenuList>
</NavigationMenu> </NavigationMenu>
</header> </header>

View file

@ -25,10 +25,10 @@ const Newsletter = () => {
<section id="newsletter"> <section id="newsletter">
<hr className="w-11/12 mx-auto" /> <hr className="w-11/12 mx-auto" />
<div className="container py-24 md:py-32"> <div className="container py-24 md:py-32">
<h3 className="text-center text-4xl md:text-5xl text-black font-bold dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400"> <h3 className="text-center text-4xl md:text-5xl md:pb-2 text-black font-bold dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
Join The Newsletter! Join The Newsletter!
</h3> </h3>
<p className="text-lg text-muted-foreground text-center mt-4 mb-8"> <p className="text-lg text-muted-foreground text-center mt-4 md:mt-2 mb-8">
Choosing the right website deployment option is important when Choosing the right website deployment option is important when
creating a website, because it directly impacts the user experience creating a website, because it directly impacts the user experience
and the resources required to run your website. and the resources required to run your website.

View file

@ -23,7 +23,7 @@ const Partners = () => {
</h2> </h2>
<div className="w-full flex-start flex-row"> <div className="w-full flex-start flex-row">
<div className="flex max-md:flex-col items-center justify-start gap-4"> <div className="flex max-md:flex-col items-center justify-start gap-4">
<h2 className="text-lg font-medium bg-accent/60 px-2 py-2 rounded-md"> <h2 className="text-md font-medium bg-accent/60 px-2 py-2 rounded-md">
Process of setting up a WordPress website running on SVR.JS. Process of setting up a WordPress website running on SVR.JS.
</h2> </h2>
<Button <Button

View file

@ -86,7 +86,7 @@ const Testimonials = () => {
</span> </span>
</h1> </h1>
<div className="wrapper columns-1 gap-5 md:columns-2 lg:columns-3 py-6 mt-6"> <ul className="wrapper columns-1 gap-5 md:columns-2 lg:columns-3 py-6 mt-6">
{testimonials.map((testimonial, idx) => ( {testimonials.map((testimonial, idx) => (
<TestimonialCard <TestimonialCard
avatar={testimonial.avatar} avatar={testimonial.avatar}
@ -97,7 +97,7 @@ const Testimonials = () => {
key={idx} key={idx}
/> />
))} ))}
</div> </ul>
</section> </section>
); );
}; };

View file

@ -30,6 +30,7 @@ const ThemeToggle = () => {
className="md:border-input border-transparent" className="md:border-input border-transparent"
onClick={handleTheme} onClick={handleTheme}
> >
<span className="sr-only">Toggle theme</span>
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" /> <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" /> <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
</Button> </Button>

45
package-lock.json generated
View file

@ -14,6 +14,7 @@
"@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-label": "^2.1.0", "@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-navigation-menu": "^1.1.4", "@radix-ui/react-navigation-menu": "^1.1.4",
"@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-toast": "^1.2.1", "@radix-ui/react-toast": "^1.2.1",
"@radix-ui/themes": "^3.0.5", "@radix-ui/themes": "^3.0.5",
@ -2348,6 +2349,50 @@
} }
} }
}, },
"node_modules/@radix-ui/react-separator": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.0.tgz",
"integrity": "sha512-3uBAs+egzvJBDZAzvb/n4NxxOYpnspmWxO2u5NbZ8Y6FM/NdrGSF9bop3Cf6F6C71z1rTSn8KV0Fo2ZVd79lGA==",
"dependencies": {
"@radix-ui/react-primitive": "2.0.0"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-primitive": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
"integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
"dependencies": {
"@radix-ui/react-slot": "1.1.0"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-slider": { "node_modules/@radix-ui/react-slider": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.1.2.tgz", "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.1.2.tgz",