@anydigital/bricks 0.21.2 → 0.23.0
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/.prettierrc.json +10 -1
- package/README.md +3 -2
- package/bricks/__html-begin.liquid +9 -13
- package/bricks/__html.njk +40 -0
- package/bricks/_gtm.njk +22 -0
- package/bricks/_prose.css +30 -3
- package/dist/bricks.css +48 -3
- package/package.json +3 -2
package/.prettierrc.json
CHANGED
package/README.md
CHANGED
|
@@ -78,7 +78,7 @@ The `.prose` class provides enhanced typography for article content and long-for
|
|
|
78
78
|
|
|
79
79
|
**Typography Helpers:**
|
|
80
80
|
|
|
81
|
-
- `
|
|
81
|
+
- `sub` elements: styled for multi-line subtitles with top vertical alignment, `1.1` line height, lighter weight (`300`), and displayed as `inline-block` with `100%` width to prevent underline decoration inside links
|
|
82
82
|
|
|
83
83
|
**Links:**
|
|
84
84
|
|
|
@@ -89,7 +89,8 @@ The `.prose` class provides enhanced typography for article content and long-for
|
|
|
89
89
|
**Headings:**
|
|
90
90
|
|
|
91
91
|
- `h1` elements have a `0.5em` bottom margin
|
|
92
|
-
- `h1
|
|
92
|
+
- `h1 sub` elements get reduced font size (`50%`)
|
|
93
|
+
- Support for heading anchors via `.header-anchor` class (displayed on hover to the left of the heading)
|
|
93
94
|
|
|
94
95
|
**Tables:**
|
|
95
96
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
<!doctype html>
|
|
2
|
-
{%
|
|
3
|
-
|
|
2
|
+
{% if true %}
|
|
3
|
+
<html lang="{{ site.lang | default: 'en' }}">
|
|
4
|
+
{% endif %}
|
|
4
5
|
|
|
5
6
|
<head>
|
|
6
7
|
<meta charset="utf-8">
|
|
@@ -11,29 +12,24 @@
|
|
|
11
12
|
</title>
|
|
12
13
|
<link rel="icon" href="/favicon.ico">
|
|
13
14
|
|
|
14
|
-
{% # styles %}
|
|
15
15
|
{%- for href in site.styles %}
|
|
16
16
|
<link rel="stylesheet" href="{{ href }}">
|
|
17
17
|
{%- endfor %}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
18
|
+
{% # prettier-ignore %}
|
|
19
|
+
<style>{{ site.inline_styles | join: '\n' }}</style>
|
|
20
|
+
{% # %}
|
|
21
21
|
|
|
22
|
-
{% # scripts %}
|
|
23
22
|
{%- for src in site.scripts %}
|
|
24
23
|
<script src="{{ src }}" defer></script>
|
|
25
24
|
{%- endfor %}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
25
|
+
{% # prettier-ignore %}
|
|
26
|
+
<script type="module">{{ site.inline_scripts | join: '\n' }}</script>
|
|
27
|
+
{% # %}
|
|
29
28
|
|
|
30
|
-
{% # custom %}
|
|
31
29
|
{{ content_for_header }}
|
|
32
|
-
|
|
33
30
|
{% render './_gtm', site: site %}
|
|
34
31
|
</head>
|
|
35
32
|
|
|
36
|
-
{% # if-true trick not to break auto-formatting %}
|
|
37
33
|
{% if true %}
|
|
38
34
|
<body>
|
|
39
35
|
{% render './_gtm', site: site, for_body: true %}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
{# prettier-ignore-start #}
|
|
3
|
+
<html lang="{{ site.lang | d('en') }}">
|
|
4
|
+
{# prettier-ignore-end #}
|
|
5
|
+
|
|
6
|
+
<head>
|
|
7
|
+
<meta charset="utf-8" />
|
|
8
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />
|
|
9
|
+
<title>
|
|
10
|
+
{{- title | strip_html ~ ' | ' if title -}}
|
|
11
|
+
{{- site.title -}}
|
|
12
|
+
</title>
|
|
13
|
+
<link rel="icon" href="/favicon.ico" />
|
|
14
|
+
|
|
15
|
+
{%- for href in site.styles %}
|
|
16
|
+
<link rel="stylesheet" href="{{ href }}" />
|
|
17
|
+
{%- endfor %}
|
|
18
|
+
{# prettier-ignore-start #}
|
|
19
|
+
<style>{{ site.inline_styles | d([]) | join('\n') }}</style>
|
|
20
|
+
{# prettier-ignore-end #}
|
|
21
|
+
|
|
22
|
+
{%- for src in site.scripts %}
|
|
23
|
+
<script src="{{ src }}" defer></script>
|
|
24
|
+
{%- endfor %}
|
|
25
|
+
{# prettier-ignore-start #}
|
|
26
|
+
<script type="module">{{ site.inline_scripts | d([]) | join('\n') }}</script>
|
|
27
|
+
{# prettier-ignore-end #}
|
|
28
|
+
|
|
29
|
+
{{ content_for_header }}
|
|
30
|
+
{% include 'bricks/_gtm.njk' %}
|
|
31
|
+
</head>
|
|
32
|
+
|
|
33
|
+
{# prettier-ignore-start #}
|
|
34
|
+
<body>
|
|
35
|
+
{% set for_body = true %}{% include 'bricks/_gtm.njk' %}
|
|
36
|
+
{% block body %}{% endblock %}
|
|
37
|
+
</body>
|
|
38
|
+
|
|
39
|
+
</html>
|
|
40
|
+
{# prettier-ignore-end #}
|
package/bricks/_gtm.njk
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
{% if site.prod and site.gtm_id %}
|
|
2
|
+
{# prettier-ignore-start #}
|
|
3
|
+
{% if not for_body %}
|
|
4
|
+
|
|
5
|
+
<!-- Google Tag Manager -->
|
|
6
|
+
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
|
7
|
+
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
|
8
|
+
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
|
9
|
+
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
|
10
|
+
})(window,document,'script','dataLayer','{{ site.gtm_id }}');</script>
|
|
11
|
+
<!-- End Google Tag Manager -->
|
|
12
|
+
|
|
13
|
+
{% else %}
|
|
14
|
+
|
|
15
|
+
<!-- Google Tag Manager (noscript) -->
|
|
16
|
+
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ site.gtm_id }}"
|
|
17
|
+
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
|
18
|
+
<!-- End Google Tag Manager (noscript) -->
|
|
19
|
+
|
|
20
|
+
{% endif %}
|
|
21
|
+
{# prettier-ignore-end #}
|
|
22
|
+
{% endif %}
|
package/bricks/_prose.css
CHANGED
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
margin-inline: auto;
|
|
5
5
|
|
|
6
6
|
/* Helper for multi-line subtitles */
|
|
7
|
-
|
|
7
|
+
sub {
|
|
8
8
|
vertical-align: top;
|
|
9
|
-
|
|
9
|
+
bottom: -0.05em;
|
|
10
10
|
line-height: 1.1;
|
|
11
11
|
font-weight: 300;
|
|
12
12
|
/* Workaround to prevent underline inside links */
|
|
@@ -49,10 +49,37 @@
|
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
|
|
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
|
+
}
|
|
52
79
|
h1 {
|
|
53
80
|
margin-bottom: 0.5em !important;
|
|
54
81
|
|
|
55
|
-
|
|
82
|
+
sub {
|
|
56
83
|
font-size: 50%;
|
|
57
84
|
}
|
|
58
85
|
}
|
package/dist/bricks.css
CHANGED
|
@@ -43,9 +43,9 @@ body a,body table {
|
|
|
43
43
|
/* Helper for multi-line subtitles */
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
-
.prose
|
|
46
|
+
.prose sub {
|
|
47
47
|
vertical-align: top;
|
|
48
|
-
|
|
48
|
+
bottom: -0.05em;
|
|
49
49
|
line-height: 1.1;
|
|
50
50
|
font-weight: 300;
|
|
51
51
|
/* Workaround to prevent underline inside links */
|
|
@@ -89,11 +89,56 @@ body a,body table {
|
|
|
89
89
|
margin-bottom: 1em;
|
|
90
90
|
}
|
|
91
91
|
|
|
92
|
+
/* Support for markdown anchors */
|
|
93
|
+
|
|
94
|
+
.prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6 {
|
|
95
|
+
position: relative;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.prose h1 .header-anchor,.prose h2 .header-anchor,.prose h3 .header-anchor,.prose h4 .header-anchor,.prose h5 .header-anchor,.prose h6 .header-anchor {
|
|
99
|
+
display: none;
|
|
100
|
+
position: absolute;
|
|
101
|
+
right: 100%;
|
|
102
|
+
top: 0;
|
|
103
|
+
padding-right: 0.2ch;
|
|
104
|
+
color: rgba(0, 0, 0, 0.25);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.prose h1:hover .header-anchor,.prose h2:hover .header-anchor,.prose h3:hover .header-anchor,.prose h4:hover .header-anchor,.prose h5:hover .header-anchor,.prose h6:hover .header-anchor {
|
|
108
|
+
display: block;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* Support for `breakout-css` headings */
|
|
112
|
+
|
|
113
|
+
.prose h1:hover::before {
|
|
114
|
+
margin-right: 1.5ch !important;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.prose h2:hover::before {
|
|
118
|
+
margin-right: 1.5ch !important;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.prose h3:hover::before {
|
|
122
|
+
margin-right: 1.5ch !important;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.prose h4:hover::before {
|
|
126
|
+
margin-right: 1.5ch !important;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.prose h5:hover::before {
|
|
130
|
+
margin-right: 1.5ch !important;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.prose h6:hover::before {
|
|
134
|
+
margin-right: 1.5ch !important;
|
|
135
|
+
}
|
|
136
|
+
|
|
92
137
|
.prose h1 {
|
|
93
138
|
margin-bottom: 0.5em !important;
|
|
94
139
|
}
|
|
95
140
|
|
|
96
|
-
.prose h1
|
|
141
|
+
.prose h1 sub {
|
|
97
142
|
font-size: 50%;
|
|
98
143
|
}
|
|
99
144
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@anydigital/bricks",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.23.0",
|
|
4
4
|
"description": "Framework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development.",
|
|
5
5
|
"main": "dist/bricks.css",
|
|
6
6
|
"style": "dist/bricks.css",
|
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
"postcss": "^8.4.33",
|
|
29
29
|
"postcss-cli": "^11.0.0",
|
|
30
30
|
"postcss-import": "^16.1.1",
|
|
31
|
-
"postcss-preset-env": "^10.6.0"
|
|
31
|
+
"postcss-preset-env": "^10.6.0",
|
|
32
|
+
"prettier-plugin-jinja-template": "^2.1.0"
|
|
32
33
|
}
|
|
33
34
|
}
|