| 3 |
3 |
|
|
| 4 |
4 |
|
Build new features by COMPOSING these primitives, in this order of preference:
|
| 5 |
5 |
|
|
| 6 |
|
- |
1. Use a UTILITY class for one-off adjustments (.mb-4, .text-sm, .nowrap)
|
|
6 |
+ |
1. Use a UTILITY class for one-off adjustments (.mb-section, .text-sm, .nowrap)
|
| 7 |
7 |
|
2. Use a LAYOUT PRIMITIVE to position content (.container, .stack-row, .field-row, .list-row)
|
| 8 |
8 |
|
3. Use a COMPONENT PRIMITIVE for a UI element (.card, .callout, .badge, .progress-bar, .empty-state, .input--sm, .small)
|
| 9 |
9 |
|
4. Extend a primitive with a modifier (.card--bordered, .callout--warning, .stack-row--bordered)
|
| 8804 |
8804 |
|
max-width: 500px;
|
| 8805 |
8805 |
|
}
|
| 8806 |
8806 |
|
|
| 8807 |
|
- |
.proj-promo-grid--spaced {
|
| 8808 |
|
- |
margin-top: var(--gap-section);
|
| 8809 |
|
- |
}
|
| 8810 |
|
- |
|
| 8811 |
8807 |
|
.proj-promo-grid--bordered {
|
| 8812 |
8808 |
|
margin-top: var(--gap-section);
|
| 8813 |
8809 |
|
padding-top: var(--gap-section);
|
| 9473 |
9469 |
|
margin-bottom: var(--gap-bound);
|
| 9474 |
9470 |
|
}
|
| 9475 |
9471 |
|
|
| 9476 |
|
- |
.proj-members-field-label--spaced {
|
| 9477 |
|
- |
margin-top: var(--gap-section);
|
| 9478 |
|
- |
}
|
| 9479 |
|
- |
|
| 9480 |
9472 |
|
.proj-members-add-result {
|
| 9481 |
9473 |
|
margin-top: var(--gap-peer);
|
| 9482 |
9474 |
|
}
|
| 10992 |
10984 |
|
.project-blog-footer a { color: var(--content); }
|
| 10993 |
10985 |
|
|
| 10994 |
10986 |
|
/* Compact alert / paragraph margin variants used 2+ times. */
|
| 10995 |
|
- |
.alert.mb-4 { margin-bottom: var(--gap-section); }
|
| 10996 |
10987 |
|
|
| 10997 |
10988 |
|
/* Paywall trust line. */
|
| 10998 |
10989 |
|
.paywall-trust {
|