Skip to content

Commit 7a37ca7

Browse files
halvaradophalvaradop
committed
styles(css): resolve override css values
1 parent 3c6d9d6 commit 7a37ca7

5 files changed

Lines changed: 104 additions & 87 deletions

File tree

‎app/src/app/docs/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { LayoutProps } from "@/lib/@types/props"
22

33
const DocsLayout = ({ children }: LayoutProps) => {
44
return (
5-
<main className="mx-10 border-x border-solid border-border base:mx-16">
5+
<main className="mx-10 border-x border-solid border-border base:mx-16" id="docs-layout">
66
<section className="px-4 sm:px-6 md:px-8 base:py-16 base:px-10">{children}</section>
77
</main>
88
)

‎app/src/app/layout.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { LayoutProps } from "@/lib/@types/props"
44
import { Header } from "@/ui/header/header"
55
import { Footer } from "@/ui/footer"
66
import "@/ui/globals.css"
7+
import { Cursor } from "@/ui/cursor"
78

89
const inter = Inter({
910
subsets: ["latin"],
@@ -48,6 +49,7 @@ export default function RootLayout({ children }: LayoutProps) {
4849
<Header />
4950
{children}
5051
<Footer />
52+
<Cursor />
5153
</body>
5254
</html>
5355
)

‎app/src/app/page.tsx‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,17 @@
1-
import Link from "next/link"
21
import { HeroSection } from "@/ui/hero"
32
import { UtilitiesSection } from "@/ui/utilities"
43
import { DeveloperExperienceSection } from "@/ui/developer-experience"
5-
import { Button } from "@halvaradop/ui-button"
64
import { PoweredBySection } from "@/ui/powered-by"
5+
import { DocsSection } from "@/ui/docs"
76

87
const Index = () => {
98
return (
10-
<main className="">
9+
<main>
1110
<HeroSection />
1211
<DeveloperExperienceSection />
1312
<UtilitiesSection />
1413
<PoweredBySection />
15-
<section className="my-32 text-center hidden">
16-
<h2 className="text-primary text-3xl font-bold text-center">Ready to Get Started</h2>
17-
<p className="mt-2 mb-6 text-secondary">Dive into our comprehensive documentation and start building.</p>
18-
<Button className="mx-auto text-black" asChild>
19-
<Link href="/docs">View Documentation</Link>
20-
</Button>
21-
</section>
14+
<DocsSection />
2215
</main>
2316
)
2417
}

‎app/src/ui/docs.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import Link from "next/link"
2+
import { Button } from "@halvaradop/ui-button"
3+
import { Separator } from "./separator"
4+
5+
export const DocsSection = () => {
6+
return (
7+
<section>
8+
<Separator index={4}>Start Building</Separator>
9+
<div className="mx-10 py-16 px-4 flex items-center justify-center flex-col text-center border-x border-solid border-border sm:px-6 md:px-8 base:mx-16 base:px-10">
10+
<h2 className="text-primary text-2xl md:text-fluid-3xl">Explore the Docs</h2>
11+
<p className="mt-6 mb-8 text-muted text-fluid-base">
12+
Get everything you need to start building with our utilities — from installation to deep usage examples.
13+
</p>
14+
<Button asChild>
15+
<Link href="/docs">View Docs</Link>
16+
</Button>
17+
</div>
18+
</section>
19+
)
20+
}

‎app/src/ui/globals.css‎

Lines changed: 78 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -56,82 +56,84 @@ It is generating errors to load animations styles
5656

5757
@layer base {
5858
main {
59-
@apply text-primary;
60-
61-
h1 {
62-
@apply mt-8 mb-4 text-4xl font-bold;
63-
}
64-
65-
h2 {
66-
@apply mt-16 mb-3 text-3xl font-bold;
67-
}
68-
69-
h3 {
70-
@apply mt-10 mb-2 text-2xl font-bold;
71-
}
72-
73-
pre {
74-
@apply w-0 min-w-full p-4 rounded-md border border-solid border-border overflow-auto bg-hljs-background scrollbar:h-1.5 track:mx-1 thumb:rounded;
75-
}
76-
77-
ul {
78-
@apply m-4 pl-5 list-disc list-inside;
79-
}
80-
81-
ol {
82-
@apply m-4 pl-5 list-decimal list-inside;
83-
}
84-
85-
a {
86-
@apply text-primary underline underline-offset-3 transition-colors duration-200;
87-
}
88-
89-
p,
90-
li {
91-
@apply m-4 text-muted;
92-
}
93-
94-
:not(pre) > code {
95-
@apply text-on-secondary bg-secondary rounded-md px-1.5 py-0.5 font-mono;
96-
}
97-
98-
code.language-bash {
99-
color: var(--color-hljs-token-string);
100-
}
101-
102-
.hljs-keyword {
103-
color: var(--color-hljs-token-keyword);
104-
}
105-
106-
.hljs-comment {
107-
color: var(--color-hljs-token-comment);
108-
}
109-
110-
.hljs-string,
111-
.hljs-name .language-bash {
112-
color: var(--color-hljs-token-string);
113-
}
114-
115-
.hljs-title {
116-
color: var(--color-hljs-token-function);
117-
}
118-
119-
.hljs-constant,
120-
.hljs-number {
121-
color: var(--color-hljs-token-constant);
122-
}
123-
124-
.hljs-attr,
125-
.hljs-tag {
126-
color: var(--color-hljs-foreground);
127-
}
128-
129-
.hljs-built_in {
130-
color: var(--color-hljs-built_in);
131-
}
132-
133-
.hljs-tag {
134-
color: var(--color-hljs-foreground);
59+
&#docs-layout {
60+
@apply text-primary;
61+
62+
h1 {
63+
@apply mt-8 mb-4 text-2xl font-bold base:text-4xl;
64+
}
65+
66+
h2 {
67+
@apply mt-16 mb-3 text-xl font-bold base:text-3xl;
68+
}
69+
70+
h3 {
71+
@apply mt-10 mb-2 text-lg font-bold base:text-2xl;
72+
}
73+
74+
pre {
75+
@apply w-0 min-w-full p-4 rounded-md border border-solid border-border overflow-auto bg-hljs-background scrollbar:h-1.5 track:mx-1 thumb:rounded thumb:bg-secondary;
76+
}
77+
78+
ul {
79+
@apply m-4 pl-5 list-disc list-inside;
80+
}
81+
82+
ol {
83+
@apply m-4 pl-5 list-decimal list-inside;
84+
}
85+
86+
a {
87+
@apply text-primary underline underline-offset-3 transition-colors duration-200;
88+
}
89+
90+
p,
91+
li {
92+
@apply m-4 text-muted;
93+
}
94+
95+
:not(pre) > code {
96+
@apply text-on-secondary bg-secondary rounded-md px-1.5 py-0.5 font-mono;
97+
}
98+
99+
code.language-bash {
100+
color: var(--color-hljs-token-string);
101+
}
102+
103+
.hljs-keyword {
104+
color: var(--color-hljs-token-keyword);
105+
}
106+
107+
.hljs-comment {
108+
color: var(--color-hljs-token-comment);
109+
}
110+
111+
.hljs-string,
112+
.hljs-name .language-bash {
113+
color: var(--color-hljs-token-string);
114+
}
115+
116+
.hljs-title {
117+
color: var(--color-hljs-token-function);
118+
}
119+
120+
.hljs-constant,
121+
.hljs-number {
122+
color: var(--color-hljs-token-constant);
123+
}
124+
125+
.hljs-attr,
126+
.hljs-tag {
127+
color: var(--color-hljs-foreground);
128+
}
129+
130+
.hljs-built_in {
131+
color: var(--color-hljs-built_in);
132+
}
133+
134+
.hljs-tag {
135+
color: var(--color-hljs-foreground);
136+
}
135137
}
136138
}
137139
}

0 commit comments

Comments
 (0)