Tweaking font-size and line-height for smaller screens

spectreconsole · Feb 15, 2022 · 86b532f · 86b532f
1 parent 3ac63d2
commit 86b532f
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 9 deletions.
diff --git a/docs/input/_layout.cshtml b/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()
 
                 @{

diff --git a/docs/input/api/_layout.cshtml b/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">

diff --git a/docs/input/tailwind.config.js b/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: "&nbsp;",
                         },
@@ -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'
+                        },
+                    }
+                }
             }),
         },
     },

diff --git a/docs/input/tailwind.css b/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 {