Tweak "On this page" styles

Author: samselikoff

addon/components/docs-viewer/x-main/component.js

@@ -11,10 +11,10 @@ import layout from './template';
 
 const projectHref = config['ember-cli-addon-docs'].projectHref;
 
-const tagToSize = { H2: 'sm', H3: 'xs' };
-const tagToIndent = { H2: '0', H3: '2' };
-const tagToMarginTop = { H2: '2', H3: '0' };
-const tagToMarginBottom = { H2: '1', H3: '0' };
+const tagToSize = { H2: 'xs', H3: 'xs' };
+const tagToIndent = { H2: '0', H3: '4' };
+const tagToMarginTop = { H2: '2', H3: '2' };
+const tagToMarginBottom = { H2: '0', H3: '0' };
 
 export default Component.extend({
   layout,
@@ -24,7 +24,7 @@ export default Component.extend({
   pageIndex: service(),
 
   tagName: 'main',
-  classNames: ['lg:w-4/5', 'xl:w-3/5', 'max-w-md', 'lg:max-w-none', 'mx-auto', 'lg:mx-0', 'mt-6'],
+  classNames: ['lg:w-4/5', 'xl:w-3/5', 'max-w-md', 'lg:max-w-none', 'mx-auto', 'lg:mx-0', 'mt-6', 'flex-no-shrink'],
 
   didInsertElement() {
     this._super(...arguments);

addon/components/docs-viewer/x-page-index/template.hbs

@@ -1,8 +1,8 @@
 <nav class="hidden lg:block lg:w-1/5 pl-4" data-test-page-index>
   <div class="sticky pin-t pt-4 -mt-4 max-h-screen overflow-y-scroll">
-    <ul class="list-reset">
+    <ul class="list-reset border-l border-grey-lighter pl-6 leading-normal">
       {{#if pageIndex.length}}
-        <li class="mt-8 text-grey font-bold tracking-wide uppercase text-xs">
+        <li class="mt-20 text-grey font-bold tracking-wide uppercase text-xs">
           On This Page
         </li>
       {{/if}}
@@ -19,7 +19,7 @@
         >
           <a
             href="#{{item.id}}"
-            class="text-grey-dark no-underline hover:underline text-{{item.size}}"
+            class="text-grey-dark font-semibold no-underline hover:underline text-{{item.size}}"
           >
             {{item.text}}
             </a>

addon/tailwind/components/docs-md.css

@@ -13,14 +13,14 @@
 .docs-h2,
 .docs-md__h2 a,
 .docs-h2 a {
-  @apply mt-8 mb-4 text-grey-darkest leading-tight no-underline;
+  @apply pt-8 mb-4 text-grey-darkest leading-tight no-underline;
 }
 
 .docs-md__h3,
 .docs-h3,
 .docs-md__h3 a,
 .docs-h3 a {
-  @apply mb-2 text-grey-darkest leading-tight no-underline;
+  @apply pt-4 mb-2 text-grey-darkest leading-tight no-underline;
 }
 
 .docs-md p {

addon/tailwind/config/margin.js

@@ -25,4 +25,5 @@ export default {
   '8': '2rem',
   '12': '3rem',
   '16': '4rem',
+  '20': '5rem',
 };