Skip to content

Commit cd71fb8

Browse files
youknowriadmatticbot
authored andcommitted
Coming Soon Page: Design update (#41499)
Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/13176305804 Upstream-Ref: Automattic/jetpack@2b95249
1 parent 1b56eda commit cd71fb8

File tree

4 files changed

+125
-123
lines changed

4 files changed

+125
-123
lines changed

jetpack_vendor/automattic/jetpack-mu-wpcom/src/features/coming-soon/fallback-coming-soon-page.php

Lines changed: 62 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -94,45 +94,31 @@ function get_onboarding_url() {
9494
html {
9595
/* No admin bar nor marketing bar on this page */
9696
margin-top: 0 !important;
97+
height: 100%;
9798
}
9899
.wpcom-coming-soon-body {
99100
background: #3858e9;
100101
color: #fff;
102+
font-family: inter-variable-web,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; height: 100%;
103+
display: flex;
104+
flex-direction: column;
105+
}
106+
.wpcom-coming-soon-outer {
101107
display: grid;
102-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
103108
grid-gap: 24px;
104109
-ms-grid-columns: (1fr)[1];
105110
grid-template-columns: repeat(1, 1fr);
106-
padding-right: 24px;
107-
padding-left: 24px;
111+
flex-grow: 1;
108112
}
109113
.wpcom-coming-soon-inner {
110-
align-items: flex-end;
111114
display: flex;
112-
flex-wrap: wrap;
115+
align-items: center;
113116
-ms-grid-column: 1;
114117
grid-column-start: 1;
115118
-ms-grid-column-span: 1;
116119
grid-column-end: span 1;
117-
height: 100vh;
118-
justify-content: space-between;
119-
}
120-
@supports (height: 100dvh) {
121-
.wpcom-coming-soon-inner {
122-
height: 100dvh;
123-
}
124-
}
125-
.wpcom-coming-soon-main,
126-
.wpcom-coming-soon-marketing {
127-
flex: 0 0 100%;
128-
}
129-
.wpcom-coming-soon-name {
130-
color: #fff;
131-
font-size: 19px;
132-
line-height: 1.3;
133-
margin-bottom: 8px;
134-
padding: 0;
135-
text-align: left;
120+
padding-right: 24px;
121+
padding-left: 24px;
136122
}
137123
.wpcom-coming-soon-description {
138124
color: #fff;
@@ -141,12 +127,19 @@ function get_onboarding_url() {
141127
padding: 0;
142128
text-align: left;
143129
}
144-
.wpcom-coming-soon-description,
145-
.wpcom-coming-soon-marketing-copy-text {
130+
.wpcom-coming-soon-description {
146131
font-family: Georgia, "Times New Roman", Times, serif;
147132
}
133+
.wpcom-coming-soon-description span {
134+
display: block;
135+
}
136+
.wpcom-coming-soon-description span:last-child {
137+
padding-left: 60px;
138+
}
148139
.wpcom-coming-soon-marketing {
149140
padding-bottom: 8px;
141+
padding-right: 24px;
142+
padding-left: 24px;
150143
}
151144
.wpcom-coming-soon-marketing-copy {
152145
display: flex;
@@ -166,13 +159,13 @@ function get_onboarding_url() {
166159
}
167160
.wpcom-coming-soon-marketing-buttons .button {
168161
background: #fff;
169-
border-radius: 2px;
162+
border-radius: 4px;
170163
border: 1px solid #fff;
171164
box-sizing: border-box;
172-
color: #117ac9;
165+
color: #3858e9;
173166
display: block;
174167
font-size: 16px;
175-
font-weight: 700;
168+
font-weight: 500;
176169
line-height: 21px;
177170
padding: 13px;
178171
text-align: center;
@@ -196,8 +189,7 @@ function get_onboarding_url() {
196189
margin: 1em 0;
197190
}
198191
@media screen and ( min-width: 660px ) {
199-
.wpcom-coming-soon-description,
200-
.wpcom-coming-soon-marketing-copy-text {
192+
.wpcom-coming-soon-description {
201193
font-family: Recoleta, Georgia, "Times New Roman", Times, serif;
202194
}
203195
.wpcom-coming-soon-name {
@@ -223,11 +215,9 @@ function get_onboarding_url() {
223215
margin: 0;
224216
}
225217
.wpcom-coming-soon-marketing-buttons p:nth-child(2) {
226-
margin-left: 8px;
218+
margin-left: 16px;
227219
}
228220
.wpcom-coming-soon-marketing-buttons .button {
229-
font-size: 13px;
230-
padding: 7px 13px;
231221
min-width: 145px;
232222
}
233223
}
@@ -250,7 +240,7 @@ function get_onboarding_url() {
250240
}
251241
}
252242
@media screen and ( min-width: 1040px ) {
253-
.wpcom-coming-soon-body {
243+
.wpcom-coming-soon-outer {
254244
-ms-grid-columns: (1fr)[12];
255245
grid-template-columns: repeat(12, 1fr);
256246
}
@@ -262,39 +252,51 @@ function get_onboarding_url() {
262252
}
263253
.wpcom-coming-soon-marketing {
264254
padding-bottom: 32px;
255+
padding-left: 32px;
256+
padding-right: 32px;
265257
}
266258
}
267259
</style>
268260
</head>
269261
<body class="wpcom-coming-soon-body">
270-
<div class="wpcom-coming-soon-inner">
271-
<div class="wpcom-coming-soon-main">
272-
<div class="wpcom-coming-soon-name"><?php echo esc_html( get_bloginfo( 'name' ) ); ?></div>
273-
<div class="wpcom-coming-soon-description"><?php esc_html_e( 'Coming Soon', 'jetpack-mu-wpcom' ); ?></div>
262+
<div class="wpcom-coming-soon-outer">
263+
<div class="wpcom-coming-soon-inner">
264+
<div class="wpcom-coming-soon-main">
265+
<div class="wpcom-coming-soon-description">
266+
<?php
267+
echo wp_kses(
268+
__( '<span>A bright idea,</span> <span>coming soon</span>', 'jetpack-mu-wpcom' ),
269+
array(
270+
'span' => array(),
271+
)
272+
);
273+
?>
274+
</div>
275+
</div>
274276
</div>
275-
<div class="wpcom-coming-soon-marketing">
276-
<?php if ( ! is_user_logged_in() ) : ?>
277-
<div class="wpcom-coming-soon-marketing-copy">
278-
<div class="wpcom-coming-soon-wplogo">
279-
<a href="<?php echo esc_url( get_onboarding_url() ); ?>" title="WordPress.com">
280-
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
281-
<title>WordPress.com</title>
282-
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
283-
<g transform="translate(-701.000000, -950.000000)" fill="#FFFFFF">
284-
<path d="M730.04024,985.542 L735.53216,969.66248 C736.55848,967.09712 736.89992,965.046 736.89992,963.222 C736.89992,962.56 736.85632,961.94544 736.7788,961.3728 C738.18232,963.93376 738.9812,966.87296 738.9812,969.99976 C738.9812,976.63312 735.38624,982.42536 730.04024,985.542 L730.04024,985.542 Z M723.47808,961.56864 C724.56048,961.51192 725.53592,961.39784 725.53592,961.39784 C726.5048,961.28336 726.39072,959.8592 725.4216,959.91616 C725.4216,959.91616 722.50896,960.14464 720.6288,960.14464 C718.86176,960.14464 715.8928,959.91616 715.8928,959.91616 C714.92328,959.8592 714.80944,961.34048 715.77904,961.39784 C715.77904,961.39784 716.69616,961.51192 717.6648,961.56864 L720.466,969.2444 L716.53008,981.0464 L709.98288,961.56864 C711.06624,961.51192 712.04056,961.39784 712.04056,961.39784 C713.0092,961.28336 712.89464,959.8592 711.92552,959.91616 C711.92552,959.91616 709.01352,960.14464 707.13336,960.14464 C706.79616,960.14464 706.39824,960.13608 705.97552,960.12264 C709.19128,955.24152 714.7176,952.01808 720.99976,952.01808 C725.68112,952.01808 729.94352,953.80776 733.1424,956.7392 C733.06536,956.73408 732.98944,956.72448 732.90984,956.72448 C731.14328,956.72448 729.89008,958.26312 729.89008,959.91616 C729.89008,961.39784 730.74488,962.65128 731.6564,964.13336 C732.34008,965.33096 733.13872,966.86944 733.13872,969.09216 C733.13872,970.63208 732.68224,972.5684 731.77048,974.90568 L729.97656,980.89832 L723.47808,961.56864 Z M720.99976,987.98328 C719.23488,987.98328 717.53104,987.72376 715.92024,987.25072 L721.31592,971.57256 L726.84248,986.71584 C726.8788,986.80384 726.92336,986.88536 726.97136,986.96312 C725.1024,987.62072 723.09392,987.98328 720.99976,987.98328 L720.99976,987.98328 Z M703.01856,969.99976 C703.01856,967.3924 703.57776,964.91736 704.57576,962.68128 L713.1532,986.18272 C707.154,983.2684 703.01856,977.11744 703.01856,969.99976 L703.01856,969.99976 Z M720.99976,950 C709.97208,950 701,958.97184 701,969.99976 C701,981.02856 709.97208,990.00112 720.99976,990.00112 C732.02768,990.00112 741,981.02856 741,969.99976 C741,958.97184 732.02768,950 720.99976,950 L720.99976,950 Z" id="wpcom-wmark"></path>
285-
</g>
277+
</div>
278+
<div class="wpcom-coming-soon-marketing">
279+
<?php if ( ! is_user_logged_in() ) : ?>
280+
<div class="wpcom-coming-soon-marketing-copy">
281+
<div class="wpcom-coming-soon-wplogo">
282+
<a href="<?php echo esc_url( get_onboarding_url() ); ?>" title="WordPress.com">
283+
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
284+
<title>WordPress.com</title>
285+
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
286+
<g transform="translate(-701.000000, -950.000000)" fill="#FFFFFF">
287+
<path d="M730.04024,985.542 L735.53216,969.66248 C736.55848,967.09712 736.89992,965.046 736.89992,963.222 C736.89992,962.56 736.85632,961.94544 736.7788,961.3728 C738.18232,963.93376 738.9812,966.87296 738.9812,969.99976 C738.9812,976.63312 735.38624,982.42536 730.04024,985.542 L730.04024,985.542 Z M723.47808,961.56864 C724.56048,961.51192 725.53592,961.39784 725.53592,961.39784 C726.5048,961.28336 726.39072,959.8592 725.4216,959.91616 C725.4216,959.91616 722.50896,960.14464 720.6288,960.14464 C718.86176,960.14464 715.8928,959.91616 715.8928,959.91616 C714.92328,959.8592 714.80944,961.34048 715.77904,961.39784 C715.77904,961.39784 716.69616,961.51192 717.6648,961.56864 L720.466,969.2444 L716.53008,981.0464 L709.98288,961.56864 C711.06624,961.51192 712.04056,961.39784 712.04056,961.39784 C713.0092,961.28336 712.89464,959.8592 711.92552,959.91616 C711.92552,959.91616 709.01352,960.14464 707.13336,960.14464 C706.79616,960.14464 706.39824,960.13608 705.97552,960.12264 C709.19128,955.24152 714.7176,952.01808 720.99976,952.01808 C725.68112,952.01808 729.94352,953.80776 733.1424,956.7392 C733.06536,956.73408 732.98944,956.72448 732.90984,956.72448 C731.14328,956.72448 729.89008,958.26312 729.89008,959.91616 C729.89008,961.39784 730.74488,962.65128 731.6564,964.13336 C732.34008,965.33096 733.13872,966.86944 733.13872,969.09216 C733.13872,970.63208 732.68224,972.5684 731.77048,974.90568 L729.97656,980.89832 L723.47808,961.56864 Z M720.99976,987.98328 C719.23488,987.98328 717.53104,987.72376 715.92024,987.25072 L721.31592,971.57256 L726.84248,986.71584 C726.8788,986.80384 726.92336,986.88536 726.97136,986.96312 C725.1024,987.62072 723.09392,987.98328 720.99976,987.98328 L720.99976,987.98328 Z M703.01856,969.99976 C703.01856,967.3924 703.57776,964.91736 704.57576,962.68128 L713.1532,986.18272 C707.154,983.2684 703.01856,977.11744 703.01856,969.99976 L703.01856,969.99976 Z M720.99976,950 C709.97208,950 701,958.97184 701,969.99976 C701,981.02856 709.97208,990.00112 720.99976,990.00112 C732.02768,990.00112 741,981.02856 741,969.99976 C741,958.97184 732.02768,950 720.99976,950 L720.99976,950 Z" id="wpcom-wmark"></path>
286288
</g>
287-
</svg>
288-
</a>
289-
</div>
290-
<p class="wpcom-coming-soon-marketing-copy-text"><?php esc_html_e( 'Build a website. Sell your stuff. Write a blog. And so much more.', 'jetpack-mu-wpcom' ); ?></p>
291-
</div>
292-
<div class="wpcom-coming-soon-marketing-buttons">
293-
<p><a class="button button-secondary" href="<?php echo esc_url( get_login_url() ); ?>"><?php esc_html_e( 'Log in', 'jetpack-mu-wpcom' ); ?></a></p>
294-
<p><a class="button button-primary has-background" href="<?php echo esc_url( get_onboarding_url() ); ?>"><?php esc_html_e( 'Start your website', 'jetpack-mu-wpcom' ); ?></a></p>
289+
</g>
290+
</svg>
291+
</a>
295292
</div>
296-
<?php endif; ?>
297-
</div>
293+
<p class="wpcom-coming-soon-marketing-copy-text"><?php esc_html_e( 'Build a website. Sell something. Blog. And so much more.', 'jetpack-mu-wpcom' ); ?></p>
294+
</div>
295+
<div class="wpcom-coming-soon-marketing-buttons">
296+
<p><a class="button button-secondary" href="<?php echo esc_url( get_login_url() ); ?>"><?php esc_html_e( 'Log in', 'jetpack-mu-wpcom' ); ?></a></p>
297+
<p><a class="button button-primary has-background" href="<?php echo esc_url( get_onboarding_url() ); ?>"><?php esc_html_e( 'Start a website', 'jetpack-mu-wpcom' ); ?></a></p>
298+
</div>
299+
<?php endif; ?>
298300
</div>
299301
<?php wp_footer(); ?>
300302
<!-- WordPress.com Editing Toolkit Plugin - Coming Soon -->

jetpack_vendor/i18n-map.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
),
5555
'jetpack-mu-wpcom' => array(
5656
'path' => 'jetpack_vendor/automattic/jetpack-mu-wpcom',
57-
'ver' => '6.2.0-alpha1738823051',
57+
'ver' => '6.2.0-alpha1738836166',
5858
),
5959
'jetpack-password-checker' => array(
6060
'path' => 'jetpack_vendor/automattic/jetpack-password-checker',

0 commit comments

Comments
 (0)