@rileybathurst/paddle 0.0.55 → 0.0.57
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/package.json +1 -1
- package/src/styles/layout.css +87 -8
package/package.json
CHANGED
package/src/styles/layout.css
CHANGED
|
@@ -15,7 +15,8 @@ body {
|
|
|
15
15
|
header,
|
|
16
16
|
main,
|
|
17
17
|
footer,
|
|
18
|
-
.deck
|
|
18
|
+
.deck,
|
|
19
|
+
.react-aria-Breadcrumbs {
|
|
19
20
|
margin-inline: auto;
|
|
20
21
|
padding-inline: var(--kosciuszko);
|
|
21
22
|
width: calc(100% - var(--kosciuszko) * 2);
|
|
@@ -26,15 +27,14 @@ footer,
|
|
|
26
27
|
flex-basis: var(--vulture);
|
|
27
28
|
}
|
|
28
29
|
|
|
29
|
-
.stork
|
|
30
|
-
header,
|
|
31
|
-
main,
|
|
32
|
-
footer {
|
|
30
|
+
.stork {
|
|
33
31
|
max-width: min(var(--stork), calc(100vw - var(--denali)));
|
|
34
32
|
flex-basis: var(--stork);
|
|
35
33
|
}
|
|
36
34
|
|
|
37
35
|
.condor,
|
|
36
|
+
header,
|
|
37
|
+
main,
|
|
38
38
|
.location,
|
|
39
39
|
.react-aria-Breadcrumbs.condor {
|
|
40
40
|
max-width: min(var(--condor), calc(100vw - var(--denali)));
|
|
@@ -48,6 +48,7 @@ footer {
|
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
.albatross,
|
|
51
|
+
footer,
|
|
51
52
|
.deck,
|
|
52
53
|
.react-aria-Breadcrumbs {
|
|
53
54
|
max-width: min(var(--albatross), calc(100vw - var(--denali)));
|
|
@@ -57,7 +58,8 @@ footer {
|
|
|
57
58
|
/*------------------------------------*/
|
|
58
59
|
|
|
59
60
|
.wrap,
|
|
60
|
-
.deck
|
|
61
|
+
.deck,
|
|
62
|
+
footer {
|
|
61
63
|
display: flex;
|
|
62
64
|
flex-flow: row wrap;
|
|
63
65
|
gap: clamp(var(--kosciuszko), 1.667vw, var(--denali));
|
|
@@ -72,8 +74,9 @@ footer {
|
|
|
72
74
|
|
|
73
75
|
.pelican.wrap > *,
|
|
74
76
|
.albatross.wrap > *,
|
|
75
|
-
.deck >
|
|
76
|
-
|
|
77
|
+
.deck > *,
|
|
78
|
+
footer > * {
|
|
79
|
+
max-width: none; /* TODO: this is breaking .composition on storybook */
|
|
77
80
|
margin-inline: 0;
|
|
78
81
|
padding-inline: 0;
|
|
79
82
|
}
|
|
@@ -87,6 +90,10 @@ footer {
|
|
|
87
90
|
flex: 1 1 calc(var(--albatross) / 2 - var(--vinson));
|
|
88
91
|
}
|
|
89
92
|
|
|
93
|
+
.albatross.wrap .composition {
|
|
94
|
+
max-width: fit-content;
|
|
95
|
+
}
|
|
96
|
+
|
|
90
97
|
/*------------------------------------*/
|
|
91
98
|
/* #NESTED */
|
|
92
99
|
/*------------------------------------*/
|
|
@@ -237,3 +244,75 @@ header {
|
|
|
237
244
|
border-block-end: 1px solid;
|
|
238
245
|
border-radius: 0;
|
|
239
246
|
}
|
|
247
|
+
|
|
248
|
+
/*------------------*/
|
|
249
|
+
/* #COMPOSITION */
|
|
250
|
+
/*------------------*/
|
|
251
|
+
|
|
252
|
+
.composition {
|
|
253
|
+
/* grid-area: composition; /* ? is this still used */
|
|
254
|
+
display: grid;
|
|
255
|
+
grid-template-columns: 5% 10% 70% 10% 5%;
|
|
256
|
+
grid-template-rows: 5% 90% 5%;
|
|
257
|
+
margin-block-end: var(--vinson);
|
|
258
|
+
|
|
259
|
+
/* these dont obey the max height at all */
|
|
260
|
+
/* max-height: var(--stork); ? */
|
|
261
|
+
/* max-height: 23rem; TODO: guess and check can I use a variable */
|
|
262
|
+
/* overflow: hidden; */
|
|
263
|
+
|
|
264
|
+
.gatsby-image-wrapper {
|
|
265
|
+
max-width: 100%;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
> img {
|
|
269
|
+
display: block;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.paddler {
|
|
273
|
+
grid-column: 3;
|
|
274
|
+
grid-row: 2;
|
|
275
|
+
aspect-ratio: 1;
|
|
276
|
+
border: none;
|
|
277
|
+
box-shadow: none;
|
|
278
|
+
margin-block: 1rem;
|
|
279
|
+
|
|
280
|
+
img {
|
|
281
|
+
border-radius: 50%;
|
|
282
|
+
border: 2px solid;
|
|
283
|
+
width: calc(100% - 4px);
|
|
284
|
+
height: calc(100% - 4px);
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
/* gatsby nesting breaks the design */
|
|
289
|
+
.storybook-paddler {
|
|
290
|
+
grid-column: 3;
|
|
291
|
+
grid-row: 2;
|
|
292
|
+
aspect-ratio: 1;
|
|
293
|
+
border: none;
|
|
294
|
+
box-shadow: none;
|
|
295
|
+
margin-block: 1rem;
|
|
296
|
+
border-radius: 50%;
|
|
297
|
+
border: 2px solid;
|
|
298
|
+
width: calc(100% - 4px);
|
|
299
|
+
height: calc(100% - 4px);
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.t1 {
|
|
303
|
+
grid-column: 1/5;
|
|
304
|
+
grid-row: 1/3;
|
|
305
|
+
aspect-ratio: 16/9;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.t2 {
|
|
309
|
+
grid-column: 2/6;
|
|
310
|
+
grid-row: 2/4;
|
|
311
|
+
aspect-ratio: 16/9;
|
|
312
|
+
place-self: end;
|
|
313
|
+
|
|
314
|
+
img {
|
|
315
|
+
object-fit: cover !important;
|
|
316
|
+
}
|
|
317
|
+
}
|
|
318
|
+
}
|