Source code
Revision control
Copy as Markdown
Other Tools
.logo-and-wordmark-wrapper {
// Override default h1 margins
margin-block: 0;
}
.logo-and-wordmark {
$logo-size: 82px;
$wordmark-size: 134px;
align-items: center;
display: flex;
justify-content: center;
margin-block-end: 48px;
.layout-variant-a &,
.layout-variant-b & {
margin-block-end: 32px;
$logo-size: 64px;
$wordmark-size: 105px;
}
// Edge case for users who have pocket stories turned off
.layout-variant-a.no-recommended-stories &,
.layout-variant-b.no-recommended-stories & {
margin-block-end: 40px;
}
.logo {
display: inline-block;
height: $logo-size;
width: $logo-size;
background: image-set(url('chrome://branding/content/about-logo.png'), url('chrome://branding/content/about-logo@2x.png') 2x) no-repeat center;
background-size: $logo-size;
}
.wordmark {
background: url('chrome://branding/content/firefox-wordmark.svg') no-repeat center center;
background-size: $wordmark-size;
-moz-context-properties: fill;
display: inline-block;
fill: var(--newtab-wordmark-color);
height: $logo-size;
margin-inline-start: 16px;
width: $wordmark-size;
// Contrast fix for users who have wallpapers set
@include wallpaper-contrast-fix;
}
@media (max-width: $break-point-medium - 1) {
$logo-size-small: 64px;
$wordmark-small-size: 100px;
.logo {
background-size: $logo-size-small;
height: $logo-size-small;
width: $logo-size-small;
}
.wordmark {
background-size: $wordmark-small-size;
height: $logo-size-small;
width: $wordmark-small-size;
margin-inline-start: 12px;
}
}
}