LaconicNetwork/mars-v2-frontend
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

styling wip

Browse Source
This commit is contained in:
gustavomauricio 2022-09-02 15:40:10 +01:00
parent 732e23d15e
commit 3e1cc8387f
4 changed files with 52 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/Container/Container.module.css Normal file
View File

@ -0,0 +1,8 @@
.container {
background: linear-gradient(
132.82deg,
rgba(11, 14, 32, 0.64) 5.03%,
rgba(52, 20, 33, 0.9) 73.08%
);
border-radius: 16px;
}

13
components/Container/index.tsx Normal file
View File

@ -0,0 +1,13 @@
import React from "react";
import styles from "./Container.module.css";
type Props = {
children: React.ReactNode;
className?: string;
};
const Container = ({ children, className = "" }: Props) => {
return <div className={`${styles.container} ${className}`}>{children}</div>;
};
export default Container;

52
pages/index.tsx
View File

@ -3,6 +3,8 @@ import Head from "next/head";
import Image from "next/image"; import Image from "next/image";
import styles from "../styles/Home.module.css"; import styles from "../styles/Home.module.css";
import Container from "components/Container";
const Home: NextPage = () => { const Home: NextPage = () => {
return ( return (
<div className={styles.container}> <div className={styles.container}>
@ -12,33 +14,35 @@ const Home: NextPage = () => {
</h1> </h1>
<div className={styles.grid}> <div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}> <Container className={styles.card}>
<h2>Documentation &rarr;</h2> <a href="https://nextjs.org/docs">
<p>Find in-depth information about Next.js features and API.</p> <h2>Documentation &rarr;</h2>
</a> <p>Find in-depth information about Next.js features and API.</p>
</a>
</Container>
<a href="https://nextjs.org/learn" className={styles.card}> <Container className={styles.card}>
<h2>Learn &rarr;</h2> <a href="https://nextjs.org/learn">
<p>Learn about Next.js in an interactive course with quizzes!</p> <h2>Learn &rarr;</h2>
</a> <p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
</Container>
<a <Container className={styles.card}>
href="https://github.com/vercel/next.js/tree/canary/examples" <a href="https://github.com/vercel/next.js/tree/canary/examples">
className={styles.card} <h2>Examples &rarr;</h2>
> <p>Discover and deploy boilerplate example Next.js projects.</p>
<h2>Examples &rarr;</h2> </a>
<p>Discover and deploy boilerplate example Next.js projects.</p> </Container>
</a>
<a <Container className={styles.card}>
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" <a href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app">
className={styles.card} <h2>Deploy &rarr;</h2>
> <p>
<h2>Deploy &rarr;</h2> Instantly deploy your Next.js site to a public URL with Vercel.
<p> </p>
Instantly deploy your Next.js site to a public URL with Vercel. </a>
</p> </Container>
</a>
</div> </div>
</main> </main>

7
styles/Home.module.css
View File

@ -28,7 +28,7 @@
} }
.title a { .title a {
color: #0070f3; color: orange;
text-decoration: none; text-decoration: none;
} }
@ -79,7 +79,6 @@
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
border: 1px solid #eaeaea; border: 1px solid #eaeaea;
border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease; transition: color 0.15s ease, border-color 0.15s ease;
max-width: 300px; max-width: 300px;
} }
@ -87,8 +86,8 @@
.card:hover, .card:hover,
.card:focus, .card:focus,
.card:active { .card:active {
color: #0070f3; color: orange;
border-color: #0070f3; border-color: orange;
} }
.card h2 { .card h2 {