docyard 0.3.0 → 0.5.0

data/lib/docyard/templates/assets/css/components/navigation.css

@@ -53,13 +53,15 @@
 }
 
 .sidebar nav a {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
   padding: 0.5rem var(--space-3);
   font-size: 0.875rem;
   color: var(--color-text-secondary);
   text-decoration: none;
   border-radius: var(--radius-md);
-  transition: all var(--transition-fast);
+  transition: color var(--transition-fast);
   line-height: 1.4;
   font-weight: var(--font-weight-medium);
 }
@@ -148,7 +150,7 @@
   color: var(--color-text-secondary);
   text-decoration: none;
   border-radius: var(--radius-md);
-  transition: all var(--transition-fast);
+  transition: color var(--transition-fast);
   line-height: 1.4;
   font-weight: var(--font-weight-medium);
   background: none;
@@ -157,6 +159,13 @@
   cursor: pointer;
 }
 
+.nav-group-title {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex: 1;
+}
+
 .nav-group-toggle:hover {
   color: var(--color-text);
 }
@@ -167,14 +176,18 @@
 }
 
 .nav-group-icon {
+  display: inline-flex;
+  color: var(--color-text-tertiary);
+  flex-shrink: 0;
+}
+
+.nav-group-icon .docyard-icon {
   width: 1rem;
   height: 1rem;
-  color: var(--color-text-tertiary);
   transition: transform var(--transition-fast);
-  flex-shrink: 0;
 }
 
-.nav-group-toggle[aria-expanded="true"] .nav-group-icon {
+.nav-group-toggle[aria-expanded="true"] .nav-group-icon .docyard-icon {
   transform: rotate(90deg);
 }
 
@@ -225,7 +238,7 @@
   text-decoration: none;
   padding: var(--space-2);
   border-radius: var(--radius-md);
-  transition: all var(--transition-fast);
+  transition: background-color var(--transition-fast);
 }
 
 .sidebar-footer-link:hover {
@@ -256,3 +269,48 @@
   transition: opacity var(--transition-fast);
   flex-shrink: 0;
 }
+
+/* Icon styling */
+.nav-item-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.nav-item-icon .docyard-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.nav-item-text {
+  flex: 1;
+}
+
+.nav-item-external {
+  display: inline-flex;
+  align-items: center;
+  opacity: 0.5;
+  flex-shrink: 0;
+}
+
+.nav-item-external .docyard-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .sidebar nav a,
+  .nav-group-toggle,
+  .nav-group-icon .docyard-icon,
+  .nav-group-children,
+  .mobile-menu-toggle,
+  .sidebar-footer-link,
+  .external-icon {
+    transition: none;
+  }
+
+  .nav-group-toggle[aria-expanded="true"] .nav-group-icon .docyard-icon {
+    transform: none;
+  }
+}

data/lib/docyard/templates/assets/css/components/prev-next.css

@@ -0,0 +1,114 @@
+/* Previous/Next Navigation Footer */
+
+.doc-footer {
+  margin-top: 48px;
+  padding-top: 24px;
+  border-top: 1px solid var(--color-border);
+}
+
+.pager {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+}
+
+.pager-link {
+  display: block;
+  padding: 16px;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  text-decoration: none !important;
+  transition: border-color 0.25s ease, background-color 0.25s ease;
+  outline: none;
+  background-color: transparent;
+}
+
+.pager-link:hover {
+  border-color: var(--color-primary);
+  background-color: var(--color-background-soft);
+}
+
+.pager-link:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+  border-radius: 8px;
+}
+
+.pager-link.prev {
+  text-align: left;
+}
+
+.pager-link.next {
+  text-align: right;
+}
+
+.pager-label {
+  display: block;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  margin-bottom: 0px;
+  text-decoration: none !important;
+}
+
+.pager-title {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-decoration: none !important;
+}
+
+/* Mobile responsive */
+@media (max-width: 640px) {
+  .doc-footer {
+    margin-top: 48px;
+  }
+
+  .pager {
+    grid-template-columns: 1fr;
+  }
+
+  .pager-link.next {
+    margin-left: 0;
+  }
+
+  .pager-link {
+    width: 100%;
+  }
+
+  .pager-title {
+    white-space: normal;
+    word-break: break-word;
+  }
+}
+
+/* Reduced motion accessibility */
+@media (prefers-reduced-motion: reduce) {
+  .pager-link {
+    transition: none;
+  }
+}
+
+/* Print: hide navigation */
+@media print {
+  .doc-footer {
+    display: none;
+  }
+}
+
+/* Visually hidden utility (for screen readers) */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

data/lib/docyard/templates/assets/css/components/table-of-contents.css

@@ -0,0 +1,269 @@
+/* Table of Contents - Desktop & Mobile */
+
+.docyard-toc {
+  width: var(--toc-width);
+  position: fixed;
+  top: var(--header-height);
+  right: 0;
+  height: calc(100vh - var(--header-height));
+  padding: var(--space-3) var(--space-6) var(--space-3) var(--space-8);
+  overflow-y: auto;
+  overflow-x: hidden;
+  border-left: 1px solid var(--color-border);
+  background-color: var(--color-bg);
+}
+
+/* TOC Header */
+.docyard-toc__header {
+  margin-bottom: var(--space-4);
+}
+
+.docyard-toc__title {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.6875rem;
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin-bottom: 0;
+}
+
+.docyard-toc__title svg {
+  flex-shrink: 0;
+}
+
+/* Secondary Header TOC Toggle (tablet & mobile) */
+.secondary-header-toc-toggle {
+  display: none;
+}
+
+/* Tablet & Mobile TOC Toggle */
+@media (max-width: 1280px) {
+  .secondary-header-toc-toggle {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-3);
+    background: transparent;
+    border: none;
+    color: var(--color-text);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    font-family: var(--font-sans);
+    cursor: pointer;
+    transition: color var(--transition-fast);
+    outline: none;
+  }
+
+  .secondary-header-toc-toggle:hover {
+    color: var(--color-text-secondary);
+  }
+
+  .secondary-header-toc-toggle:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm);
+  }
+
+  .secondary-header-toc-toggle svg {
+    transform: rotate(-90deg);
+    transition: transform var(--transition-base);
+  }
+
+  .secondary-header-toc-toggle[aria-expanded="true"] svg {
+    transform: rotate(0deg);
+  }
+}
+
+/* TOC Navigation */
+.docyard-toc__nav {
+  display: block;
+}
+
+/* TOC List */
+.docyard-toc__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.docyard-toc__list .docyard-toc__list {
+  margin-top: var(--space-1);
+  margin-left: var(--space-4);
+  border-left: 1px solid var(--color-border);
+  padding-left: var(--space-3);
+}
+
+/* TOC Items */
+.docyard-toc__item {
+  margin-bottom: 0.375rem;
+}
+
+/* TOC Links */
+.docyard-toc__link {
+  display: block;
+  padding: 0.25rem var(--space-2);
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-tight);
+  border-radius: var(--radius-sm);
+  transition: color var(--transition-fast);
+  font-weight: var(--font-weight-medium);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.docyard-toc__link:hover {
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+.docyard-toc__link:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+/* Active link */
+.docyard-toc__link.is-active {
+  color: var(--color-primary);
+  font-weight: var(--font-weight-semibold);
+}
+
+/* Level-specific styling */
+.docyard-toc__item--level-2>.docyard-toc__link {
+  font-weight: var(--font-weight-medium);
+}
+
+.docyard-toc__item--level-3>.docyard-toc__link {
+  font-size: 0.8125rem;
+}
+
+.docyard-toc__item--level-4>.docyard-toc__link {
+  font-size: 0.8125rem;
+  color: var(--color-text-tertiary);
+}
+
+/* TOC Scrollbar */
+.docyard-toc::-webkit-scrollbar {
+  width: 0.5rem;
+}
+
+.docyard-toc::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.docyard-toc::-webkit-scrollbar-thumb {
+  background: rgba(208, 215, 222, 0.5);
+  border-radius: 0.25rem;
+}
+
+.docyard-toc::-webkit-scrollbar-thumb:hover {
+  background: rgba(208, 215, 222, 0.7);
+}
+
+.dark .docyard-toc::-webkit-scrollbar-thumb {
+  background: rgba(110, 118, 129, 0.4);
+}
+
+.dark .docyard-toc::-webkit-scrollbar-thumb:hover {
+  background: rgba(110, 118, 129, 0.6);
+}
+
+/* Tablet & Mobile Layout - TOC in secondary header */
+@media (max-width: 1280px) {
+  .docyard-toc {
+    display: block;
+    position: static;
+    width: 0;
+    height: 0;
+    padding: 0;
+    margin: 0;
+    border: none;
+    overflow: visible;
+  }
+
+  .docyard-toc__header {
+    display: none;
+  }
+
+  .docyard-toc__nav {
+    display: none;
+    position: fixed;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding: var(--space-5);
+    background: var(--color-bg);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+      0 2px 4px -1px rgba(0, 0, 0, 0.06),
+      0 0 0 1px rgba(0, 0, 0, 0.05);
+    z-index: 9999;
+    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+      opacity 0.2s ease,
+      transform 0.2s ease;
+    transform: translateY(-8px);
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .dark .docyard-toc__nav {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
+      0 2px 4px -1px rgba(0, 0, 0, 0.2),
+      0 0 0 1px rgba(255, 255, 255, 0.1);
+  }
+
+  .docyard-toc__nav.is-expanded {
+    display: block;
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+}
+
+/* Tablet-specific: floating dropdown on right */
+@media (max-width: 1280px) and (min-width: 1025px) {
+  .docyard-toc__nav {
+    top: calc(var(--header-height) + 3rem + var(--space-2));
+    right: var(--space-6);
+    width: 280px;
+    max-height: calc(100vh - var(--header-height) - 3rem - var(--space-8));
+  }
+}
+
+/* Mobile Layout (< 1024px) */
+@media (max-width: 1024px) {
+  .docyard-toc__nav {
+    top: calc(var(--header-height) + 3rem - 2px);
+    left: var(--space-4);
+    right: var(--space-4);
+    max-height: calc(100vh - var(--header-height) - 3rem - var(--space-2));
+  }
+
+  .secondary-header.shift-up~.layout .docyard-toc__nav {
+    top: calc(3rem - 2px);
+    max-height: calc(100vh - 3rem - var(--space-2));
+  }
+
+  .docyard-toc__list .docyard-toc__list {
+    margin-left: var(--space-3);
+    padding-left: var(--space-2);
+  }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .docyard-toc__link {
+    transition: none;
+  }
+
+  .secondary-header-toc-toggle svg {
+    transition: none;
+  }
+}

data/lib/docyard/templates/assets/css/components/tabs.css

@@ -62,7 +62,7 @@
   font-family: var(--font-sans);
   color: var(--color-text-secondary);
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: color 0.2s ease, background-color 0.2s ease;
   position: relative;
   white-space: nowrap;
   flex-shrink: 0;
@@ -280,7 +280,8 @@
 
 /* Reduced motion support */
 @media (prefers-reduced-motion: reduce) {
-  .docyard-tabs__tab {
+  .docyard-tabs__tab,
+  .docyard-tabs__indicator {
     transition: none;
   }
 }

data/lib/docyard/templates/assets/css/components/theme-toggle.css

@@ -59,3 +59,11 @@
 .dark .theme-toggle-thumb {
   transform: translateX(1.5rem);
 }
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .theme-toggle-track,
+  .theme-toggle-thumb {
+    transition: none;
+  }
+}

data/lib/docyard/templates/assets/css/layout.css

@@ -65,11 +65,45 @@
   border-radius: var(--radius-sm);
 }
 
-/* Secondary Header (Mobile Navigation Bar) */
+/* Secondary Header (Tablet & Mobile Navigation Bar) */
 .secondary-header {
   display: none;
 }
 
+/* Tablet: Show secondary header with TOC toggle only */
+@media (max-width: 1280px) and (min-width: 1025px) {
+  .secondary-header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    position: fixed;
+    top: var(--header-height);
+    left: var(--sidebar-width);
+    right: 0;
+    height: 3rem;
+    min-height: 3rem;
+    background: var(--color-bg);
+    border-bottom: 1px solid var(--color-border);
+    padding: 0 var(--space-6);
+    z-index: var(--z-secondary-header);
+    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1), left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02);
+  }
+
+  .secondary-header.shift-up {
+    top: 0;
+  }
+
+  .secondary-header-menu {
+    display: none;
+  }
+
+  .layout {
+    padding-top: calc(var(--header-height) + 3rem);
+  }
+}
+
+/* Mobile: Show menu button + TOC toggle */
 @media (max-width: 1024px) {
   .secondary-header {
     display: flex;
@@ -80,6 +114,7 @@
     left: 0;
     right: 0;
     height: 3rem;
+    min-height: 3rem;
     background: var(--color-bg);
     border-bottom: 1px solid var(--color-border);
     padding: 0 var(--space-6);
@@ -107,6 +142,7 @@
     transition: background-color 0.2s ease;
     font-family: var(--font-sans);
     margin-left: calc(-1 * var(--space-2));
+    outline: none;
   }
 
   .secondary-header-menu:hover {
@@ -117,6 +153,12 @@
     background-color: var(--color-border);
   }
 
+  .secondary-header-menu:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm);
+  }
+
   .secondary-header-menu .icon {
     flex-shrink: 0;
   }
@@ -176,11 +218,19 @@
 .layout-main {
   flex: 1;
   margin-left: var(--sidebar-width);
+  margin-right: var(--toc-width, 0);
   display: flex;
   flex-direction: column;
   min-width: 0;
 }
 
+/* Tablet Layout (1024px - 1280px) */
+@media (max-width: 1280px) and (min-width: 1025px) {
+  .layout-main {
+    margin-right: 0;
+  }
+}
+
 /* Content wrapper */
 main.content {
   flex: 1;
@@ -200,6 +250,7 @@ main.content {
 
   .layout {
     padding-top: calc(var(--header-height) + 3rem);
+    flex-direction: column;
   }
 
   .sidebar {
@@ -223,8 +274,14 @@ main.content {
     box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
   }
 
+  .docyard-toc {
+    order: 1;
+  }
+
   .layout-main {
     margin-left: 0;
+    margin-right: 0;
+    order: 2;
   }
 
   main.content {

data/lib/docyard/templates/assets/css/markdown.css

@@ -72,43 +72,52 @@
 }
 
 /* Tables */
+.content .table-wrapper {
+  margin: var(--space-6) 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+}
+
 .content table {
   width: 100%;
-  margin: var(--space-6) 0;
   border-collapse: collapse;
   font-size: var(--font-size-sm);
-  display: block;
-  overflow-x: auto;
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--color-border);
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.03);
+  margin: 0;
 }
 
 .content thead {
-  background-color: var(--color-bg-secondary);
+  background-color: var(--color-bg-tertiary);
 }
 
 .content th {
   padding: var(--space-3) var(--space-4);
   text-align: left;
   font-weight: var(--font-weight-semibold);
-  border-bottom: 1px solid var(--color-border);
   color: var(--color-text);
+  border-bottom: 2px solid var(--color-border);
+  white-space: nowrap;
 }
 
 .content td {
   padding: var(--space-3) var(--space-4);
-  border-bottom: 1px solid var(--color-border-secondary);
+  border-bottom: 1px solid var(--color-border);
+  white-space: nowrap;
 }
 
-.content tr:last-child td {
-  border-bottom: none;
+.content tbody tr {
+  transition: background-color var(--transition-fast);
 }
 
 .content tbody tr:hover {
   background-color: var(--color-bg-secondary);
 }
 
+.content tbody tr:last-child td {
+  border-bottom: none;
+}
+
 /* Images */
 .content img {
   max-width: 100%;

data/lib/docyard/templates/assets/css/variables.css

@@ -98,6 +98,7 @@
 
   /* Layout */
   --sidebar-width: 288px;
+  --toc-width: 280px;
   --header-height: 64px;
   --content-max-width: 800px;
   --layout-max-width: 1440px;