Skip to content

Commit be8ab6f

Browse files
monospacedmonospaced
committed
feat: system alignment
1 parent 11686a4 commit be8ab6f

File tree

21 files changed

+227
-250
lines changed

21 files changed

+227
-250
lines changed

‎components/Banner/Banner.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
aspect-ratio: 4 / 3;
33
}
44

5-
@media (min-width: 30em) {
5+
@media (min-width: 48em) {
66
.msrd .msrd-Banner {
77
aspect-ratio: 2 / 1;
88
}
99
}
1010

11-
@media (min-width: 45em) {
11+
@media (min-width: 64em) {
1212
.msrd .msrd-Banner {
1313
aspect-ratio: 412 / 135;
1414
}

‎components/Card/Card.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
flex-direction: column;
1717
inline-size: 100%;
1818
padding-block: var(--space-vertical-06);
19-
padding-inline: var(--space-horizontal-08);
19+
padding-inline: var(--space-horizontal-07);
2020
}
2121

2222
.msrd .msrd-Card::after {

‎components/Copy/Copy.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
.msrd .msrd-Copy {
22
--color-border: var(--color-copy-interactive);
3-
--button-size: calc((44 / 16) * 1rem);
3+
--button-size: calc((42 / 16) * 1rem);
44
--icon-border: calc((2 / 16) * 1rem);
5-
--icon-size: calc((23 / 16) * 1rem);
6-
--icon-offset: calc((7 / 16) * 1rem);
5+
--icon-size: calc((24 / 16) * 1rem);
6+
--icon-offset: calc((6 / 16) * 1rem);
77
background-color: transparent;
88
block-size: var(--button-size);
99
border: 0;

‎components/Grid/Grid.css‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.msrd .msrd-Grid {
22
display: grid;
3-
grid-gap: var(--space-vertical) var(--space-horizontal);
3+
grid-column-gap: var(--space-horizontal);
4+
grid-row-gap: var(--space-vertical);
45
grid-template-columns: 1fr;
56
}
67

@@ -16,25 +17,32 @@
1617
grid-gap: 0;
1718
}
1819

19-
@media (min-width: 48em) {
20+
@container (min-inline-size: 37em) {
2021
.msrd .msrd-Grid {
2122
grid-template-columns: repeat(12, 1fr);
2223
}
24+
}
2325

24-
.msrd .msrd-Grid--gapUniform {
25-
grid-gap: var(--space-horizontal);
26+
@media (min-width: 48em) {
27+
.msrd .msrd-Grid {
28+
grid-column-gap : var(--space-horizontal-06);
2629
}
2730
}
2831

29-
@media (min-width: 48em) {
32+
@media (min-width: 80em) {
3033
.msrd .msrd-Grid--gapLarge {
3134
grid-gap: var(--space-horizontal-07);
35+
/* grid-column-gap: var(--space-horizontal-07);
36+
grid-row-gap: var(--space-vertical-06); */
3237
}
38+
39+
/* .msrd .msrd-Grid--gapLarge.msrd-Grid-gapUniform {
40+
grid-row-gap: var(--space-horizontal-07);
41+
} */
3342
}
3443

3544
.msrd .msrd-GridItem {
3645
margin-block-end: var(--space-vertical);
37-
min-inline-size: calc(87rem / 16);
3846
position: relative;
3947
}
4048

@@ -63,7 +71,7 @@
6371
margin-block-end: 0;
6472
}
6573

66-
@media (min-width: 48em) {
74+
@container (min-inline-size: 37em) {
6775
.msrd .msrd-GridItem {
6876
grid-column-end: span 12;
6977
}
@@ -148,7 +156,7 @@
148156
}
149157
}
150158

151-
@media (min-width: 80em) {
159+
@container (min-inline-size: 57em) {
152160
.msrd .msrd-GridItem {
153161
grid-column-end: auto;
154162
grid-column-start: auto;

‎components/Hero/Hero.css‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434

3535
.msrd .msrd-Hero-strapline {
3636
font-size: var(--font-10-size);
37+
font-weight: 366;
3738
line-height: var(--font-10-line-height);
3839
margin-block-end: var(--space-vertical-03);
3940
margin-block-start: 0;
@@ -87,19 +88,19 @@
8788

8889
@keyframes bounce {
8990
0% {
90-
inset-block-end: calc((14 / 16) * 1rem);
91+
inset-block-end: calc((12 / 16) * 1rem);
9192
}
9293
50% {
93-
inset-block-end: calc((8 / 16) * 1rem);
94+
inset-block-end: calc((6 / 16) * 1rem);
9495
}
9596
100% {
96-
inset-block-end: calc((14 / 16) * 1rem);
97+
inset-block-end: calc((12 / 16) * 1rem);
9798
}
9899
}
99100

100101
.msrd .msrd-Hero-arrow {
101-
--animation-delay: 1.375s;
102-
--animation-duration: 2.75s;
102+
--animation-delay: 1.5s;
103+
--animation-duration: 3s;
103104
display: none;
104105
user-select: none;
105106
}

‎components/Logos/Logos.css‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,12 @@
2929
animation-play-state: paused;
3030
}
3131

32-
@media (min-width: 76.25em) {
32+
@media (min-width: 80em) {
3333
.msrd .msrd-Logos-inner {
3434
animation: none;
3535
justify-content: space-between;
3636
overflow: auto;
37+
padding-inline: var(--space-horizontal-07);
3738
}
3839

3940
:dir(rtl) .msrd .msrd-Logos-inner,
@@ -91,12 +92,6 @@
9192
row-gap: var(--space-vertical);
9293
}
9394
}
94-
95-
@media (min-width: 78.25em) {
96-
.msrd .msrd-Logos {
97-
padding-inline: 0;
98-
}
99-
}
10095
}
10196

10297
.msrd .msrd-Logos-link {

‎components/Markdown/Markdown.css‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,8 @@
178178

179179
@media (min-width: 48em) {
180180
.msrd .msrd-Markdown h6 {
181+
font-size: var(--font-03-size);
182+
line-height: var(--font-03-line-height);
181183
margin-block-end: var(--space-vertical);
182184
margin-block-start: var(--space-vertical-06);
183185
}
@@ -253,7 +255,7 @@
253255

254256
.msrd .msrd-Markdown h1 {
255257
font-size: var(--font-09-size);
256-
font-weight: 400;
258+
font-weight: 366;
257259
line-height: var(--font-09-line-height);
258260
margin-block-start: 0;
259261
}
@@ -304,7 +306,7 @@
304306
@media (min-width: 48em) {
305307
.msrd .msrd-Markdown > ol,
306308
.msrd .msrd-Markdown > ul {
307-
--bullet-space: var(--space-horizontal-08);
309+
--bullet-space: calc(40rem / 16);
308310
}
309311
}
310312

@@ -418,16 +420,16 @@
418420
.msrd .msrd-Markdown td,
419421
.msrd .msrd-Markdown th {
420422
border: calc(1rem / 16) solid var(--color-border);
421-
padding-block: calc(5.5rem / 16);
422-
padding-inline: calc(15rem / 16);
423+
padding-block: calc((6rem - 1rem) / 16);
424+
padding-inline: calc((16rem - 1rem) / 16);
423425
vertical-align: middle;
424426
}
425427

426428
@media (min-width: 48em) {
427429
.msrd .msrd-Markdown td,
428430
.msrd .msrd-Markdown th {
429-
padding-block: calc(10rem / 16);
430-
padding-inline: calc(23rem / 16);
431+
padding-block: calc((12rem - 1rem) / 16);
432+
padding-inline: calc((24rem - 1rem) / 16);
431433
}
432434
}
433435

‎components/Markdown/hljs.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@
173173

174174
.hljs-strong {
175175
color: var(--base0A);
176-
font-weight: 500;
176+
font-weight: 566;
177177
}
178178

179179
.hljs-code,
@@ -219,5 +219,5 @@
219219

220220
.hljs-meta .hljs-keyword,
221221
.hljs-meta-keyword {
222-
font-weight: 500;
222+
font-weight: 566;
223223
}

‎components/Paragraph/Paragraph.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,13 @@
2424
line-height: var(--font-02-line-height);
2525
}
2626

27+
/* @media (min-width: 48em) {
28+
.msrd .msrd-Paragraph--small {
29+
font-size: var(--font-03-size);
30+
line-height: var(--font-03-line-height);
31+
}
32+
} */
33+
2734
.msrd .msrd-Paragraph--large {
2835
--color-text-prose: var(--color-text);
2936
font-size: var(--font-04-size);

‎components/Profile/Profile.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,15 @@
1313
}
1414
}
1515

16-
@media (min-width: 76.25em) {
16+
@media (min-width: 80em) {
1717
.msrd .msrd-Profile {
1818
align-items: flex-end;
1919
display: flex;
2020
gap: var(--space-horizontal-07);
2121
}
2222

2323
.msrd .msrd-Profile-imageWrapper {
24-
--image-size: 17.3125rem; /* magic grid number */
24+
--image-size: calc(192rem / 16);
2525
flex-shrink: 0;
2626
margin-block-end: 0;
2727
}

0 commit comments

Comments
 (0)