@anydigital/bricks 0.26.0-alpha.2 → 0.27.0-alpha.10
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 +2 -2
- package/_includes/bricks/html.liquid +2 -1
- package/_includes/bricks/html.njk +2 -1
- package/_includes/bricks/nav.liquid +6 -1
- package/assets/breakout.css +54 -97
- package/assets/bricks.css +214 -274
- package/assets/bricks.theme.css +74 -0
- package/bricks.gemspec +1 -1
- package/package.json +5 -7
- package/postcss.config.js +3 -6
- package/src/{_base.css → _classless.css} +27 -5
- package/src/_tricks.css +136 -0
- package/src/_unreduce-motion.css +12 -0
- package/src/breakout.css +107 -0
- package/src/bricks.css +3 -4
- package/src/bricks.theme.css +74 -0
- package/src/_prose.css +0 -136
- package/src/_util.css +0 -19
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
# `bricks[.css]
|
|
1
|
+
# `bricks`<sub><sup>`[.css|.njk|.liquid]`</sup></sub>
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A graceful, semantic CSS extension for Pico or Tailwind, with Nunjucks/Liquid batteries included 🥷
|
|
4
4
|
|
|
5
5
|
<!--section:css-h2-->
|
|
6
6
|
|
|
@@ -3,11 +3,12 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
|
|
6
|
+
<link rel="icon" href="{{ site.favicon | default: '/favicon.ico' }}">
|
|
6
7
|
<title>
|
|
7
8
|
{%- if title %}{{ title | strip_html | append: ' | ' }}{% endif -%}
|
|
8
9
|
{{- site.title -}}
|
|
9
10
|
</title>
|
|
10
|
-
<
|
|
11
|
+
<meta name="description" content="{{ site.description }}">
|
|
11
12
|
|
|
12
13
|
{%- for href in site.styles %}
|
|
13
14
|
<link rel="stylesheet" href="{{ href | relative_url }}">
|
|
@@ -3,11 +3,12 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />
|
|
6
|
+
<link rel="icon" href="{{ site.favicon | d('/favicon.ico') }}" />
|
|
6
7
|
<title>
|
|
7
8
|
{{- title | strip_html ~ ' | ' if title -}}
|
|
8
9
|
{{- site.title -}}
|
|
9
10
|
</title>
|
|
10
|
-
<
|
|
11
|
+
<meta name="description" content="{{ site.description }}" />
|
|
11
12
|
|
|
12
13
|
{%- for href in site.styles %}
|
|
13
14
|
<link rel="stylesheet" href="{{ href }}" />
|
|
@@ -6,4 +6,9 @@
|
|
|
6
6
|
</a>
|
|
7
7
|
{%- endfor %}
|
|
8
8
|
</nav>
|
|
9
|
-
|
|
9
|
+
|
|
10
|
+
{%- comment %}
|
|
11
|
+
Compatible with:
|
|
12
|
+
- https://picocss.com/docs/nav
|
|
13
|
+
- https://www.11ty.dev/docs/plugins/navigation/#bring-your-own-html-render-the-menu-items-manually
|
|
14
|
+
{%- endcomment %}
|
package/assets/breakout.css
CHANGED
|
@@ -1,15 +1,22 @@
|
|
|
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%);
|
|
7
8
|
|
|
8
|
-
/*
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
/* Breakout direct children only */
|
|
10
|
+
& > * {
|
|
11
|
+
&:is(
|
|
12
|
+
table,
|
|
13
|
+
pre,
|
|
14
|
+
figure, video, iframe, canvas,
|
|
15
|
+
img, picture,
|
|
16
|
+
/* Custom utility classes for other tags that need to be broken out */
|
|
17
|
+
.breakout-item,
|
|
18
|
+
.breakout-item-max
|
|
19
|
+
) {
|
|
13
20
|
width: fit-content;
|
|
14
21
|
min-width: 100%;
|
|
15
22
|
max-width: 125%;
|
|
@@ -17,19 +24,16 @@
|
|
|
17
24
|
transform: translateX(-50%);
|
|
18
25
|
}
|
|
19
26
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
/* Respect inline blocks' min-width */
|
|
23
|
-
|
|
24
|
-
.breakout > img:not(does-not-exist):not(.does-not-exist),.breakout > picture:not(does-not-exist):not(.does-not-exist),.breakout > figure:not(does-not-exist):not(.does-not-exist),.breakout > canvas:not(does-not-exist):not(.does-not-exist),.breakout > audio:not(does-not-exist):not(.does-not-exist),.breakout > p > img:not(.does-not-exist),.breakout > p > picture:not(.does-not-exist),.breakout > p > figure:not(.does-not-exist),.breakout > p > canvas:not(.does-not-exist),.breakout > p > audio:not(.does-not-exist) {
|
|
27
|
+
/* Respect img/picture min-width */
|
|
28
|
+
&:is(img, picture) {
|
|
25
29
|
min-width: auto;
|
|
26
30
|
}
|
|
27
31
|
|
|
28
|
-
/*
|
|
29
|
-
|
|
30
|
-
|
|
32
|
+
/* <!--section:responsive-table-without-wrapper-->
|
|
33
|
+
### Responsive tables without wrapper
|
|
34
|
+
```css */
|
|
35
|
+
&:is(table):not(.does-not-exist) {
|
|
31
36
|
/* Let them full-bleed */
|
|
32
|
-
width: -moz-max-content;
|
|
33
37
|
width: max-content;
|
|
34
38
|
min-width: auto;
|
|
35
39
|
max-width: 100vw;
|
|
@@ -39,112 +43,65 @@
|
|
|
39
43
|
display: block;
|
|
40
44
|
overflow-x: auto;
|
|
41
45
|
-webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
|
|
42
|
-
}
|
|
43
46
|
|
|
44
|
-
|
|
47
|
+
th,
|
|
48
|
+
td {
|
|
49
|
+
padding-inline-start: 0;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
/*```
|
|
53
|
+
#### Soft-increase selector specificity
|
|
54
|
+
`&:is(table):not(.does-not-exist)` trick (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
|
|
55
|
+
<!--section--> */
|
|
45
56
|
|
|
46
|
-
|
|
57
|
+
/* Max out the width of the element */
|
|
58
|
+
&.breakout-item-max {
|
|
47
59
|
width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
|
|
48
60
|
}
|
|
49
|
-
|
|
50
|
-
.breakout-headings h2:not([class]),.breakout-headings h3:not([class]),.breakout-headings h4:not([class]),.breakout-headings hr {
|
|
51
|
-
position: relative;
|
|
52
61
|
}
|
|
62
|
+
}
|
|
53
63
|
|
|
54
|
-
.breakout-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
position: absolute;
|
|
58
|
-
background-color: rgba(0, 0, 0, 5%);
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.breakout-headings h3:not([class])::before {
|
|
62
|
-
content: "";
|
|
63
|
-
display: block;
|
|
64
|
-
position: absolute;
|
|
65
|
-
background-color: rgba(0, 0, 0, 5%);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.breakout-headings h4:not([class])::before {
|
|
69
|
-
content: "";
|
|
70
|
-
display: block;
|
|
71
|
-
position: absolute;
|
|
72
|
-
background-color: rgba(0, 0, 0, 5%);
|
|
73
|
-
}
|
|
64
|
+
.breakout-all > * {
|
|
65
|
+
&:is(h2, h3, h4, hr):not([class]) {
|
|
66
|
+
position: relative;
|
|
74
67
|
|
|
75
|
-
|
|
68
|
+
&::before {
|
|
76
69
|
content: "";
|
|
77
70
|
display: block;
|
|
78
71
|
position: absolute;
|
|
79
|
-
background
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
.breakout-headings h2:not([class])::before {
|
|
83
|
-
width: 10em;
|
|
84
|
-
right: 100%;
|
|
85
|
-
margin-right: 1rem;
|
|
86
|
-
height: 0.3em;
|
|
87
|
-
top: 50%;
|
|
88
|
-
transform: translateY(-50%);
|
|
89
|
-
background: linear-gradient(
|
|
90
|
-
to left,
|
|
91
|
-
rgba(0, 0, 0, 10%),
|
|
92
|
-
rgba(0, 0, 0, 5%) 10%,
|
|
93
|
-
transparent
|
|
94
|
-
);
|
|
72
|
+
background: gray;
|
|
73
|
+
opacity: 12.5%;
|
|
95
74
|
}
|
|
75
|
+
}
|
|
96
76
|
|
|
97
|
-
|
|
77
|
+
&:is(h2, h3, h4):not([class]) {
|
|
78
|
+
&::before {
|
|
98
79
|
width: 10em;
|
|
99
80
|
right: 100%;
|
|
100
|
-
margin-right:
|
|
101
|
-
height: 0.
|
|
81
|
+
margin-right: 0.8ch;
|
|
82
|
+
height: 0.25em;
|
|
102
83
|
top: 50%;
|
|
103
84
|
transform: translateY(-50%);
|
|
104
|
-
background: linear-gradient(
|
|
105
|
-
to left,
|
|
106
|
-
rgba(0, 0, 0, 10%),
|
|
107
|
-
rgba(0, 0, 0, 5%) 10%,
|
|
108
|
-
transparent
|
|
109
|
-
);
|
|
85
|
+
background: linear-gradient(to left, gray, transparent);
|
|
110
86
|
}
|
|
111
87
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
top: 50%;
|
|
118
|
-
transform: translateY(-50%);
|
|
119
|
-
background: linear-gradient(
|
|
120
|
-
to left,
|
|
121
|
-
rgba(0, 0, 0, 10%),
|
|
122
|
-
rgba(0, 0, 0, 5%) 10%,
|
|
123
|
-
transparent
|
|
124
|
-
);
|
|
88
|
+
/* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
|
|
89
|
+
&:where(hr + *) {
|
|
90
|
+
&::before {
|
|
91
|
+
display: none !important;
|
|
92
|
+
}
|
|
125
93
|
}
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
height: 0.
|
|
94
|
+
}
|
|
95
|
+
&:is(hr) {
|
|
96
|
+
height: 0.5rem;
|
|
129
97
|
border: none;
|
|
130
98
|
overflow: visible;
|
|
131
|
-
}
|
|
132
99
|
|
|
133
|
-
|
|
100
|
+
&::before {
|
|
134
101
|
width: 100vw;
|
|
135
102
|
left: 50%;
|
|
136
103
|
height: 100%;
|
|
137
104
|
transform: translateX(-50%);
|
|
138
105
|
}
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
display: none !important;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
.breakout-headings hr + h3::before {
|
|
145
|
-
display: none !important;
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
.breakout-headings hr + h4::before {
|
|
149
|
-
display: none !important;
|
|
150
|
-
}
|
|
106
|
+
}
|
|
107
|
+
}
|