@anydigital/bricks 0.26.0-alpha → 0.27.0-alpha
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/_config.yml +1 -0
- package/_includes/bricks/html.liquid +1 -1
- package/assets/breakout.css +95 -0
- package/assets/bricks.css +154 -0
- package/assets/bricks.theme.css +23 -0
- package/bricks.gemspec +1 -1
- package/package.json +2 -6
- package/postcss.config.js +3 -6
- package/src/{_base.css → _classless.css} +12 -5
- package/src/_tricks.css +12 -0
- package/src/breakout.css +95 -0
- package/src/bricks.css +6 -5
- package/src/bricks.theme.css +23 -0
- package/dist/bricks.css +0 -382
- /package/src/{_prism.css → _refactor/_prism.css} +0 -0
- /package/src/{_prose.css → _refactor/_prose.css} +0 -0
- /package/src/{_util.css → _refactor/_util.css} +0 -0
package/_config.yml
CHANGED
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
/* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
|
|
2
|
+
|
|
3
|
+
.breakout {
|
|
4
|
+
/* Prepare the container for breakout elements */
|
|
5
|
+
padding-inline: 10%;
|
|
6
|
+
max-width: calc(10% + 65ch + 10%);
|
|
7
|
+
|
|
8
|
+
/* Breakout direct children only */
|
|
9
|
+
& > * {
|
|
10
|
+
&:is(
|
|
11
|
+
table,
|
|
12
|
+
pre,
|
|
13
|
+
figure, video, iframe, canvas,
|
|
14
|
+
/* Only breakout img/picture wrapped in <p> to avoid breaking badges, etc. */
|
|
15
|
+
p > img, p > picture,
|
|
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%;
|
|
22
|
+
max-width: 125%;
|
|
23
|
+
margin-left: 50%;
|
|
24
|
+
transform: translateX(-50%);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* Respect img/picture min-width */
|
|
28
|
+
&:is(p > img, p > picture) {
|
|
29
|
+
min-width: auto;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* Tables are so special :( */
|
|
33
|
+
&:is(table) {
|
|
34
|
+
/* Let them full-bleed */
|
|
35
|
+
width: max-content;
|
|
36
|
+
min-width: auto;
|
|
37
|
+
max-width: 100vw;
|
|
38
|
+
padding-inline: 7.5%;
|
|
39
|
+
|
|
40
|
+
/* Let them scroll */
|
|
41
|
+
display: block;
|
|
42
|
+
overflow-x: auto;
|
|
43
|
+
-webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* Max out the width of the element */
|
|
47
|
+
&.breakout-item-max {
|
|
48
|
+
width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.breakout-all > * {
|
|
54
|
+
&:is(h2, h3, h4, hr):not([class]) {
|
|
55
|
+
position: relative;
|
|
56
|
+
|
|
57
|
+
&::before {
|
|
58
|
+
content: "";
|
|
59
|
+
display: block;
|
|
60
|
+
position: absolute;
|
|
61
|
+
background: lightgray;
|
|
62
|
+
opacity: 50%;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
&:is(h2, h3, h4):not([class]) {
|
|
67
|
+
&::before {
|
|
68
|
+
width: 10em;
|
|
69
|
+
right: 100%;
|
|
70
|
+
margin-right: 1rem;
|
|
71
|
+
height: 0.25em;
|
|
72
|
+
top: 50%;
|
|
73
|
+
transform: translateY(-50%);
|
|
74
|
+
background: linear-gradient(to left, lightgray, gainsboro 10%, transparent);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
&:where(hr + &) {
|
|
78
|
+
&::before {
|
|
79
|
+
display: none !important;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
&:is(hr) {
|
|
84
|
+
height: 0.5rem;
|
|
85
|
+
border: none;
|
|
86
|
+
overflow: visible;
|
|
87
|
+
|
|
88
|
+
&::before {
|
|
89
|
+
width: 100vw;
|
|
90
|
+
left: 50%;
|
|
91
|
+
height: 100%;
|
|
92
|
+
transform: translateX(-50%);
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @anydigital/bricks
|
|
3
|
+
* Framework-agnostic CSS utility helpers
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
html {
|
|
7
|
+
/* Prevent horizontal overflow and scrolling, modern way */
|
|
8
|
+
overflow-x: clip;
|
|
9
|
+
|
|
10
|
+
/* Font smoothing */
|
|
11
|
+
-webkit-font-smoothing: antialiased;
|
|
12
|
+
-moz-osx-font-smoothing: grayscale;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
body {
|
|
16
|
+
/* Ensures body takes at least the full height of the viewport (using dynamic viewport height for better mobile support) */
|
|
17
|
+
min-height: 100dvh;
|
|
18
|
+
|
|
19
|
+
/* Make the body a flex container with column layout; main fills space */
|
|
20
|
+
display: flex;
|
|
21
|
+
flex-direction: column;
|
|
22
|
+
> main {
|
|
23
|
+
flex-grow: 1;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* Hyphenation */
|
|
27
|
+
hyphens: auto;
|
|
28
|
+
/* Links and tables are better (safer) without hyphenation */
|
|
29
|
+
a,
|
|
30
|
+
table {
|
|
31
|
+
hyphens: none;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
pre {
|
|
36
|
+
padding: 1rem 1.5rem;
|
|
37
|
+
padding-inline-end: 2rem;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/* @import "./_prose"; */
|
|
41
|
+
|
|
42
|
+
/* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
|
|
43
|
+
|
|
44
|
+
.breakout {
|
|
45
|
+
/* Prepare the container for breakout elements */
|
|
46
|
+
padding-inline: 10%;
|
|
47
|
+
max-width: calc(10% + 65ch + 10%);
|
|
48
|
+
|
|
49
|
+
/* Breakout direct children only */
|
|
50
|
+
& > * {
|
|
51
|
+
&:is(
|
|
52
|
+
table,
|
|
53
|
+
pre,
|
|
54
|
+
figure, video, iframe, canvas,
|
|
55
|
+
/* Only breakout img/picture wrapped in <p> to avoid breaking badges, etc. */
|
|
56
|
+
p > img, p > picture,
|
|
57
|
+
/* Custom utility classes for other tags that need to be broken out */
|
|
58
|
+
.breakout-item,
|
|
59
|
+
.breakout-item-max
|
|
60
|
+
) {
|
|
61
|
+
width: fit-content;
|
|
62
|
+
min-width: 100%;
|
|
63
|
+
max-width: 125%;
|
|
64
|
+
margin-left: 50%;
|
|
65
|
+
transform: translateX(-50%);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* Respect img/picture min-width */
|
|
69
|
+
&:is(p > img, p > picture) {
|
|
70
|
+
min-width: auto;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* Tables are so special :( */
|
|
74
|
+
&:is(table) {
|
|
75
|
+
/* Let them full-bleed */
|
|
76
|
+
width: max-content;
|
|
77
|
+
min-width: auto;
|
|
78
|
+
max-width: 100vw;
|
|
79
|
+
padding-inline: 7.5%;
|
|
80
|
+
|
|
81
|
+
/* Let them scroll */
|
|
82
|
+
display: block;
|
|
83
|
+
overflow-x: auto;
|
|
84
|
+
-webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/* Max out the width of the element */
|
|
88
|
+
&.breakout-item-max {
|
|
89
|
+
width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.breakout-all > * {
|
|
95
|
+
&:is(h2, h3, h4, hr):not([class]) {
|
|
96
|
+
position: relative;
|
|
97
|
+
|
|
98
|
+
&::before {
|
|
99
|
+
content: "";
|
|
100
|
+
display: block;
|
|
101
|
+
position: absolute;
|
|
102
|
+
background: lightgray;
|
|
103
|
+
opacity: 50%;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
&:is(h2, h3, h4):not([class]) {
|
|
108
|
+
&::before {
|
|
109
|
+
width: 10em;
|
|
110
|
+
right: 100%;
|
|
111
|
+
margin-right: 1rem;
|
|
112
|
+
height: 0.25em;
|
|
113
|
+
top: 50%;
|
|
114
|
+
transform: translateY(-50%);
|
|
115
|
+
background: linear-gradient(to left, lightgray, gainsboro 10%, transparent);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
&:where(hr + &) {
|
|
119
|
+
&::before {
|
|
120
|
+
display: none !important;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
&:is(hr) {
|
|
125
|
+
height: 0.5rem;
|
|
126
|
+
border: none;
|
|
127
|
+
overflow: visible;
|
|
128
|
+
|
|
129
|
+
&::before {
|
|
130
|
+
width: 100vw;
|
|
131
|
+
left: 50%;
|
|
132
|
+
height: 100%;
|
|
133
|
+
transform: translateX(-50%);
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/* @import "./_prism"; */
|
|
139
|
+
|
|
140
|
+
/* @import "./_util"; */
|
|
141
|
+
|
|
142
|
+
table.borderless {
|
|
143
|
+
td {
|
|
144
|
+
border: none;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
/* Favicons in links @TODO: add to tricks-wiki */
|
|
149
|
+
|
|
150
|
+
a > i > img {
|
|
151
|
+
max-height: 1.25em;
|
|
152
|
+
margin-top: calc(-0.25em / 2);
|
|
153
|
+
margin-inline-end: 0.25em;
|
|
154
|
+
}
|
package/bricks.gemspec
CHANGED
|
@@ -9,7 +9,7 @@ Gem::Specification.new do |spec|
|
|
|
9
9
|
spec.homepage = "https://github.com/anydigital/bricks"
|
|
10
10
|
spec.license = "MIT"
|
|
11
11
|
|
|
12
|
-
spec.files = Dir.glob("{_includes}/**/*")
|
|
12
|
+
spec.files = Dir.glob("{_includes,assets}/**/*")
|
|
13
13
|
# puts "spec.files: #{spec.files.inspect}"
|
|
14
14
|
|
|
15
15
|
spec.add_runtime_dependency "jekyll", ">= 3.5", "< 5.0"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@anydigital/bricks",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.27.0-alpha",
|
|
4
4
|
"description": "Framework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development.",
|
|
5
5
|
"style": "./src/bricks.css",
|
|
6
6
|
"exports": {
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"./dist": "./dist/bricks.css"
|
|
9
9
|
},
|
|
10
10
|
"scripts": {
|
|
11
|
-
"postcss": "postcss src
|
|
11
|
+
"postcss": "postcss './src/!(_)*.css' --dir ./assets",
|
|
12
12
|
"build": "npm run postcss -- --no-map",
|
|
13
13
|
"start": "npm run postcss -- --watch",
|
|
14
14
|
"prepublishOnly": "npm run build"
|
|
@@ -30,10 +30,6 @@
|
|
|
30
30
|
"postcss": "^8.4.33",
|
|
31
31
|
"postcss-cli": "^11.0.0",
|
|
32
32
|
"postcss-import": "^16.1.1",
|
|
33
|
-
"postcss-preset-env": "^10.6.0",
|
|
34
33
|
"prettier-plugin-jinja-template": "^2.1.0"
|
|
35
|
-
},
|
|
36
|
-
"dependencies": {
|
|
37
|
-
"@anydigital/breakout-css": "^0.11.1"
|
|
38
34
|
}
|
|
39
35
|
}
|
package/postcss.config.js
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
body {
|
|
1
|
+
html {
|
|
2
|
+
/* Prevent horizontal overflow and scrolling, modern way */
|
|
4
3
|
overflow-x: clip;
|
|
4
|
+
|
|
5
|
+
/* Font smoothing */
|
|
6
|
+
-webkit-font-smoothing: antialiased;
|
|
7
|
+
-moz-osx-font-smoothing: grayscale;
|
|
5
8
|
}
|
|
6
9
|
|
|
7
10
|
body {
|
|
@@ -15,8 +18,7 @@ body {
|
|
|
15
18
|
flex-grow: 1;
|
|
16
19
|
}
|
|
17
20
|
|
|
18
|
-
|
|
19
|
-
-moz-osx-font-smoothing: grayscale;
|
|
21
|
+
/* Hyphenation */
|
|
20
22
|
hyphens: auto;
|
|
21
23
|
/* Links and tables are better (safer) without hyphenation */
|
|
22
24
|
a,
|
|
@@ -24,3 +26,8 @@ body {
|
|
|
24
26
|
hyphens: none;
|
|
25
27
|
}
|
|
26
28
|
}
|
|
29
|
+
|
|
30
|
+
pre {
|
|
31
|
+
padding: 1rem 1.5rem;
|
|
32
|
+
padding-inline-end: 2rem;
|
|
33
|
+
}
|
package/src/_tricks.css
ADDED
package/src/breakout.css
ADDED
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
/* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
|
|
2
|
+
|
|
3
|
+
.breakout {
|
|
4
|
+
/* Prepare the container for breakout elements */
|
|
5
|
+
padding-inline: 10%;
|
|
6
|
+
max-width: calc(10% + 65ch + 10%);
|
|
7
|
+
|
|
8
|
+
/* Breakout direct children only */
|
|
9
|
+
& > * {
|
|
10
|
+
&:is(
|
|
11
|
+
table,
|
|
12
|
+
pre,
|
|
13
|
+
figure, video, iframe, canvas,
|
|
14
|
+
/* Only breakout img/picture wrapped in <p> to avoid breaking badges, etc. */
|
|
15
|
+
p > img, p > picture,
|
|
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%;
|
|
22
|
+
max-width: 125%;
|
|
23
|
+
margin-left: 50%;
|
|
24
|
+
transform: translateX(-50%);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* Respect img/picture min-width */
|
|
28
|
+
&:is(p > img, p > picture) {
|
|
29
|
+
min-width: auto;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* Tables are so special :( */
|
|
33
|
+
&:is(table) {
|
|
34
|
+
/* Let them full-bleed */
|
|
35
|
+
width: max-content;
|
|
36
|
+
min-width: auto;
|
|
37
|
+
max-width: 100vw;
|
|
38
|
+
padding-inline: 7.5%;
|
|
39
|
+
|
|
40
|
+
/* Let them scroll */
|
|
41
|
+
display: block;
|
|
42
|
+
overflow-x: auto;
|
|
43
|
+
-webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* Max out the width of the element */
|
|
47
|
+
&.breakout-item-max {
|
|
48
|
+
width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.breakout-all > * {
|
|
54
|
+
&:is(h2, h3, h4, hr):not([class]) {
|
|
55
|
+
position: relative;
|
|
56
|
+
|
|
57
|
+
&::before {
|
|
58
|
+
content: "";
|
|
59
|
+
display: block;
|
|
60
|
+
position: absolute;
|
|
61
|
+
background: lightgray;
|
|
62
|
+
opacity: 50%;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
&:is(h2, h3, h4):not([class]) {
|
|
67
|
+
&::before {
|
|
68
|
+
width: 10em;
|
|
69
|
+
right: 100%;
|
|
70
|
+
margin-right: 1rem;
|
|
71
|
+
height: 0.25em;
|
|
72
|
+
top: 50%;
|
|
73
|
+
transform: translateY(-50%);
|
|
74
|
+
background: linear-gradient(to left, lightgray, gainsboro 10%, transparent);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
&:where(hr + &) {
|
|
78
|
+
&::before {
|
|
79
|
+
display: none !important;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
&:is(hr) {
|
|
84
|
+
height: 0.5rem;
|
|
85
|
+
border: none;
|
|
86
|
+
overflow: visible;
|
|
87
|
+
|
|
88
|
+
&::before {
|
|
89
|
+
width: 100vw;
|
|
90
|
+
left: 50%;
|
|
91
|
+
height: 100%;
|
|
92
|
+
transform: translateX(-50%);
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
package/src/bricks.css
CHANGED
|
@@ -3,8 +3,9 @@
|
|
|
3
3
|
* Framework-agnostic CSS utility helpers
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
@import "./
|
|
7
|
-
@import "./_prose";
|
|
8
|
-
@import "
|
|
9
|
-
@import "./_prism";
|
|
10
|
-
@import "./_util";
|
|
6
|
+
@import "./_classless";
|
|
7
|
+
/* @import "./_prose"; */
|
|
8
|
+
@import "./breakout";
|
|
9
|
+
/* @import "./_prism"; */
|
|
10
|
+
/* @import "./_util"; */
|
|
11
|
+
@import "./_tricks";
|
package/dist/bricks.css
DELETED
|
@@ -1,382 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @anydigital/bricks
|
|
3
|
-
* Framework-agnostic CSS utility helpers
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
/* Prevent horizontal overflow and scrolling, modern way */
|
|
7
|
-
|
|
8
|
-
html,
|
|
9
|
-
body {
|
|
10
|
-
overflow-x: clip;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
body {
|
|
14
|
-
/* Ensures body takes at least the full height of the viewport (using dynamic viewport height for better mobile support) */
|
|
15
|
-
min-height: 100dvh;
|
|
16
|
-
|
|
17
|
-
/* Make the body a flex container with column layout; main fills space */
|
|
18
|
-
display: flex;
|
|
19
|
-
flex-direction: column;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
body > main {
|
|
23
|
-
flex-grow: 1;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
body {
|
|
27
|
-
|
|
28
|
-
-webkit-font-smoothing: antialiased;
|
|
29
|
-
-moz-osx-font-smoothing: grayscale;
|
|
30
|
-
hyphens: auto;
|
|
31
|
-
/* Links and tables are better (safer) without hyphenation */
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
body a,body table {
|
|
35
|
-
hyphens: none;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.prose {
|
|
39
|
-
/* Container-like behavior with auto margins */
|
|
40
|
-
width: 100%;
|
|
41
|
-
margin-inline: auto;
|
|
42
|
-
|
|
43
|
-
/* Helper for multi-line subtitles */
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.prose sub {
|
|
47
|
-
vertical-align: top;
|
|
48
|
-
bottom: -0.05em;
|
|
49
|
-
line-height: 1.1;
|
|
50
|
-
font-weight: 300;
|
|
51
|
-
/* Workaround to prevent underline inside links */
|
|
52
|
-
display: inline-block;
|
|
53
|
-
width: 100%;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.prose a {
|
|
57
|
-
text-underline-offset: 0.1em;
|
|
58
|
-
text-decoration-thickness: 1px;
|
|
59
|
-
/* Don't underline links that point to anchors */
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.prose a[href^="#"] {
|
|
63
|
-
text-decoration: none;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.prose a:hover {
|
|
67
|
-
text-decoration-thickness: 2px;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
/* Helper to insert icons in links */
|
|
71
|
-
|
|
72
|
-
.prose a i {
|
|
73
|
-
height: 1em;
|
|
74
|
-
margin-right: 0.25em;
|
|
75
|
-
font-style: normal;
|
|
76
|
-
/* Workaround to prevent underline */
|
|
77
|
-
display: inline-block;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.prose a i img {
|
|
81
|
-
height: 100%;
|
|
82
|
-
margin: 0;
|
|
83
|
-
position: relative;
|
|
84
|
-
bottom: -0.15em;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
.prose img:not(:where(.prose > img,.prose > p > img)) {
|
|
88
|
-
margin-top: 0;
|
|
89
|
-
margin-bottom: 1em;
|
|
90
|
-
}
|
|
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
|
-
|
|
137
|
-
.prose h1 {
|
|
138
|
-
margin-bottom: 0.5em !important;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
.prose h1 sub {
|
|
142
|
-
font-size: 50%;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
.prose th,.prose td {
|
|
146
|
-
/* Keep extra space on the right for better horizontal scroll on mobile */
|
|
147
|
-
padding: 1rem 2rem 1rem 0;
|
|
148
|
-
vertical-align: top;
|
|
149
|
-
/* Workaround to widen particular columns */
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
.prose th hr,.prose td hr {
|
|
153
|
-
width: 12ch;
|
|
154
|
-
height: 0;
|
|
155
|
-
margin: 0;
|
|
156
|
-
visibility: hidden;
|
|
157
|
-
/* &.ch16 {
|
|
158
|
-
width: 16ch;
|
|
159
|
-
} */
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
/* Workaround for headings in Markdown tables */
|
|
163
|
-
|
|
164
|
-
.prose th big,.prose td big {
|
|
165
|
-
font-weight: bold;
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
.prose th {
|
|
169
|
-
vertical-align: bottom;
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
.prose blockquote {
|
|
173
|
-
font-weight: 300;
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
.prose blockquote + figcaption {
|
|
177
|
-
margin-top: -1em;
|
|
178
|
-
text-align: right;
|
|
179
|
-
font-style: italic;
|
|
180
|
-
font-weight: 300;
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
.prose blockquote + figcaption::before {
|
|
184
|
-
content: "—";
|
|
185
|
-
margin-right: 0.25em;
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
.prose code[data-caption]::before {
|
|
189
|
-
content: attr(data-caption);
|
|
190
|
-
display: block;
|
|
191
|
-
margin-bottom: 1.5em;
|
|
192
|
-
opacity: 0.5;
|
|
193
|
-
font-style: italic;
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
/* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
|
|
197
|
-
|
|
198
|
-
.breakout {
|
|
199
|
-
/* Prepare the container for breakout elements */
|
|
200
|
-
padding-inline: 10%;
|
|
201
|
-
max-width: calc(10% + 65ch + 10%);
|
|
202
|
-
|
|
203
|
-
/* Direct children, or wrapped in <p> for Markdown support */
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
.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 {
|
|
207
|
-
width: -moz-fit-content;
|
|
208
|
-
width: fit-content;
|
|
209
|
-
min-width: 100%;
|
|
210
|
-
max-width: 125%;
|
|
211
|
-
margin-left: 50%;
|
|
212
|
-
transform: translateX(-50%);
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
/*** .does-not-exist is used below to avoid !important-s @TODO ***/
|
|
216
|
-
|
|
217
|
-
/* Respect inline blocks' min-width */
|
|
218
|
-
|
|
219
|
-
.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 > 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) {
|
|
220
|
-
min-width: auto;
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
/* Tables are so special :( */
|
|
224
|
-
|
|
225
|
-
.breakout > table:not(does-not-exist):not(.does-not-exist),.breakout > p > table:not(.does-not-exist) {
|
|
226
|
-
/* Let them full-bleed */
|
|
227
|
-
width: -moz-max-content;
|
|
228
|
-
width: max-content;
|
|
229
|
-
min-width: auto;
|
|
230
|
-
max-width: 100vw;
|
|
231
|
-
padding-inline: 7.5%;
|
|
232
|
-
|
|
233
|
-
/* Let them scroll */
|
|
234
|
-
display: block;
|
|
235
|
-
overflow-x: auto;
|
|
236
|
-
-webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
/* Max out the width of the element */
|
|
240
|
-
|
|
241
|
-
.breakout > .breakout-item-max:not(does-not-exist),.breakout > p > .breakout-item-max {
|
|
242
|
-
width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
.breakout-headings h2:not([class]),.breakout-headings h3:not([class]),.breakout-headings h4:not([class]),.breakout-headings hr {
|
|
246
|
-
position: relative;
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
.breakout-headings h2:not([class])::before {
|
|
250
|
-
content: "";
|
|
251
|
-
display: block;
|
|
252
|
-
position: absolute;
|
|
253
|
-
background-color: rgba(0, 0, 0, 5%);
|
|
254
|
-
}
|
|
255
|
-
|
|
256
|
-
.breakout-headings h3:not([class])::before {
|
|
257
|
-
content: "";
|
|
258
|
-
display: block;
|
|
259
|
-
position: absolute;
|
|
260
|
-
background-color: rgba(0, 0, 0, 5%);
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
.breakout-headings h4:not([class])::before {
|
|
264
|
-
content: "";
|
|
265
|
-
display: block;
|
|
266
|
-
position: absolute;
|
|
267
|
-
background-color: rgba(0, 0, 0, 5%);
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
.breakout-headings hr:not(.does-not-exist)::before {
|
|
271
|
-
content: "";
|
|
272
|
-
display: block;
|
|
273
|
-
position: absolute;
|
|
274
|
-
background-color: rgba(0, 0, 0, 5%);
|
|
275
|
-
}
|
|
276
|
-
|
|
277
|
-
.breakout-headings h2:not([class])::before {
|
|
278
|
-
width: 10em;
|
|
279
|
-
right: 100%;
|
|
280
|
-
margin-right: 1rem;
|
|
281
|
-
height: 0.3em;
|
|
282
|
-
top: 50%;
|
|
283
|
-
transform: translateY(-50%);
|
|
284
|
-
background: linear-gradient(
|
|
285
|
-
to left,
|
|
286
|
-
rgba(0, 0, 0, 10%),
|
|
287
|
-
rgba(0, 0, 0, 5%) 10%,
|
|
288
|
-
transparent
|
|
289
|
-
);
|
|
290
|
-
}
|
|
291
|
-
|
|
292
|
-
.breakout-headings h3:not([class])::before {
|
|
293
|
-
width: 10em;
|
|
294
|
-
right: 100%;
|
|
295
|
-
margin-right: 1rem;
|
|
296
|
-
height: 0.3em;
|
|
297
|
-
top: 50%;
|
|
298
|
-
transform: translateY(-50%);
|
|
299
|
-
background: linear-gradient(
|
|
300
|
-
to left,
|
|
301
|
-
rgba(0, 0, 0, 10%),
|
|
302
|
-
rgba(0, 0, 0, 5%) 10%,
|
|
303
|
-
transparent
|
|
304
|
-
);
|
|
305
|
-
}
|
|
306
|
-
|
|
307
|
-
.breakout-headings h4:not([class])::before {
|
|
308
|
-
width: 10em;
|
|
309
|
-
right: 100%;
|
|
310
|
-
margin-right: 1rem;
|
|
311
|
-
height: 0.3em;
|
|
312
|
-
top: 50%;
|
|
313
|
-
transform: translateY(-50%);
|
|
314
|
-
background: linear-gradient(
|
|
315
|
-
to left,
|
|
316
|
-
rgba(0, 0, 0, 10%),
|
|
317
|
-
rgba(0, 0, 0, 5%) 10%,
|
|
318
|
-
transparent
|
|
319
|
-
);
|
|
320
|
-
}
|
|
321
|
-
|
|
322
|
-
.breakout-headings hr {
|
|
323
|
-
height: 0.75rem;
|
|
324
|
-
border: none;
|
|
325
|
-
overflow: visible;
|
|
326
|
-
}
|
|
327
|
-
|
|
328
|
-
.breakout-headings hr::before {
|
|
329
|
-
width: 100vw;
|
|
330
|
-
left: 50%;
|
|
331
|
-
height: 100%;
|
|
332
|
-
transform: translateX(-50%);
|
|
333
|
-
}
|
|
334
|
-
|
|
335
|
-
.breakout-headings hr + h2::before {
|
|
336
|
-
display: none !important;
|
|
337
|
-
}
|
|
338
|
-
|
|
339
|
-
.breakout-headings hr + h3::before {
|
|
340
|
-
display: none !important;
|
|
341
|
-
}
|
|
342
|
-
|
|
343
|
-
.breakout-headings hr + h4::before {
|
|
344
|
-
display: none !important;
|
|
345
|
-
}
|
|
346
|
-
|
|
347
|
-
/* after prose to override it */
|
|
348
|
-
|
|
349
|
-
/* Prism.js */
|
|
350
|
-
|
|
351
|
-
.token.treeview-part .entry-line {
|
|
352
|
-
width: 2.5em !important;
|
|
353
|
-
opacity: 25%;
|
|
354
|
-
}
|
|
355
|
-
|
|
356
|
-
.token.treeview-part .entry-name:last-child {
|
|
357
|
-
opacity: 50%;
|
|
358
|
-
}
|
|
359
|
-
|
|
360
|
-
.token.treeview-part .entry-name:last-child::before {
|
|
361
|
-
display: none !important;
|
|
362
|
-
}
|
|
363
|
-
|
|
364
|
-
/* Utility classes and fixes */
|
|
365
|
-
|
|
366
|
-
/* Fix the scrollbar color when inverted */
|
|
367
|
-
|
|
368
|
-
.invert ::-webkit-scrollbar {
|
|
369
|
-
filter: invert(1) !important;
|
|
370
|
-
}
|
|
371
|
-
|
|
372
|
-
/* Workaround for icon to stay with text in links */
|
|
373
|
-
|
|
374
|
-
a.whitespace-nowrap {
|
|
375
|
-
white-space: nowrap;
|
|
376
|
-
/* Fix for Safari :( why Safari, why? */
|
|
377
|
-
display: inline-block;
|
|
378
|
-
}
|
|
379
|
-
|
|
380
|
-
a.whitespace-nowrap span {
|
|
381
|
-
white-space: normal;
|
|
382
|
-
}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|