@anydigital/bricks 0.21.2 → 0.22.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.
Files changed (5) hide show
  1. package/.prettierrc.json +10 -1
  2. package/README.md +3 -2
  3. package/bricks/_prose.css +30 -3
  4. package/dist/bricks.css +48 -3
  5. package/package.json +3 -2
package/.prettierrc.json CHANGED
@@ -1,3 +1,12 @@
1
1
  {
2
- "printWidth": 120
2
+ "printWidth": 120,
3
+ "plugins": ["prettier-plugin-jinja-template"],
4
+ "overrides": [
5
+ {
6
+ "files": ["*.njk", "*.html"],
7
+ "options": {
8
+ "parser": "jinja-template"
9
+ }
10
+ }
11
+ ]
3
12
  }
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
- - `small` elements: styled for multi-line subtitles with top vertical alignment, `0.1em` top margin, `1.1` line height, lighter weight (`300`), and displayed as `inline-block` with `100%` width to prevent underline decoration inside links
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 small` elements get reduced font size (`50%`)
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
 
package/bricks/_prose.css CHANGED
@@ -4,9 +4,9 @@
4
4
  margin-inline: auto;
5
5
 
6
6
  /* Helper for multi-line subtitles */
7
- small {
7
+ sub {
8
8
  vertical-align: top;
9
- margin-top: 0.1em;
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
- small {
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 small {
46
+ .prose sub {
47
47
  vertical-align: top;
48
- margin-top: 0.1em;
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 small {
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.21.2",
3
+ "version": "0.22.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
  }