_Logo.scss (1639B)
1 .logo-and-wordmark-wrapper { 2 // Override default h1 margins 3 margin-block: 0; 4 } 5 6 .logo-and-wordmark { 7 $logo-size: 64px; 8 $wordmark-size: 105px; 9 10 align-items: center; 11 display: flex; 12 justify-content: center; 13 // Bug 1967304 - Large number (48px) 14 margin-block-end: var(--space-xxlarge); 15 16 // Edge case for users who have pocket stories turned off 17 .no-recommended-stories & { 18 // Bug 1967304 - Large number (40px) 19 margin-block-end: calc(var(--space-large) + var(--space-xlarge)); 20 } 21 22 .logo { 23 display: inline-block; 24 height: $logo-size; 25 width: $logo-size; 26 background: image-set(url('chrome://branding/content/about-logo.png'), url('chrome://branding/content/about-logo@2x.png') 2x) no-repeat center; 27 background-size: $logo-size; 28 } 29 30 .wordmark { 31 background: url('chrome://branding/content/firefox-wordmark.svg') no-repeat center center; 32 background-size: $wordmark-size; 33 -moz-context-properties: fill; 34 display: inline-block; 35 fill: var(--newtab-wordmark-color); 36 height: $logo-size; 37 margin-inline-start: var(--space-large); 38 width: $wordmark-size; 39 40 // Contrast fix for users who have wallpapers set 41 @include wallpaper-contrast-fix; 42 } 43 44 @media (max-width: $break-point-medium - 1) { 45 $logo-size-small: 64px; 46 $wordmark-small-size: 100px; 47 48 .logo { 49 background-size: $logo-size-small; 50 height: $logo-size-small; 51 width: $logo-size-small; 52 } 53 54 .wordmark { 55 background-size: $wordmark-small-size; 56 height: $logo-size-small; 57 width: $wordmark-small-size; 58 margin-inline-start: var(--space-medium); 59 } 60 } 61 }