From d40f6a64a736fba2911f86d1703ad6decb8cee86 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 29 Sep 2023 10:32:28 -0400
Subject: [PATCH] Adjust styles for large font sizes

---
 src/app/app.component.scss     | 4 ++++
 src/app/pages/about/about.scss | 4 +++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 4022c7f8e..ba4e754e4 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -24,6 +24,8 @@ ion-menu.md ion-list-header {
   padding-right: 18px;
   padding-left: 18px;
 
+  font-size: min(1.375rem, 36px);
+
   font-weight: 450;
 
   letter-spacing: .1em;
@@ -67,6 +69,8 @@ ion-menu.ios ion-list-header {
 
   padding-right: 16px;
   padding-left: 16px;
+
+  font-size: clamp(22px, 1.375rem, 40px);
 }
 
 ion-menu.ios ion-list {
diff --git a/src/app/pages/about/about.scss b/src/app/pages/about/about.scss
index 7b7151661..c5c7ba6ff 100644
--- a/src/app/pages/about/about.scss
+++ b/src/app/pages/about/about.scss
@@ -53,13 +53,15 @@ ion-toolbar ion-menu-button {
 }
 
 .about-info {
-  position: absolute;
+  position: relative;
 
   margin-top: -10px;
 
   border-radius: 10px;
 
   background: var(--ion-background-color, #ffffff);
+
+  z-index: 2; // display rounded border above header image
 }
 
 .about-info h3 {