@anydigital/bricks 0.21.0 → 0.21.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -1
- package/bricks/__html.css +4 -6
- package/bricks/_prose.css +1 -2
- package/bricks/_util.css +14 -1
- package/dist/bricks.css +23 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -73,7 +73,7 @@ The `.prose` class provides enhanced typography for article content and long-for
|
|
|
73
73
|
|
|
74
74
|
**Container:**
|
|
75
75
|
|
|
76
|
-
- Full width
|
|
76
|
+
- Full width
|
|
77
77
|
- Centered with automatic inline margins
|
|
78
78
|
|
|
79
79
|
**Typography Helpers:**
|
|
@@ -133,6 +133,18 @@ The `.invert` class can be used to invert the scrollbar colors, which is particu
|
|
|
133
133
|
}
|
|
134
134
|
```
|
|
135
135
|
|
|
136
|
+
#### Link Whitespace Control
|
|
137
|
+
|
|
138
|
+
The `.whitespace-nowrap` class can be applied to links to prevent them from wrapping, which is particularly useful when links contain icons that should stay with the text:
|
|
139
|
+
|
|
140
|
+
```html
|
|
141
|
+
<a href="#" class="whitespace-nowrap">
|
|
142
|
+
<i><img src="icon.svg" alt="" /></i>Stay with me
|
|
143
|
+
</a>
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
This ensures the icon and the text stay together on the same line. If you need nested elements to allow wrapping, they are automatically reset to `white-space: normal`.
|
|
147
|
+
|
|
136
148
|
**Usage:**
|
|
137
149
|
|
|
138
150
|
```html
|
package/bricks/__html.css
CHANGED
|
@@ -8,11 +8,6 @@ body {
|
|
|
8
8
|
/* Ensures body takes at least the full height of the viewport (using dynamic viewport height for better mobile support) */
|
|
9
9
|
min-height: 100dvh;
|
|
10
10
|
|
|
11
|
-
/* Enable hyphenation and font smoothing for better typography */
|
|
12
|
-
hyphens: auto;
|
|
13
|
-
-webkit-font-smoothing: antialiased;
|
|
14
|
-
-moz-osx-font-smoothing: grayscale;
|
|
15
|
-
|
|
16
11
|
/* Make the body a flex container with column layout; main fills space */
|
|
17
12
|
display: flex;
|
|
18
13
|
flex-direction: column;
|
|
@@ -20,7 +15,10 @@ body {
|
|
|
20
15
|
flex-grow: 1;
|
|
21
16
|
}
|
|
22
17
|
|
|
23
|
-
|
|
18
|
+
-webkit-font-smoothing: antialiased;
|
|
19
|
+
-moz-osx-font-smoothing: grayscale;
|
|
20
|
+
hyphens: auto;
|
|
21
|
+
/* Links and tables are better (safer) without hyphenation */
|
|
24
22
|
a,
|
|
25
23
|
table {
|
|
26
24
|
hyphens: none;
|
package/bricks/_prose.css
CHANGED
package/bricks/_util.css
CHANGED
|
@@ -1,6 +1,19 @@
|
|
|
1
|
-
/* Utility classes */
|
|
1
|
+
/* Utility classes and fixes */
|
|
2
|
+
|
|
2
3
|
.invert {
|
|
4
|
+
/* Fix the scrollbar color when inverted */
|
|
3
5
|
::-webkit-scrollbar {
|
|
4
6
|
filter: invert(1) !important;
|
|
5
7
|
}
|
|
6
8
|
}
|
|
9
|
+
|
|
10
|
+
/* Workaround for icon to stay with text in links */
|
|
11
|
+
a.whitespace-nowrap {
|
|
12
|
+
white-space: nowrap;
|
|
13
|
+
/* Fix for Safari :( why Safari, why? */
|
|
14
|
+
display: inline-block;
|
|
15
|
+
|
|
16
|
+
span {
|
|
17
|
+
white-space: normal;
|
|
18
|
+
}
|
|
19
|
+
}
|
package/dist/bricks.css
CHANGED
|
@@ -14,11 +14,6 @@ body {
|
|
|
14
14
|
/* Ensures body takes at least the full height of the viewport (using dynamic viewport height for better mobile support) */
|
|
15
15
|
min-height: 100dvh;
|
|
16
16
|
|
|
17
|
-
/* Enable hyphenation and font smoothing for better typography */
|
|
18
|
-
hyphens: auto;
|
|
19
|
-
-webkit-font-smoothing: antialiased;
|
|
20
|
-
-moz-osx-font-smoothing: grayscale;
|
|
21
|
-
|
|
22
17
|
/* Make the body a flex container with column layout; main fills space */
|
|
23
18
|
display: flex;
|
|
24
19
|
flex-direction: column;
|
|
@@ -28,16 +23,21 @@ body > main {
|
|
|
28
23
|
flex-grow: 1;
|
|
29
24
|
}
|
|
30
25
|
|
|
31
|
-
|
|
26
|
+
body {
|
|
27
|
+
|
|
28
|
+
-webkit-font-smoothing: antialiased;
|
|
29
|
+
-moz-osx-font-smoothing: grayscale;
|
|
30
|
+
hyphens: auto;
|
|
31
|
+
/* Links and tables are better (safer) without hyphenation */
|
|
32
|
+
}
|
|
32
33
|
|
|
33
34
|
body a,body table {
|
|
34
35
|
hyphens: none;
|
|
35
36
|
}
|
|
36
37
|
|
|
37
38
|
.prose {
|
|
38
|
-
/* Container-like behavior with
|
|
39
|
+
/* Container-like behavior with auto margins */
|
|
39
40
|
width: 100%;
|
|
40
|
-
padding: 1rem;
|
|
41
41
|
margin-inline: auto;
|
|
42
42
|
|
|
43
43
|
/* Helper for multi-line subtitles */
|
|
@@ -316,8 +316,22 @@ body a,body table {
|
|
|
316
316
|
display: none !important;
|
|
317
317
|
}
|
|
318
318
|
|
|
319
|
-
/* Utility classes */
|
|
319
|
+
/* Utility classes and fixes */
|
|
320
|
+
|
|
321
|
+
/* Fix the scrollbar color when inverted */
|
|
320
322
|
|
|
321
323
|
.invert ::-webkit-scrollbar {
|
|
322
324
|
filter: invert(1) !important;
|
|
323
325
|
}
|
|
326
|
+
|
|
327
|
+
/* Workaround for icon to stay with text in links */
|
|
328
|
+
|
|
329
|
+
a.whitespace-nowrap {
|
|
330
|
+
white-space: nowrap;
|
|
331
|
+
/* Fix for Safari :( why Safari, why? */
|
|
332
|
+
display: inline-block;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
a.whitespace-nowrap span {
|
|
336
|
+
white-space: normal;
|
|
337
|
+
}
|
package/package.json
CHANGED