Skip to content

Commit 12245b8

Browse files
avivkelleravivkeller
committed
fix css
1 parent 14cd0d6 commit 12245b8

File tree

7 files changed

+153
-170
lines changed

7 files changed

+153
-170
lines changed

‎apps/site/styles/effects.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@reference "@node-core/ui-components/styles/index.css";
2-
31
@utility turtle {
42
@apply animate-surf
53
absolute

‎apps/site/styles/locales.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@reference "@node-core/ui-components/styles/index.css";
2-
31
/**
42
* To enhance readability for Korean users, line spacing is increased,
53
* line breaks in the middle of words are prevented, and long words are

‎packages/ui-components/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
},
1313
"scripts": {
1414
"compile:ts": "tsc",
15-
"compile:css": "postcss --dir dist --base src \"src/**/*.css\"",
15+
"compile:css": "postcss --dir dist --base src \"src/**/*.module.css\" src/styles/index.css",
1616
"compile": "node --run compile:ts && node --run compile:css",
1717
"publish": "node --run compile && node scripts/publish.mjs",
1818
"lint": "turbo run lint:js lint:css",

‎packages/ui-components/src/styles/base.css‎

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,17 @@
1-
@reference "tailwindcss";
2-
@reference "./theme.css";
3-
4-
@layer utilities {
5-
* {
6-
@apply subpixel-antialiased;
7-
}
1+
* {
2+
@apply subpixel-antialiased;
3+
}
84

9-
html,
10-
body {
11-
@apply h-full;
12-
}
5+
html,
6+
body {
7+
@apply h-full;
8+
}
139

14-
body {
15-
@apply font-open-sans
16-
bg-white
17-
text-neutral-950
18-
motion-safe:scroll-smooth
19-
dark:bg-neutral-950
20-
dark:text-white;
21-
}
10+
body {
11+
@apply font-open-sans
12+
bg-white
13+
text-neutral-950
14+
motion-safe:scroll-smooth
15+
dark:bg-neutral-950
16+
dark:text-white;
2217
}

‎packages/ui-components/src/styles/effects.css‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
@reference "tailwindcss";
2-
@reference "./theme.css";
3-
41
h1.special {
52
@apply bg-gradient-subtle-gray
63
dark:bg-gradient-subtle-white

‎packages/ui-components/src/styles/index.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
@import './theme.css';
1111
@import './animations.css';
1212
@import './effects.css';
13-
@import './base.css';
14-
@import './markdown.css';
13+
@import './base.css' layer(utilities);
14+
@import './markdown.css' layer(utilities);
1515

1616
/*
1717
The default border color has changed to `currentColor` in Tailwind CSS v4,

‎packages/ui-components/src/styles/markdown.css‎

Lines changed: 136 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -1,178 +1,173 @@
1-
@reference "tailwindcss";
2-
@reference "./theme.css";
1+
main {
2+
@apply flex
3+
w-full
4+
flex-col
5+
gap-6;
6+
7+
hr {
8+
@apply w-full
9+
border-t
10+
border-t-neutral-200
11+
bg-white
12+
dark:border-t-neutral-900
13+
dark:bg-neutral-950;
14+
}
315

4-
@layer utilities {
5-
main {
6-
@apply flex
7-
w-full
8-
flex-col
9-
gap-6;
10-
11-
hr {
12-
@apply w-full
13-
border-t
14-
border-t-neutral-200
15-
bg-white
16-
dark:border-t-neutral-900
17-
dark:bg-neutral-950;
18-
}
16+
h1 {
17+
@apply text-3xl;
18+
}
1919

20-
h1 {
21-
@apply text-3xl;
22-
}
20+
h2 {
21+
@apply text-2xl;
22+
}
2323

24-
h2 {
25-
@apply text-2xl;
26-
}
24+
h3 {
25+
@apply text-xl;
26+
}
2727

28-
h3 {
29-
@apply text-xl;
30-
}
28+
h4 {
29+
@apply text-lg;
30+
}
3131

32-
h4 {
33-
@apply text-lg;
34-
}
32+
h5,
33+
h6 {
34+
@apply text-base;
35+
}
3536

36-
h5,
37-
h6 {
38-
@apply text-base;
37+
h1,
38+
h2,
39+
h3,
40+
h4,
41+
h5,
42+
h6 {
43+
@apply font-semibold
44+
text-neutral-900
45+
dark:text-white;
46+
47+
&[id] a {
48+
@apply text-neutral-900
49+
dark:text-white;
3950
}
51+
}
4052

41-
h1,
42-
h2,
43-
h3,
44-
h4,
45-
h5,
46-
h6 {
47-
@apply font-semibold
48-
text-neutral-900
49-
dark:text-white;
53+
strong {
54+
@apply font-semibold;
55+
}
5056

51-
&[id] a {
52-
@apply text-neutral-900
53-
dark:text-white;
54-
}
55-
}
57+
code {
58+
@apply font-ibm-plex-mono
59+
rounded-xs
60+
bg-neutral-100
61+
px-1
62+
text-base
63+
font-semibold
64+
text-neutral-900
65+
dark:bg-neutral-900
66+
dark:text-white;
67+
}
5668

57-
strong {
58-
@apply font-semibold;
59-
}
69+
p {
70+
@apply text-neutral-900
71+
dark:text-white;
72+
}
6073

61-
code {
62-
@apply font-ibm-plex-mono
63-
rounded-xs
64-
bg-neutral-100
65-
px-1
66-
text-base
67-
font-semibold
68-
text-neutral-900
69-
dark:bg-neutral-900
70-
dark:text-white;
74+
/* link that isn't inside a heading */
75+
a:not(h1 > a):not(h2 > a):not(h3 > a):not(h4 > a):not(h5 > a):not(h6 > a),
76+
.anchor {
77+
@apply max-xs:font-semibold
78+
text-green-600
79+
dark:text-green-400;
80+
81+
&:hover {
82+
@apply text-green-900
83+
dark:text-green-300;
7184
}
7285

73-
p {
74-
@apply text-neutral-900
75-
dark:text-white;
86+
&[role='button'] {
87+
@apply max-xs:font-regular;
7688
}
7789

78-
/* link that isn't inside a heading */
79-
a:not(h1 > a):not(h2 > a):not(h3 > a):not(h4 > a):not(h5 > a):not(h6 > a),
80-
.anchor {
81-
@apply max-xs:font-semibold
82-
text-green-600
83-
dark:text-green-400;
90+
&:has(code) {
91+
@apply max-xs:decoration-neutral-800
92+
dark:max-xs:decoration-neutral-200;
8493

85-
&:hover {
86-
@apply text-green-900
87-
dark:text-green-300;
88-
}
89-
90-
&[role='button'] {
91-
@apply max-xs:font-regular;
94+
code {
95+
@apply text-inherit;
9296
}
97+
}
98+
}
9399

94-
&:has(code) {
95-
@apply max-xs:decoration-neutral-800
96-
dark:max-xs:decoration-neutral-200;
100+
ul {
101+
@apply list-disc
102+
pl-9
103+
pr-5
104+
leading-6
105+
text-neutral-900
106+
dark:text-white;
97107

98-
code {
99-
@apply text-inherit;
100-
}
101-
}
108+
li div:has(> pre) {
109+
@apply my-1!;
102110
}
111+
}
103112

104-
ul {
105-
@apply list-disc
106-
pl-9
107-
pr-5
108-
leading-6
109-
text-neutral-900
110-
dark:text-white;
113+
ol {
114+
@apply list-decimal
115+
px-5
116+
leading-6
117+
text-neutral-900
118+
dark:text-white;
111119

112-
li div:has(> pre) {
113-
@apply my-1!;
114-
}
120+
li div:has(> pre) {
121+
@apply my-1!;
115122
}
123+
}
116124

117-
ol {
118-
@apply list-decimal
119-
px-5
120-
leading-6
125+
table {
126+
@apply rounded-xs
127+
mb-1
128+
w-full
129+
border-separate
130+
border-spacing-0
131+
border
132+
border-neutral-200
133+
text-left
134+
text-sm
135+
dark:border-neutral-800;
136+
137+
th,
138+
td {
139+
@apply max-xs:block
140+
max-xs:border-l-0
141+
border
142+
border-r-0
143+
border-t-0
144+
border-neutral-200
145+
px-4
146+
py-2
121147
text-neutral-900
148+
dark:border-neutral-800
122149
dark:text-white;
123150

124-
li div:has(> pre) {
125-
@apply my-1!;
151+
> a {
152+
@apply pr-2;
126153
}
127154
}
128155

129-
table {
130-
@apply rounded-xs
131-
mb-1
132-
w-full
133-
border-separate
134-
border-spacing-0
135-
border
136-
border-neutral-200
137-
text-left
138-
text-sm
139-
dark:border-neutral-800;
140-
141-
th,
142-
td {
143-
@apply max-xs:block
144-
max-xs:border-l-0
145-
border
146-
border-r-0
147-
border-t-0
148-
border-neutral-200
149-
px-4
150-
py-2
151-
text-neutral-900
152-
dark:border-neutral-800
153-
dark:text-white;
154-
155-
> a {
156-
@apply pr-2;
157-
}
158-
}
159-
160-
th {
161-
@apply font-semibold;
162-
}
156+
th {
157+
@apply font-semibold;
158+
}
163159

164-
tr:last-child > td {
165-
@apply sm:border-b-0;
160+
tr:last-child > td {
161+
@apply sm:border-b-0;
166162

167-
&:last-child {
168-
@apply max-xs:border-b-0;
169-
}
163+
&:last-child {
164+
@apply max-xs:border-b-0;
170165
}
166+
}
171167

172-
td:first-child,
173-
th:first-child {
174-
@apply sm:border-l-0;
175-
}
168+
td:first-child,
169+
th:first-child {
170+
@apply sm:border-l-0;
176171
}
177172
}
178173
}

0 commit comments

Comments
 (0)