Shared link and code styles (#102)

* Shared link and code styles * Small vh tweak
oxidecomputer · Dec 17, 2024 · 77d3f47 · 77d3f47
1 parent 2671d53
commit 77d3f47
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 47 deletions.
diff --git a/components/src/asciidoc/TableOfContents.tsx b/components/src/asciidoc/TableOfContents.tsx
@@ -293,7 +293,7 @@ export const DesktopOutline = ({
   }
 
   if (toc && toc.length > 0) {
-    return <ul className={className}>{renderToc(toc)}</ul>
+    return <ul className={cn('toc', className)}>{renderToc(toc)}</ul>
   }
 
   return null
@@ -342,7 +342,7 @@ export const SmallScreenOutline = ({
       <Accordion.Root
         type="single"
         className={cn(
-          'sticky top-[calc(var(--header-height)-1px)] z-10 -mt-px mb-10 block w-full border-b border-t bg-default border-secondary print:hidden',
+          'toc sticky top-[calc(var(--header-height)-1px)] z-10 -mt-px mb-10 block w-full border-b border-t bg-default border-secondary print:hidden',
           className,
         )}
         collapsible
@@ -357,7 +357,7 @@ export const SmallScreenOutline = ({
             </Accordion.Trigger>
           </Accordion.Header>
 
-          <Accordion.Content className="animated-accordion hydrated max-h-[66.6vh] overflow-y-scroll w-full border-t border-secondary px-5 600:px-10">
+          <Accordion.Content className="animated-accordion hydrated max-h-[60vh] overflow-y-scroll w-full border-t border-secondary px-5 600:px-10">
             <div className="py-4">{renderToc(toc)}</div>
           </Accordion.Content>
         </Accordion.Item>

diff --git a/components/src/assets/asciidoc.css b/components/src/assets/asciidoc.css
@@ -278,13 +278,17 @@
     letter-spacing: 0;
   }
 
+  .inline-code {
+    @apply text-secondary;
+    @apply ml-[1px] mr-[1px] rounded border px-[4px] py-[1px] align-[1px] text-[0.825rem] bg-raise border-secondary;
+  }
+
   .asciidoc-body p code,
   .asciidoc-body h1 code,
   .asciidoc-body h2 code,
   .asciidoc-body h3 code,
   .asciidoc-body h4 code,
-  .asciidoc-body h5 code,
-  .asciidoc-body table code .inline-code {
+  .asciidoc-body h5 code {
     @apply text-[0.825rem] text-default;
     @apply ml-[1px] mr-[1px] rounded border px-[4px] py-[1px] align-[1px] bg-raise border-secondary;
   }
@@ -643,6 +647,69 @@
     @apply bg-raise p-4 rounded-lg my-8 px-6 py-5;
   }
 
+  #footnotes p a {
+    @apply accent-link;
+  }
+
+  #footnotes p code {
+    @apply inline-code;
+  }
+
+  .toc .active code {
+    @apply border-accent-tertiary;
+  }
+
+  .toc code {
+    @apply ml-[1px] mr-[1px] rounded border px-[3px] align-[1px] border-secondary;
+  }
+
+  .asciidoc-body a:not(:is(h1, h2, h3, h4, h5, h6) a) {
+    text-decoration-color: rgba(var(--content-accent-tertiary-rgb), 0.8);
+    @apply underline text-accent-secondary;
+  }
+
+  @media screen and (min-width: 720px) {
+    .animated-accordion[data-state='open'].hydrated {
+      animation: accordionSlideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
+    }
+    .animated-accordion[data-state='closed'].hydrated {
+      animation: accordionSlideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
+    }
+  }
+
+  @media screen and (min-width: 720px) {
+    .animated-accordion {
+      overflow: hidden;
+    }
+  }
+
+  @media screen and (prefers-reduced-motion) {
+    .animated-accordion[data-state='open'] {
+      animation-name: none;
+    }
+    .animated-accordion[data-state='closed'] {
+      animation-name: none;
+    }
+  }
+
+  @keyframes accordionSlideDown {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes accordionSlideUp {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+
   @media print {
     html {
       font-size: 14px !important;
@@ -728,46 +795,4 @@
       background-color: var(--surface-raise) !important;
     }
   }
-
-  @media screen and (min-width: 720px) {
-    .animated-accordion[data-state='open'].hydrated {
-      animation: accordionSlideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
-    }
-    .animated-accordion[data-state='closed'].hydrated {
-      animation: accordionSlideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
-    }
-  }
-
-  @media screen and (min-width: 720px) {
-    .animated-accordion {
-      overflow: hidden;
-    }
-  }
-
-  @media screen and (prefers-reduced-motion) {
-    .animated-accordion[data-state='open'] {
-      animation-name: none;
-    }
-    .animated-accordion[data-state='closed'] {
-      animation-name: none;
-    }
-  }
-
-  @keyframes accordionSlideDown {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--radix-accordion-content-height);
-    }
-  }
-
-  @keyframes accordionSlideUp {
-    from {
-      height: var(--radix-accordion-content-height);
-    }
-    to {
-      height: 0;
-    }
-  }
 }