Fix Bug 1399276, adds new whatsnew page for dev edition 57 #5132
Conversation
| &:before { | ||
| display: block; | ||
| content: ''; | ||
| @include at2x('/media/img/firefox/products/developer/quantum/dev-edition-logo.png', 105px, 108px); |
There was a problem hiding this comment.
I think this is the wrong logo and was probably just a placeholder in the design mockup. The final logo is /media/img/logos/firefox/logo-developer-quantum.png
There was a problem hiding this comment.
Yup, that is what I was thinking as well. Completely escaped me to ask in the end. Will use the one you pointed at here.
| @media #{$mq-tablet} { | ||
| @include background-size(1440px 1034px); | ||
| background-image: url('/media/img/firefox/products/developer/quantum/whatsnew-hero-background.png'); | ||
| background-position: 0 0; |
There was a problem hiding this comment.
I think this should be centered horizontally (background-position: center bottom;)
Also in any window wider than 1440px the "blobs" are cut off with a hard edge. I made a background that blended out to white for the product page and I can send you a version without the blue wave on the bottom to use here.
|
|
||
| @media #{$mq-desktop} { | ||
| @include at2x('/media/img/firefox/products/developer/quantum/whatsnew-hero-background.png', 1780px, 1278px); | ||
| background-position: 0 -169px; |
There was a problem hiding this comment.
Centered here, too, and probably anchored to the bottom to better handle vertical expansion, though that makes the positioning trickier... Maybe just leave it as center bottom and let the tops of the blobs be cut off.
| } | ||
|
|
||
| h3 { | ||
| @include font-size(18px); |
There was a problem hiding this comment.
I think you can use the @include font-size-level5; mixin here without the other media queries.
|
|
||
| @media #{$mq-phone-wide} { | ||
| padding: .5em 18px; | ||
| @include font-size(13px); |
There was a problem hiding this comment.
This shouldn't be necessary with the level5 mixin.
| } | ||
|
|
||
| .section-body { | ||
| @include at2x('/media/img/firefox/template/nightly-logo.png', 165px, 165px); |
There was a problem hiding this comment.
This image is 180 x 186 so giving it square dimensions slightly squishes it. I think we should put a squared version of the Nightly logo in /img/logos/firefox to be the "canonical" nightly logo.
| } | ||
|
|
||
| @media #{$mq-desktop} { | ||
| @include background-size(300px 300px); |
There was a problem hiding this comment.
The low-res logo is 180 x 186 so it's being scaled up on non-retina screens and looks blurry. But if we switch to a different graphic we can make it 300 x 300 (and 600 x 600 at 2x).
| } | ||
|
|
||
| h3 { | ||
| @include font-size(18px); |
There was a problem hiding this comment.
We're trying to avoid arbitrary font sizes and stick to a set scale (alas, not properly documented anywhere yet, but the example is at http://craigcook.github.io/etc/typescale/).
H3 elements should be level3 by default so you may not need to declare any other sizing here but if you do, try to use one of the mixins. If you can't use a mixin, at least use sizes within the defined scale (12px, 14px, 16px, 18px, 24px, 36px, 48px, 60px, 72px). This is another place where I'm willing to disregard the mockup and impose some consistency of our own.
| <li> | ||
| <img class="icon" src="{{ static('img/firefox/products/developer/quantum/devtools-icon.svg') }}" alt=""> | ||
| <h3>{{ _('Firefox Devtools') }}</h3> | ||
| <p class="cta"><a href="#devtools" class="button button-hollow">{{ _('Learn more') }}</a></p> |
There was a problem hiding this comment.
Should we use smooth scrolling for these?
There was a problem hiding this comment.
scroll-behavior: smooth; CSS FTW 👍
| <img class="hero-image" src="{{ static('img/firefox/products/developer/quantum/stylo-engine.svg') }}" alt=""> | ||
| <p> | ||
| {% trans %} | ||
| Firefox Quantum includes a new CSS engine, written in Rust, that has state-of-the-art innovations and is blazingly fast. |
There was a problem hiding this comment.
Maybe we should put a max-width on this blurb. It's such a short sentence, I get "fast." on its own line in a wide window. It'll be different for each locale but I think something like max-width: $width-phone-wide; margin: 0 auto 1.25em; might not hurt.
|
Thanks for the review @craigcook - updated. |
| } | ||
|
|
||
| @media #{$mq-desktop} { | ||
| @include at2x('/media/img/firefox/products/developer/quantum/whatsnew-firstrun-hero-background.png', 3400px, 900px); |
There was a problem hiding this comment.
Nit: shouldn't need to redeclare the whole thing here, just the new background-size.
| &:before { | ||
| display: block; | ||
| content: ''; | ||
| @include at2x('/media/img/logos/firefox/logo-developer-quantum.png', 105px, 108px); |
There was a problem hiding this comment.
The logo graphic is square so width and height should be the same here.
|
r+! Just needs a squash |
Description
Add new whatsnew page for Dev edition 57 located at /firefox/57.0a2/whatsnew/
Issue / Bugzilla link
https://bugzilla.mozilla.org/show_bug.cgi?id=1399276
Testing
Basic responsiveness.
Firefox only.