@stnd/styles 0.7.6 → 0.8.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.
- package/CHANGELOG.md +6 -0
- package/_standard-06-prose.scss +42 -7
- package/_standard-07-base.scss +15 -3
- package/_standard-50-utilities.scss +13 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/_standard-06-prose.scss
CHANGED
|
@@ -79,7 +79,10 @@
|
|
|
79
79
|
transition: grid-template-columns var(--transition);
|
|
80
80
|
|
|
81
81
|
position: relative;
|
|
82
|
+
width: 100%;
|
|
82
83
|
max-width: var(--body-max-width);
|
|
84
|
+
margin-inline: auto;
|
|
85
|
+
padding-inline: var(--gap-body);
|
|
83
86
|
/*z-index: var(--z-base);*/
|
|
84
87
|
/* Default content positioning */
|
|
85
88
|
|
|
@@ -104,8 +107,8 @@
|
|
|
104
107
|
> .callout,
|
|
105
108
|
> blockquote,
|
|
106
109
|
> pre,
|
|
107
|
-
> figure,
|
|
108
|
-
> p:has(img),
|
|
110
|
+
> figure:not(.full-bleed):not(.breakout),
|
|
111
|
+
> p:has(img:not(.full-bleed):not(.breakout):not(.hero):not(.full)),
|
|
109
112
|
> .stnd-code-block {
|
|
110
113
|
grid-column: content;
|
|
111
114
|
margin-inline: var(--content-width-sm);
|
|
@@ -125,13 +128,25 @@
|
|
|
125
128
|
max-width: none;
|
|
126
129
|
}
|
|
127
130
|
|
|
128
|
-
.
|
|
129
|
-
.
|
|
130
|
-
|
|
131
|
-
|
|
131
|
+
.breakout,
|
|
132
|
+
p:has(> img.breakout),
|
|
133
|
+
p:has(> video.breakout),
|
|
134
|
+
figure.breakout {
|
|
135
|
+
grid-column: 1 / -1;
|
|
136
|
+
width: min(100%, 72rem);
|
|
137
|
+
max-width: 72rem;
|
|
138
|
+
margin-inline: auto !important;
|
|
132
139
|
}
|
|
133
140
|
|
|
134
|
-
.
|
|
141
|
+
.full,
|
|
142
|
+
.hero,
|
|
143
|
+
p:has(> img.hero),
|
|
144
|
+
p:has(> img.full),
|
|
145
|
+
p:has(> video.hero),
|
|
146
|
+
p:has(> video.full) {
|
|
147
|
+
grid-column: 1 / -1;
|
|
148
|
+
width: calc(100% + var(--gap-body) * 2);
|
|
149
|
+
max-width: calc(100% + var(--gap-body) * 2);
|
|
135
150
|
margin-inline: calc(var(--gap-body) * -1);
|
|
136
151
|
border-radius: 0 !important;
|
|
137
152
|
|
|
@@ -140,6 +155,26 @@
|
|
|
140
155
|
}
|
|
141
156
|
}
|
|
142
157
|
|
|
158
|
+
.full-bleed,
|
|
159
|
+
p:has(> img.full-bleed),
|
|
160
|
+
p:has(> video.full-bleed),
|
|
161
|
+
figure.full-bleed {
|
|
162
|
+
grid-column: 1 / -1 !important;
|
|
163
|
+
width: 100vw !important;
|
|
164
|
+
max-width: 100vw !important;
|
|
165
|
+
margin-inline: calc(50% - 50vw) !important;
|
|
166
|
+
border-radius: 0 !important;
|
|
167
|
+
|
|
168
|
+
img,
|
|
169
|
+
video {
|
|
170
|
+
width: 100% !important;
|
|
171
|
+
max-width: 100% !important;
|
|
172
|
+
margin-inline: 0 !important;
|
|
173
|
+
border-radius: 0 !important;
|
|
174
|
+
display: block;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
|
|
143
178
|
/* Image gallery layout */
|
|
144
179
|
&:not(.no-grid) {
|
|
145
180
|
p:has(img),
|
package/_standard-07-base.scss
CHANGED
|
@@ -77,13 +77,18 @@ html {
|
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
+
html,
|
|
81
|
+
body {
|
|
82
|
+
overflow-x: clip;
|
|
83
|
+
}
|
|
84
|
+
|
|
80
85
|
body {
|
|
81
86
|
margin: 0;
|
|
82
|
-
padding:
|
|
87
|
+
padding: 0;
|
|
83
88
|
padding-top: var(--gap-header);
|
|
84
89
|
padding-bottom: var(--gap-footer);
|
|
85
|
-
|
|
86
|
-
|
|
90
|
+
width: 100%;
|
|
91
|
+
min-height: 100vh;
|
|
87
92
|
|
|
88
93
|
transition:
|
|
89
94
|
background-color var(--transition),
|
|
@@ -98,6 +103,13 @@ body {
|
|
|
98
103
|
}
|
|
99
104
|
}
|
|
100
105
|
|
|
106
|
+
.container {
|
|
107
|
+
width: 100%;
|
|
108
|
+
max-width: var(--body-max-width);
|
|
109
|
+
margin-inline: auto;
|
|
110
|
+
padding-inline: var(--gap-body);
|
|
111
|
+
}
|
|
112
|
+
|
|
101
113
|
main {
|
|
102
114
|
transition:
|
|
103
115
|
background-color var(--transition),
|
|
@@ -374,6 +374,19 @@
|
|
|
374
374
|
margin-inline: calc((var(--gap-body) * -1)) !important;
|
|
375
375
|
}
|
|
376
376
|
|
|
377
|
+
.full-bleed {
|
|
378
|
+
width: 100vw !important;
|
|
379
|
+
max-width: 100vw !important;
|
|
380
|
+
margin-inline: calc(50% - 50vw) !important;
|
|
381
|
+
border-radius: 0 !important;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
.breakout {
|
|
385
|
+
width: min(100%, 72rem) !important;
|
|
386
|
+
max-width: 72rem !important;
|
|
387
|
+
margin-inline: auto !important;
|
|
388
|
+
}
|
|
389
|
+
|
|
377
390
|
/* ============================================================ */
|
|
378
391
|
/* TYPOGRAPHY — Size */
|
|
379
392
|
/* ============================================================ */
|