docyard 0.8.0 → 1.0.0

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

@@ -0,0 +1,122 @@
+.docyard-steps {
+  margin: var(--spacing-6) 0;
+}
+
+.docyard-step {
+  display: flex;
+  gap: var(--spacing-4);
+  position: relative;
+}
+
+.docyard-step:not(.docyard-step--last) {
+  padding-bottom: var(--spacing-6);
+}
+
+.docyard-step__indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.docyard-step__number {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  flex-shrink: 0;
+}
+
+.docyard-step__connector {
+  width: 2px;
+  flex: 1;
+  background-color: var(--border);
+  margin-top: var(--spacing-2);
+}
+
+.docyard-step__content {
+  flex: 1;
+  min-width: 0;
+  padding-top: var(--spacing-1);
+}
+
+.docyard-step__title {
+  margin: 0;
+  font-size: var(--text-base);
+  font-weight: var(--font-semibold);
+  color: var(--foreground);
+  line-height: var(--leading-tight);
+}
+
+.docyard-step__body {
+  margin-top: var(--spacing-3);
+  font-size: var(--text-sm);
+  color: var(--muted-foreground);
+  line-height: var(--leading-relaxed);
+}
+
+.docyard-step__body > *:first-child {
+  margin-top: 0;
+}
+
+.docyard-step__body > *:last-child {
+  margin-bottom: 0;
+}
+
+.docyard-step__body p {
+  margin: var(--spacing-2) 0;
+}
+
+.docyard-step__body a {
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.docyard-step__body a:hover {
+  color: var(--foreground);
+}
+
+.docyard-step__body pre {
+  margin: var(--spacing-4) 0;
+  border-radius: var(--radius-lg);
+}
+
+.docyard-step__body :not(pre) > code {
+  background-color: var(--muted);
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.875em;
+}
+
+.docyard-step__body ul,
+.docyard-step__body ol {
+  margin: var(--spacing-2) 0;
+  padding-left: var(--spacing-4);
+}
+
+.docyard-step__body li {
+  margin: var(--spacing-1) 0;
+}
+
+@media (max-width: 640px) {
+  .docyard-step {
+    gap: var(--spacing-3);
+  }
+
+  .docyard-step__number {
+    width: 1.75rem;
+    height: 1.75rem;
+    font-size: var(--text-xs);
+  }
+
+  .docyard-step__title {
+    font-size: var(--text-sm);
+  }
+}

data/lib/docyard/templates/assets/css/components/tab-bar.css

@@ -62,7 +62,8 @@
   opacity: 0.7;
 }
 
-.tab-icon .docyard-icon {
+.tab-icon .docyard-icon,
+.tab-icon i[class*="ph-"] {
   width: 16px;
   height: 16px;
 }
@@ -89,10 +90,12 @@
   border-radius: 2px 2px 0 0;
   pointer-events: none;
   view-transition-name: tab-indicator;
+  opacity: 0;
 }
 
 .tab-indicator.is-ready {
-  transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  opacity: 1;
+  transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease;
 }
 
 /* View Transitions API - animate indicator between pages */
@@ -133,9 +136,9 @@
   top: calc(var(--header-height) + var(--tab-bar-height));
 }
 
-/* Hide tab bar on mobile */
+/* Hide tab bar on mobile - use .has-tabs for specificity to override .has-tabs .tab-bar { display: block } */
 @media (max-width: 1024px) {
-  .tab-bar {
+  .has-tabs .tab-bar {
     display: none;
   }
 

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

@@ -107,12 +107,19 @@
     box-shadow: 0 0 0 var(--ring-width) oklch(from var(--ring) l c h / 50%);
   }
 
-  .secondary-header-toc-toggle svg {
+  .secondary-header-toc-toggle .docyard-icon {
     transform: rotate(-90deg);
     transition: transform var(--transition-base);
   }
 
-  .secondary-header-toc-toggle[aria-expanded="true"] svg {
+  .secondary-header-toc-toggle i[class*="ph-"] {
+    display: inline-block;
+    transform: rotate(-90deg);
+    transition: transform var(--transition-base);
+  }
+
+  .secondary-header-toc-toggle[aria-expanded="true"] .docyard-icon,
+  .secondary-header-toc-toggle[aria-expanded="true"] i[class*="ph-"] {
     transform: rotate(0deg);
   }
 }
@@ -216,7 +223,6 @@
   }
 
   .docyard-toc__nav {
-    display: none;
     position: fixed;
     overflow-y: auto;
     overscroll-behavior: contain;
@@ -226,19 +232,26 @@
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-lg);
     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);
+    transform: scale(0.95) translateY(-8px);
+    transform-origin: top right;
     opacity: 0;
+    visibility: hidden;
     pointer-events: none;
+    transition:
+      transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+      opacity 0.15s ease-out,
+      visibility 0.2s;
   }
 
   .docyard-toc__nav.is-expanded {
-    display: block;
+    transform: scale(1) translateY(0);
     opacity: 1;
-    transform: translateY(0);
+    visibility: visible;
     pointer-events: auto;
+    transition:
+      transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
+      opacity 0.2s ease-out,
+      visibility 0s;
   }
 }
 
@@ -249,6 +262,11 @@
     width: 280px;
     max-height: calc(100vh - var(--header-height) - 3rem - var(--spacing-8));
   }
+
+  .has-tabs .docyard-toc__nav {
+    top: calc(var(--header-height) + var(--tab-bar-height) + 3rem + var(--spacing-2));
+    max-height: calc(100vh - var(--header-height) - var(--tab-bar-height) - 3rem - var(--spacing-8));
+  }
 }
 
 @media (max-width: 1024px) {
@@ -257,6 +275,7 @@
     left: var(--spacing-4);
     right: var(--spacing-4);
     max-height: calc(100vh - var(--header-height) - 3rem - var(--spacing-2));
+    transform-origin: top center;
   }
 
   .secondary-header.shift-up ~ .layout .docyard-toc__nav {
@@ -270,13 +289,40 @@
   }
 }
 
+/* Adjust TOC dropdown position when announcement banner is visible */
+@media (max-width: 1280px) and (min-width: 1025px) {
+  body.has-announcement .docyard-toc__nav {
+    top: calc(var(--header-height) + var(--announcement-height) + 3rem + var(--spacing-2));
+    max-height: calc(100vh - var(--header-height) - var(--announcement-height) - 3rem - var(--spacing-8));
+  }
+
+  body.has-announcement.has-tabs .docyard-toc__nav {
+    top: calc(var(--header-height) + var(--tab-bar-height) + var(--announcement-height) + 3rem + var(--spacing-2));
+    max-height: calc(100vh - var(--header-height) - var(--tab-bar-height) - var(--announcement-height) - 3rem - var(--spacing-8));
+  }
+}
+
+@media (max-width: 1024px) {
+  body.has-announcement .docyard-toc__nav {
+    top: calc(var(--header-height) + var(--announcement-height) + 3rem - 2px);
+    max-height: calc(100vh - var(--header-height) - var(--announcement-height) - 3rem - var(--spacing-2));
+  }
+
+  body.has-announcement .secondary-header.shift-up ~ .layout .docyard-toc__nav {
+    top: calc(var(--announcement-height) + 3rem - 2px);
+    max-height: calc(100vh - var(--announcement-height) - 3rem - var(--spacing-2));
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .docyard-toc__link,
-  .docyard-toc__indicator {
+  .docyard-toc__indicator,
+  .docyard-toc__nav {
     transition: none;
   }
 
-  .secondary-header-toc-toggle svg {
+  .secondary-header-toc-toggle .docyard-icon,
+  .secondary-header-toc-toggle i[class*="ph-"] {
     transition: none;
   }
 }

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

@@ -74,7 +74,8 @@
   flex-shrink: 0;
 }
 
-.docyard-tabs__icon .docyard-icon {
+.docyard-tabs__icon .docyard-icon,
+.docyard-tabs__icon i[class*="ph-"] {
   width: 1rem;
   height: 1rem;
   display: inline-flex;
@@ -90,17 +91,23 @@
   bottom: 0;
   left: 0;
   height: 2px;
-  background: var(--foreground);
+  background: var(--primary);
   border-radius: 1px;
   pointer-events: none;
   z-index: 1;
-  
+  opacity: 0;
+
   transition:
     transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
-    width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
+    opacity 0.15s ease;
   will-change: transform, width;
 }
 
+.docyard-tabs__indicator.is-ready {
+  opacity: 1;
+}
+
 .docyard-tabs__scroll-indicator {
   position: absolute;
   top: 0;
@@ -230,7 +237,8 @@
     gap: var(--spacing-1);
   }
 
-  .docyard-tabs__icon .docyard-icon {
+  .docyard-tabs__icon .docyard-icon,
+  .docyard-tabs__icon i[class*="ph-"] {
     width: 0.875rem;
     height: 0.875rem;
   }

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

@@ -39,7 +39,9 @@
 }
 
 .theme-toggle-sun .docyard-icon,
-.theme-toggle-moon .docyard-icon {
+.theme-toggle-moon .docyard-icon,
+.theme-toggle-sun i[class*="ph-"],
+.theme-toggle-moon i[class*="ph-"] {
   width: 1.125rem;
   height: 1.125rem;
 }

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

@@ -0,0 +1,113 @@
+.docyard-tooltip {
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: var(--muted-foreground);
+  text-underline-offset: 3px;
+  cursor: help;
+  position: relative;
+}
+
+.docyard-tooltip:hover {
+  text-decoration-color: var(--primary);
+}
+
+.docyard-tooltip-popover {
+  position: absolute;
+  z-index: 1000;
+  width: max-content;
+  max-width: 300px;
+  padding: var(--spacing-3) var(--spacing-4);
+  background: var(--background);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow:
+    0 4px 6px -1px oklch(from var(--foreground) l c h / 8%),
+    0 2px 4px -2px oklch(from var(--foreground) l c h / 6%);
+  pointer-events: none;
+  opacity: 0;
+  transform: translateY(-4px) scale(0.96);
+  transition:
+    opacity 0.15s ease,
+    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.docyard-tooltip-popover.is-visible {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  pointer-events: auto;
+}
+
+.docyard-tooltip-popover::after {
+  content: "";
+  position: absolute;
+  bottom: -6px;
+  left: var(--arrow-left, 16px);
+  width: 10px;
+  height: 10px;
+  background: var(--background);
+  border-bottom: 1px solid var(--border);
+  border-right: 1px solid var(--border);
+  transform: rotate(45deg);
+}
+
+.docyard-tooltip-popover__term {
+  display: block;
+  font-weight: var(--font-semibold);
+  font-size: var(--text-sm);
+  color: var(--foreground);
+  margin-bottom: var(--spacing-1);
+}
+
+.docyard-tooltip-popover__description {
+  display: block;
+  font-size: var(--text-sm);
+  color: var(--muted-foreground);
+  line-height: var(--leading-relaxed);
+}
+
+.docyard-tooltip-popover__link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  margin-top: var(--spacing-2);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--foreground);
+  text-decoration: none;
+}
+
+.docyard-tooltip-popover__link:hover {
+  color: var(--primary);
+}
+
+.docyard-tooltip-popover__link-icon {
+  width: 14px;
+  height: 14px;
+  transition: transform 0.15s ease;
+}
+
+.docyard-tooltip-popover__link:hover .docyard-tooltip-popover__link-icon {
+  transform: translateX(2px);
+}
+
+.docyard-tooltip-popover.is-below::after {
+  top: -6px;
+  bottom: auto;
+  border-bottom: none;
+  border-right: none;
+  border-top: 1px solid var(--border);
+  border-left: 1px solid var(--border);
+}
+
+@media (max-width: 640px) {
+  .docyard-tooltip-popover {
+    max-width: 260px;
+    padding: var(--spacing-2) var(--spacing-3);
+  }
+
+  .docyard-tooltip-popover__term,
+  .docyard-tooltip-popover__description,
+  .docyard-tooltip-popover__link {
+    font-size: var(--text-xs);
+  }
+}

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

@@ -0,0 +1,41 @@
+.docyard-video {
+  position: relative;
+  width: 100%;
+  margin: var(--spacing-6) 0;
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  background-color: var(--muted);
+  aspect-ratio: 16 / 9;
+}
+
+.docyard-video iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.docyard-video[style*="height"] {
+  aspect-ratio: unset;
+}
+
+.docyard-callout__body .docyard-video {
+  margin: var(--spacing-4) 0;
+}
+
+.docyard-callout__body .docyard-video:first-child {
+  margin-top: 0;
+}
+
+.docyard-callout__body .docyard-video:last-child {
+  margin-bottom: 0;
+}
+
+@media (max-width: 640px) {
+  .docyard-video {
+    margin: var(--spacing-4) 0;
+    border-radius: var(--radius-lg);
+  }
+}

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

@@ -73,15 +73,15 @@
 
 .hero-bg--grid {
   background-image:
-    linear-gradient(oklch(0 0 0 / 0.06) 1px, transparent 1px),
-    linear-gradient(90deg, oklch(0 0 0 / 0.06) 1px, transparent 1px);
-  background-size: 100px 100px;
+    linear-gradient(oklch(0 0 0 / 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, oklch(0 0 0 / 0.03) 1px, transparent 1px);
+  background-size: 60px 60px;
 }
 
 .dark .hero-bg--grid {
   background-image:
-    linear-gradient(oklch(1 0 0 / 0.08) 1px, transparent 1px),
-    linear-gradient(90deg, oklch(1 0 0 / 0.08) 1px, transparent 1px);
+    linear-gradient(oklch(1 0 0 / 0.04) 1px, transparent 1px),
+    linear-gradient(90deg, oklch(1 0 0 / 0.04) 1px, transparent 1px);
 }
 
 .hero-bg--grid::after {
@@ -249,7 +249,7 @@
   background: linear-gradient(135deg,
       var(--foreground) 0%,
       var(--foreground) 40%,
-      oklch(from var(--primary) calc(l + 0.1) c h) 100%);
+      oklch(from var(--primary) calc(l - 0.15) c h) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -314,12 +314,12 @@
 
 .hero-action--secondary {
   background: transparent;
-  color: var(--foreground);
-  border: 1px solid var(--border);
+  color: var(--muted-foreground);
+  border: none;
 }
 
 .hero-action--secondary:hover {
-  background: var(--muted);
+  background: transparent;
   color: var(--foreground);
 }
 
@@ -382,6 +382,70 @@
   display: block;
 }
 
+.hero-custom-visual {
+  position: relative;
+  z-index: 1;
+}
+
+.hero-custom-visual--side {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hero-custom-visual--bottom {
+  width: 100%;
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 0 var(--spacing-6);
+  margin-bottom: var(--spacing-2);
+}
+
+.hero--with-bottom-visual {
+  min-height: auto;
+  height: auto;
+  align-items: flex-start;
+  padding-top: 10rem;
+  padding-bottom: var(--spacing-4);
+}
+
+.hero--with-bottom-visual .hero-content {
+  padding-top: 0;
+  padding-bottom: var(--spacing-16);
+}
+
+@media (max-width: 1024px) {
+  .hero-custom-visual--side {
+    grid-column: 1 / -1;
+    order: 1;
+    width: 100%;
+    max-width: 1100px;
+    margin: 0 auto;
+    padding: 0 var(--spacing-4);
+    margin-bottom: var(--spacing-2);
+  }
+
+  .hero--with-image:has(.hero-custom-visual--side) {
+    min-height: auto;
+    height: auto;
+    padding-top: 7rem;
+    padding-bottom: var(--spacing-4);
+  }
+
+  .hero--with-image:has(.hero-custom-visual--side) .hero-content {
+    padding-top: 0;
+    padding-bottom: var(--spacing-16);
+  }
+
+  .hero-custom-visual--bottom {
+    padding: 0 var(--spacing-4);
+  }
+
+  .hero--with-bottom-visual {
+    padding-top: 7rem;
+  }
+}
+
 .features-section {
   padding: var(--spacing-16) var(--spacing-6) var(--spacing-20);
   background: linear-gradient(180deg, var(--background) 0%, oklch(from var(--background) calc(l + 0.02) c h) 100%);
@@ -394,7 +458,7 @@
 .features-header {
   text-align: center;
   max-width: 600px;
-  margin: 0 auto var(--spacing-12);
+  margin: 0 auto var(--spacing-20);
 }
 
 .features-label {
@@ -407,15 +471,15 @@
 }
 
 .features-title {
-  font-size: var(--text-2xl);
-  font-weight: var(--font-semibold);
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 700;
   color: var(--foreground);
   margin: 0 0 var(--spacing-3) 0;
 }
 
 .features-description {
   color: var(--muted-foreground);
-  font-size: var(--text-base);
+  font-size: var(--text-lg);
   margin: 0;
   line-height: 1.6;
 }
@@ -478,6 +542,7 @@
   flex-direction: column;
   gap: var(--spacing-4);
   padding: var(--spacing-6);
+  height: 100%;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius-xl);
@@ -746,6 +811,10 @@ a.feature-card:active {
     padding: var(--spacing-10) var(--spacing-4) var(--spacing-12);
   }
 
+  .hero-custom-visual--bottom + .features-section {
+    padding-top: var(--spacing-2);
+  }
+
   .features-header {
     margin-bottom: var(--spacing-8);
   }

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

@@ -34,6 +34,7 @@ html:has(.has-tabs) {
   backdrop-filter: blur(12px);
   z-index: var(--z-header);
   transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform;
 }
 
 .header.hide-on-scroll {
@@ -200,6 +201,7 @@ html:has(.has-tabs) {
     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);
+    will-change: top, left;
   }
 
   .secondary-header.shift-up {
@@ -232,6 +234,7 @@ html:has(.has-tabs) {
     z-index: var(--z-secondary-header);
     transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02);
+    will-change: top;
   }
 
   .secondary-header.shift-up {
@@ -715,6 +718,13 @@ main.content {
 
 @media (max-width: 1280px) and (min-width: 1025px) {
   .doc-aside {
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: visible;
+  }
+
+  .doc-aside .doc-footer-desktop {
     display: none;
   }
 
@@ -736,6 +746,13 @@ main.content {
 
 @media (max-width: 1024px) {
   .doc-aside {
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: visible;
+  }
+
+  .doc-aside .doc-footer-desktop {
     display: none;
   }