Skip to content

Commit d99998a

Browse files
renbourenbou
committed
refactor: migrate to tailwind css-only config
1 parent c77f432 commit d99998a

File tree

4 files changed

+72
-88
lines changed

4 files changed

+72
-88
lines changed

‎app/globals.css‎

Lines changed: 55 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,71 @@
11
@import "tailwindcss";
2-
@config "../tailwind.config.ts";
32

4-
:root {
5-
--background: #ebebdf;
6-
--foreground: #262124;
7-
--theme: #ef5902;
8-
}
3+
@theme {
4+
--color-theme: #ef5902;
5+
--color-theme-light: #ebebdf;
6+
--color-theme-dark: #262124;
97

10-
@media (prefers-color-scheme: dark) {
11-
:root {
12-
--background: #262124;
13-
--foreground: #ebebdf;
8+
--animate-shake: shake 0.4s ease-out;
9+
@keyframes shake {
10+
0% {
11+
transform: skewX(-10deg);
12+
}
13+
25% {
14+
transform: skewX(10deg);
15+
}
16+
50% {
17+
transform: skewX(-10deg);
18+
}
19+
75% {
20+
transform: skewX(10deg);
21+
}
22+
100% {
23+
transform: skewX(-10deg);
24+
}
1425
}
1526
}
1627

17-
body {
18-
color: var(--foreground);
19-
background: var(--background);
20-
font-family: Arial, Helvetica, sans-serif;
28+
@theme inline {
29+
--font-horizon: var(--nextjs-font-horizon);
30+
--font-horizon-outlined: var(--nextjs-font-horizon-outlined);
31+
--font-theme-sans: var(--nextjs-font-theme-sans), var(--font-sans);
32+
--font-theme-serif: var(--nextjs-font-theme-serif), var(--font-serif);
2133
}
2234

2335
::-moz-selection {
24-
background-color: var(--theme);
25-
color: var(--background);
36+
background-color: var(--color-theme);
37+
38+
color: var(--color-theme-light);
39+
@variant dark {
40+
color: var(--color-theme-dark);
41+
}
2642
}
2743
::selection {
28-
background-color: var(--theme);
29-
color: var(--background);
44+
background-color: var(--color-theme);
45+
46+
color: var(--color-theme-light);
47+
@variant dark {
48+
color: var(--color-theme-dark);
49+
}
3050
}
3151
::-webkit-selection {
32-
background-color: var(--theme);
33-
color: var(--background);
52+
background-color: var(--color-theme);
53+
54+
color: var(--color-theme-light);
55+
@variant dark {
56+
color: var(--color-theme-dark);
57+
}
58+
}
59+
60+
@utility text-highlight {
61+
font-weight: 400;
62+
white-space: nowrap;
63+
background-color: var(--color-theme);
64+
65+
color: var(--color-theme-light);
66+
@variant dark {
67+
color: var(--color-theme-dark);
68+
}
3469
}
3570

3671
.nav-autoscale {
@@ -67,10 +102,3 @@ body {
67102
@apply text-2xl;
68103
}
69104
}
70-
71-
.theme-highlight {
72-
color: var(--background);
73-
font-weight: 400;
74-
white-space: nowrap;
75-
background-color: var(--theme);
76-
}

‎app/layout.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,27 @@ import "./globals.css";
55

66
const horizon = localFont({
77
src: "./fonts/horizon.otf",
8-
variable: "--font-horizon",
8+
variable: "--nextjs-font-horizon",
99
weight: "100 900",
1010
});
1111

1212
const horizonOutlined = localFont({
1313
src: "./fonts/horizon_outlined.otf",
14-
variable: "--font-horizon-outlined",
14+
variable: "--nextjs-font-horizon-outlined",
1515
weight: "100 900",
1616
});
1717

1818
const themeSans = Rubik({
1919
subsets: ["latin"],
2020
display: "swap",
21-
variable: "--font-theme-sans",
21+
variable: "--nextjs-font-theme-sans",
2222
weight: ["300", "400", "700"],
2323
});
2424

2525
const themeSerif = Mate({
2626
subsets: ["latin"],
2727
display: "swap",
28-
variable: "--font-theme-serif",
28+
variable: "--nextjs-font-theme-serif",
2929
weight: ["400"],
3030
});
3131

@@ -67,7 +67,7 @@ export default function RootLayout({
6767
return (
6868
<html lang="en">
6969
<body
70-
className={`${horizon.variable} ${horizonOutlined.variable} ${themeSans.variable} ${themeSerif.variable} antialiased`}
70+
className={`${horizon.variable} ${horizonOutlined.variable} ${themeSans.variable} ${themeSerif.variable} text-theme-dark bg-theme-light dark:text-theme-light dark:bg-theme-dark font-sans antialiased`}
7171
>
7272
<div className="px-[4%] py-8 md:h-screen md:w-screen 2xl:px-[8%]">
7373
{children}

‎app/page.tsx‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ function Landing() {
5252
// 1. justify-self-center for centering the top horizontal NEPLOX text to the width of the logo,
5353
// which is bigger horizontally than it is vertically.
5454
// 2. text-[2rem] is the size of the social icons, we match this size on small layouts for consistency.
55-
className="text-theme font-horizon col-start-2 row-start-1 justify-self-center text-[2rem] leading-none md:text-[min(10vh,6vw)]"
55+
className="font-horizon text-theme col-start-2 row-start-1 justify-self-center text-[2rem] leading-none md:text-[min(10vh,6vw)]"
5656
>
5757
NEPLOX
5858
</h1>
@@ -76,7 +76,7 @@ function Landing() {
7676

7777
{/* Signature */}
7878
<div className="col-start-1 -col-end-1 row-start-3 md:col-start-2 md:col-end-auto">
79-
<h3 className="h-full w-0 max-w-0 min-w-full text-center font-sans font-light lg:text-lg">
79+
<h3 className="font-theme-sans h-full w-0 max-w-0 min-w-full text-center font-light lg:text-lg">
8080
<span className="align-baseline hyphens-manual">
8181
EST. 2024 BY CYBER&shy;SECURITY RESEARCHERS
8282
</span>
@@ -91,7 +91,7 @@ function Landing() {
9191
key={text}
9292
className={`${canHover ? "hover:animate-shake" : ""} ${
9393
navShake[index][0] ? "text-shadow animate-shake" : ""
94-
} nav-autoscale cursor-not-allowed font-sans leading-7 font-normal whitespace-nowrap`}
94+
} nav-autoscale font-theme-sans cursor-not-allowed leading-7 font-normal whitespace-nowrap`}
9595
// Avoid conflicting with the hover animation
9696
onClick={() => !canHover && navShake[index][1](true)}
9797
onAnimationEnd={() => navShake[index][1](false)}
@@ -107,23 +107,21 @@ function Landing() {
107107

108108
{/* About */}
109109
<div className="col-start-1 -col-end-1 row-start-5 flex min-h-0 flex-col items-center justify-evenly gap-y-6 md:col-start-3 md:-col-end-1 md:row-start-2">
110-
<p className="max-w-lg text-justify font-serif leading-relaxed font-normal lg:text-lg/7 xl:text-xl/7">
110+
<p className="font-theme-serif max-w-lg text-justify leading-relaxed font-normal lg:text-lg/7 xl:text-xl/7">
111111
Formed by like-minded, top-tier{" "}
112-
<b className="theme-highlight">
113-
&thinsp;security researchers&thinsp;
114-
</b>{" "}
112+
<b className="text-highlight">&thinsp;security researchers&thinsp;</b>{" "}
115113
from diverse backgrounds, the <b className="text-theme">Neplox</b>{" "}
116114
team is fueled by{" "}
117-
<b className="theme-highlight">&thinsp;curiosity&thinsp;</b> to
118-
explore and <b className="theme-highlight">&thinsp;secure&thinsp;</b>{" "}
119-
modern systems.
115+
<b className="text-highlight">&thinsp;curiosity&thinsp;</b> to explore
116+
and <b className="text-highlight">&thinsp;secure&thinsp;</b> modern
117+
systems.
120118
</p>
121-
<p className="max-w-lg text-justify font-serif leading-relaxed font-normal lg:text-lg/7 xl:text-xl/7">
119+
<p className="font-theme-serif max-w-lg text-justify leading-relaxed font-normal lg:text-lg/7 xl:text-xl/7">
122120
From international CTF winners to hardened reverse engineers and bug
123121
bounty hunters, our unique skillsets come together to offer a{" "}
124-
<b className="theme-highlight">&thinsp;fresh perspective&thinsp;</b>{" "}
125-
on the security of{" "}
126-
<b className="theme-highlight">&thinsp;Web3&thinsp;</b> ecosystems.
122+
<b className="text-highlight">&thinsp;fresh perspective&thinsp;</b> on
123+
the security of <b className="text-highlight">&thinsp;Web3&thinsp;</b>{" "}
124+
ecosystems.
127125
</p>
128126
</div>
129127

‎tailwind.config.ts‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

0 commit comments

Comments
 (0)