Skip to content

Commit 6547c66

Browse files
PavelLaptevPavelLaptev
authored
some-marketin-page-ui-updates (#11418)
* refactor: remove redundant /nightlies redirect page * feat(icon): refine nightly app icon to use stroked glyph * remove SVG filters because Safari implementation sucks
1 parent 695e208 commit 6547c66

File tree

6 files changed

+101
-102
lines changed

6 files changed

+101
-102
lines changed

‎apps/web/src/lib/components/marketing/Footer.svelte‎

Lines changed: 40 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -93,9 +93,9 @@
9393

9494
<img class="banner-image" src="/images/pc-skater.svg" alt="" />
9595

96-
<div class="banner-background">
97-
<div class="banner-background__noisy noisy-1"></div>
98-
<div class="banner-background__noisy noisy-2"></div>
96+
<div class="banner-bg">
97+
<div class="banner-bg-grainy grainy-1"></div>
98+
<div class="banner-bg-grainy grainy-2"></div>
9999
</div>
100100
</div>
101101

@@ -188,7 +188,7 @@
188188
padding: 36px 0 0 48px;
189189
}
190190
191-
.banner-background {
191+
.banner-bg {
192192
z-index: -1;
193193
position: absolute;
194194
top: 0;
@@ -200,38 +200,32 @@
200200
background: var(--clr-scale-pop-60);
201201
}
202202
203-
.banner-background__noisy {
203+
.banner-bg-grainy {
204204
position: absolute;
205-
width: 140%;
206-
height: 1140px;
207-
transform: rotate(45deg);
208-
border-radius: 50%;
209-
background:
210-
radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)),
211-
url("data:image/svg+xml,%3Csvg viewBox='0 0 800 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
205+
width: 1100px;
206+
height: 900px;
207+
transform: rotate(26deg);
208+
background: url('/images/grainy-gr.png');
209+
background-size: 100%;
210+
background-repeat: no-repeat;
212211
mix-blend-mode: screen;
213-
filter: contrast(145%) brightness(1050%) invert(100%);
214-
opacity: 0.7;
212+
filter: invert(100%);
213+
opacity: 0.5;
215214
pointer-events: none;
215+
}
216216
217-
:global(.dark) & {
218-
opacity: 0.3;
219-
}
220-
221-
@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
222-
mix-blend-mode: color-dodge;
223-
filter: contrast(125%) brightness(650%) invert(100%);
224-
}
217+
.grainy-1 {
218+
bottom: -130%;
219+
left: -60%;
220+
}
225221
226-
&.noisy-1 {
227-
bottom: -20%;
228-
left: 20%;
229-
}
222+
.grainy-2 {
223+
right: -50%;
224+
bottom: -70%;
225+
}
230226
231-
&.noisy-2 {
232-
top: -10%;
233-
right: 20%;
234-
}
227+
:global(.dark) .banner-bg-grainy {
228+
opacity: 0.24;
235229
}
236230
237231
.banner-content-downloads {
@@ -479,13 +473,14 @@
479473
gap: 4px;
480474
}
481475
482-
.banner-background__noisy.noisy-1 {
483-
bottom: -50%;
484-
left: -60%;
476+
.grainy-1 {
477+
bottom: -200%;
478+
left: -100%;
485479
}
486-
.banner-background__noisy.noisy-2 {
487-
top: -50%;
488-
right: -50%;
480+
481+
.grainy-2 {
482+
right: -80%;
483+
bottom: -120%;
489484
}
490485
}
491486
@@ -494,5 +489,14 @@
494489
column-gap: 0;
495490
flex-direction: column;
496491
}
492+
493+
.grainy-1 {
494+
bottom: -160%;
495+
left: -180%;
496+
}
497+
.grainy-2 {
498+
right: -170%;
499+
bottom: -90%;
500+
}
497501
}
498502
</style>

‎apps/web/src/routes/downloads/+page.svelte‎

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -162,8 +162,8 @@
162162
</p>
163163
</div>
164164

165-
<div class="latest-release-background__noisy noisy-1"></div>
166-
<div class="latest-release-background__noisy noisy-2"></div>
165+
<div class="grainy-bg grainy-1"></div>
166+
<div class="grainy-bg grainy-2"></div>
167167
</div>
168168
</section>
169169

@@ -347,29 +347,35 @@
347347
}
348348
}
349349
350-
.latest-release-background__noisy {
350+
/* GRAINY BG */
351+
.grainy-bg {
351352
position: absolute;
352-
width: 100%;
353-
height: 1240px;
354-
transform: rotate(-65deg);
355-
border-radius: 50%;
356-
background:
357-
radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)),
358-
url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
353+
width: 1160px;
354+
height: 950px;
355+
transform: rotate(30deg);
356+
background: url('/images/grainy-gr.png');
357+
background-size: 100%;
358+
background-repeat: no-repeat;
359359
mix-blend-mode: multiply;
360-
filter: contrast(145%) brightness(1100%);
360+
361361
opacity: 0.06;
362362
pointer-events: none;
363+
}
363364
364-
&.noisy-1 {
365-
top: -30%;
366-
right: -40%;
367-
}
365+
:global(.dark) .grainy-bg {
366+
mix-blend-mode: screen;
367+
filter: invert(100%);
368+
opacity: 0.08;
369+
}
368370
369-
&.noisy-2 {
370-
bottom: -34%;
371-
left: -35%;
372-
}
371+
.grainy-1 {
372+
top: -30%;
373+
right: -50%;
374+
}
375+
376+
.grainy-2 {
377+
bottom: -70%;
378+
left: -60%;
373379
}
374380
375381
.releases {

‎apps/web/src/routes/nightlies/+page.svelte‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎apps/web/src/routes/nightly/+page.svelte‎

Lines changed: 30 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -182,8 +182,8 @@
182182
<a href="/downloads">stable release</a>.
183183
</p>
184184

185-
<div class="background__noisy noisy-1"></div>
186-
<div class="background__noisy noisy-2"></div>
185+
<div class="grainy-bg grainy-1"></div>
186+
<div class="grainy-bg grainy-2"></div>
187187
</div>
188188
{:else}
189189
<div class="no-nightly">
@@ -320,6 +320,7 @@
320320
}
321321
322322
.nightly-hero__header-icon {
323+
z-index: var(--z-ground);
323324
width: 80px;
324325
height: 80px;
325326
}
@@ -564,30 +565,35 @@
564565
}
565566
}
566567
567-
/* HERO BACKGROUND */
568-
.background__noisy {
568+
/* GRAINY BG */
569+
.grainy-bg {
569570
position: absolute;
570-
width: 100%;
571-
height: 1240px;
572-
transform: rotate(45deg);
573-
border-radius: 50%;
574-
background:
575-
radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)),
576-
url("data:image/svg+xml,%3Csvg viewBox='0 0 800 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
571+
width: 1160px;
572+
height: 950px;
573+
transform: rotate(30deg);
574+
background: url('/images/grainy-gr.png');
575+
background-size: 100%;
576+
background-repeat: no-repeat;
577577
mix-blend-mode: screen;
578-
filter: contrast(145%) brightness(1050%) invert(100%);
579-
opacity: 0.2;
578+
filter: invert(100%);
579+
opacity: 0.14;
580580
pointer-events: none;
581+
}
581582
582-
&.noisy-1 {
583-
top: -20%;
584-
left: 40%;
585-
}
583+
:global(.dark) .grainy-bg {
584+
mix-blend-mode: multiply;
585+
filter: invert(0%);
586+
opacity: 0.12;
587+
}
586588
587-
&.noisy-2 {
588-
right: 30%;
589-
bottom: -10%;
590-
}
589+
.grainy-1 {
590+
top: -40%;
591+
right: -50%;
592+
}
593+
594+
.grainy-2 {
595+
bottom: -80%;
596+
left: -60%;
591597
}
592598
593599
@media (--mobile-viewport) {
@@ -641,19 +647,9 @@
641647
padding: 16px;
642648
}
643649
644-
.background__noisy {
645-
width: 120%;
646-
transform: rotate(25deg);
647-
648-
&.noisy-1 {
649-
top: -70%;
650-
left: -30%;
651-
}
652-
653-
&.noisy-2 {
654-
right: -60%;
655-
bottom: -60%;
656-
}
650+
.grainy-bg {
651+
width: 1000px;
652+
height: 800px;
657653
}
658654
}
659655
</style>

‎apps/web/static/images/app-icon-nightly.svg‎

Lines changed: 6 additions & 3 deletions
Loading

‎apps/web/static/images/grainy-gr.png‎

50.4 KB
Loading

0 commit comments

Comments
 (0)