Refresh: embiggen some font sizes [fix #15667] (#15680)

mozilla · Dec 6, 2024 · 18d2ae9 · 18d2ae9
1 parent abd4e09
commit 18d2ae9
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 10 deletions.
diff --git a/media/css/m24/components/navigation-refresh.scss b/media/css/m24/components/navigation-refresh.scss
@@ -257,18 +257,17 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
 
     // Arrow styles for mobile menu items.
     &::after {
-        background: url('/media/img/icons/m24-small/up-arrow.svg') center center no-repeat;
+        background: transparent url('/media/img/icons/m24-small/up-arrow.svg') center center no-repeat;
         content: '';
         height: 20px;
         position: absolute;
-        top: 0;
+        top: 8px;
         width: 20px;
-        padding: $spacing-xs 0;
         @include bidi((
             (transform, rotate(90deg), rotate(-90deg)),
             (right, 8px, left, auto),
         ));
-        @include background-size(14px, 14px);
+        @include background-size(16px, 16px);
     }
 
     &.mzp-is-selected::after {
@@ -359,7 +358,7 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
     color: $color-black;
     display: flex;
     font-family: $primary-font;
-    font-size: $text-button-sm;
+    font-size: $text-body-md;
     font-weight: 600;
     padding: 0;
     position: relative;
@@ -435,7 +434,7 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
 
 .m24-c-menu-item-title {
     font-family: $primary-font;
-    font-size: $text-button-sm;
+    font-size: $text-body-md;
     font-weight: 600;
     margin-bottom: 0;
 }
@@ -558,7 +557,7 @@ $margin-top: 54px; // top margin offset for mobile navigation menu
     border: none;
     display: flex;
     font-family: $primary-font;
-    font-size: $text-button-sm;
+    font-size: $text-body-md;
     justify-content: flex-end;
     margin: $spacer-lg $spacer-lg 0;
     padding: 0;

diff --git a/media/css/m24/gallery.scss b/media/css/m24/gallery.scss
@@ -73,7 +73,12 @@
     }
 
     .m24-l-gallery-no-desc & {
-        font-size: $text-title-xs;
+        font-family: $primary-font;
+        font-size: $text-title-md;
+
+        @media #{$mq-md} {
+            font-family: $secondary-font;
+        }
     }
 }
 

diff --git a/media/css/m24/launchpad.scss b/media/css/m24/launchpad.scss
@@ -127,7 +127,7 @@ $launchpad-logo-spacing: $launchpad-logo-width + $launchpad-logo-padding;
 
 .m24-c-launchpad-info {
     color: $m24-color-dark-gray;
-    font-size: 12px; // custom mobile size
+    font-size: $text-body-sm;
     grid-column: 1 / span 11;
     padding-left: $launchpad-logo-spacing;
     padding-right: $launchpad-logo-padding; // give the arrow as much space from the text as the logo gets

diff --git a/media/css/m24/root.scss b/media/css/m24/root.scss
@@ -68,7 +68,7 @@
     --text-button-xl: 24px;
     --text-button-lg: 18px;
     --text-button-md: 16px;
-    --text-button-sm: 12px;
+    --text-button-sm: 14px;
 
     // labels
     --text-label: 12px;