@anydigital/atomic-bricks 1.0.0-alpha.4 → 1.0.0-alpha.6
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 +35 -0
- package/dist/atomic-bricks.css +134 -0
- package/package.json +2 -1
- package/src/_prose.css +106 -0
- package/src/atomic-bricks.css +1 -0
package/README.md
CHANGED
|
@@ -65,6 +65,41 @@ body {
|
|
|
65
65
|
|
|
66
66
|
This is automatically applied when you include the stylesheet.
|
|
67
67
|
|
|
68
|
+
### Prose Styling
|
|
69
|
+
|
|
70
|
+
The `.prose` class provides enhanced typography for article content and long-form text:
|
|
71
|
+
|
|
72
|
+
**Links:**
|
|
73
|
+
- Custom underline offset and thickness (1px default, 2px on hover)
|
|
74
|
+
- Special handling for links containing `small`, `sup`, or `sub` elements
|
|
75
|
+
|
|
76
|
+
**Headings:**
|
|
77
|
+
- `h1` with `small`, `sup`, or `sub` elements get reduced font size (0.5em) and lighter weight
|
|
78
|
+
- `h2` headings (without classes) get a full-width decorative bar above them
|
|
79
|
+
- `h3` and `h4` headings (without classes) get a decorative gradient bar to the left
|
|
80
|
+
|
|
81
|
+
**Tables:**
|
|
82
|
+
- Tables are displayed as blocks with horizontal scrolling
|
|
83
|
+
- On mobile (max-width: 767px), tables get horizontal padding
|
|
84
|
+
- Table cells have consistent vertical padding
|
|
85
|
+
- Workaround for widening columns using hidden `hr` elements
|
|
86
|
+
- Support for headings in Markdown tables using `big` elements
|
|
87
|
+
|
|
88
|
+
**Blockquotes:**
|
|
89
|
+
- Lighter font weight (300)
|
|
90
|
+
- Adjacent `figcaption` elements are styled with italic text, right alignment, and an em dash prefix
|
|
91
|
+
|
|
92
|
+
**Usage:**
|
|
93
|
+
|
|
94
|
+
```html
|
|
95
|
+
<article class="prose">
|
|
96
|
+
<h1>Article Title</h1>
|
|
97
|
+
<p>Your content here...</p>
|
|
98
|
+
</article>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
This is automatically included when you import the stylesheet.
|
|
102
|
+
|
|
68
103
|
### Flexbox Layout
|
|
69
104
|
|
|
70
105
|
Sets up a flexible column layout structure:
|
package/dist/atomic-bricks.css
CHANGED
|
@@ -29,6 +29,140 @@ body > main {
|
|
|
29
29
|
flex-grow: 1;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
+
.prose {
|
|
33
|
+
/* Container-like behavior with padding and auto margins */
|
|
34
|
+
padding: 1rem;
|
|
35
|
+
margin-inline: auto;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.prose a {
|
|
39
|
+
text-underline-offset: 0.1em;
|
|
40
|
+
text-decoration-thickness: 1px;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.prose a:hover {
|
|
44
|
+
text-decoration-thickness: 2px;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.prose a small,.prose a sup,.prose a sub {
|
|
48
|
+
font-weight: 300;
|
|
49
|
+
/* Workaround to prevent underline */
|
|
50
|
+
display: inline-block;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.prose h1 small,.prose h1 sup,.prose h1 sub {
|
|
54
|
+
font-size: 0.5em;
|
|
55
|
+
font-weight: 300;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.prose h2:not([class]),.prose h3:not([class]),.prose h4:not([class]) {
|
|
59
|
+
position: relative;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.prose h2:not([class])::before {
|
|
63
|
+
content: '';
|
|
64
|
+
display: block;
|
|
65
|
+
position: absolute;
|
|
66
|
+
background-color: rgba(0,0,0,5%);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.prose h3:not([class])::before {
|
|
70
|
+
content: '';
|
|
71
|
+
display: block;
|
|
72
|
+
position: absolute;
|
|
73
|
+
background-color: rgba(0,0,0,5%);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.prose h4:not([class])::before {
|
|
77
|
+
content: '';
|
|
78
|
+
display: block;
|
|
79
|
+
position: absolute;
|
|
80
|
+
background-color: rgba(0,0,0,5%);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.prose h2:not([class]) {
|
|
84
|
+
margin-top: 2em;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.prose h2:not([class])::before {
|
|
88
|
+
width: 100vw;
|
|
89
|
+
left: 50%;
|
|
90
|
+
height: 0.4em;
|
|
91
|
+
top: -1em;
|
|
92
|
+
transform: translateX(-50%);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.prose h3:not([class])::before {
|
|
96
|
+
width: 10em;
|
|
97
|
+
right: 100%;
|
|
98
|
+
margin-right: 0.5em;
|
|
99
|
+
height: 0.3em;
|
|
100
|
+
top: 50%;
|
|
101
|
+
transform: translateY(-50%);
|
|
102
|
+
background: linear-gradient(to left, rgba(0,0,0,10%), rgba(0,0,0,5%) 10%, transparent);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.prose h4:not([class])::before {
|
|
106
|
+
width: 10em;
|
|
107
|
+
right: 100%;
|
|
108
|
+
margin-right: 0.5em;
|
|
109
|
+
height: 0.3em;
|
|
110
|
+
top: 50%;
|
|
111
|
+
transform: translateY(-50%);
|
|
112
|
+
background: linear-gradient(to left, rgba(0,0,0,10%), rgba(0,0,0,5%) 10%, transparent);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.prose h4:not([class])::before {
|
|
116
|
+
height: 0.2em;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.prose table {
|
|
120
|
+
display: block;
|
|
121
|
+
overflow-x: auto;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
@media (max-width: 767px) {
|
|
125
|
+
|
|
126
|
+
.prose table {
|
|
127
|
+
padding-inline: 1.5em;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.prose th,.prose td {
|
|
132
|
+
padding-top: 1em;
|
|
133
|
+
padding-bottom: 1em;
|
|
134
|
+
/* Workaround to widen particular columns */
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.prose th hr,.prose td hr {
|
|
138
|
+
min-width: 25ch;
|
|
139
|
+
margin: 0;
|
|
140
|
+
visibility: hidden;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
/* Workaround for headings in Markdown tables */
|
|
144
|
+
|
|
145
|
+
.prose th big,.prose td big {
|
|
146
|
+
font-weight: bold;
|
|
147
|
+
font-style: italic;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.prose blockquote {
|
|
151
|
+
font-weight: 300;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.prose blockquote + figcaption {
|
|
155
|
+
margin-top: -1em;
|
|
156
|
+
text-align: right;
|
|
157
|
+
font-style: italic;
|
|
158
|
+
font-weight: 300;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.prose blockquote + figcaption::before {
|
|
162
|
+
content: '—';
|
|
163
|
+
margin-right: 0.25em;
|
|
164
|
+
}
|
|
165
|
+
|
|
32
166
|
/* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
|
|
33
167
|
|
|
34
168
|
.breakout {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@anydigital/atomic-bricks",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.6",
|
|
4
4
|
"description": "Framework-agnostic CSS utility helpers for modern web development",
|
|
5
5
|
"main": "dist/atomic-bricks.css",
|
|
6
6
|
"style": "dist/atomic-bricks.css",
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
],
|
|
11
11
|
"scripts": {
|
|
12
12
|
"build": "postcss src/atomic-bricks.css --no-map -o dist/atomic-bricks.css",
|
|
13
|
+
"dev": "postcss src/atomic-bricks.css -o dist/atomic-bricks.css --watch",
|
|
13
14
|
"prepublishOnly": "npm run build"
|
|
14
15
|
},
|
|
15
16
|
"repository": {
|
package/src/_prose.css
ADDED
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
.prose {
|
|
2
|
+
/* Container-like behavior with padding and auto margins */
|
|
3
|
+
padding: 1rem;
|
|
4
|
+
margin-inline: auto;
|
|
5
|
+
|
|
6
|
+
a {
|
|
7
|
+
text-underline-offset: 0.1em;
|
|
8
|
+
text-decoration-thickness: 1px;
|
|
9
|
+
&:hover {
|
|
10
|
+
text-decoration-thickness: 2px;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
small, sup, sub {
|
|
14
|
+
font-weight: 300;
|
|
15
|
+
/* Workaround to prevent underline */
|
|
16
|
+
display: inline-block;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
h1 {
|
|
21
|
+
small, sup, sub {
|
|
22
|
+
font-size: 0.5em;
|
|
23
|
+
font-weight: 300;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
h2:not([class]),
|
|
28
|
+
h3:not([class]),
|
|
29
|
+
h4:not([class]) {
|
|
30
|
+
position: relative;
|
|
31
|
+
|
|
32
|
+
&::before {
|
|
33
|
+
content: '';
|
|
34
|
+
display: block;
|
|
35
|
+
position: absolute;
|
|
36
|
+
background-color: rgba(0,0,0,5%);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
h2:not([class]) {
|
|
40
|
+
margin-top: 2em;
|
|
41
|
+
|
|
42
|
+
&::before {
|
|
43
|
+
width: 100vw;
|
|
44
|
+
left: 50%;
|
|
45
|
+
height: 0.4em;
|
|
46
|
+
top: -1em;
|
|
47
|
+
transform: translateX(-50%);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
h3:not([class]),
|
|
51
|
+
h4:not([class]) {
|
|
52
|
+
&::before {
|
|
53
|
+
width: 10em;
|
|
54
|
+
right: 100%;
|
|
55
|
+
margin-right: 0.5em;
|
|
56
|
+
height: 0.3em;
|
|
57
|
+
top: 50%;
|
|
58
|
+
transform: translateY(-50%);
|
|
59
|
+
background: linear-gradient(to left, rgba(0,0,0,10%), rgba(0,0,0,5%) 10%, transparent);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
h4:not([class]) {
|
|
63
|
+
&::before {
|
|
64
|
+
height: 0.2em;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
table {
|
|
69
|
+
display: block;
|
|
70
|
+
overflow-x: auto;
|
|
71
|
+
@media (max-width: 767px) {
|
|
72
|
+
padding-inline: 1.5em;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
th, td {
|
|
76
|
+
padding-top: 1em;
|
|
77
|
+
padding-bottom: 1em;
|
|
78
|
+
/* Workaround to widen particular columns */
|
|
79
|
+
hr {
|
|
80
|
+
min-width: 25ch;
|
|
81
|
+
margin: 0;
|
|
82
|
+
visibility: hidden;
|
|
83
|
+
}
|
|
84
|
+
/* Workaround for headings in Markdown tables */
|
|
85
|
+
big {
|
|
86
|
+
font-weight: bold;
|
|
87
|
+
font-style: italic;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
blockquote {
|
|
92
|
+
font-weight: 300;
|
|
93
|
+
|
|
94
|
+
+ figcaption {
|
|
95
|
+
margin-top: -1em;
|
|
96
|
+
text-align: right;
|
|
97
|
+
font-style: italic;
|
|
98
|
+
font-weight: 300;
|
|
99
|
+
|
|
100
|
+
&::before {
|
|
101
|
+
content: '—';
|
|
102
|
+
margin-right: 0.25em;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|