Tweaking font-size and line-height for smaller screens

docs/input/_layout.cshtml

@@ -204,12 +204,12 @@ c-9 -4 -271 61 -315 78 -29 11 -28 12 79 55 59 24 111 46 114 49 3 3 33 -36
                 @RenderSection("header", required: false)
                 @if (!IsSectionDefined("header"))
                 {
-                    <h1 class="text-4xl font-extrabold">@(Document.GetString(Keys.Title) ?? Document.GetTitle())</h1>
+                    <h1 class="text-2xl md:text-4xl font-extrabold">@(Document.GetString(Keys.Title) ?? Document.GetTitle())</h1>
                 }
 
                 @RenderSection("subheading", required: false)
             </header>
-            <div class="prose prose-slate dark:prose-invert max-w-full font-light lg:leading-loose">
+            <div class="prose prose-sm md:prose-base prose-slate dark:prose-invert max-w-full font-light lg:leading-loose">
                 @RenderBody()
 
                 @{

docs/input/api/_layout.cshtml

@@ -7,8 +7,8 @@
 }
 
 @section header{
-    <h1 class="text-4xl align-baseline font-extrabold">
-        @Document.GetString(CodeAnalysisKeys.DisplayName) <span class="text-2xl text-uppercase text-sky-600 dark:text-sky-400">@Document.GetString(CodeAnalysisKeys.SpecificKind)</span>
+    <h1 class="text-2xl md:text-4xl align-baseline font-extrabold">
+        @Document.GetString(CodeAnalysisKeys.DisplayName) <span class="text-lg md:text-2xl text-uppercase text-sky-600 dark:text-sky-400">@Document.GetString(CodeAnalysisKeys.SpecificKind)</span>
     </h1>
 
     <nav class="flex mt-2" aria-label="Breadcrumb">

docs/input/tailwind.config.js

@@ -37,13 +37,11 @@ module.exports = {
                             lineHeight: '1.4',
                         },
                         pre: {
-                            fontWeight: theme("fontWeight.light"),
                             borderRadius: theme('borderRadius.xl'),
                             borderWidth: '1px',
                             borderColor: theme('colors.slate.700'),
                             color: theme('colors.slate.50'),
                             boxShadow: theme('boxShadow.md'),
-                            lineHeight: '1.3',
                         },
                         'p + pre, p + asciinema-player pre': {
                             marginTop: `${-4 / 14}em`,
@@ -53,9 +51,7 @@ module.exports = {
                         },
                         code: {
                             fontWeight: theme("fontWeight.normal"),
-                            fontSize: 'inherit',
                         },
-
                         "code::before": {
                             content: " ",
                         },
@@ -75,6 +71,29 @@ module.exports = {
                         },
                     },
                 },
+                base: {
+                    css: {
+                        pre: {
+                            fontWeight: theme("fontWeight.light"),
+                            fontSize:'.9rem',
+                            lineHeight: '1.35'
+                        },
+                        code: {
+                            fontSize:'inherit'
+                        },
+                    }
+                },
+                sm: {
+                    css: {
+                        pre: {
+                            fontSize:'.8rem',
+                            lineHeight: '1.4',
+                        },
+                        code:{
+                            fontSize:'inherit'
+                        },
+                    }
+                }
             }),
         },
     },

docs/input/tailwind.css

@@ -61,7 +61,7 @@ div.doc-summary > div dl > div dt {
 }
 
 div.doc-summary > div dl > div dd {
-    @apply mt-4 text-sm sm:mt-0 sm:col-span-2;
+    @apply empty:hidden sm:block mt-4 text-sm sm:mt-0 sm:col-span-2;
 }
 
 div.doc-summary.short-term > div dl > div dt {