@anyblades/blades 2.2.2 → 2.2.3

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/README.md +13 -13
  2. package/assets/blades.css +11 -4
  3. package/assets/blades.standalone.core.css +13 -4
  4. package/assets/blades.standalone.css +13 -4
  5. package/assets/breakout.css +10 -3
  6. package/assets/responsive-table.css +1 -1
  7. package/blades.gemspec +1 -1
  8. package/package.json +1 -1
  9. package/src/breakout.css +7 -3
  10. package/src/responsive-table.css +1 -1
package/README.md CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  <big>Fully compatible and actively maintained successor to Pico CSS.</big>
8
8
 
9
- Includes [Float labels](https://blades.ninja/css/float-label/), [Breakout layout](https://blades.ninja/css/breakout/) and other modern helpers. Simply switch `pico.css` to `blades.css` or use `blades.standalone.css` with other frameworks.
9
+ Includes [Float labels](//blades.ninja/css/float-label/), [Breakout layout](//blades.ninja/css/breakout/) and other modern helpers. Simply switch `pico.css` to `blades.css` or use `blades.standalone.css` with other frameworks.
10
10
 
11
11
  <!--section:gh-only-->
12
12
 
@@ -157,23 +157,23 @@ Living example: https://github.com/anyblades/build-awesome-starter/blob/main/_st
157
157
 
158
158
  <!--section:info-->
159
159
 
160
- ## <sup>Featured by</sup><!--A-Z-->
160
+ ## <sup>Featured by</sup><!--awesome,sites,social/Z-A-->
161
161
 
162
- - [https://fosstodon.org/@pauleveritt](https://fosstodon.org/@pauleveritt/116387278969347700)
163
- - [https://github.com/@gabrielizalo/awesome-css](https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/Lightweight)
164
- - [https://github.com/@uhub/awesome-css](https://github.com/uhub/awesome-css)
165
- - [https://github.com/awesome-11ty-build-awesome](https://github.com/anyblades/awesome-11ty-build-awesome)
166
- - [https://sveltiacms.app/docs/start](https://sveltiacms.app/en/docs/start#starter-templates)
167
- - [https://www.youtube.com/@githubsignals](https://www.youtube.com/shorts/FxtvnBCse8w)
168
- - [https://dummy.my/](https://dummy.my/frameworks/fw-blades-css/)
169
- - [https://github.com/classless-css](https://github.com/dbohdan/classless-css#components:~:text=Float%20Label) for [Float label](https://blades.ninja/css/float-label/)
170
- - [https://trendshift.io/](https://trendshift.io/repositories/29875) for [Pico fork](https://blades.ninja/css/pico/)
162
+ - https://github.com/uhub/awesome-css
163
+ - [classless-css](https://github.com/dbohdan/classless-css#components:~:text=float%20label) [#float-label](//blades.ninja/css/float-label/){.faded}
164
+ - [awesome-css-frameworks-and-ui-libraries](https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/Lightweight)
165
+ - [awesome-11ty-build-awesome](https://github.com/anyblades/awesome-11ty-build-awesome)
166
+ - https://dummy.my/frameworks/
167
+ - [sveltiacms.app](https://sveltiacms.app/en/docs/start#starter-templates)
168
+ - [https://trendshift.io/](https://trendshift.io/repositories/29875) [#pico-fork](//blades.ninja/css/pico/){.faded}
169
+ - [@pauleveritt](https://fosstodon.org/@pauleveritt/116387278969347700)
170
+ - [@githubsignals](https://www.youtube.com/shorts/FxtvnBCse8w)
171
171
 
172
172
  <!--{.markerless .columns}-->
173
173
 
174
174
  ## <sup>Credits</sup>
175
175
 
176
- - https://picocss.com/ as a [first-class citizen](https://blades.ninja/css/pico/)
177
- - https://11ty.dev/ for [this site generation](https://github.com/anyblades/blades.ninja)
176
+ - https://picocss.com/ for [inspiration](//blades.ninja/css/pico/)
177
+ - https://11ty.dev/ for [this site generation ↗](https://github.com/anyblades/blades.ninja)
178
178
 
179
179
  <!--{.markerless}-->
package/assets/blades.css CHANGED
@@ -530,6 +530,13 @@ How it works:
530
530
  padding-inline: 10%;
531
531
  max-width: calc(10% + 65ch + 10%);
532
532
  }
533
+ @media (width < 768px) {
534
+ .breakout,
535
+ .breakout-all {
536
+ padding-inline: 1rem;
537
+ max-width: calc(1rem + 65ch + 1rem)
538
+ }
539
+ }
533
540
  /* Breakout direct children only */
534
541
  .breakout > *:is(
535
542
  table,
@@ -552,7 +559,7 @@ How it works:
552
559
  width: -moz-fit-content;
553
560
  width: fit-content;
554
561
  min-width: 100%;
555
- max-width: 125%;
562
+ max-width: min(125%, 100dvw);
556
563
  margin-left: 50%;
557
564
  transform: translateX(-50%);
558
565
  }
@@ -562,7 +569,7 @@ How it works:
562
569
  }
563
570
  /* Max out the width of the element */
564
571
  .breakout > *.breakout-item-max, .breakout-all > *.breakout-item-max {
565
- width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
572
+ width: min(125%, 100dvw) !important; /* !important is for cases like figure.breakout-item-max @TODO */
566
573
  }
567
574
  .breakout-all > *:is(h2, h3, h4, h5, h6, hr):not([class]) {
568
575
  position: relative;
@@ -593,7 +600,7 @@ How it works:
593
600
  overflow: visible;
594
601
  }
595
602
  .breakout-all > *:is(hr)::before {
596
- width: 100vw;
603
+ width: 100dvw;
597
604
  left: 50%;
598
605
  height: 100%;
599
606
  transform: translateX(-50%);
@@ -897,7 +904,7 @@ table.responsive,
897
904
  width: -moz-max-content;
898
905
  width: max-content;
899
906
  min-width: auto;
900
- max-width: 100vw;
907
+ max-width: 100dvw;
901
908
  padding-inline: 7.5%;
902
909
 
903
910
  /* Let them scroll */
package/assets/blades.standalone.core.css CHANGED
@@ -65,6 +65,15 @@ How it works:
65
65
  max-width: calc(10% + 65ch + 10%);
66
66
  }
67
67
 
68
+ @media (width < 768px) {
69
+
70
+ .breakout,
71
+ .breakout-all {
72
+ padding-inline: 1rem;
73
+ max-width: calc(1rem + 65ch + 1rem)
74
+ }
75
+ }
76
+
68
77
  /* Breakout direct children only */
69
78
 
70
79
  .breakout > *:is(
@@ -88,7 +97,7 @@ How it works:
88
97
  width: -moz-fit-content;
89
98
  width: fit-content;
90
99
  min-width: 100%;
91
- max-width: 125%;
100
+ max-width: min(125%, 100dvw);
92
101
  margin-left: 50%;
93
102
  transform: translateX(-50%);
94
103
  }
@@ -102,7 +111,7 @@ How it works:
102
111
  /* Max out the width of the element */
103
112
 
104
113
  .breakout > *.breakout-item-max, .breakout-all > *.breakout-item-max {
105
- width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
114
+ width: min(125%, 100dvw) !important; /* !important is for cases like figure.breakout-item-max @TODO */
106
115
  }
107
116
 
108
117
  .breakout-all > *:is(h2, h3, h4, h5, h6, hr):not([class]) {
@@ -140,7 +149,7 @@ How it works:
140
149
  }
141
150
 
142
151
  .breakout-all > *:is(hr)::before {
143
- width: 100vw;
152
+ width: 100dvw;
144
153
  left: 50%;
145
154
  height: 100%;
146
155
  transform: translateX(-50%);
@@ -480,7 +489,7 @@ table.responsive,
480
489
  width: -moz-max-content;
481
490
  width: max-content;
482
491
  min-width: auto;
483
- max-width: 100vw;
492
+ max-width: 100dvw;
484
493
  padding-inline: 7.5%;
485
494
 
486
495
  /* Let them scroll */
package/assets/blades.standalone.css CHANGED
@@ -65,6 +65,15 @@ How it works:
65
65
  max-width: calc(10% + 65ch + 10%);
66
66
  }
67
67
 
68
+ @media (width < 768px) {
69
+
70
+ .breakout,
71
+ .breakout-all {
72
+ padding-inline: 1rem;
73
+ max-width: calc(1rem + 65ch + 1rem)
74
+ }
75
+ }
76
+
68
77
  /* Breakout direct children only */
69
78
 
70
79
  .breakout > *:is(
@@ -88,7 +97,7 @@ How it works:
88
97
  width: -moz-fit-content;
89
98
  width: fit-content;
90
99
  min-width: 100%;
91
- max-width: 125%;
100
+ max-width: min(125%, 100dvw);
92
101
  margin-left: 50%;
93
102
  transform: translateX(-50%);
94
103
  }
@@ -102,7 +111,7 @@ How it works:
102
111
  /* Max out the width of the element */
103
112
 
104
113
  .breakout > *.breakout-item-max, .breakout-all > *.breakout-item-max {
105
- width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
114
+ width: min(125%, 100dvw) !important; /* !important is for cases like figure.breakout-item-max @TODO */
106
115
  }
107
116
 
108
117
  .breakout-all > *:is(h2, h3, h4, h5, h6, hr):not([class]) {
@@ -140,7 +149,7 @@ How it works:
140
149
  }
141
150
 
142
151
  .breakout-all > *:is(hr)::before {
143
- width: 100vw;
152
+ width: 100dvw;
144
153
  left: 50%;
145
154
  height: 100%;
146
155
  transform: translateX(-50%);
@@ -480,7 +489,7 @@ table.responsive,
480
489
  width: -moz-max-content;
481
490
  width: max-content;
482
491
  min-width: auto;
483
- max-width: 100vw;
492
+ max-width: 100dvw;
484
493
  padding-inline: 7.5%;
485
494
 
486
495
  /* Let them scroll */
package/assets/breakout.css CHANGED
@@ -7,6 +7,13 @@
7
7
  padding-inline: 10%;
8
8
  max-width: calc(10% + 65ch + 10%);
9
9
  }
10
+ @media (width < 768px) {
11
+ .breakout,
12
+ .breakout-all {
13
+ padding-inline: 1rem;
14
+ max-width: calc(1rem + 65ch + 1rem)
15
+ }
16
+ }
10
17
  /* Breakout direct children only */
11
18
  .breakout > *:is(
12
19
  table,
@@ -29,7 +36,7 @@
29
36
  width: -moz-fit-content;
30
37
  width: fit-content;
31
38
  min-width: 100%;
32
- max-width: 125%;
39
+ max-width: min(125%, 100dvw);
33
40
  margin-left: 50%;
34
41
  transform: translateX(-50%);
35
42
  }
@@ -39,7 +46,7 @@
39
46
  }
40
47
  /* Max out the width of the element */
41
48
  .breakout > *.breakout-item-max, .breakout-all > *.breakout-item-max {
42
- width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
49
+ width: min(125%, 100dvw) !important; /* !important is for cases like figure.breakout-item-max @TODO */
43
50
  }
44
51
  .breakout-all > *:is(h2, h3, h4, h5, h6, hr):not([class]) {
45
52
  position: relative;
@@ -70,7 +77,7 @@
70
77
  overflow: visible;
71
78
  }
72
79
  .breakout-all > *:is(hr)::before {
73
- width: 100vw;
80
+ width: 100dvw;
74
81
  left: 50%;
75
82
  height: 100%;
76
83
  transform: translateX(-50%);
package/assets/responsive-table.css CHANGED
@@ -12,7 +12,7 @@ table.responsive,
12
12
  width: -moz-max-content;
13
13
  width: max-content;
14
14
  min-width: auto;
15
- max-width: 100vw;
15
+ max-width: 100dvw;
16
16
  padding-inline: 7.5%;
17
17
 
18
18
  /* Let them scroll */
package/blades.gemspec CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Gem::Specification.new do |spec|
4
4
  spec.name = "blades"
5
- spec.version = "2.2.2"
5
+ spec.version = "2.2.3"
6
6
  spec.authors = ["Anton Staroverov"]
7
7
 
8
8
  spec.summary = "Framework-agnostic CSS utilities and single-file Liquid 'blades' for modern web development."
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anyblades/blades",
3
- "version": "2.2.2",
3
+ "version": "2.2.3",
4
4
  "description": "Framework-agnostic CSS utilities and single-file Liquid 'blades' for modern web development.",
5
5
  "exports": {
6
6
  ".": "./src/blades.standalone.css",
package/src/breakout.css CHANGED
@@ -6,6 +6,10 @@
6
6
  /* Prepare the container for breakout elements */
7
7
  padding-inline: 10%;
8
8
  max-width: calc(10% + 65ch + 10%);
9
+ @media (width < 768px) {
10
+ padding-inline: 1rem;
11
+ max-width: calc(1rem + 65ch + 1rem);
12
+ }
9
13
 
10
14
  /* Breakout direct children only */
11
15
  & > * {
@@ -20,7 +24,7 @@
20
24
  ) {
21
25
  width: fit-content;
22
26
  min-width: 100%;
23
- max-width: 125%;
27
+ max-width: min(125%, 100dvw);
24
28
  margin-left: 50%;
25
29
  transform: translateX(-50%);
26
30
  }
@@ -32,7 +36,7 @@
32
36
 
33
37
  /* Max out the width of the element */
34
38
  &.breakout-item-max {
35
- width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
39
+ width: min(125%, 100dvw) !important; /* !important is for cases like figure.breakout-item-max @TODO */
36
40
  }
37
41
  }
38
42
  }
@@ -74,7 +78,7 @@
74
78
  overflow: visible;
75
79
 
76
80
  &::before {
77
- width: 100vw;
81
+ width: 100dvw;
78
82
  left: 50%;
79
83
  height: 100%;
80
84
  transform: translateX(-50%);
package/src/responsive-table.css CHANGED
@@ -11,7 +11,7 @@ table.responsive,
11
11
  /* Let them full-bleed */
12
12
  width: max-content;
13
13
  min-width: auto;
14
- max-width: 100vw;
14
+ max-width: 100dvw;
15
15
  padding-inline: 7.5%;
16
16
 
17
17
  /* Let them scroll */