Nionidh/nextgraph-test
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add example cssmodule

Browse source
This commit is contained in:
Mona Mayrhofer 2025-12-26 14:12:06 +01:00
parent ddf96e81bb
commit b4f7769375
WARNING! Although there is a key with this ID in the database it does not verify this commit! This commit is SUSPICIOUS.
GPG key ID: 374AB152BDEBA1AE
2 changed files with 66 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

31
packages/web/app/welcome/welcome.module.css Normal file
View file

@ -0,0 +1,31 @@
.welcome {
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
header {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
max-width: 100vw;
padding: 4px;
img {
width: 100%;
}
}
}
.links {
max-width: 300px;
width: 100%;
padding: 0 4px;
nav {
border-radius: 48px;
border: 1px solid gray;
padding: 6px;
}
}

9
packages/web/app/welcome/welcome.tsx
View file

@ -1,12 +1,11 @@
import logoDark from "./logo-dark.svg"; import logoDark from "./logo-dark.svg";
import logoLight from "./logo-light.svg"; import logoLight from "./logo-light.svg";
import styles from "./welcome.module.css";
export function Welcome() { export function Welcome() {
return ( return (
<main className="flex items-center justify-center pt-16 pb-4"> <main className={styles.welcome}>
<div className="flex-1 flex flex-col items-center gap-16 min-h-0">
<header className="flex flex-col items-center gap-9"> <header className="flex flex-col items-center gap-9">
<div className="w-[500px] max-w-[100vw] p-4">
<img <img
src={logoLight} src={logoLight}
alt="React Router" alt="React Router"
@ -17,9 +16,8 @@ export function Welcome() {
alt="React Router" alt="React Router"
className="hidden w-full dark:block" className="hidden w-full dark:block"
/> />
</div>
</header> </header>
<div className="max-w-[300px] w-full space-y-6 px-4"> <div className={styles.links}>
<nav className="rounded-3xl border border-gray-200 p-6 dark:border-gray-700 space-y-4"> <nav className="rounded-3xl border border-gray-200 p-6 dark:border-gray-700 space-y-4">
<p className="leading-6 text-gray-700 dark:text-gray-200 text-center"> <p className="leading-6 text-gray-700 dark:text-gray-200 text-center">
What&apos;s next? What&apos;s next?
@ -41,7 +39,6 @@ export function Welcome() {
</ul> </ul>
</nav> </nav>
</div> </div>
</div>
</main> </main>
); );
} }