Skip to content

Commit 3ad696f

Browse files
pphatdevpphatdev
committed
✨ Refactor global styles and layout for improved readability and organization; add TypeScript support for CSS and SCSS modules
1 parent 9925abc commit 3ad696f

4 files changed

Lines changed: 138 additions & 139 deletions

File tree

‎app/globals.css‎

Lines changed: 106 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -4,119 +4,119 @@
44
@custom-variant dark (&:is(.dark *));
55

66
@theme inline {
7-
--color-background: var(--background);
8-
--color-foreground: var(--foreground);
9-
--font-sans: var(--font-geist-sans);
10-
--font-mono: var(--font-geist-mono);
11-
--color-sidebar-ring: var(--sidebar-ring);
12-
--color-sidebar-border: var(--sidebar-border);
13-
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
14-
--color-sidebar-accent: var(--sidebar-accent);
15-
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
16-
--color-sidebar-primary: var(--sidebar-primary);
17-
--color-sidebar-foreground: var(--sidebar-foreground);
18-
--color-sidebar: var(--sidebar);
19-
--color-chart-5: var(--chart-5);
20-
--color-chart-4: var(--chart-4);
21-
--color-chart-3: var(--chart-3);
22-
--color-chart-2: var(--chart-2);
23-
--color-chart-1: var(--chart-1);
24-
--color-ring: var(--ring);
25-
--color-input: var(--input);
26-
--color-border: var(--border);
27-
--color-destructive: var(--destructive);
28-
--color-accent-foreground: var(--accent-foreground);
29-
--color-accent: var(--accent);
30-
--color-muted-foreground: var(--muted-foreground);
31-
--color-muted: var(--muted);
32-
--color-secondary-foreground: var(--secondary-foreground);
33-
--color-secondary: var(--secondary);
34-
--color-primary-foreground: var(--primary-foreground);
35-
--color-primary: var(--primary);
36-
--color-popover-foreground: var(--popover-foreground);
37-
--color-popover: var(--popover);
38-
--color-card-foreground: var(--card-foreground);
39-
--color-card: var(--card);
40-
--radius-sm: calc(var(--radius) - 4px);
41-
--radius-md: calc(var(--radius) - 2px);
42-
--radius-lg: var(--radius);
43-
--radius-xl: calc(var(--radius) + 4px);
7+
--color-background: var(--background);
8+
--color-foreground: var(--foreground);
9+
--font-sans: var(--font-geist-sans);
10+
--font-mono: var(--font-geist-mono);
11+
--color-sidebar-ring: var(--sidebar-ring);
12+
--color-sidebar-border: var(--sidebar-border);
13+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
14+
--color-sidebar-accent: var(--sidebar-accent);
15+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
16+
--color-sidebar-primary: var(--sidebar-primary);
17+
--color-sidebar-foreground: var(--sidebar-foreground);
18+
--color-sidebar: var(--sidebar);
19+
--color-chart-5: var(--chart-5);
20+
--color-chart-4: var(--chart-4);
21+
--color-chart-3: var(--chart-3);
22+
--color-chart-2: var(--chart-2);
23+
--color-chart-1: var(--chart-1);
24+
--color-ring: var(--ring);
25+
--color-input: var(--input);
26+
--color-border: var(--border);
27+
--color-destructive: var(--destructive);
28+
--color-accent-foreground: var(--accent-foreground);
29+
--color-accent: var(--accent);
30+
--color-muted-foreground: var(--muted-foreground);
31+
--color-muted: var(--muted);
32+
--color-secondary-foreground: var(--secondary-foreground);
33+
--color-secondary: var(--secondary);
34+
--color-primary-foreground: var(--primary-foreground);
35+
--color-primary: var(--primary);
36+
--color-popover-foreground: var(--popover-foreground);
37+
--color-popover: var(--popover);
38+
--color-card-foreground: var(--card-foreground);
39+
--color-card: var(--card);
40+
--radius-sm: calc(var(--radius) - 4px);
41+
--radius-md: calc(var(--radius) - 2px);
42+
--radius-lg: var(--radius);
43+
--radius-xl: calc(var(--radius) + 4px);
4444
}
4545

4646
:root {
47-
--radius: 0.625rem;
48-
--background: oklch(1 0 0);
49-
--foreground: oklch(0.145 0 0);
50-
--card: oklch(1 0 0);
51-
--card-foreground: oklch(0.145 0 0);
52-
--popover: oklch(1 0 0);
53-
--popover-foreground: oklch(0.145 0 0);
54-
--primary: oklch(0.205 0 0);
55-
--primary-foreground: oklch(0.985 0 0);
56-
--secondary: oklch(0.97 0 0);
57-
--secondary-foreground: oklch(0.205 0 0);
58-
--muted: oklch(0.97 0 0);
59-
--muted-foreground: oklch(0.556 0 0);
60-
--accent: oklch(0.97 0 0);
61-
--accent-foreground: oklch(0.205 0 0);
62-
--destructive: oklch(0.577 0.245 27.325);
63-
--border: oklch(0.922 0 0);
64-
--input: oklch(0.922 0 0);
65-
--ring: oklch(0.708 0 0);
66-
--chart-1: oklch(0.646 0.222 41.116);
67-
--chart-2: oklch(0.6 0.118 184.704);
68-
--chart-3: oklch(0.398 0.07 227.392);
69-
--chart-4: oklch(0.828 0.189 84.429);
70-
--chart-5: oklch(0.769 0.188 70.08);
71-
--sidebar: oklch(0.985 0 0);
72-
--sidebar-foreground: oklch(0.145 0 0);
73-
--sidebar-primary: oklch(0.205 0 0);
74-
--sidebar-primary-foreground: oklch(0.985 0 0);
75-
--sidebar-accent: oklch(0.97 0 0);
76-
--sidebar-accent-foreground: oklch(0.205 0 0);
77-
--sidebar-border: oklch(0.922 0 0);
78-
--sidebar-ring: oklch(0.708 0 0);
47+
--radius: 0.625rem;
48+
--background: oklch(1 0 0);
49+
--foreground: oklch(0.145 0 0);
50+
--card: oklch(1 0 0);
51+
--card-foreground: oklch(0.145 0 0);
52+
--popover: oklch(1 0 0);
53+
--popover-foreground: oklch(0.145 0 0);
54+
--primary: oklch(0.205 0 0);
55+
--primary-foreground: oklch(0.985 0 0);
56+
--secondary: oklch(0.97 0 0);
57+
--secondary-foreground: oklch(0.205 0 0);
58+
--muted: oklch(0.97 0 0);
59+
--muted-foreground: oklch(0.556 0 0);
60+
--accent: oklch(0.97 0 0);
61+
--accent-foreground: oklch(0.205 0 0);
62+
--destructive: oklch(0.577 0.245 27.325);
63+
--border: oklch(0.922 0 0);
64+
--input: oklch(0.922 0 0);
65+
--ring: oklch(0.708 0 0);
66+
--chart-1: oklch(0.646 0.222 41.116);
67+
--chart-2: oklch(0.6 0.118 184.704);
68+
--chart-3: oklch(0.398 0.07 227.392);
69+
--chart-4: oklch(0.828 0.189 84.429);
70+
--chart-5: oklch(0.769 0.188 70.08);
71+
--sidebar: oklch(0.985 0 0);
72+
--sidebar-foreground: oklch(0.145 0 0);
73+
--sidebar-primary: oklch(0.205 0 0);
74+
--sidebar-primary-foreground: oklch(0.985 0 0);
75+
--sidebar-accent: oklch(0.97 0 0);
76+
--sidebar-accent-foreground: oklch(0.205 0 0);
77+
--sidebar-border: oklch(0.922 0 0);
78+
--sidebar-ring: oklch(0.708 0 0);
7979
}
8080

8181
.dark {
82-
--background: oklch(0.145 0 0);
83-
--foreground: oklch(0.985 0 0);
84-
--card: oklch(0.205 0 0);
85-
--card-foreground: oklch(0.985 0 0);
86-
--popover: oklch(0.205 0 0);
87-
--popover-foreground: oklch(0.985 0 0);
88-
--primary: oklch(0.922 0 0);
89-
--primary-foreground: oklch(0.205 0 0);
90-
--secondary: oklch(0.269 0 0);
91-
--secondary-foreground: oklch(0.985 0 0);
92-
--muted: oklch(0.269 0 0);
93-
--muted-foreground: oklch(0.708 0 0);
94-
--accent: oklch(0.269 0 0);
95-
--accent-foreground: oklch(0.985 0 0);
96-
--destructive: oklch(0.704 0.191 22.216);
97-
--border: oklch(1 0 0 / 10%);
98-
--input: oklch(1 0 0 / 15%);
99-
--ring: oklch(0.556 0 0);
100-
--chart-1: oklch(0.488 0.243 264.376);
101-
--chart-2: oklch(0.696 0.17 162.48);
102-
--chart-3: oklch(0.769 0.188 70.08);
103-
--chart-4: oklch(0.627 0.265 303.9);
104-
--chart-5: oklch(0.645 0.246 16.439);
105-
--sidebar: oklch(0.205 0 0);
106-
--sidebar-foreground: oklch(0.985 0 0);
107-
--sidebar-primary: oklch(0.488 0.243 264.376);
108-
--sidebar-primary-foreground: oklch(0.985 0 0);
109-
--sidebar-accent: oklch(0.269 0 0);
110-
--sidebar-accent-foreground: oklch(0.985 0 0);
111-
--sidebar-border: oklch(1 0 0 / 10%);
112-
--sidebar-ring: oklch(0.556 0 0);
82+
--background: oklch(0.145 0 0);
83+
--foreground: oklch(0.985 0 0);
84+
--card: oklch(0.205 0 0);
85+
--card-foreground: oklch(0.985 0 0);
86+
--popover: oklch(0.205 0 0);
87+
--popover-foreground: oklch(0.985 0 0);
88+
--primary: oklch(0.922 0 0);
89+
--primary-foreground: oklch(0.205 0 0);
90+
--secondary: oklch(0.269 0 0);
91+
--secondary-foreground: oklch(0.985 0 0);
92+
--muted: oklch(0.269 0 0);
93+
--muted-foreground: oklch(0.708 0 0);
94+
--accent: oklch(0.269 0 0);
95+
--accent-foreground: oklch(0.985 0 0);
96+
--destructive: oklch(0.704 0.191 22.216);
97+
--border: oklch(1 0 0 / 10%);
98+
--input: oklch(1 0 0 / 15%);
99+
--ring: oklch(0.556 0 0);
100+
--chart-1: oklch(0.488 0.243 264.376);
101+
--chart-2: oklch(0.696 0.17 162.48);
102+
--chart-3: oklch(0.769 0.188 70.08);
103+
--chart-4: oklch(0.627 0.265 303.9);
104+
--chart-5: oklch(0.645 0.246 16.439);
105+
--sidebar: oklch(0.205 0 0);
106+
--sidebar-foreground: oklch(0.985 0 0);
107+
--sidebar-primary: oklch(0.488 0.243 264.376);
108+
--sidebar-primary-foreground: oklch(0.985 0 0);
109+
--sidebar-accent: oklch(0.269 0 0);
110+
--sidebar-accent-foreground: oklch(0.985 0 0);
111+
--sidebar-border: oklch(1 0 0 / 10%);
112+
--sidebar-ring: oklch(0.556 0 0);
113113
}
114114

115115
@layer base {
116-
* {
117-
@apply border-border outline-ring/50;
118-
}
119-
body {
120-
@apply bg-background text-foreground;
121-
}
116+
* {
117+
@apply border-border outline-ring/50;
118+
}
119+
body {
120+
@apply bg-background text-foreground;
121+
}
122122
}

‎app/layout.tsx‎

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,28 @@ import { Geist, Geist_Mono } from "next/font/google";
33
import "./globals.css";
44

55
const geistSans = Geist({
6-
variable: "--font-geist-sans",
7-
subsets: ["latin"],
6+
variable: "--font-geist-sans",
7+
subsets: ["latin"],
88
});
99

1010
const geistMono = Geist_Mono({
11-
variable: "--font-geist-mono",
12-
subsets: ["latin"],
11+
variable: "--font-geist-mono",
12+
subsets: ["latin"],
1313
});
1414

1515
export const metadata: Metadata = {
16-
title: "Create Next App",
17-
description: "Generated by create next app",
16+
title: "Sophat LEAT",
17+
description: "This portfolio showcases my journey, projects, and passions as a developer and creator. Explore my work, check out my skills, and feel free to connect if you'd like to collaborate or learn more. Let's build something amazing together!",
1818
};
1919

20-
export default function RootLayout({
21-
children,
22-
}: Readonly<{
23-
children: React.ReactNode;
24-
}>) {
25-
return (
26-
<html lang="en">
27-
<body
28-
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
29-
>
30-
{children}
31-
</body>
32-
</html>
33-
);
20+
export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) {
21+
return (
22+
<html lang="en">
23+
<body
24+
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
25+
>
26+
{children}
27+
</body>
28+
</html>
29+
);
3430
}

‎global.d.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
declare module '*.css' {
2+
const content: { [className: string]: string };
3+
export default content;
4+
}
5+
6+
declare module '*.scss' {
7+
const content: { [className: string]: string };
8+
export default content;
9+
}

‎tsconfig.json‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
{
22
"compilerOptions": {
33
"target": "ES2017",
4-
"lib": [
5-
"dom",
6-
"dom.iterable",
7-
"esnext"
8-
],
4+
"lib": ["dom", "dom.iterable", "esnext"],
95
"allowJs": true,
106
"skipLibCheck": true,
117
"strict": true,
@@ -23,19 +19,17 @@
2319
}
2420
],
2521
"paths": {
26-
"@/*": [
27-
"./*"
28-
]
29-
}
22+
"@/*": ["./*"]
23+
},
24+
"typeRoots": ["./node_modules/@types", "./types"]
3025
},
3126
"include": [
3227
"next-env.d.ts",
28+
"types/**/*",
3329
"**/*.ts",
3430
"**/*.tsx",
3531
".next/types/**/*.ts",
3632
".next/dev/types/**/*.ts"
3733
],
38-
"exclude": [
39-
"node_modules"
40-
]
41-
}
34+
"exclude": ["node_modules"]
35+
}

0 commit comments

Comments
 (0)