@anydigital/bricks 0.27.0-alpha.4 → 0.27.0-alpha.5

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.
Files changed (10) hide show
  1. package/assets/breakout.css +10 -4
  2. package/assets/bricks.css +57 -8
  3. package/assets/bricks.theme.css +3 -2
  4. package/bricks.gemspec +1 -1
  5. package/package.json +2 -1
  6. package/src/_refactor/_prose.css +0 -49
  7. package/src/_tricks.css +45 -4
  8. package/src/breakout.css +10 -4
  9. package/src/bricks.theme.css +3 -2
  10. package/src/_refactor/_util.css +0 -19
package/assets/breakout.css CHANGED
@@ -1,6 +1,7 @@
1
1
  /* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
2
2
 
3
- .breakout {
3
+ .breakout,
4
+ .breakout-all {
4
5
  /* Prepare the container for breakout elements */
5
6
  padding-inline: 10%;
6
7
  max-width: calc(10% + 65ch + 10%);
@@ -29,9 +30,10 @@
29
30
  min-width: auto;
30
31
  }
31
32
 
32
- /* Tables are so special :( */
33
+ /* <!--section:responsive-table-without-wrapper-->
34
+ ### Responsive tables without wrapper
35
+ ```css */
33
36
  &:is(table):not(.does-not-exist) {
34
- /* @TODO: add postcss's `:not(.does-not-exist)` to tricks-wiki */
35
37
  /* Let them full-bleed */
36
38
  width: max-content;
37
39
  min-width: auto;
@@ -48,6 +50,10 @@
48
50
  padding-inline-start: 0;
49
51
  }
50
52
  }
53
+ /*```
54
+ #### Soft-increase selector specificity
55
+ `&:is(table):not(.does-not-exist)` trick (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
56
+ <!--section--> */
51
57
 
52
58
  /* Max out the width of the element */
53
59
  &.breakout-item-max {
@@ -73,7 +79,7 @@
73
79
  &::before {
74
80
  width: 10em;
75
81
  right: 100%;
76
- margin-right: 1rem;
82
+ margin-right: 0.8ch;
77
83
  height: 0.25em;
78
84
  top: 50%;
79
85
  transform: translateY(-50%);
package/assets/bricks.css CHANGED
@@ -49,7 +49,8 @@ pre {
49
49
 
50
50
  /* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
51
51
 
52
- .breakout {
52
+ .breakout,
53
+ .breakout-all {
53
54
  /* Prepare the container for breakout elements */
54
55
  padding-inline: 10%;
55
56
  max-width: calc(10% + 65ch + 10%);
@@ -78,9 +79,10 @@ pre {
78
79
  min-width: auto;
79
80
  }
80
81
 
81
- /* Tables are so special :( */
82
+ /* <!--section:responsive-table-without-wrapper-->
83
+ ### Responsive tables without wrapper
84
+ ```css */
82
85
  &:is(table):not(.does-not-exist) {
83
- /* @TODO: add postcss's `:not(.does-not-exist)` to tricks-wiki */
84
86
  /* Let them full-bleed */
85
87
  width: max-content;
86
88
  min-width: auto;
@@ -97,6 +99,10 @@ pre {
97
99
  padding-inline-start: 0;
98
100
  }
99
101
  }
102
+ /*```
103
+ #### Soft-increase selector specificity
104
+ `&:is(table):not(.does-not-exist)` trick (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
105
+ <!--section--> */
100
106
 
101
107
  /* Max out the width of the element */
102
108
  &.breakout-item-max {
@@ -122,7 +128,7 @@ pre {
122
128
  &::before {
123
129
  width: 10em;
124
130
  right: 100%;
125
- margin-right: 1rem;
131
+ margin-right: 0.8ch;
126
132
  height: 0.25em;
127
133
  top: 50%;
128
134
  transform: translateY(-50%);
@@ -174,10 +180,53 @@ table.borderless {
174
180
  }
175
181
  }
176
182
 
183
+ /* Header anchors @TODO: add to tricks-wiki */
184
+
185
+ h1,
186
+ h2,
187
+ h3,
188
+ h4,
189
+ h5,
190
+ h6 {
191
+ position: relative;
192
+
193
+ [data-is-anchor] {
194
+ visibility: hidden;
195
+ position: absolute;
196
+ top: 0;
197
+ right: 100%;
198
+ padding-right: 0.2ch;
199
+ color: silver;
200
+ text-decoration: none;
201
+ }
202
+ &:hover {
203
+ [data-is-anchor] {
204
+ visibility: visible;
205
+ }
206
+ }
207
+ }
208
+
177
209
  /* Favicons in links @TODO: add to tricks-wiki */
178
210
 
179
- a > i > img {
180
- max-height: 1.25em;
181
- margin-top: calc(-0.25em / 2);
182
- margin-inline-end: 0.25em;
211
+ a[data-has-favicon] {
212
+ display: inline-block;
213
+
214
+ > img {
215
+ max-height: 1.25em;
216
+ margin-top: calc(-0.25em / 2);
217
+ margin-inline-end: 0.25em;
218
+
219
+ /* for tw-typography (.prose) */
220
+ display: inline-block;
221
+ margin-bottom: 0;
222
+ }
223
+ }
224
+
225
+ /* Tailwind tricks */
226
+
227
+ .invert {
228
+ /* Fix the scrollbar color when inverted */
229
+ ::-webkit-scrollbar {
230
+ filter: invert(1) !important;
231
+ }
183
232
  }
package/assets/bricks.theme.css CHANGED
@@ -1,9 +1,10 @@
1
1
  h1 {
2
- font-size: 3rem;
2
+ font-size: 2.5em; /* for pico.css & tw-typography */
3
+ margin-bottom: 1rem; /* for tw-typography */
3
4
  }
4
5
 
5
6
  hr {
6
- margin-block: 2rem;
7
+ margin-block: 2em; /* for pico.css & tw-typography */
7
8
  }
8
9
 
9
10
  pre {
package/bricks.gemspec CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Gem::Specification.new do |spec|
4
4
  spec.name = "bricks"
5
- spec.version = "0.27.0-alpha.4"
5
+ spec.version = "0.27.0-alpha.5"
6
6
  spec.authors = ["Anton Staroverov"]
7
7
 
8
8
  spec.summary = "Framework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development."
package/package.json CHANGED
@@ -1,10 +1,11 @@
1
1
  {
2
2
  "name": "@anydigital/bricks",
3
- "version": "0.27.0-alpha.4",
3
+ "version": "0.27.0-alpha.5",
4
4
  "description": "Framework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development.",
5
5
  "style": "./src/bricks.css",
6
6
  "exports": {
7
7
  ".": "./src/bricks.css",
8
+ "./theme": "./src/bricks.theme.css",
8
9
  "./dist": "./dist/bricks.css"
9
10
  },
10
11
  "scripts": {
package/src/_refactor/_prose.css CHANGED
@@ -1,8 +1,4 @@
1
1
  .prose {
2
- /* Container-like behavior with auto margins */
3
- width: 100%;
4
- margin-inline: auto;
5
-
6
2
  /* Helper for multi-line subtitles */
7
3
  sub {
8
4
  vertical-align: top;
@@ -24,22 +20,6 @@
24
20
  &:hover {
25
21
  text-decoration-thickness: 2px;
26
22
  }
27
-
28
- /* Helper to insert icons in links */
29
- i {
30
- height: 1em;
31
- margin-right: 0.25em;
32
- font-style: normal;
33
- /* Workaround to prevent underline */
34
- display: inline-block;
35
-
36
- img {
37
- height: 100%;
38
- margin: 0;
39
- position: relative;
40
- bottom: -0.15em;
41
- }
42
- }
43
23
  }
44
24
 
45
25
  img {
@@ -49,36 +29,7 @@
49
29
  }
50
30
  }
51
31
 
52
- /* Support for markdown anchors */
53
- h1,
54
- h2,
55
- h3,
56
- h4,
57
- h5,
58
- h6 {
59
- position: relative;
60
-
61
- .header-anchor {
62
- display: none;
63
- position: absolute;
64
- right: 100%;
65
- top: 0;
66
- padding-right: 0.2ch;
67
- color: rgba(0, 0, 0, 0.25);
68
- }
69
- &:hover {
70
- .header-anchor {
71
- display: block;
72
- }
73
- /* Support for `breakout-css` headings */
74
- &::before {
75
- margin-right: 1.5ch !important;
76
- }
77
- }
78
- }
79
32
  h1 {
80
- margin-bottom: 0.5em !important;
81
-
82
33
  sub {
83
34
  font-size: 50%;
84
35
  }
package/src/_tricks.css CHANGED
@@ -5,9 +5,50 @@ table.borderless {
5
5
  }
6
6
  }
7
7
 
8
+ /* Header anchors @TODO: add to tricks-wiki */
9
+ h1,
10
+ h2,
11
+ h3,
12
+ h4,
13
+ h5,
14
+ h6 {
15
+ position: relative;
16
+
17
+ [data-is-anchor] {
18
+ visibility: hidden;
19
+ position: absolute;
20
+ top: 0;
21
+ right: 100%;
22
+ padding-right: 0.2ch;
23
+ color: silver;
24
+ text-decoration: none;
25
+ }
26
+ &:hover {
27
+ [data-is-anchor] {
28
+ visibility: visible;
29
+ }
30
+ }
31
+ }
32
+
8
33
  /* Favicons in links @TODO: add to tricks-wiki */
9
- a > i > img {
10
- max-height: 1.25em;
11
- margin-top: calc(-0.25em / 2);
12
- margin-inline-end: 0.25em;
34
+ a[data-has-favicon] {
35
+ display: inline-block;
36
+
37
+ > img {
38
+ max-height: 1.25em;
39
+ margin-top: calc(-0.25em / 2);
40
+ margin-inline-end: 0.25em;
41
+
42
+ /* for tw-typography (.prose) */
43
+ display: inline-block;
44
+ margin-bottom: 0;
45
+ }
46
+ }
47
+
48
+ /* Tailwind tricks */
49
+ .invert {
50
+ /* Fix the scrollbar color when inverted */
51
+ ::-webkit-scrollbar {
52
+ filter: invert(1) !important;
53
+ }
13
54
  }
package/src/breakout.css CHANGED
@@ -1,6 +1,7 @@
1
1
  /* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
2
2
 
3
- .breakout {
3
+ .breakout,
4
+ .breakout-all {
4
5
  /* Prepare the container for breakout elements */
5
6
  padding-inline: 10%;
6
7
  max-width: calc(10% + 65ch + 10%);
@@ -29,9 +30,10 @@
29
30
  min-width: auto;
30
31
  }
31
32
 
32
- /* Tables are so special :( */
33
+ /* <!--section:responsive-table-without-wrapper-->
34
+ ### Responsive tables without wrapper
35
+ ```css */
33
36
  &:is(table):not(.does-not-exist) {
34
- /* @TODO: add postcss's `:not(.does-not-exist)` to tricks-wiki */
35
37
  /* Let them full-bleed */
36
38
  width: max-content;
37
39
  min-width: auto;
@@ -48,6 +50,10 @@
48
50
  padding-inline-start: 0;
49
51
  }
50
52
  }
53
+ /*```
54
+ #### Soft-increase selector specificity
55
+ `&:is(table):not(.does-not-exist)` trick (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
56
+ <!--section--> */
51
57
 
52
58
  /* Max out the width of the element */
53
59
  &.breakout-item-max {
@@ -73,7 +79,7 @@
73
79
  &::before {
74
80
  width: 10em;
75
81
  right: 100%;
76
- margin-right: 1rem;
82
+ margin-right: 0.8ch;
77
83
  height: 0.25em;
78
84
  top: 50%;
79
85
  transform: translateY(-50%);
package/src/bricks.theme.css CHANGED
@@ -1,9 +1,10 @@
1
1
  h1 {
2
- font-size: 3rem;
2
+ font-size: 2.5em; /* for pico.css & tw-typography */
3
+ margin-bottom: 1rem; /* for tw-typography */
3
4
  }
4
5
 
5
6
  hr {
6
- margin-block: 2rem;
7
+ margin-block: 2em; /* for pico.css & tw-typography */
7
8
  }
8
9
 
9
10
  pre {
package/src/_refactor/_util.css DELETED
@@ -1,19 +0,0 @@
1
- /* Utility classes and fixes */
2
-
3
- .invert {
4
- /* Fix the scrollbar color when inverted */
5
- ::-webkit-scrollbar {
6
- filter: invert(1) !important;
7
- }
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
- }