Responsive headers.

V0ldek · Sep 28, 2023 · 2b25aca · 2b25aca
1 parent d975145
commit 2b25aca
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git 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
@@ -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;