chore: enable dynamic font scaling (#1805)

* Use dynamic font scaling * Adjust styles for large font sizes
ionic-team · Oct 4, 2023 · 466be86 · 466be86
1 parent d74e556
commit 466be86
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git 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(0.875rem, 32px);
+
   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/app.scss b/src/app/app.scss
@@ -2,3 +2,11 @@
   /* stylelint-disable-next-line declaration-no-important */
   display: none !important;
 }
+
+html {
+  /*
+   * For more information on dynamic font scaling, visit the documentation:
+   * https://ionicframework.com/docs/layout/dynamic-font-scaling
+   */
+  --ion-dynamic-font: var(--ion-default-dynamic-font);
+}
diff --git 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 {