@anydigital/breakout-css 0.11.0 → 1.0.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 +1 -4
- package/dist/breakout.css +0 -2
- package/package.json +1 -1
- package/src/breakout.css +0 -2
package/README.md
CHANGED
|
@@ -112,10 +112,7 @@ Note: `.breakout-item-max` uses `width: 125% !important` to override default siz
|
|
|
112
112
|
|
|
113
113
|
## How It Works
|
|
114
114
|
|
|
115
|
-
The `.breakout` container
|
|
116
|
-
|
|
117
|
-
1. Sets a smart `max-width: calc(10% + 65ch + 10%)` to ensure an optimal reading line length (approx. 65 characters).
|
|
118
|
-
2. Applies `padding-inline: 10%` to create the necessary gutter space for breakout elements to extend into.
|
|
115
|
+
The `.breakout` container applies `padding-inline: 10%` to create space for breakout elements.
|
|
119
116
|
|
|
120
117
|
The breakout effect on elements is achieved by:
|
|
121
118
|
|
package/dist/breakout.css
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
/* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
|
|
2
2
|
|
|
3
3
|
.breakout {
|
|
4
|
-
/* Prepare the container for breakout elements */
|
|
5
4
|
padding-inline: 10%;
|
|
6
|
-
max-width: calc(10% + 65ch + 10%);
|
|
7
5
|
|
|
8
6
|
/* Direct children, or wrapped in <p> for Markdown support */
|
|
9
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@anydigital/breakout-css",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0-alpha.10",
|
|
4
4
|
"description": "Modern CSS utilities to easily break-out / hang / pop-out / bleed images, tables, iframes, and other figures from their parent container",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"css",
|
package/src/breakout.css
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
/* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
|
|
2
2
|
|
|
3
3
|
.breakout {
|
|
4
|
-
/* Prepare the container for breakout elements */
|
|
5
4
|
padding-inline: 10%;
|
|
6
|
-
max-width: calc(10% + 65ch + 10%);
|
|
7
5
|
|
|
8
6
|
/* Direct children, or wrapped in <p> for Markdown support */
|
|
9
7
|
& > *,
|