fix(next-release/main): update home page h1 and code block font size (#…

…7117)

* update font sizes

* add text-size-adjust

* add webkit prefix, add comment

* update text-size-adjust fix

---------

Co-authored-by: Tim Nguyen <54393192+timngyn@users.noreply.github.com>

src/styles/code.scss

@@ -62,6 +62,13 @@ code:not([class]) {
   margin: var(--amplify-space-xs) 0;
   padding-block: var(--amplify-space-xs);
   font-size: var(--amplify-font-sizes-medium);
+  /* 
+   Safari on iOS requires the webkit prefix for text-size-adjust. 
+   text-size-adjust fixes some fonts from showing larger than normal in some browsers.
+  */
+  text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+
   &:focus-visible {
     outline: none;
     box-shadow: 0 0 0 2px var(--amplify-colors-white) inset;

src/styles/home.scss

@@ -6,6 +6,11 @@
   z-index: 1;
   &__heading {
     font-family: var(--font-code);
+    font-size: var(--amplify-font-sizes-xxxl);
+    text-wrap: pretty;
+    @media (min-width: $mq-mobile) {
+      font-size: var(--amplify-components-heading-1-font-size);
+    }
   }
   &__text {
     max-width: 580px;