Skip to content

Commit 0a10785

Browse files
omargfhomargfh
committed
refactor(@repo/tailwind-config): create mixins for netlogo/docs styling
1 parent 59dd987 commit 0a10785

2 files changed

Lines changed: 563 additions & 0 deletions

File tree

‎packages/tailwind-config/scss/docs-mixins.scss‎

Lines changed: 337 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,337 @@
1+
@mixin default {
2+
/* Lists */
3+
ul,
4+
ol,
5+
menu {
6+
list-style: none;
7+
}
8+
}
9+
10+
@mixin headings {
11+
h1,
12+
h2,
13+
h3 {
14+
--heading-inline-padding: var(--space-xl);
15+
}
16+
17+
/* Headings */
18+
h1 {
19+
font-size: var(--h1-size);
20+
font-weight: 700;
21+
letter-spacing: 0.00625rem;
22+
line-height: var(--line-height-heading);
23+
24+
background-color: var(--primary-heading-background-color);
25+
color: var(--primary-heading-text-color);
26+
27+
--padding-block: calc(0.8 * var(--space-lg));
28+
padding: var(--padding-block) var(--heading-inline-padding);
29+
}
30+
31+
h1,
32+
h1 a {
33+
scroll-margin-top: calc(
34+
var(--scroll-margin) + var(--h1-size) + 2 * var(--padding-block)
35+
); /* 100% of the h1 height + padding */
36+
}
37+
38+
h2 {
39+
font-size: var(--h2-size);
40+
font-weight: 700;
41+
letter-spacing: 0.00625rem;
42+
line-height: var(--line-height-heading);
43+
44+
background-color: var(--primary-heading-background-color);
45+
color: var(--primary-heading-text-color);
46+
47+
--padding-block: calc(0.7 * var(--space-lg));
48+
padding: var(--padding-block) var(--heading-inline-padding);
49+
}
50+
51+
h2,
52+
h2 a {
53+
scroll-margin-top: calc(
54+
var(--scroll-margin) + var(--h2-size) + 2 * var(--padding-block)
55+
); /* 100% of the h2 height + padding */
56+
}
57+
58+
h3 {
59+
font-size: var(--h3-size);
60+
background-color: var(--secondary-heading-background-color);
61+
color: var(--secondary-heading-text-color);
62+
63+
--padding-block: calc(0.6 * var(--space-lg));
64+
padding: var(--padding-block) var(--heading-inline-padding);
65+
font-weight: 700;
66+
}
67+
68+
h3,
69+
h3 a,
70+
.dict_entry {
71+
/* special case for dictionary entries requires redefining padding */
72+
--padding-block: calc(0.6 * var(--space-lg));
73+
scroll-margin-top: calc(
74+
var(--scroll-margin) + var(--h3-size) + 2 * var(--padding-block) + var(--ui-header-height)
75+
); /* 100% of the h3 height + padding */
76+
}
77+
78+
h4 {
79+
color: var(--color-black);
80+
font-size: var(--h4-size);
81+
font-weight: 500;
82+
}
83+
84+
h4,
85+
h4 a {
86+
scroll-margin-top: calc(
87+
var(--scroll-margin) + var(--h4-size)
88+
); /* 100% of the h4 height + padding */
89+
}
90+
91+
h5 {
92+
font-size: var(--h5-size);
93+
font-weight: 600;
94+
color: #707290;
95+
}
96+
97+
h5,
98+
h5 a {
99+
scroll-margin-top: calc(
100+
var(--scroll-margin) + var(--h5-size)
101+
); /* 100% of the h5 height + padding */
102+
}
103+
104+
h1 a:focus-visible,
105+
h2 a:focus-visible,
106+
h3 a:focus-visible,
107+
h4 a:focus-visible,
108+
h5 a:focus-visible {
109+
outline: none;
110+
text-decoration: underline;
111+
}
112+
113+
h1:has(a:hover),
114+
h2:has(a:hover) {
115+
background-color: var(--primary-heading-background-color-hover);
116+
color: var(--primary-heading-text-color);
117+
}
118+
119+
h3:has(a:hover) {
120+
background-color: var(--secondary-heading-background-color-hover);
121+
color: var(--secondary-heading-text-color);
122+
}
123+
124+
h4:has(a:hover),
125+
h5:has(a:hover),
126+
h6:has(a:hover) {
127+
/* Placeholder */
128+
filter: brightness(0.9); /* Darken link on hover */
129+
}
130+
131+
h1 code a,
132+
h2 code a {
133+
color: var(--primary-heading-text-color);
134+
}
135+
136+
h1 code a:hover,
137+
h2 code a:hover {
138+
color: var(--primary-heading-text-color);
139+
text-decoration: underline;
140+
}
141+
142+
h1 code a:visited,
143+
h2 code a:visited {
144+
color: var(--primary-heading-text-color);
145+
text-decoration: dotted;
146+
}
147+
}
148+
149+
@mixin toc {
150+
/* Common */
151+
div.toc ul,
152+
div.toc ul a {
153+
color: var(--color-link);
154+
text-decoration: none;
155+
}
156+
157+
div.toc ul a:hover,
158+
div.toc ul a:focus {
159+
color: var(--color-link-hover);
160+
border: none;
161+
outline: none;
162+
}
163+
164+
/* Level 1 List */
165+
div.toc > ul {
166+
/* level 1 */
167+
font-weight: 800; /* Bold for top-level links */
168+
font-size: 1.3rem; /* Larger size for top-level links */
169+
line-height: 2rem; /* Increased line height for readability */
170+
list-style: decimal;
171+
}
172+
173+
/* Second Level List */
174+
div.toc > ul ul {
175+
max-width: 100ch; /* Limit the width */
176+
list-style: decimal;
177+
}
178+
179+
div.toc > ul li ul {
180+
margin-top: var(--space-md); /* Has some space before the sublist */
181+
}
182+
183+
div.toc > ul ul {
184+
/* level 2 */
185+
list-style-type: disc; /* Use disc bullets for sublists */
186+
margin-bottom: var(--block-bottom); /* Space after the sublist */
187+
}
188+
189+
div.toc > ul ul li,
190+
div.toc > ul ul li a {
191+
/* level 2 */
192+
font-weight: 400; /* Normal weight for sublist items */
193+
font-size: 1rem; /* Normal size for sublist items */
194+
}
195+
}
196+
197+
@mixin prose {
198+
.prose {
199+
margin-block: var(--space-lg);
200+
}
201+
202+
.contained-prose-lg {
203+
padding: 0 var(--space-lg);
204+
max-width: var(--max-width-ch);
205+
line-height: var(--line-height);
206+
}
207+
208+
.contained-prose-xl {
209+
padding: 0 var(--space-xl);
210+
max-width: var(--max-width-ch);
211+
line-height: var(--line-height);
212+
}
213+
214+
.prose > p,
215+
.prose > ul,
216+
.prose > dl,
217+
.prose > ol,
218+
.prose > table,
219+
.prose > img,
220+
.prose > h4,
221+
.prose > h5,
222+
.prose > div,
223+
.prose > video,
224+
.prose > audio,
225+
.prose > figure,
226+
.prose > figure > figcaption,
227+
.prose > button {
228+
padding: 0 var(--space-xl);
229+
max-width: var(--max-width-ch);
230+
}
231+
232+
// Table Specific Configuration
233+
.prose > table {
234+
margin: 0 var(--space-xl) var(--space-lg) var(--space-xl);
235+
}
236+
237+
.prose > div.table-container,
238+
.prose > table:not(.table-container table) {
239+
margin-inline: var(--space-xl);
240+
}
241+
242+
.prose > pre,
243+
.prose > blockquote,
244+
.prose div.blockquote {
245+
margin: var(--space-lg) var(--space-xl);
246+
padding: var(--space-md);
247+
}
248+
249+
.prose blockquote,
250+
.prose div.blockquote {
251+
max-width: calc(min(var(--max-width-ch), 100%) - 2 * (var(--space-xl)));
252+
}
253+
.prose blockquote p,
254+
.prose div.blockquote p {
255+
width: min(100%, calc(var(--max-width-ch) - 2 * (var(--space-xl))));
256+
}
257+
258+
.prose blockquote > *:first-child:last-child {
259+
margin-bottom: 0;
260+
}
261+
262+
.prose li pre {
263+
padding: 0;
264+
}
265+
266+
// Images
267+
.prose img,
268+
.prose video,
269+
.prose audio {
270+
max-width: 100%;
271+
height: auto;
272+
display: block;
273+
margin: 1rem auto;
274+
}
275+
276+
.prose img.screenshot {
277+
display: inherit;
278+
margin: 1em auto;
279+
}
280+
281+
// Prose lists
282+
.prose ol {
283+
list-style: decimal;
284+
}
285+
286+
.prose ul,
287+
menu {
288+
list-style: disc;
289+
}
290+
291+
.prose ul ul {
292+
list-style: circle;
293+
}
294+
295+
// Variants
296+
297+
.prose-tight {
298+
--space-xl: 0.5rem;
299+
--space-lg: 0.3rem;
300+
--space-md: 0;
301+
--space-sm: 0;
302+
}
303+
304+
.prose-medium {
305+
--space-xl: 3rem;
306+
--space-lg: 1.5rem;
307+
--space-md: 0.7rem;
308+
--space-sm: 0.55rem;
309+
310+
@media (max-width: 1024px) {
311+
--space-xl: 2rem;
312+
--space-lg: 1.5rem;
313+
--space-md: 1rem;
314+
--space-sm: 0.75rem;
315+
}
316+
}
317+
318+
.prose-text-medium {
319+
--max-width-ch: min(90%, 100ch);
320+
321+
--h1-size: 2.3rem;
322+
--h2-size: 1.8rem;
323+
--h3-size: 1.55rem;
324+
--h4-size: 1.35rem;
325+
--h5-size: 1.05rem;
326+
--h6-size: 0.9rem;
327+
328+
@media (max-width: 1024px) {
329+
--max-width-ch: 150ch;
330+
}
331+
}
332+
333+
.prose-margin-tight {
334+
--block-top: 0.5rem;
335+
--block-bottom: 0.5rem;
336+
}
337+
}

0 commit comments

Comments
 (0)