Skip to content

Commit 570c3ba

Browse files
herzog0herzog0
authored
Story boostorg#2238: Webpage UI: Downloads Page (boostorg#2298)
1 parent 8d4f68b commit 570c3ba

18 files changed

Lines changed: 796 additions & 26 deletions

‎static/css/v3/card-group.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,8 @@
5757
font-family: var(--font-display);
5858
font-size: var(--font-size-large);
5959
font-weight: var(--font-weight-medium);
60-
line-height: 1;
61-
letter-spacing: -0.24px;
60+
line-height: var(--line-height-tight);
61+
letter-spacing: var(--letter-spacing-tight);
6262
color: var(--color-text-primary);
6363
}
6464

‎static/css/v3/card.css‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,27 @@
1818
border-radius: var(--border-radius-xl);
1919
border: 1px solid var(--color-stroke-weak);
2020
background: var(--color-surface-weak);
21-
padding-top: var(--space-large);
22-
padding-bottom: var(--space-large);
21+
padding-top: var(--space-card);
22+
padding-bottom: var(--space-card);
2323
height: fit-content;
2424
}
2525

2626
.basic-card {
2727
max-width: 458px;
2828
}
2929

30+
.basic-card--green {
31+
background: var(--color-surface-weak-accent-green);
32+
}
33+
34+
.basic-card--yellow {
35+
background: var(--color-surface-weak-accent-yellow);
36+
}
37+
38+
.basic-card--teal {
39+
background: var(--color-surface-weak-accent-teal);
40+
}
41+
3042
.wide-card {
3143
max-width: 696px;
3244
}
@@ -50,7 +62,7 @@
5062
.card__header {
5163
align-self: stretch;
5264
display: flex;
53-
padding: 0 var(--space-large);
65+
padding: 0 var(--space-card);
5466
}
5567

5668
.card__image {

‎static/css/v3/components.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,3 +48,6 @@
4848
@import "./join-card.css";
4949
@import "./badge-button.css";
5050
@import "./library-item.css";
51+
@import "downloads-table-card.css";
52+
@import "release-highlights-card.css";
53+
@import "./media-text-card.css";

‎static/css/v3/contributors-list.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,6 @@
2323
}
2424

2525
.contributors-list {
26-
max-height: 80vh;
26+
max-height: min(340px, 80vh);
2727
}
2828
}

‎static/css/v3/downloads-table-card.css‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
.downloads-table-card__wrapper {
2+
overflow-x: auto;
3+
width: 100%;
4+
border-radius: var(--border-radius-l);
5+
border: 1px solid var(--color-stroke-weak);
6+
background: var(--color-surface-weak);
7+
}
8+
9+
.downloads-table-card__table {
10+
width: 100%;
11+
border-collapse: collapse;
12+
font-size: var(--font-size-xs);
13+
color: var(--color-text-primary);
14+
border-style: hidden;
15+
}
16+
17+
.downloads-table-card__th,
18+
.downloads-table-card__td {
19+
border: 1px solid var(--color-stroke-weak);
20+
padding: var(--space-default) var(--space-large);
21+
text-align: left;
22+
vertical-align: middle;
23+
}
24+
25+
.downloads-table-card__th {
26+
font-family: var(--font-display);
27+
font-size: var(--font-size-small);
28+
font-weight: var(--font-weight-medium);
29+
line-height: var(--line-height-tight);
30+
letter-spacing: var(--letter-spacing-tight);
31+
background-color: var(--color-surface-mid);
32+
white-space: nowrap;
33+
}
34+
35+
.downloads-table-card__td--platform {
36+
font-weight: var(--font-weight-medium);
37+
white-space: nowrap;
38+
color: var(--color-text-secondary);
39+
}
40+
41+
.downloads-table-card__platform-wrapper {
42+
display: flex;
43+
align-items: center;
44+
justify-content: flex-start;
45+
}
46+
47+
.downloads-table-card__os-icon {
48+
display: inline-flex;
49+
align-items: center;
50+
vertical-align: middle;
51+
width: 16px;
52+
height: 16px;
53+
flex-shrink: 0;
54+
margin-right: var(--space-s);
55+
color: var(--color-text-primary);
56+
}
57+
58+
.downloads-table-card__os-name {
59+
font-family: var(--font-sans);
60+
font-size: var(--font-size-xs);
61+
font-weight: var(--font-weight-medium);
62+
line-height: 100%;
63+
letter-spacing: -0.12px;
64+
}
65+
66+
.downloads-table-card__td--file {
67+
word-break: break-all;
68+
}
69+
70+
.downloads-table-card__file-link {
71+
color: var(--color-text-primary);
72+
text-decoration: underline;
73+
text-decoration-color: var(--color-text-primary);
74+
font-size: var(--font-size-xs);
75+
font-style: normal;
76+
font-weight: var(--font-weight-regular);
77+
line-height: var(--line-height-default);
78+
letter-spacing: var(--letter-spacing-tight);
79+
}
80+
81+
.downloads-table-card__hash-wrapper {
82+
display: flex;
83+
justify-content: space-between;
84+
align-items: center;
85+
gap: var(--space-medium);
86+
}
87+
88+
.downloads-table-card__hash-link {
89+
display: block;
90+
width: 100%;
91+
overflow: hidden;
92+
text-overflow: ellipsis;
93+
white-space: nowrap;
94+
color: var(--color-text-link-accent);
95+
font-size: var(--font-size-xs);
96+
font-style: normal;
97+
font-weight: var(--font-weight-regular);
98+
line-height: var(--line-height-default);
99+
letter-spacing: var(--letter-spacing-tight);
100+
background: none;
101+
border: none;
102+
outline: none;
103+
padding: 0;
104+
cursor: text;
105+
}
106+
107+
.downloads-table-card__copy-btn {
108+
display: none;
109+
align-items: center;
110+
justify-content: center;
111+
width: 24px;
112+
height: 24px;
113+
background: none;
114+
border: none;
115+
cursor: pointer;
116+
color: var(--color-icon-primary);
117+
padding: 0;
118+
border-radius: var(--border-radius-s);
119+
flex-shrink: 0;
120+
transition: color 0.3s ease;
121+
}
122+
123+
.downloads-table-card__copy-btn.is-copied {
124+
color: var(--color-text-link-accent);
125+
}
126+
127+
.downloads-table-card__copy-btn.is-error {
128+
color: var(--color-text-error);
129+
}
130+
131+
.js-copy-enabled .downloads-table-card__copy-btn {
132+
display: flex;
133+
}
134+
135+
@media (max-width: 1279px) {
136+
.downloads-table-card__os-name {
137+
font-size: 10px;
138+
line-height: 10px;
139+
letter-spacing: -0.1px;
140+
}
141+
}
142+
143+
/* ── Mobile ── */
144+
@media (max-width: 767px) {
145+
146+
147+
.downloads-table-card__wrapper {
148+
-webkit-overflow-scrolling: touch;
149+
}
150+
151+
.downloads-table-card__table {
152+
min-width: 600px;
153+
}
154+
}

‎static/css/v3/markdown-card.css‎

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,32 @@
2323
}
2424

2525
.markdown-content h1,
26-
h2,
27-
h3,
28-
h4,
29-
h5,
30-
h6,
31-
b,
32-
strong {
33-
color: var(--color-text-primary);
34-
font-weight: var(--font-weight-medium);
26+
.markdown-content h2,
27+
.markdown-content h3,
28+
.markdown-content h4,
29+
.markdown-content h5,
30+
.markdown-content h6 {
31+
color: var(--color-text-primary);
32+
font-family: var(--font-display);
33+
font-weight: var(--font-weight-medium);
34+
line-height: var(--line-height-tight);
35+
margin: var(--space-default) 0 0;
36+
}
37+
38+
.markdown-content h1 { font-size: var(--font-size-large); }
39+
.markdown-content h2 { font-size: var(--font-size-medium); }
40+
.markdown-content h3 { font-size: var(--font-size-base); }
41+
.markdown-content h4,
42+
.markdown-content h5,
43+
.markdown-content h6 { font-size: var(--font-size-small); }
44+
45+
.markdown-content b,
46+
.markdown-content strong {
47+
color: var(--color-text-primary);
48+
font-weight: var(--font-weight-medium);
3549
}
3650

3751
.markdown-card p {
38-
padding: 0;
52+
padding: 0;
53+
margin: 0;
3954
}

‎static/css/v3/media-text-card.css‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/*
2+
Media Text Card
3+
Card with side-by-side text and image, plus a full-width CTA button at bottom.
4+
No header or title.
5+
*/
6+
7+
.media-text-card {
8+
display: flex;
9+
flex-direction: column;
10+
justify-content: center;
11+
align-items: center;
12+
border-radius: var(--border-radius-xl);
13+
border: 1px solid var(--color-stroke-weak);
14+
background: var(--color-surface-weak);
15+
overflow: clip;
16+
width: 100%;
17+
}
18+
19+
/* ── Body: text + image side by side ── */
20+
.media-text-card__body {
21+
display: flex;
22+
align-items: flex-start;
23+
justify-content: space-between;
24+
gap: var(--space-card);
25+
padding: var(--space-card);
26+
width: 100%;
27+
box-sizing: border-box;
28+
}
29+
30+
.media-text-card__text {
31+
margin: 0;
32+
padding: 0;
33+
font-family: var(--font-sans);
34+
font-size: var(--font-size-base);
35+
font-weight: var(--font-weight-regular);
36+
line-height: var(--line-height-default);
37+
letter-spacing: var(--letter-spacing-tight);
38+
color: var(--color-text-secondary);
39+
flex: 0 0 auto;
40+
max-width: 50%;
41+
}
42+
43+
.media-text-card__image {
44+
flex: 1 0 0;
45+
min-width: 0;
46+
overflow: clip;
47+
display: flex;
48+
justify-content: center;
49+
align-items: center;
50+
}
51+
52+
.media-text-card__image img {
53+
max-width: 100%;
54+
height: auto;
55+
display: block;
56+
object-fit: contain;
57+
}
58+
59+
/* ── CTA ── */
60+
.media-text-card__cta {
61+
padding: 0 var(--space-card) var(--space-card);
62+
width: 100%;
63+
box-sizing: border-box;
64+
}
65+
66+
.media-text-card__cta .btn,
67+
.media-text-card__btn {
68+
width: 100%;
69+
}

0 commit comments

Comments
 (0)