@anydigital/breakout-css 1.0.0-alpha → 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 +86 -33
- package/dist/breakout.css +135 -12
- package/package.json +12 -15
- package/postcss.config.js +12 -0
- package/src/breakout.css +92 -11
package/README.md
CHANGED
|
@@ -1,34 +1,25 @@
|
|
|
1
1
|
# breakout-css
|
|
2
2
|
|
|
3
|
-
Modern CSS utilities to easily break-out / hang / pop-out images, iframes,
|
|
3
|
+
Modern CSS utilities to easily break-out / hang / pop-out / bleed images, tables, iframes, and other figures from their parent container.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
### From CDN
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
|
-
<link
|
|
10
|
+
<link
|
|
11
|
+
rel="stylesheet"
|
|
12
|
+
href="https://cdn.jsdelivr.net/npm/@anydigital/breakout-css@1/dist/breakout.css"
|
|
13
|
+
/>
|
|
11
14
|
```
|
|
12
15
|
|
|
13
|
-
###
|
|
14
|
-
|
|
15
|
-
```bash
|
|
16
|
-
npm install @anydigital/breakout-css
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
Import the compiled CSS file directly into your project:
|
|
16
|
+
### From Source
|
|
20
17
|
|
|
21
18
|
```css
|
|
22
|
-
@import
|
|
19
|
+
@import "@anydigital/breakout-css";
|
|
23
20
|
```
|
|
24
21
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
Tailwind v4 supports native CSS nesting, so you can import the source file directly:
|
|
28
|
-
|
|
29
|
-
```css
|
|
30
|
-
@import '@anydigital/breakout-css/src/breakout.css';
|
|
31
|
-
```
|
|
22
|
+
^ This is supported by Tailwind v4!
|
|
32
23
|
|
|
33
24
|
## Usage
|
|
34
25
|
|
|
@@ -38,45 +29,107 @@ Tailwind v4 supports native CSS nesting, so you can import the source file direc
|
|
|
38
29
|
<div class="breakout">
|
|
39
30
|
<h1>Article Title</h1>
|
|
40
31
|
<p>Lorem ipsum dolor sit amet...</p>
|
|
41
|
-
|
|
32
|
+
|
|
42
33
|
<!-- This image will automatically break out -->
|
|
43
|
-
<img src="hero.jpg" alt="Hero image"
|
|
44
|
-
|
|
34
|
+
<img src="hero.jpg" alt="Hero image" />
|
|
35
|
+
|
|
45
36
|
<p>More content here...</p>
|
|
46
37
|
</div>
|
|
47
38
|
```
|
|
48
39
|
|
|
49
40
|
### Supported Elements
|
|
50
41
|
|
|
51
|
-
The breakout effect automatically applies to:
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
-
|
|
42
|
+
The breakout effect automatically applies to direct children or elements wrapped in `<p>` tags:
|
|
43
|
+
|
|
44
|
+
**Inline blocks:**
|
|
45
|
+
|
|
46
|
+
- `img`, `picture`, `figure`, `canvas`, `audio`
|
|
47
|
+
|
|
48
|
+
**Larger blocks:**
|
|
49
|
+
|
|
50
|
+
- `table` (responsive with horizontal scroll support), `pre`
|
|
51
|
+
- `iframe`, `object`, `embed`, `video`
|
|
52
|
+
|
|
53
|
+
**Custom utility classes:**
|
|
54
|
+
|
|
55
|
+
- Elements with `.breakout-item` or `.breakout-item-max` class
|
|
56
|
+
|
|
57
|
+
### Headings & Dividers
|
|
58
|
+
|
|
59
|
+
For decorative headings and full-width dividers, use the `.breakout-headings` class. This adds a subtle accent line to the left of headings and makes horizontal rules span the full viewport width:
|
|
60
|
+
|
|
61
|
+
```html
|
|
62
|
+
<div class="breakout-headings">
|
|
63
|
+
<h2>Section Title</h2>
|
|
64
|
+
<p>Some content...</p>
|
|
65
|
+
|
|
66
|
+
<hr />
|
|
67
|
+
|
|
68
|
+
<h3>Subheading</h3>
|
|
69
|
+
<p>More content...</p>
|
|
70
|
+
</div>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
The extension applies to the following elements (when they don't have other classes):
|
|
74
|
+
|
|
75
|
+
- `h2`, `h3`, `h4` (adds decorative accent line)
|
|
76
|
+
- `hr` (breaks out to full viewport width)
|
|
77
|
+
|
|
78
|
+
_Note: The decorative accent on headings is automatically hidden if the heading immediately follows an `<hr>` to avoid visual overlap._
|
|
56
79
|
|
|
57
80
|
### Manual Breakout
|
|
58
81
|
|
|
82
|
+
For elements that don't automatically break out, use the `.breakout-item` class:
|
|
83
|
+
|
|
59
84
|
```html
|
|
60
85
|
<div class="breakout">
|
|
61
86
|
<p>Regular content...</p>
|
|
62
|
-
|
|
63
|
-
<div class="breakout-
|
|
87
|
+
|
|
88
|
+
<div class="breakout-item">
|
|
64
89
|
<iframe src="https://example.com/embed"></iframe>
|
|
65
90
|
</div>
|
|
66
|
-
|
|
91
|
+
|
|
67
92
|
<p>More content...</p>
|
|
68
93
|
</div>
|
|
69
94
|
```
|
|
70
95
|
|
|
96
|
+
### Force Maximum Width
|
|
97
|
+
|
|
98
|
+
By default, breakout elements use `width: fit-content` with `max-width: 125%`, allowing them to size between 100% and 125% width based on their content. To force an element to always use the full 125% breakout width, use `.breakout-item-max`:
|
|
99
|
+
|
|
100
|
+
```html
|
|
101
|
+
<div class="breakout">
|
|
102
|
+
<p>Regular content...</p>
|
|
103
|
+
|
|
104
|
+
<!-- This will always be 125% width, never smaller -->
|
|
105
|
+
<img src="wide-image.jpg" class="breakout-item-max" alt="Wide image" />
|
|
106
|
+
|
|
107
|
+
<p>More content...</p>
|
|
108
|
+
</div>
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
Note: `.breakout-item-max` uses `width: 125% !important` to override default sizing.
|
|
112
|
+
|
|
71
113
|
## How It Works
|
|
72
114
|
|
|
73
|
-
The breakout
|
|
115
|
+
The `.breakout` container applies `padding-inline: 10%` to create space for breakout elements.
|
|
116
|
+
|
|
117
|
+
The breakout effect on elements is achieved by:
|
|
118
|
+
|
|
119
|
+
1. Setting `width: fit-content` with `min-width: 100%` and `max-width: 125%` (inline blocks like `img`, `picture`, `figure`, `canvas`, and `audio` use `min-width: auto` instead). Tables are handled specially to be full-bleed (`max-width: 100vw`) with internal horizontal padding (`7.5%`) and horizontal scroll support.
|
|
120
|
+
2. Using `margin-left: 50%` to position from the center of the container
|
|
121
|
+
3. Using `transform: translateX(-50%)` to shift it left by half its width
|
|
122
|
+
|
|
123
|
+
This combination allows elements to extend beyond their parent container (up to 125% width) while remaining visually centered.
|
|
124
|
+
|
|
125
|
+
The `.breakout-headings` utility works by:
|
|
126
|
+
|
|
127
|
+
1. Adding a `::before` pseudo-element to headings (`h2-h4`) positioned to the left.
|
|
128
|
+
2. Using a `100vw` width and negative translation on `hr::before` to create a full-width divider.
|
|
74
129
|
|
|
75
|
-
|
|
76
|
-
2. Using `transform: translateX(-50%)` to shift it left by half its width
|
|
77
|
-
3. Using `margin-left: 50%` to position it from the center of the container
|
|
130
|
+
### Markdown Support
|
|
78
131
|
|
|
79
|
-
|
|
132
|
+
The breakout effect works on direct children of `.breakout`, or elements wrapped in `<p>` tags (for Markdown compatibility where images are often wrapped in paragraphs).
|
|
80
133
|
|
|
81
134
|
## License
|
|
82
135
|
|
package/dist/breakout.css
CHANGED
|
@@ -1,25 +1,148 @@
|
|
|
1
1
|
/* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
|
|
2
2
|
|
|
3
3
|
.breakout {
|
|
4
|
-
padding-
|
|
5
|
-
padding-right: 10%;
|
|
6
|
-
|
|
7
|
-
/* Direct children, potentially wrapped in <p> for Markdown support */
|
|
4
|
+
padding-inline: 10%;
|
|
8
5
|
|
|
6
|
+
/* Direct children, or wrapped in <p> for Markdown support */
|
|
9
7
|
}
|
|
10
8
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
width:
|
|
9
|
+
.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 > table:not(does-not-exist):not(.does-not-exist),.breakout > pre:not(does-not-exist):not(.does-not-exist),.breakout > iframe:not(does-not-exist):not(.does-not-exist),.breakout > object:not(does-not-exist):not(.does-not-exist),.breakout > embed:not(does-not-exist):not(.does-not-exist),.breakout > video:not(does-not-exist):not(.does-not-exist),.breakout > .breakout-item:not(does-not-exist),.breakout > .breakout-item-max: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),.breakout > p > table:not(.does-not-exist),.breakout > p > pre:not(.does-not-exist),.breakout > p > iframe:not(.does-not-exist),.breakout > p > object:not(.does-not-exist),.breakout > p > embed:not(.does-not-exist),.breakout > p > video:not(.does-not-exist),.breakout > p > .breakout-item,.breakout > p > .breakout-item-max {
|
|
10
|
+
width: -moz-fit-content;
|
|
11
|
+
width: fit-content;
|
|
12
|
+
min-width: 100%;
|
|
15
13
|
max-width: 125%;
|
|
16
|
-
transform: translateX(-50%);
|
|
17
14
|
margin-left: 50%;
|
|
15
|
+
transform: translateX(-50%);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* Respect inline blocks' min-width */
|
|
19
|
+
|
|
20
|
+
.breakout > img:not(does-not-exist),.breakout > picture:not(does-not-exist),.breakout > figure:not(does-not-exist),.breakout > canvas:not(does-not-exist),.breakout > audio:not(does-not-exist),.breakout > p > img,.breakout > p > picture,.breakout > p > figure,.breakout > p > canvas,.breakout > p > audio {
|
|
21
|
+
min-width: auto;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* Tables are so special :( */
|
|
25
|
+
|
|
26
|
+
.breakout > table:not(does-not-exist):not(.does-not-exist),.breakout > p > table:not(.does-not-exist) {
|
|
27
|
+
/* .does-not-exist is here to avoid !important below @TODO */
|
|
28
|
+
|
|
29
|
+
/* Let them full-bleed */
|
|
30
|
+
width: -moz-max-content;
|
|
31
|
+
width: max-content;
|
|
32
|
+
min-width: auto;
|
|
33
|
+
max-width: 100vw;
|
|
34
|
+
padding-inline: 7.5%;
|
|
35
|
+
|
|
36
|
+
/* Let them scroll */
|
|
37
|
+
display: block;
|
|
38
|
+
overflow-x: auto;
|
|
39
|
+
-webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* Max out the width of the element */
|
|
43
|
+
|
|
44
|
+
.breakout > .breakout-item-max:not(does-not-exist),.breakout > p > .breakout-item-max {
|
|
45
|
+
width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.breakout-headings h2:not([class]),.breakout-headings h3:not([class]),.breakout-headings h4:not([class]),.breakout-headings hr {
|
|
49
|
+
position: relative;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.breakout-headings h2:not([class])::before {
|
|
53
|
+
content: "";
|
|
54
|
+
display: block;
|
|
55
|
+
position: absolute;
|
|
56
|
+
background-color: rgba(0, 0, 0, 5%);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.breakout-headings h3:not([class])::before {
|
|
60
|
+
content: "";
|
|
61
|
+
display: block;
|
|
62
|
+
position: absolute;
|
|
63
|
+
background-color: rgba(0, 0, 0, 5%);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.breakout-headings h4:not([class])::before {
|
|
67
|
+
content: "";
|
|
68
|
+
display: block;
|
|
69
|
+
position: absolute;
|
|
70
|
+
background-color: rgba(0, 0, 0, 5%);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.breakout-headings hr:not(.does-not-exist)::before {
|
|
74
|
+
content: "";
|
|
75
|
+
display: block;
|
|
76
|
+
position: absolute;
|
|
77
|
+
background-color: rgba(0, 0, 0, 5%);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.breakout-headings h2:not([class])::before {
|
|
81
|
+
width: 10em;
|
|
82
|
+
right: 100%;
|
|
83
|
+
margin-right: 1rem;
|
|
84
|
+
height: 0.3em;
|
|
85
|
+
top: 50%;
|
|
86
|
+
transform: translateY(-50%);
|
|
87
|
+
background: linear-gradient(
|
|
88
|
+
to left,
|
|
89
|
+
rgba(0, 0, 0, 10%),
|
|
90
|
+
rgba(0, 0, 0, 5%) 10%,
|
|
91
|
+
transparent
|
|
92
|
+
);
|
|
93
|
+
}
|
|
18
94
|
|
|
95
|
+
.breakout-headings h3:not([class])::before {
|
|
96
|
+
width: 10em;
|
|
97
|
+
right: 100%;
|
|
98
|
+
margin-right: 1rem;
|
|
99
|
+
height: 0.3em;
|
|
100
|
+
top: 50%;
|
|
101
|
+
transform: translateY(-50%);
|
|
102
|
+
background: linear-gradient(
|
|
103
|
+
to left,
|
|
104
|
+
rgba(0, 0, 0, 10%),
|
|
105
|
+
rgba(0, 0, 0, 5%) 10%,
|
|
106
|
+
transparent
|
|
107
|
+
);
|
|
19
108
|
}
|
|
20
109
|
|
|
21
|
-
.breakout
|
|
22
|
-
width:
|
|
110
|
+
.breakout-headings h4:not([class])::before {
|
|
111
|
+
width: 10em;
|
|
112
|
+
right: 100%;
|
|
113
|
+
margin-right: 1rem;
|
|
114
|
+
height: 0.3em;
|
|
115
|
+
top: 50%;
|
|
116
|
+
transform: translateY(-50%);
|
|
117
|
+
background: linear-gradient(
|
|
118
|
+
to left,
|
|
119
|
+
rgba(0, 0, 0, 10%),
|
|
120
|
+
rgba(0, 0, 0, 5%) 10%,
|
|
121
|
+
transparent
|
|
122
|
+
);
|
|
23
123
|
}
|
|
24
124
|
|
|
25
|
-
|
|
125
|
+
.breakout-headings hr {
|
|
126
|
+
height: 0.75rem;
|
|
127
|
+
border: none;
|
|
128
|
+
overflow: visible;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.breakout-headings hr::before {
|
|
132
|
+
width: 100vw;
|
|
133
|
+
left: 50%;
|
|
134
|
+
height: 100%;
|
|
135
|
+
transform: translateX(-50%);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.breakout-headings hr + h2::before {
|
|
139
|
+
display: none !important;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.breakout-headings hr + h3::before {
|
|
143
|
+
display: none !important;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.breakout-headings hr + h4::before {
|
|
147
|
+
display: none !important;
|
|
148
|
+
}
|
package/package.json
CHANGED
|
@@ -1,29 +1,30 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@anydigital/breakout-css",
|
|
3
|
-
"version": "1.0.0-alpha",
|
|
4
|
-
"description": "Modern CSS utilities to easily break-out / hang / pop-out images, iframes,
|
|
3
|
+
"version": "1.0.0-alpha.10",
|
|
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",
|
|
7
7
|
"breakout",
|
|
8
|
+
"bleed",
|
|
8
9
|
"images",
|
|
10
|
+
"tables",
|
|
9
11
|
"figures",
|
|
12
|
+
"responsive",
|
|
10
13
|
"tailwind",
|
|
11
|
-
"tailwind-plugin",
|
|
12
14
|
"utilities"
|
|
13
15
|
],
|
|
14
|
-
"main": "dist/breakout.css",
|
|
15
|
-
"style": "dist/breakout.css",
|
|
16
16
|
"files": [
|
|
17
17
|
"dist",
|
|
18
|
-
"src"
|
|
18
|
+
"src",
|
|
19
|
+
"postcss.config.js"
|
|
19
20
|
],
|
|
21
|
+
"style": "./src/breakout.css",
|
|
20
22
|
"exports": {
|
|
21
|
-
".": "./
|
|
22
|
-
"./
|
|
23
|
-
"./src": "./src/breakout.css"
|
|
23
|
+
".": "./src/breakout.css",
|
|
24
|
+
"./dist": "./dist/breakout.css"
|
|
24
25
|
},
|
|
25
26
|
"scripts": {
|
|
26
|
-
"build": "
|
|
27
|
+
"build": "postcss src/breakout.css --no-map -o dist/breakout.css",
|
|
27
28
|
"prepublishOnly": "npm run build"
|
|
28
29
|
},
|
|
29
30
|
"repository": {
|
|
@@ -32,13 +33,9 @@
|
|
|
32
33
|
},
|
|
33
34
|
"author": "Anton Staroverov",
|
|
34
35
|
"license": "MIT",
|
|
35
|
-
"peerDependencies": {
|
|
36
|
-
"tailwindcss": "^3.0.0 || ^4.0.0"
|
|
37
|
-
},
|
|
38
36
|
"devDependencies": {
|
|
39
|
-
"fs-extra": "^11.2.0",
|
|
40
37
|
"postcss": "^8.4.0",
|
|
41
|
-
"postcss-
|
|
38
|
+
"postcss-cli": "^11.0.0",
|
|
42
39
|
"postcss-preset-env": "^10.6.0"
|
|
43
40
|
}
|
|
44
41
|
}
|
package/src/breakout.css
CHANGED
|
@@ -1,25 +1,106 @@
|
|
|
1
1
|
/* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
|
|
2
2
|
|
|
3
3
|
.breakout {
|
|
4
|
-
padding-
|
|
5
|
-
padding-right: 10%;
|
|
4
|
+
padding-inline: 10%;
|
|
6
5
|
|
|
7
|
-
/* Direct children,
|
|
6
|
+
/* Direct children, or wrapped in <p> for Markdown support */
|
|
8
7
|
& > *,
|
|
9
8
|
& > p > * {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
&:is(
|
|
10
|
+
/* Inline blocks */
|
|
11
|
+
img, picture, figure, canvas, audio,
|
|
12
|
+
/* Larger blocks */
|
|
13
|
+
table,
|
|
14
|
+
pre,
|
|
15
|
+
iframe, object, embed, video,
|
|
16
|
+
/* Custom utility classes for other tags that need to be broken out */
|
|
17
|
+
.breakout-item,
|
|
18
|
+
.breakout-item-max
|
|
19
|
+
) {
|
|
20
|
+
width: fit-content;
|
|
21
|
+
min-width: 100%;
|
|
13
22
|
max-width: 125%;
|
|
14
|
-
transform: translateX(-50%);
|
|
15
23
|
margin-left: 50%;
|
|
24
|
+
transform: translateX(-50%);
|
|
25
|
+
}
|
|
16
26
|
|
|
27
|
+
/* Respect inline blocks' min-width */
|
|
28
|
+
&:is(img, picture, figure, canvas, audio) {
|
|
29
|
+
min-width: auto;
|
|
17
30
|
}
|
|
18
|
-
|
|
19
|
-
|
|
31
|
+
|
|
32
|
+
/* Tables are so special :( */
|
|
33
|
+
&:is(table):not(.does-not-exist) {
|
|
34
|
+
/* .does-not-exist is here to avoid !important below @TODO */
|
|
35
|
+
|
|
36
|
+
/* Let them full-bleed */
|
|
37
|
+
width: max-content;
|
|
38
|
+
min-width: auto;
|
|
39
|
+
max-width: 100vw;
|
|
40
|
+
padding-inline: 7.5%;
|
|
41
|
+
|
|
42
|
+
/* Let them scroll */
|
|
43
|
+
display: block;
|
|
44
|
+
overflow-x: auto;
|
|
45
|
+
-webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
|
|
20
46
|
}
|
|
21
|
-
}
|
|
22
47
|
|
|
48
|
+
/* Max out the width of the element */
|
|
49
|
+
&.breakout-item-max {
|
|
50
|
+
width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
|
|
51
|
+
}
|
|
52
|
+
}
|
|
23
53
|
}
|
|
24
54
|
|
|
25
|
-
|
|
55
|
+
.breakout-headings {
|
|
56
|
+
h2:not([class]),
|
|
57
|
+
h3:not([class]),
|
|
58
|
+
h4:not([class]),
|
|
59
|
+
hr {
|
|
60
|
+
position: relative;
|
|
61
|
+
|
|
62
|
+
&::before {
|
|
63
|
+
content: "";
|
|
64
|
+
display: block;
|
|
65
|
+
position: absolute;
|
|
66
|
+
background-color: rgba(0, 0, 0, 5%);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
h2:not([class]),
|
|
70
|
+
h3:not([class]),
|
|
71
|
+
h4:not([class]) {
|
|
72
|
+
&::before {
|
|
73
|
+
width: 10em;
|
|
74
|
+
right: 100%;
|
|
75
|
+
margin-right: 1rem;
|
|
76
|
+
height: 0.3em;
|
|
77
|
+
top: 50%;
|
|
78
|
+
transform: translateY(-50%);
|
|
79
|
+
background: linear-gradient(
|
|
80
|
+
to left,
|
|
81
|
+
rgba(0, 0, 0, 10%),
|
|
82
|
+
rgba(0, 0, 0, 5%) 10%,
|
|
83
|
+
transparent
|
|
84
|
+
);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
hr {
|
|
88
|
+
height: 0.75rem;
|
|
89
|
+
border: none;
|
|
90
|
+
overflow: visible;
|
|
91
|
+
|
|
92
|
+
&::before {
|
|
93
|
+
width: 100vw;
|
|
94
|
+
left: 50%;
|
|
95
|
+
height: 100%;
|
|
96
|
+
transform: translateX(-50%);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
hr + h2,
|
|
100
|
+
hr + h3,
|
|
101
|
+
hr + h4 {
|
|
102
|
+
&::before {
|
|
103
|
+
display: none !important;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|