fixed outline

nimiq · Apr 8, 2024 · 74a34d9 · 74a34d9
1 parent 3d49c8b
commit 74a34d9
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 35 deletions.
diff --git a/.vitepress/theme/components/Doc.vue b/.vitepress/theme/components/Doc.vue
@@ -34,8 +34,8 @@ const pageName = computed(() =>
         <main class="main">
           <MarkdownContent
             :class="[
-              frontmatter.layout === 'home' || frontmatter.prose !== false && 'prose children:pb-40 children:md:pb-64',
-              frontmatter.prose === false ? `px-32 md:px-96 pb-64 md:pb-128` : '',
+              frontmatter.layout === 'home' || frontmatter.prose !== false && 'prose children:pb-40 children:md:pb64',
+              frontmatter.prose === false ? `px-32 md:px96 pb64 md:pb128` : '',
               pageName,
               theme.externalLinkIcon && 'external-link-icon-enabled',
             ]"
@@ -259,7 +259,7 @@ div[class*="language"] {
   --uno: my-24 rounded-6 p-24 pb-14 text-16 ring-1.5;
 
   .custom-block-title {
-    --uno: uppercase font-bold tracking-widest text-12 flex items-center relative;
+    --uno: uppercase font-bold tracking-widest text-12 flex items-center relative m-0;
 
     &::before {
       --uno: absolute content-[''] text-12 left-0;

diff --git a/.vitepress/theme/components/DocAside.vue b/.vitepress/theme/components/DocAside.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { onContentUpdated } from 'vitepress'
 import { ref, shallowRef } from 'vue'
+import { onContentUpdated } from '../utils/markdown-content'
 import { useData } from '../composables/useData'
 import {
   type MenuItem,
@@ -10,12 +10,12 @@ import {
 } from '../composables/useOutline'
 import DocAsideItem from './DocAsideItem.vue'
 
-const { frontmatter, theme } = useData()
+const { theme } = useData()
 
 const headers = shallowRef<MenuItem[]>([])
 
 onContentUpdated(() => {
-  headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline)
+  headers.value = getHeaders([2, 3])
 })
 
 const container = ref()
@@ -39,7 +39,7 @@ useActiveAnchor(container, marker)
       </div>
 
       <nav aria-labelledby="doc-outline-aria-label">
-        <span id="doc-outline-aria-label" class="visually-hidden">
+        <span id="doc-outline-aria-label" sr-only>
           Table of Contents for current page
         </span>
         <DocAsideItem :headers="headers" :root="true" />
@@ -66,24 +66,14 @@ useActiveAnchor(container, marker)
 }
 
 .outline-marker {
-  position: absolute;
-  top: 32px;
-  left: -1px;
-  z-index: 0;
-  opacity: 0;
-  width: 2px;
-  border-radius: 2px;
-  height: 18px;
-  background-color: var(--vp-c-brand-1);
+  --uno: absolute top-16 left--1 z-0 opacity-0 w-2 rounded-2 h-18 bg-blue;
   transition:
     top 0.25s cubic-bezier(0, 1, 0.5, 1),
     background-color 0.5s,
     opacity 0.25s;
 }
 
 .outline-title {
-  line-height: 32px;
-  font-size: 14px;
-  font-weight: 600;
+  --uno: text-neutral-700 uppercase leading-relaxed text-12 font-bold;
 }
 </style>
diff --git a/.vitepress/theme/components/DocAsideItem.vue b/.vitepress/theme/components/DocAsideItem.vue
@@ -39,21 +39,16 @@ function onClick({ target: el }: Event) {
 }
 
 .outline-link {
-  display: block;
-  line-height: 32px;
-  font-size: 14px;
-  font-weight: 400;
-  color: var(--vp-c-text-2);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  transition: color 0.5s;
-}
+  --uno: block lh-32 text-14 text-neutral whitespace-nowrap overflow-hidden text-ellipsis;
+  transition: 300ms ease-in-out color, 100ms ease-in-out font-weight;
+
+  &:is(:hover) {
+    --uno: text-blue;
+  }
 
-.outline-link:hover,
-.outline-link.active {
-  color: var(--vp-c-text-1);
-  transition: color 0.25s;
+  &:is(.active) {
+    --uno: font-bold text-blue;
+  }
 }
 
 .outline-link.nested {

diff --git a/.vitepress/theme/composables/useOutline.ts b/.vitepress/theme/composables/useOutline.ts
@@ -22,7 +22,7 @@ export function resolveTitle(theme: DefaultTheme.Config) {
 
 export function getHeaders(range: DefaultTheme.Config['outline']) {
   const headers = [
-    ...Array.from(document.querySelectorAll('.VPDoc :where(h1,h2,h3,h4,h5,h6)')),
+    ...Array.from(document.querySelectorAll('.prose :where(h1,h2,h3,h4,h5,h6)')),
   ]
     .filter(el => el.id && el.hasChildNodes())
     .map((el) => {
@@ -190,7 +190,7 @@ export function useActiveAnchor(
 
     if (activeLink) {
       activeLink.classList.add('active')
-      marker.value.style.top = `${activeLink.offsetTop + 39}px`
+      marker.value.style.top = `${activeLink.offsetTop + 27}px`
       marker.value.style.opacity = '1'
     }
     else {