Skip to content

Commit cd19c02

Browse files
UnderprotectionDevUnderprotectionDev
committed
implement base tailwind confing and style guide
1 parent 24bba67 commit cd19c02

File tree

6 files changed

+485
-121
lines changed

6 files changed

+485
-121
lines changed

‎app/globals.css

Lines changed: 153 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,164 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
:root {
6-
--background: #ffffff;
7-
--foreground: #171717;
5+
@import url("../styles/theme.css");
6+
7+
body {
8+
font-family: "Inter", sans-serif;
89
}
910

10-
@media (prefers-color-scheme: dark) {
11-
:root {
12-
--background: #0a0a0a;
13-
--foreground: #ededed;
11+
@layer utilities {
12+
.flex-center {
13+
@apply flex justify-center items-center;
14+
}
15+
16+
.flex-between {
17+
@apply flex justify-between items-center;
18+
}
19+
20+
.flex-start {
21+
@apply flex justify-start items-center;
22+
}
23+
24+
.card-wrapper {
25+
@apply bg-light-900 dark:dark-gradient shadow-light-100 dark:shadow-dark-100;
26+
}
27+
28+
.btn {
29+
@apply bg-light-800 dark:bg-dark-300 !important;
30+
}
31+
32+
.btn-secondary {
33+
@apply bg-light-800 dark:bg-dark-400 !important;
34+
}
35+
36+
.btn-tertiary {
37+
@apply bg-light-700 dark:bg-dark-300 !important;
38+
}
39+
40+
.markdown {
41+
@apply max-w-full prose dark:prose-p:text-light-700 dark:prose-ol:text-light-700 dark:prose-ul:text-light-500 dark:prose-strong:text-white dark:prose-headings:text-white prose-headings:text-dark-400 prose-h1:text-dark-300 prose-h2:text-dark-300 prose-p:text-dark-500 prose-ul:text-dark-500 prose-ol:text-dark-500;
42+
}
43+
44+
.primary-gradient {
45+
background: linear-gradient(129deg, #ff7000 0%, #e2995f 100%);
46+
}
47+
48+
.dark-gradient {
49+
background: linear-gradient(
50+
232deg,
51+
rgba(23, 28, 35, 0.41) 0%,
52+
rgba(19, 22, 28, 0.7) 100%
53+
);
54+
}
55+
56+
.tab {
57+
@apply min-h-full dark:bg-dark-400 bg-light-800 text-light-500 dark:data-[state=active]:bg-dark-300 data-[state=active]:bg-primary-100 data-[state=active]:text-primary-500 !important;
1458
}
1559
}
1660

17-
body {
18-
color: var(--foreground);
19-
background: var(--background);
20-
font-family: Arial, Helvetica, sans-serif;
61+
.no-focus {
62+
@apply focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 !important;
2163
}
2264

23-
@layer utilities {
24-
.text-balance {
25-
text-wrap: balance;
26-
}
65+
.active-theme {
66+
filter: invert(53%) sepia(98%) saturate(3332%) hue-rotate(0deg)
67+
brightness(104%) contrast(106%) !important;
68+
}
69+
70+
.light-gradient {
71+
background: linear-gradient(
72+
132deg,
73+
rgba(247, 249, 255, 0.5) 0%,
74+
rgba(229, 237, 255, 0.25) 100%
75+
);
76+
}
77+
78+
.primary-text-gradient {
79+
background: linear-gradient(129deg, #ff7000 0%, #e2995f 100%);
80+
background-clip: text;
81+
-webkit-background-clip: text;
82+
-webkit-text-fill-color: transparent;
83+
}
84+
85+
.custom-scrollbar::-webkit-scrollbar {
86+
width: 3px;
87+
height: 3px;
88+
border-radius: 2px;
89+
}
90+
91+
.custom-scrollbar::-webkit-scrollbar-track {
92+
background: #ffffff;
93+
}
94+
95+
.custom-scrollbar::-webkit-scrollbar-thumb {
96+
background: #888;
97+
border-radius: 50px;
98+
}
99+
100+
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
101+
background: #555;
102+
}
103+
104+
/* Markdown Start */
105+
.markdown a {
106+
color: #1da1f2;
107+
}
108+
109+
.markdown a,
110+
code {
111+
/* These are technically the same, but use both */
112+
overflow-wrap: break-word;
113+
word-wrap: break-word;
114+
115+
-ms-word-break: break-all;
116+
/* This is the dangerous one in WebKit, as it breaks things wherever */
117+
word-break: break-all;
118+
/* Instead use this non-standard one: */
119+
word-break: break-word;
120+
121+
/* Adds a hyphen where the word breaks, if supported (No Blink) */
122+
-ms-hyphens: auto;
123+
-moz-hyphens: auto;
124+
-webkit-hyphens: auto;
125+
hyphens: auto;
126+
127+
padding: 2px;
128+
color: #ff7000 !important;
129+
}
130+
131+
.markdown pre {
132+
display: grid;
133+
width: 100%;
134+
}
135+
136+
.markdown pre code {
137+
width: 100%;
138+
display: block;
139+
overflow-x: auto;
140+
141+
color: inherit !important;
142+
}
143+
/* Markdown End */
144+
145+
/* Clerk */
146+
.cl-internal-b3fm6y {
147+
background: linear-gradient(129deg, #ff7000 0%, #e2995f 100%) !important;
148+
}
149+
150+
.hash-span {
151+
margin-top: -140px;
152+
padding-bottom: 140px;
153+
display: block;
154+
}
155+
156+
/* Hide scrollbar for Chrome, Safari and Opera */
157+
.no-scrollbar::-webkit-scrollbar {
158+
display: none;
159+
}
160+
161+
/* Hide scrollbar for IE, Edge and Firefox */
162+
.no-scrollbar {
163+
-ms-overflow-style: none; /* IE and Edge */
164+
scrollbar-width: none; /* Firefox */
27165
}

‎app/page.tsx

Lines changed: 4 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -2,100 +2,10 @@ import Image from "next/image";
22

33
export default function Home() {
44
return (
5-
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
6-
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
7-
<Image
8-
className="dark:invert"
9-
src="https://nextjs.org/icons/next.svg"
10-
alt="Next.js logo"
11-
width={180}
12-
height={38}
13-
priority
14-
/>
15-
<ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
16-
<li className="mb-2">
17-
Get started by editing{" "}
18-
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
19-
app/page.tsx
20-
</code>
21-
.
22-
</li>
23-
<li>Save and see your changes instantly.</li>
24-
</ol>
25-
26-
<div className="flex gap-4 items-center flex-col sm:flex-row">
27-
<a
28-
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
29-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
30-
target="_blank"
31-
rel="noopener noreferrer"
32-
>
33-
<Image
34-
className="dark:invert"
35-
src="https://nextjs.org/icons/vercel.svg"
36-
alt="Vercel logomark"
37-
width={20}
38-
height={20}
39-
/>
40-
Deploy now
41-
</a>
42-
<a
43-
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
44-
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
45-
target="_blank"
46-
rel="noopener noreferrer"
47-
>
48-
Read our docs
49-
</a>
50-
</div>
51-
</main>
52-
<footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
53-
<a
54-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
55-
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
56-
target="_blank"
57-
rel="noopener noreferrer"
58-
>
59-
<Image
60-
aria-hidden
61-
src="https://nextjs.org/icons/file.svg"
62-
alt="File icon"
63-
width={16}
64-
height={16}
65-
/>
66-
Learn
67-
</a>
68-
<a
69-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
70-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
71-
target="_blank"
72-
rel="noopener noreferrer"
73-
>
74-
<Image
75-
aria-hidden
76-
src="https://nextjs.org/icons/window.svg"
77-
alt="Window icon"
78-
width={16}
79-
height={16}
80-
/>
81-
Examples
82-
</a>
83-
<a
84-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
85-
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
86-
target="_blank"
87-
rel="noopener noreferrer"
88-
>
89-
<Image
90-
aria-hidden
91-
src="https://nextjs.org/icons/globe.svg"
92-
alt="Globe icon"
93-
width={16}
94-
height={16}
95-
/>
96-
Go to nextjs.org →
97-
</a>
98-
</footer>
5+
<div>
6+
<h1 className="h1-bold">Next.js 13 we're coming!</h1>
7+
<h2 className="h2-bold">Next.js 13 we're coming!</h2>
8+
<h3 className="h3-bold">Next.js 13 we're coming!</h3>
999
</div>
10010
);
10111
}

‎package-lock.json

Lines changed: 52 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,14 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
"@tailwindcss/typography": "^0.5.15",
1213
"eslint-config-standard": "^17.1.0",
1314
"eslint-plugin-tailwindcss": "^3.17.4",
1415
"next": "14.2.8",
1516
"prettier": "^3.3.3",
1617
"react": "^18",
17-
"react-dom": "^18"
18+
"react-dom": "^18",
19+
"tailwindcss-animate": "^1.0.7"
1820
},
1921
"devDependencies": {
2022
"@types/node": "^20",

0 commit comments

Comments
 (0)