@stnd/layout 0.6.5 → 0.6.7
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/Base.astro +1 -1
- package/CHANGELOG.md +12 -0
- package/Footer.astro +13 -8
- package/Header.astro +28 -13
- package/package.json +1 -1
package/Base.astro
CHANGED
|
@@ -107,7 +107,7 @@ const {
|
|
|
107
107
|
<Header {...header}>
|
|
108
108
|
<slot name="header-actions" slot="actions" />
|
|
109
109
|
<div slot="bottom-left" class="text-2xs text-subtle">
|
|
110
|
-
<a class="
|
|
110
|
+
<a class="no-decoration text-subtle" href="https://stnd.build/">
|
|
111
111
|
stnd.build
|
|
112
112
|
</a>
|
|
113
113
|
</div>
|
package/CHANGELOG.md
CHANGED
package/Footer.astro
CHANGED
|
@@ -112,28 +112,33 @@ const year = new Date().getFullYear();
|
|
|
112
112
|
<style is:global>
|
|
113
113
|
.stnd-footer {
|
|
114
114
|
width: 100%;
|
|
115
|
-
max-width: var(--
|
|
115
|
+
max-width: var(--page-max-width);
|
|
116
116
|
margin-inline: auto;
|
|
117
|
-
padding-inline: var(--
|
|
117
|
+
padding-inline: var(--page-padding);
|
|
118
118
|
font-family: var(--font-interface);
|
|
119
119
|
color: var(--color-subtle);
|
|
120
120
|
border-top: var(--border);
|
|
121
121
|
margin-top: calc(var(--space) * 12);
|
|
122
|
-
padding-block-start: var(--
|
|
122
|
+
padding-block-start: var(--space-4) !important;
|
|
123
|
+
text-box-trim: none;
|
|
124
|
+
|
|
125
|
+
* {
|
|
126
|
+
text-box-trim: none;
|
|
127
|
+
}
|
|
123
128
|
h1,
|
|
124
129
|
h2,
|
|
125
130
|
h3,
|
|
126
131
|
h4,
|
|
127
132
|
h5,
|
|
128
133
|
h6 {
|
|
129
|
-
font-size: var(--
|
|
134
|
+
font-size: var(--scale);
|
|
130
135
|
font-family: var(--font-interface);
|
|
131
136
|
margin-block-end: var(--space-half) !important;
|
|
132
137
|
font-weight: var(--font-header-weight);
|
|
133
138
|
margin-top: 0 !important;
|
|
134
139
|
}
|
|
135
140
|
h4 {
|
|
136
|
-
font-size: var(--
|
|
141
|
+
font-size: var(--scale-d2);
|
|
137
142
|
}
|
|
138
143
|
li {
|
|
139
144
|
margin-block-end: var(--leading) !important;
|
|
@@ -147,7 +152,7 @@ const year = new Date().getFullYear();
|
|
|
147
152
|
}
|
|
148
153
|
|
|
149
154
|
ul li {
|
|
150
|
-
font-size: var(--
|
|
155
|
+
font-size: var(--scale-d4);
|
|
151
156
|
margin-bottom: var(--space-2);
|
|
152
157
|
padding-inline-start: 0;
|
|
153
158
|
margin-top: 0 !important;
|
|
@@ -165,7 +170,7 @@ const year = new Date().getFullYear();
|
|
|
165
170
|
|
|
166
171
|
.footer-title {
|
|
167
172
|
font-family: var(--font-heading);
|
|
168
|
-
font-size: var(--
|
|
173
|
+
font-size: var(--scale);
|
|
169
174
|
font-weight: var(--font-header-weight);
|
|
170
175
|
color: var(--color-foreground);
|
|
171
176
|
margin: 0;
|
|
@@ -183,7 +188,7 @@ const year = new Date().getFullYear();
|
|
|
183
188
|
|
|
184
189
|
.footer-bottom {
|
|
185
190
|
margin-top: calc(var(--space) * 6);
|
|
186
|
-
margin-bottom:
|
|
191
|
+
margin-bottom: 0;
|
|
187
192
|
padding-bottom: var(--space);
|
|
188
193
|
|
|
189
194
|
strong {
|
package/Header.astro
CHANGED
|
@@ -298,6 +298,10 @@ const renderedItems = safeItems.map((item) => {
|
|
|
298
298
|
:global(body.no-scroll) {
|
|
299
299
|
overflow: hidden;
|
|
300
300
|
}
|
|
301
|
+
|
|
302
|
+
body > .main:first-child {
|
|
303
|
+
padding-block-start: calc(var(--page-padding) + var(--space-2));
|
|
304
|
+
}
|
|
301
305
|
|
|
302
306
|
/* ── Header shell ── */
|
|
303
307
|
|
|
@@ -308,8 +312,8 @@ const renderedItems = safeItems.map((item) => {
|
|
|
308
312
|
right: 0;
|
|
309
313
|
z-index: 300;
|
|
310
314
|
min-height: 0;
|
|
311
|
-
padding-inline: var(--
|
|
312
|
-
padding-block: var(--space-
|
|
315
|
+
padding-inline: var(--page-padding);
|
|
316
|
+
padding-block: var(--space-half);
|
|
313
317
|
background: var(--color-glass);
|
|
314
318
|
backdrop-filter: var(--filter-glass);
|
|
315
319
|
border-bottom: var(--border);
|
|
@@ -330,7 +334,7 @@ const renderedItems = safeItems.map((item) => {
|
|
|
330
334
|
backdrop-filter: none;
|
|
331
335
|
border-bottom-color: transparent;
|
|
332
336
|
box-shadow: none;
|
|
333
|
-
padding-block-start: var(--
|
|
337
|
+
padding-block-start: var(--page-padding);
|
|
334
338
|
}
|
|
335
339
|
|
|
336
340
|
.stnd-header.is-scrolled {
|
|
@@ -349,14 +353,14 @@ const renderedItems = safeItems.map((item) => {
|
|
|
349
353
|
display: flex;
|
|
350
354
|
align-items: center;
|
|
351
355
|
justify-content: space-between;
|
|
352
|
-
max-width: var(--
|
|
356
|
+
max-width: var(--page-max-width);
|
|
353
357
|
margin-inline: auto;
|
|
354
358
|
pointer-events: auto;
|
|
355
359
|
}
|
|
356
360
|
|
|
357
361
|
/* ── Brand ── */
|
|
358
362
|
.stnd-header-brand {
|
|
359
|
-
font-size: var(--
|
|
363
|
+
font-size: var(--scale);
|
|
360
364
|
font-weight: var(--font-header-weight);
|
|
361
365
|
text-decoration: none;
|
|
362
366
|
color: var(--color-foreground);
|
|
@@ -379,7 +383,7 @@ const renderedItems = safeItems.map((item) => {
|
|
|
379
383
|
}
|
|
380
384
|
|
|
381
385
|
.stnd-header-menu-desktop a {
|
|
382
|
-
font-size: var(--
|
|
386
|
+
font-size: var(--scale-d2);
|
|
383
387
|
text-decoration: none;
|
|
384
388
|
color: var(--color-muted);
|
|
385
389
|
}
|
|
@@ -485,7 +489,7 @@ const renderedItems = safeItems.map((item) => {
|
|
|
485
489
|
}
|
|
486
490
|
|
|
487
491
|
.stnd-header-menu-mobile a {
|
|
488
|
-
font-size: var(--
|
|
492
|
+
font-size: var(--scale-4);
|
|
489
493
|
font-weight: var(--font-header-weight);
|
|
490
494
|
color: var(--color-foreground);
|
|
491
495
|
text-decoration: none;
|
|
@@ -503,7 +507,7 @@ const renderedItems = safeItems.map((item) => {
|
|
|
503
507
|
.stnd-slot-br {
|
|
504
508
|
position: fixed;
|
|
505
509
|
z-index: 290;
|
|
506
|
-
bottom: var(--
|
|
510
|
+
bottom: var(--page-padding);
|
|
507
511
|
|
|
508
512
|
transition:
|
|
509
513
|
transform var(--duration-slow) var(--ease-stnd),
|
|
@@ -512,23 +516,34 @@ const renderedItems = safeItems.map((item) => {
|
|
|
512
516
|
transform: translateY(0);
|
|
513
517
|
opacity: 1;
|
|
514
518
|
will-change: transform, opacity;
|
|
519
|
+
text-box-trim: none;
|
|
515
520
|
}
|
|
516
521
|
|
|
517
522
|
.stnd-slot-bl {
|
|
518
|
-
left: var(--
|
|
523
|
+
left: var(--page-padding);
|
|
524
|
+
right: auto;
|
|
519
525
|
}
|
|
520
526
|
|
|
521
527
|
.stnd-slot-br {
|
|
522
|
-
right: var(--
|
|
528
|
+
right: var(--page-padding);
|
|
529
|
+
left: auto;
|
|
523
530
|
}
|
|
524
531
|
|
|
525
|
-
:global(:is(.stnd-slot-bl, .stnd-slot-
|
|
532
|
+
:global(:is(.stnd-slot-bl, .stnd-slot-br) *) {
|
|
533
|
+
text-box-trim: none;
|
|
534
|
+
}
|
|
535
|
+
|
|
536
|
+
:global(:is(.stnd-slot-bl, .stnd-slot-br) a) {
|
|
526
537
|
color: inherit;
|
|
538
|
+
text-decoration: none;
|
|
539
|
+
}
|
|
540
|
+
:global(:is(.stnd-slot-bl, .stnd-slot-br) a:hover) {
|
|
541
|
+
color: var(--color-foreground);
|
|
527
542
|
}
|
|
528
|
-
:global(:is(.stnd-slot-bl, .stnd-slot-
|
|
543
|
+
:global(:is(.stnd-slot-bl, .stnd-slot-br) strong) {
|
|
529
544
|
color: inherit;
|
|
530
545
|
}
|
|
531
|
-
:global(:is(.stnd-slot-bl, .stnd-slot-
|
|
546
|
+
:global(:is(.stnd-slot-bl, .stnd-slot-br) em) {
|
|
532
547
|
color: inherit;
|
|
533
548
|
}
|
|
534
549
|
|