blades 2.3.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 (19) hide show
  1. checksums.yaml +7 -0
  2. data/_includes/blades/html.liquid +49 -0
  3. data/_includes/blades/html.njk +52 -0
  4. data/_includes/blades/html.twig +52 -0
  5. data/_includes/blades/links.liquid +21 -0
  6. data/_includes/blades/links.twig +18 -0
  7. data/_includes/blades/sitemap.xml.njk +25 -0
  8. data/_includes/blades/sitemap.xml.twig +23 -0
  9. data/css/blades.css +3763 -0
  10. data/css/blades.standalone.core.css +720 -0
  11. data/css/blades.standalone.css +878 -0
  12. data/css/blades.standalone.theme.css +129 -0
  13. data/css/breakout.css +125 -0
  14. data/css/float-label.core.css +56 -0
  15. data/css/float-label.css +96 -0
  16. data/css/float-label.theme.css +39 -0
  17. data/css/link-icon.css +59 -0
  18. data/css/responsive-table.css +57 -0
  19. metadata +79 -0
data/css/blades.standalone.theme.css ADDED
@@ -0,0 +1,129 @@
1
+ /*
2
+ \3c !--section:code-->
3
+ ```css */
4
+ /* Default/fallback state */
5
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
6
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
7
+ .has-float-label > span,
8
+ .has-float-label label {
9
+ padding-inline-start: calc(1rem + 1px); /* match Pico's padding + border */
10
+ padding-block-start: 0.25rem;
11
+ opacity: 75%;
12
+ transition: all 0.25s;
13
+ }
14
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input,
15
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea,
16
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select,
17
+ .has-float-label input,
18
+ .has-float-label textarea,
19
+ .has-float-label select {
20
+ margin-block-start: 0; /* reset Pico */
21
+ padding-inline-start: 1rem; /* match Pico */
22
+ padding-block: 1.125rem 0.375rem; /* match Pico's total: 2 x 0.75rem = 1.5rem */
23
+ }
24
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::-moz-placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::-moz-placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::-moz-placeholder, .has-float-label input::-moz-placeholder, .has-float-label textarea::-moz-placeholder, .has-float-label select::-moz-placeholder {
25
+ opacity: 100%;
26
+ -moz-transition: all 0.25s;
27
+ transition: all 0.25s;
28
+ }
29
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::placeholder, .has-float-label input::placeholder, .has-float-label textarea::placeholder, .has-float-label select::placeholder {
30
+ opacity: 100%;
31
+ transition: all 0.25s;
32
+ }
33
+ /* Enlarged state */
34
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
35
+ padding-block: 0.75rem; /* match Pico */
36
+ }
37
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
38
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
39
+ .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
40
+ .has-float-label:has(*:placeholder-shown:not(:focus)) label {
41
+ padding-block: 0.75rem; /* match Pico */
42
+ }
43
+ html {
44
+ /* Prevent horizontal overflow and scrolling, modern way. */
45
+ overflow-x: clip;
46
+
47
+ /* Enable font smoothing */
48
+ -webkit-font-smoothing: antialiased;
49
+ -moz-osx-font-smoothing: grayscale;
50
+ }
51
+ body {
52
+
53
+ /* Make the `body` a flex container with column layout, and `main` to automatically fill available space. This is useful for creating sticky footers and full-height layouts. */
54
+ display: flex;
55
+ flex-direction: column;
56
+ /* Ensure `body` takes at least the full height of the viewport (using dynamic viewport height for better mobile support). */
57
+ min-height: 100dvh;
58
+
59
+ /* Evaluates the last ~4 lines of text blocks to prevent a single word from sitting on the final line. */
60
+
61
+ /* Enable global hyphenation */
62
+ /* ... except for links and tables which are better (safer) without hyphenation */
63
+ }
64
+ body > main {
65
+ flex-grow: 1;
66
+ }
67
+ body {
68
+ hyphens: auto;
69
+ text-wrap: pretty;
70
+ }
71
+ body a,
72
+ body table {
73
+ hyphens: none;
74
+ }
75
+ a:not([href^="#"]) {
76
+ text-decoration-thickness: 1px;
77
+ }
78
+ a:not([href^="#"]):hover {
79
+ text-decoration-thickness: 2px;
80
+ }
81
+ h1 {
82
+ margin-bottom: 1rem; /* for tw-typography */
83
+ font-size: 2.5em; /* for pico.css & tw-typography */
84
+ }
85
+ hr {
86
+ margin-block: 2em; /* for pico.css & tw-typography */
87
+ }
88
+ ul ul {
89
+ font-size: 87.5%;
90
+ }
91
+ pre small {
92
+ font-weight: lighter;
93
+ opacity: 75%;
94
+ }
95
+ table th {
96
+ font-weight: bold;
97
+ vertical-align: bottom;
98
+ }
99
+ table td {
100
+ vertical-align: top;
101
+ }
102
+ table pre {
103
+ margin-bottom: 0.25rem;
104
+ }
105
+ [data-jump-to="top"] {
106
+ opacity: 25%;
107
+ }
108
+ [data-jump-to="top"]:hover {
109
+ opacity: 75%;
110
+ }
111
+ [data-jump-to="top"] > i {
112
+ display: inline-block;
113
+ margin: 0.5rem;
114
+ padding: 0.25rem 0.375rem;
115
+ border-color: black;
116
+ color: black;
117
+ font-size: 0.75rem;
118
+ }
119
+ .breakout > img,
120
+ .breakout > figure,
121
+ .breakout-all > img,
122
+ .breakout-all > figure {
123
+ margin-bottom: 1rem;
124
+ }
125
+ .faded a {
126
+ text-decoration-style: dotted;
127
+ }
128
+ /*```
129
+ \3c !--section--> */
data/css/breakout.css ADDED
@@ -0,0 +1,125 @@
1
+ /*
2
+ \3c !--section:code-->
3
+ ```css */
4
+ .breakout,
5
+ .breakout-all {
6
+ max-width: calc(10% + 65ch + 10%);
7
+ /* Prepare the container for breakout elements */
8
+ padding-inline: 10%;
9
+ }
10
+ @media (width < 768px) {
11
+ .breakout,
12
+ .breakout-all {
13
+ max-width: calc(1rem + 65ch + 1rem);
14
+ padding-inline: 1rem
15
+ }
16
+ }
17
+ /* Breakout direct children only */
18
+ .breakout > *:is(
19
+ table,
20
+ pre,
21
+ figure, video, iframe, canvas,
22
+ img, picture,
23
+
24
+ .breakout-item,
25
+ .breakout-item-max
26
+ ),
27
+ .breakout-all > *:is(
28
+ table,
29
+ pre,
30
+ figure, video, iframe, canvas,
31
+ img, picture,
32
+
33
+ .breakout-item,
34
+ .breakout-item-max
35
+ ) {
36
+ width: -moz-fit-content;
37
+ width: fit-content;
38
+ min-width: 100%;
39
+ max-width: min(125%, 100dvw);
40
+ margin-left: 50%;
41
+ transform: translateX(-50%);
42
+ }
43
+ /* Respect img/picture min-width */
44
+ .breakout > *:is(img, picture), .breakout-all > *:is(img, picture) {
45
+ min-width: auto;
46
+ }
47
+ /* Max out the width of the element */
48
+ .breakout > *.breakout-item-max, .breakout-all > *.breakout-item-max {
49
+ width: min(125%, 100dvw) !important; /* !important is for cases like figure.breakout-item-max @TODO */
50
+ }
51
+ .breakout-all > *:is(h2, h3, h4, h5, h6, hr):not([class]) {
52
+ position: relative;
53
+ }
54
+ .breakout-all > *:is(h2, h3, h4, h5, h6, hr):not([class])::before {
55
+ display: block;
56
+ position: absolute;
57
+ background: gray;
58
+ content: "";
59
+ opacity: 12.5%;
60
+ }
61
+ .breakout-all > *:is(h2, h3, h4, h5, h6):not([class])::before {
62
+ top: 50%;
63
+ right: 100%;
64
+ width: 10em;
65
+ height: 0.25em;
66
+ margin-right: 0.8ch;
67
+ transform: translateY(-50%);
68
+ background: linear-gradient(to left, gray, transparent);
69
+ }
70
+ /* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
71
+ .breakout-all > *:is(h2, h3, h4, h5, h6):not([class]):where(hr + *)::before {
72
+ display: none !important;
73
+ }
74
+ .breakout-all > *:is(hr) {
75
+ height: 0.5rem;
76
+ overflow: visible;
77
+ border: none;
78
+ }
79
+ .breakout-all > *:is(hr)::before {
80
+ left: 50%;
81
+ width: 100dvw;
82
+ height: 100%;
83
+ transform: translateX(-50%);
84
+ }
85
+ /*```
86
+ \3c !--section:summary-->
87
+
88
+ The `.breakout` layout allows images, tables, and other figures to automatically extend or bleed beyond their parent container’s width.
89
+
90
+ \3c !--section:docs-->
91
+
92
+ ### Demo \3c !-- inside parent .breakout -->
93
+
94
+ Break out a wide image from the text flow:
95
+
96
+ <div>\3c !-- Dummy div to avoid p tag in Markdown --></div><img
97
+ src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='3000' height='300'><rect width='100%' height='100%' fill='gray'/></svg>">
98
+
99
+ Or table:
100
+
101
+ | Imagine<hr> | a<hr> | really<hr> | wide<hr> | table<hr> | here<hr> |
102
+ | ----------- | ----- | ---------- | -------- | --------- | -------- |
103
+ | ... |
104
+
105
+ Or code block:
106
+
107
+ ```html
108
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.</p>
109
+ ```
110
+
111
+ Or anything else:
112
+
113
+ <article class="breakout-item-max" data-theme="dark">
114
+
115
+ Using `.breakout-item` and `.breakout-item-max` helpers {style=margin:0}
116
+ </article>
117
+
118
+ <div><hr></div>
119
+
120
+ `.breakout-all` also visually breaks out headings and horizontal rules:
121
+
122
+ <h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6>
123
+ <hr>
124
+
125
+ \3c !--section--> */
data/css/float-label.core.css ADDED
@@ -0,0 +1,56 @@
1
+ /* Moved here from https://github.com/anyblades/float-label-css for easier maintenance
2
+ \3c !--section:docs-->
3
+
4
+ First, we target either:
5
+ 1. `<label>` which `:has` inner form inputs (classless approach)
6
+ 2. or explicit `.has-float-label` class (alternative approach)
7
+ ```css */
8
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
9
+ .has-float-label {
10
+ display: block;
11
+ position: relative;
12
+ }
13
+ /*
14
+ ```
15
+ Then, we define the default/fallback state (when the float label should be minimized):
16
+ ```css */
17
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
18
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
19
+ .has-float-label > span,
20
+ .has-float-label label {
21
+ position: absolute;
22
+ top: 0;
23
+ left: 0;
24
+ font-size: 75%;
25
+ cursor: text;
26
+ }
27
+ /*
28
+ ```
29
+ Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
30
+ ```css */
31
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label *:placeholder-shown:not(:focus)::-moz-placeholder {
32
+ opacity: 0;
33
+ }
34
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:-moz-placeholder:not(:focus)::placeholder, .has-float-label *:-moz-placeholder:not(:focus)::placeholder {
35
+ opacity: 0;
36
+ }
37
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::placeholder, .has-float-label *:placeholder-shown:not(:focus)::placeholder {
38
+ opacity: 0;
39
+ }
40
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
41
+ font-size: inherit;
42
+ opacity: 50%;
43
+ }
44
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
45
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
46
+ .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
47
+ .has-float-label:has(*:placeholder-shown:not(:focus)) label {
48
+ font-size: inherit;
49
+ opacity: 50%;
50
+ }
51
+ /*
52
+ ```
53
+ The `:has(*:placeholder-shown:not(:focus))` trick allows this input state information to *propagate* to the parent level. This enables modern CSS to target inner float label (`<span>` or `<label>`) regardless of its position relative to the input field.
54
+
55
+ Historically, this was not possible: the float label had to be placed after the input field to be targeted using the `input:focus + label` selector.
56
+ \3c !--section--> */
data/css/float-label.css ADDED
@@ -0,0 +1,96 @@
1
+ /* Float Label CSS v2.0.0-alpha */
2
+ /* Moved here from https://github.com/anyblades/float-label-css for easier maintenance
3
+ \3c !--section:docs-->
4
+
5
+ First, we target either:
6
+ 1. `<label>` which `:has` inner form inputs (classless approach)
7
+ 2. or explicit `.has-float-label` class (alternative approach)
8
+ ```css */
9
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
10
+ .has-float-label {
11
+ display: block;
12
+ position: relative;
13
+ }
14
+ /*
15
+ ```
16
+ Then, we define the default/fallback state (when the float label should be minimized):
17
+ ```css */
18
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
19
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
20
+ .has-float-label > span,
21
+ .has-float-label label {
22
+ position: absolute;
23
+ top: 0;
24
+ left: 0;
25
+ font-size: 75%;
26
+ cursor: text;
27
+ }
28
+ /*
29
+ ```
30
+ Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
31
+ ```css */
32
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label *:placeholder-shown:not(:focus)::-moz-placeholder {
33
+ opacity: 0;
34
+ }
35
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:-moz-placeholder:not(:focus)::placeholder, .has-float-label *:-moz-placeholder:not(:focus)::placeholder {
36
+ opacity: 0;
37
+ }
38
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::placeholder, .has-float-label *:placeholder-shown:not(:focus)::placeholder {
39
+ opacity: 0;
40
+ }
41
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
42
+ font-size: inherit;
43
+ opacity: 50%;
44
+ }
45
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
46
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
47
+ .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
48
+ .has-float-label:has(*:placeholder-shown:not(:focus)) label {
49
+ font-size: inherit;
50
+ opacity: 50%;
51
+ }
52
+ /*
53
+ ```
54
+ The `:has(*:placeholder-shown:not(:focus))` trick allows this input state information to *propagate* to the parent level. This enables modern CSS to target inner float label (`<span>` or `<label>`) regardless of its position relative to the input field.
55
+
56
+ Historically, this was not possible: the float label had to be placed after the input field to be targeted using the `input:focus + label` selector.
57
+ \3c !--section--> */
58
+ /* Default/fallback state */
59
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
60
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
61
+ .has-float-label > span,
62
+ .has-float-label label {
63
+ padding-inline-start: calc(1rem + 1px); /* match Pico's padding + border */
64
+ padding-block-start: 0.25rem;
65
+ opacity: 75%;
66
+ transition: all 0.25s;
67
+ }
68
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input,
69
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea,
70
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select,
71
+ .has-float-label input,
72
+ .has-float-label textarea,
73
+ .has-float-label select {
74
+ margin-block-start: 0; /* reset Pico */
75
+ padding-inline-start: 1rem; /* match Pico */
76
+ padding-block: 1.125rem 0.375rem; /* match Pico's total: 2 x 0.75rem = 1.5rem */
77
+ }
78
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::-moz-placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::-moz-placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::-moz-placeholder, .has-float-label input::-moz-placeholder, .has-float-label textarea::-moz-placeholder, .has-float-label select::-moz-placeholder {
79
+ opacity: 100%;
80
+ -moz-transition: all 0.25s;
81
+ transition: all 0.25s;
82
+ }
83
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::placeholder, .has-float-label input::placeholder, .has-float-label textarea::placeholder, .has-float-label select::placeholder {
84
+ opacity: 100%;
85
+ transition: all 0.25s;
86
+ }
87
+ /* Enlarged state */
88
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
89
+ padding-block: 0.75rem; /* match Pico */
90
+ }
91
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
92
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
93
+ .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
94
+ .has-float-label:has(*:placeholder-shown:not(:focus)) label {
95
+ padding-block: 0.75rem; /* match Pico */
96
+ }
data/css/float-label.theme.css ADDED
@@ -0,0 +1,39 @@
1
+ /* Default/fallback state */
2
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
3
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
4
+ .has-float-label > span,
5
+ .has-float-label label {
6
+ padding-inline-start: calc(1rem + 1px); /* match Pico's padding + border */
7
+ padding-block-start: 0.25rem;
8
+ opacity: 75%;
9
+ transition: all 0.25s;
10
+ }
11
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input,
12
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea,
13
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select,
14
+ .has-float-label input,
15
+ .has-float-label textarea,
16
+ .has-float-label select {
17
+ margin-block-start: 0; /* reset Pico */
18
+ padding-inline-start: 1rem; /* match Pico */
19
+ padding-block: 1.125rem 0.375rem; /* match Pico's total: 2 x 0.75rem = 1.5rem */
20
+ }
21
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::-moz-placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::-moz-placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::-moz-placeholder, .has-float-label input::-moz-placeholder, .has-float-label textarea::-moz-placeholder, .has-float-label select::-moz-placeholder {
22
+ opacity: 100%;
23
+ -moz-transition: all 0.25s;
24
+ transition: all 0.25s;
25
+ }
26
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::placeholder, .has-float-label input::placeholder, .has-float-label textarea::placeholder, .has-float-label select::placeholder {
27
+ opacity: 100%;
28
+ transition: all 0.25s;
29
+ }
30
+ /* Enlarged state */
31
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
32
+ padding-block: 0.75rem; /* match Pico */
33
+ }
34
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
35
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
36
+ .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
37
+ .has-float-label:has(*:placeholder-shown:not(:focus)) label {
38
+ padding-block: 0.75rem; /* match Pico */
39
+ }
data/css/link-icon.css ADDED
@@ -0,0 +1,59 @@
1
+ /* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
2
+ \3c !--section:code-->
3
+ ```css */
4
+ /* Use inline flex only if link contains an icon */
5
+ a:has(> i) {
6
+ display: inline-flex;
7
+ overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
8
+ gap: 0.375ch; /* =3/8 */
9
+ text-wrap: balance;
10
+ }
11
+ a > i {
12
+ float: left; /* ✅ Chrome ❌ Safari */
13
+ font-style: normal;
14
+ text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
15
+ }
16
+ /* Favicons */
17
+ a > i > img {
18
+ display: inline-block; /* for Tailwind CSS Typography */
19
+ max-width: none; /* to keep ratio safe */
20
+ height: 1.25em;
21
+ margin-block-start: calc(-0.25em / 2);
22
+ }
23
+ a > i[class^="fa-"],
24
+ a > i[class*=" fa-"] {
25
+ line-height: inherit;
26
+ --fa-width: auto;
27
+ }
28
+ /* Font Awesome */
29
+ a > i.fa-lg {
30
+ line-height: normal;
31
+ }
32
+ /*```
33
+ \3c !--section:summary-->
34
+
35
+ Use *Bl*ades `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome icons inside links.
36
+ It automatically handles sizing and alignment while preventing underline on icons.
37
+
38
+ \3c !--section:docs-->
39
+
40
+ <article class="breakout-item">
41
+
42
+ | Use `<i>`-helper with | Clean HTML without `<span>ning` |
43
+ | ------------------------------------------------------------------------------------- | ------------------------------------ |
44
+ | [<i>🥷</i> Emojis](#) | `<a><i>🥷</i> Text</a>` |
45
+ | [<i>![](https://www.google.com/s2/favicons?domain=any.digital&sz=64)</i> Favicons](#) | `<a><i><img src="..."></i> Text</a>` |
46
+ | [<i class="fa-brands fa-github fa-lg"></i> Font Awesome icons](#) | `<a><i class="fa-..."></i> Text</a>` |
47
+ </article>
48
+
49
+ Or even for:
50
+
51
+ <article>
52
+ <a href="#" style="margin: 0 0 0 1rem"><i>🥷</i> very-very-very-very-very-<br>long-multiline-links</a>
53
+ </article>
54
+
55
+ How we made it: https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e-e111869d5237
56
+
57
+ **PRO** example of automatic favicons for `11ty`: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
58
+
59
+ \3c !--section--> */
data/css/responsive-table.css ADDED
@@ -0,0 +1,57 @@
1
+ /*
2
+ \3c !--section:code-->
3
+ ```css */
4
+ table.responsive,
5
+ .breakout > table:not(.does-not-exist),
6
+ .breakout-all > table:not(.does-not-exist) {
7
+
8
+ /* Let them scroll */
9
+ display: block;
10
+
11
+ /* Let them full-bleed */
12
+ width: -moz-max-content;
13
+ width: max-content;
14
+ min-width: auto;
15
+ max-width: 100dvw;
16
+ /* Center horizontally */
17
+ margin-left: 50%;
18
+ padding-inline: 7.5%;
19
+ overflow-x: auto;
20
+ transform: translateX(-50%);
21
+ -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
22
+ }
23
+ table.responsive th,
24
+ table.responsive td,
25
+ .breakout > table:not(.does-not-exist) th,
26
+ .breakout > table:not(.does-not-exist) td,
27
+ .breakout-all > table:not(.does-not-exist) th,
28
+ .breakout-all > table:not(.does-not-exist) td {
29
+ padding-inline-start: 0;
30
+ }
31
+ /*```
32
+ `table:not(.does-not-exist)` trick (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
33
+
34
+ \3c !--section:summary-->
35
+
36
+ `.responsive` makes a table full-bleed and scroll on mobile, without a need for a redundant wrapper (finally).
37
+ Tables inside https://blades.ninja/css/breakout/ are responsive by default.
38
+
39
+ \3c !--section:docs-->
40
+
41
+ ### Demo table
42
+
43
+ | Term | Description <hr class="x2"> | Link |
44
+ | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
45
+ | Responsive design | Approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction. | https://en.wikipedia.org/wiki/Responsive_web_design |
46
+
47
+ {.responsive}
48
+
49
+ ---
50
+
51
+ Living examples: \3c !--A-Z-->
52
+ - https://blades.ninja/ai/ide/
53
+ - https://blades.ninja/build-awesome-11ty/starters/
54
+ - https://blades.ninja/css/frameworks/
55
+ - https://blades.ninja/ssg/
56
+
57
+ \3c !--section--> */
metadata ADDED
@@ -0,0 +1,79 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: blades
3
+ version: !ruby/object:Gem::Version
4
+ version: 2.3.3
5
+ platform: ruby
6
+ authors:
7
+ - Anton Staroverov
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2026-06-08 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: jekyll
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - ">="
18
+ - !ruby/object:Gem::Version
19
+ version: '3.5'
20
+ - - "<"
21
+ - !ruby/object:Gem::Version
22
+ version: '5.0'
23
+ type: :runtime
24
+ prerelease: false
25
+ version_requirements: !ruby/object:Gem::Requirement
26
+ requirements:
27
+ - - ">="
28
+ - !ruby/object:Gem::Version
29
+ version: '3.5'
30
+ - - "<"
31
+ - !ruby/object:Gem::Version
32
+ version: '5.0'
33
+ description:
34
+ email:
35
+ executables: []
36
+ extensions: []
37
+ extra_rdoc_files: []
38
+ files:
39
+ - _includes/blades/html.liquid
40
+ - _includes/blades/html.njk
41
+ - _includes/blades/html.twig
42
+ - _includes/blades/links.liquid
43
+ - _includes/blades/links.twig
44
+ - _includes/blades/sitemap.xml.njk
45
+ - _includes/blades/sitemap.xml.twig
46
+ - css/blades.css
47
+ - css/blades.standalone.core.css
48
+ - css/blades.standalone.css
49
+ - css/blades.standalone.theme.css
50
+ - css/breakout.css
51
+ - css/float-label.core.css
52
+ - css/float-label.css
53
+ - css/float-label.theme.css
54
+ - css/link-icon.css
55
+ - css/responsive-table.css
56
+ homepage: https://blades.ninja/
57
+ licenses:
58
+ - MIT
59
+ metadata: {}
60
+ post_install_message:
61
+ rdoc_options: []
62
+ require_paths:
63
+ - lib
64
+ required_ruby_version: !ruby/object:Gem::Requirement
65
+ requirements:
66
+ - - ">="
67
+ - !ruby/object:Gem::Version
68
+ version: '0'
69
+ required_rubygems_version: !ruby/object:Gem::Requirement
70
+ requirements:
71
+ - - ">="
72
+ - !ruby/object:Gem::Version
73
+ version: '0'
74
+ requirements: []
75
+ rubygems_version: 3.0.3.1
76
+ signing_key:
77
+ specification_version: 4
78
+ summary: Fully compatible and actively maintained successor to Pico CSS.
79
+ test_files: []