Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update: tailwind configuration for better customization #3

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

update: tailwind configuration for better customization #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>pandev</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
52 changes: 15 additions & 37 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,20 @@
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}

.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@import url("https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@300..900&display=swap");

@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
:root {
--font-grotesque: "Darker Grotesque", sans-serif;
--min-height: 100dvh;

.card {
padding: 2em;
/* colors */
--background: 235.71, 22.58%, 12.16%; /* #181926 */
--foreground: 234.89, 72.31%, 87.25%; /* #C7CBF6 */
--primary: 105.22, 48.25%, 71.96%; /* #A6DA95 */
--secondary: 40.25, 69.91%, 77.84%; /* #EED49F */
--accent: 266.51, 82.69%, 79.61%; /* #C6A0F6 */
--primary-button-color: 264.74, 38.96%, 51.18%; /* #7A52B3 */
/* add more colors here if needed so */
}

.read-the-docs {
color: #888;
body {
font-family: var(--font-grotesque);
min-height: var(--min-height);
}
8 changes: 5 additions & 3 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import logo from "./assets/logo.svg";
import logo from "./assets/logo.png";

function App() {
return (
<div className="w-full h-screen bg-black text-white flex items-center justify-center">
<img src={logo} alt="logo" />
<div className="bg-background text-foreground">
<div className="container min-h-screen flex items-center justify-center">
<img src={logo} alt="logo" />
</div>
</div>
);
}
Expand Down
498 changes: 365 additions & 133 deletions src/assets/logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 1 addition & 2 deletions src/components/ui/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@ const buttonVariants = cva(
{
variants: {
variant: {
default:
"bg-neutral-100 text-neutral-900 dark:bg-neutral-900 dark:text-neutral-100 hover:bg-neutral-100/90 dark:hover:bg-neutral-900/90",
default: "text-white bg-button hover:outline hover:outline-dashed hover:outline-accent hover:outline-offset-2",
// add button variants in here as per Figma design
},
// not the actual sizes yet, feel free to modify these
Expand Down
4 changes: 3 additions & 1 deletion src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";

import "./index.css";
import "./App.css";

createRoot(document.getElementById("root")!).render(
<StrictMode>
<App />
Expand Down
19 changes: 18 additions & 1 deletion tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,24 @@
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
// see /App.css for reference
colors: {
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: "hsl(var(--primary))",
secondary: "hsl(var(--secondary))",
accent: "hsl(var(--accent))",
primaryButton: "hsl(var(--primary-button-color))",
},
},
},
plugins: [],
};