From 2b25aca3b4f3716f0edf72dd95726941c7c2b698 Mon Sep 17 00:00:00 2001
From: Mateusz Gienieczko <mgienieczko@microsoft.com>
Date: Thu, 28 Sep 2023 22:25:40 +0100
Subject: [PATCH] Responsive headers.

---
 .../Shared/Components/Blogging/BlogPost.razor    |  4 +++-
 src/Sorcery/wwwroot/css/app.css                  | 16 ++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/Sorcery/Shared/Components/Blogging/BlogPost.razor b/src/Sorcery/Shared/Components/Blogging/BlogPost.razor
index e681793..8d2eace 100644
--- a/src/Sorcery/Shared/Components/Blogging/BlogPost.razor
+++ b/src/Sorcery/Shared/Components/Blogging/BlogPost.razor
@@ -11,7 +11,9 @@
             <FootnoteContainer>
                 <div class="d-flex gap-4">
                     <div class="d-flex flex-grow-1" style="width: 80%; overflow-wrap: anywhere; hyphens: auto">
-                        <MudText Typo="Typo.h1">@Title</MudText>
+                        <MudText Typo="Typo.h1">
+                            <span class="blog-post-title">@Title</span>
+                        </MudText>
                     </div>
                     <div class="d-flex flex-grow-1" style="width: auto; text-align: left; margin-left: auto">
                         <MudText Typo="Typo.caption" Style="width: 100%">
diff --git a/src/Sorcery/wwwroot/css/app.css b/src/Sorcery/wwwroot/css/app.css
index 4c57e88..afd5d6a 100644
--- a/src/Sorcery/wwwroot/css/app.css
+++ b/src/Sorcery/wwwroot/css/app.css
@@ -16,6 +16,22 @@
     border: solid 1px;
 }
 
+.mud-main-content {
+    --mud-typography-h1-size: 2rem;
+    --mud-typography-h2-size: 1.875rem;
+    --mud-typography-h3-size: 1.5rem;
+    --mud-typography-h4-size: 1.0625rem;
+}
+
+@media (min-width: 600px) {
+    .mud-main-content {
+        --mud-typography-h1-size: 4rem;
+        --mud-typography-h2-size: 3.75rem;
+        --mud-typography-h3-size: 3rem;
+        --mud-typography-h4-size: 2.125rem;
+    }
+}
+
 #blazor-error-ui {
     background: lightyellow;
     bottom: 0;