feat: responsive title sizes

Author: matoous

src/overrides/Hero.astro

@@ -21,6 +21,7 @@ const {
     size="l"
     style={{ marginTop: "var(--cui-spacings-kilo)" }}
     color="subtle"
+    className="subtitle"
   >
     Docs, guides, and resources to help you accept payments with SumUp.
   </Body>
@@ -32,10 +33,21 @@ const {
     text-align: center;
   }
 
-  @media screen and (max-width: 600px) {
+  @media screen and (max-width: 980px) {
     .title {
-      font-size: var(--cui-display-s-font-size);
-      line-height: var(--cui-display-s-line-height);
+      font-size: var(--cui-headline-l-font-size);
+      line-height: var(--cui-headline-l-line-height);
+    }
+  }
+
+  @media screen and (max-width: 520px) {
+    .title {
+      font-size: var(--cui-headline-m-font-size);
+      line-height: var(--cui-headline-m-line-height);
+    }
+    .subtitle {
+      font-size: var(--cui-body-m-font-size);
+      line-height: var(--cui-body-m-line-height);
     }
   }
 </style>

src/overrides/PageTitle.astro

@@ -7,7 +7,14 @@ const {
 ---
 
 <div class="page-title">
-  <Display as="h1" size="s" weight="semibold" id={"_top"} data-page-title>
+  <Display
+    as="h1"
+    size="s"
+    weight="semibold"
+    id={"_top"}
+    className="title"
+    data-page-title
+  >
     {title}
   </Display>
   {
@@ -16,6 +23,7 @@ const {
         size="l"
         style={{ marginTop: "var(--cui-spacings-mega)" }}
         color="subtle"
+        className="subtitle"
       >
         {description}
       </Body>
@@ -28,4 +36,18 @@ const {
     text-align: center;
     padding: var(--cui-spacings-tera) 0 var(--cui-spacings-byte);
   }
+
+  @media screen and (max-width: 980px) {
+    .title {
+      font-size: var(--cui-headline-l-font-size);
+      line-height: var(--cui-headline-l-line-height);
+    }
+  }
+
+  @media screen and (max-width: 520px) {
+    .subtitle {
+      font-size: var(--cui-body-m-font-size);
+      line-height: var(--cui-body-m-line-height);
+    }
+  }
 </style>

src/pages/api/[...path].astro

@@ -99,7 +99,7 @@ const sidebar: StarlightUserConfig["sidebar"] = [
 const props = {
   frontmatter: {
     title: "API Reference",
-    description: "SumUp API reference.",
+    description: "SumUp API reference and code samples.",
     tableOfContents: false,
   },
   sidebar,

src/pages/changelog/index.astro

@@ -26,7 +26,8 @@ const posts = await Promise.all(
 const props = {
   frontmatter: {
     title: "Changelog",
-    description: "Changelog",
+    description:
+      "Subscribe to stay up to date with new features and API and SDK changes.",
     template: "splash",
     tableOfContents: false,
   },