The Node.js® Website
keii.dev
1.baseLayout {
2 @apply grid
3 size-full
4 grid-cols-[1fr]
5 grid-rows-[auto_1fr_auto];
6}
7
8.articleLayout {
9 @apply mx-auto
10 grid
11 w-full
12 max-w-8xl
13 grid-rows-[1fr]
14 overflow-hidden
15 grid-areas-[sidebar_main_metabar,sidebar_footer_metabar]
16 sm:grid-cols-[theme(spacing.52)_1fr_theme(spacing.52)]
17 xl:grid-cols-[theme(spacing.80)_1fr_theme(spacing.80)]
18 xs:m-0
19 xs:block
20 xs:overflow-auto;
21
22 > *:nth-child(1) {
23 @apply grid-in-[sidebar];
24 }
25
26 > *:nth-child(2) {
27 @apply overflow-y-auto
28 overflow-x-hidden
29 bg-gradient-subtle
30 p-12
31 grid-in-[main]
32 dark:bg-gradient-subtle-dark
33 xl:px-18
34 xs:bg-none
35 xs:p-4
36 xs:dark:bg-none;
37 }
38
39 > *:nth-child(3) {
40 @apply grid-in-[metabar];
41 }
42
43 > *:nth-child(4) {
44 @apply sticky
45 bottom-0
46 flex
47 w-full
48 flex-col
49 items-center
50 self-stretch
51 border-t
52 border-t-neutral-200
53 bg-white
54 py-4
55 grid-in-[footer]
56 dark:border-t-neutral-900
57 dark:bg-neutral-950;
58 }
59}
60
61.centeredLayout {
62 @apply flex
63 w-full
64 min-w-0
65 items-center
66 justify-center
67 px-4
68 py-14
69 md:px-14
70 lg:px-28;
71
72 main {
73 @apply items-center
74 justify-center;
75 }
76}
77
78.homeLayout {
79 @apply gap-8
80 md:flex-row
81 md:gap-14
82 xl:gap-28
83 2xl:gap-32;
84
85 section {
86 &:nth-of-type(1) {
87 @apply flex
88 max-w-[500px]
89 flex-[1_0]
90 flex-col
91 gap-8;
92
93 > div {
94 @apply flex
95 max-w-[400px]
96 flex-col
97 gap-4;
98
99 p {
100 @apply text-base
101 md:text-lg;
102 }
103
104 small {
105 @apply text-center
106 text-sm
107 text-neutral-800
108 dark:text-neutral-400
109 xs:text-xs;
110
111 sup {
112 @apply cursor-help;
113 }
114 }
115 }
116 }
117
118 &:nth-of-type(2) {
119 @apply flex
120 min-w-0
121 max-w-full
122 flex-[1_1]
123 flex-col
124 items-center
125 gap-4
126 md:max-w-2xl
127 lg:max-w-3xl;
128
129 > div {
130 @apply w-full
131 max-w-md
132 md:max-w-full;
133 }
134
135 > p {
136 @apply text-center
137 text-sm
138 text-neutral-800
139 dark:text-neutral-200;
140 }
141 }
142 }
143}
144
145.blogLayout,
146.downloadLayout {
147 @apply flex
148 w-full
149 justify-center
150 bg-gradient-subtle
151 dark:bg-gradient-subtle-dark
152 xs:bg-none
153 xs:dark:bg-none;
154
155 main {
156 @apply max-w-5xl
157 gap-4
158 px-4
159 py-12
160 md:px-14
161 lg:px-28;
162 }
163}
164
165.downloadLayout {
166 section:nth-last-child(1) {
167 @apply flex
168 flex-col
169 gap-2;
170
171 p {
172 @apply text-sm;
173 }
174 }
175
176 section:nth-last-child(2) p {
177 @apply flex
178 flex-row
179 flex-wrap
180 items-center
181 gap-2
182 text-base;
183 }
184}
185
186.contentLayout {
187 @apply mx-auto
188 grid
189 w-full
190 max-w-8xl
191 grid-rows-[1fr]
192 sm:grid-cols-[1fr_theme(spacing.52)]
193 xl:grid-cols-[1fr_theme(spacing.80)]
194 xs:m-0
195 xs:block;
196
197 > *:nth-child(1) {
198 @apply flex
199 w-full
200 justify-center
201 border-l
202 border-l-neutral-200
203 bg-gradient-subtle
204 px-4
205 py-14
206 dark:border-l-neutral-900
207 dark:bg-gradient-subtle-dark
208 md:px-14
209 lg:px-28
210 xs:border-l-0
211 xs:bg-none
212 xs:pb-4
213 xs:dark:bg-none;
214
215 main {
216 @apply max-w-[660px]
217 gap-4;
218 }
219 }
220}
221
222.postLayout {
223 main {
224 > section {
225 @apply flex
226 flex-row
227 items-center
228 gap-4;
229 }
230
231 > div:nth-of-type(1) {
232 @apply mb-4
233 mt-2;
234 }
235 }
236}