diff --git a/docs/index.md b/docs/index.md index 9939a9b4b..7e999138f 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,3 +1,7 @@ +--- +navigation_title: Elastic Docs v3 +--- + # Welcome to Elastic Docs v3 Elastic Docs V3 is our next-generation documentation platform designed to improve the experience of learning, using, and contributing to Elastic products. Built on a foundation of modern authoring tools and scalable infrastructure, V3 offers faster builds, streamlined versioning, and enhanced navigation to guide users through Elastic’s complex ecosystem. diff --git a/src/Elastic.Markdown/Assets/copybutton.css b/src/Elastic.Markdown/Assets/copybutton.css index 316c769da..e55e0d0ef 100644 --- a/src/Elastic.Markdown/Assets/copybutton.css +++ b/src/Elastic.Markdown/Assets/copybutton.css @@ -17,7 +17,7 @@ button.copybtn { /* The colors that GitHub uses */ border: #1b1f2426 1px solid; /*background-color: #f6f8fa;*/ - color: var(--color-gray-400); + color: var(--color-grey-50); } button.copybtn.success { @@ -73,7 +73,7 @@ div.highlight { font-size: .8em; left: -.2em; /*background: grey;*/ - color: var(--color-gray-400); + color: var(--color-grey-50); white-space: nowrap; z-index: 2; border-radius: 2px; diff --git a/src/Elastic.Markdown/Assets/markdown/code.css b/src/Elastic.Markdown/Assets/markdown/code.css index 8256145b1..164753052 100644 --- a/src/Elastic.Markdown/Assets/markdown/code.css +++ b/src/Elastic.Markdown/Assets/markdown/code.css @@ -8,7 +8,7 @@ @apply grid; code { @apply text-sm - text-gray-300 + text-grey-30 rounded-none border-0 overflow-x-auto @@ -24,7 +24,7 @@ @apply rounded-b-sm; } code.language-apiheader { - @apply border-b-1 border-b-gray-700; + @apply border-b-1 border-b-grey-100; } } @@ -70,10 +70,10 @@ code { @apply font-mono - bg-gray-100 + bg-grey-10 rounded-xs border-1 - border-gray-300 + border-grey-20 ; font-size: 0.875em; line-height: 1.4em; diff --git a/src/Elastic.Markdown/Assets/markdown/dropdown.css b/src/Elastic.Markdown/Assets/markdown/dropdown.css index fa5592f77..9ae2fee28 100644 --- a/src/Elastic.Markdown/Assets/markdown/dropdown.css +++ b/src/Elastic.Markdown/Assets/markdown/dropdown.css @@ -1,7 +1,7 @@ @layer components { .markdown-content { .dropdown { - @apply mt-4 border-1 border-gray-300 rounded-sm shadow-xs; + @apply mt-4 border-1 border-grey-20 rounded-sm shadow-xs; .dropdown-title { @apply flex justify-between @@ -15,7 +15,7 @@ } &[open] .dropdown-title { - @apply border-b-1 border-b-gray-300; + @apply border-b-1 border-b-grey-20; svg { transform: rotate(90deg); } diff --git a/src/Elastic.Markdown/Assets/markdown/list.css b/src/Elastic.Markdown/Assets/markdown/list.css index 52e10897e..446d37c4c 100644 --- a/src/Elastic.Markdown/Assets/markdown/list.css +++ b/src/Elastic.Markdown/Assets/markdown/list.css @@ -6,12 +6,12 @@ margin-left: 1.5em; /*list-style-position: inside;*/ li::marker { - @apply font-mono text-grey-80; + @apply text-grey-80; } } ul li { - @apply pl-[.5ch]; + /*@apply pl-[.5ch];*/ } li>ul, li>ol { diff --git a/src/Elastic.Markdown/Assets/markdown/tabs.css b/src/Elastic.Markdown/Assets/markdown/tabs.css index 532a2581b..6bc7a473e 100644 --- a/src/Elastic.Markdown/Assets/markdown/tabs.css +++ b/src/Elastic.Markdown/Assets/markdown/tabs.css @@ -3,13 +3,13 @@ @apply flex flex-wrap relative overflow-hidden mt-4; .tabs-label { - @apply cursor-pointer px-6 py-2 z-20 text-ink-light flex items-center border-1 border-gray-200 -mb-[1px]; + @apply cursor-pointer px-6 py-2 z-20 text-ink-light flex items-center border-1 border-grey-20 -mb-[1px]; &:not(:nth-of-type(1)) { margin-left: -1px; } &:hover { - @apply border-b-1 border-b-black text-black bg-gray-100; + @apply border-b-1 border-b-black text-black bg-grey-10; } } @@ -18,7 +18,7 @@ } .tabs-content { - @apply w-full order-99 border-1 border-gray-200 px-6 z-0 hidden pb-6 pt-2; + @apply w-full order-99 border-1 border-grey-20 px-6 z-0 hidden pb-6 pt-2; } .tabs-input:checked+.tabs-label+.tabs-content { diff --git a/src/Elastic.Markdown/Assets/markdown/typography.css b/src/Elastic.Markdown/Assets/markdown/typography.css index 4d59c9392..1519200bc 100644 --- a/src/Elastic.Markdown/Assets/markdown/typography.css +++ b/src/Elastic.Markdown/Assets/markdown/typography.css @@ -54,6 +54,6 @@ } a { - @apply font-body text-blue-elastic hover:text-blue-800 underline; + @apply font-body text-blue-elastic hover:text-blue-elastic-100 underline; } } diff --git a/src/Elastic.Markdown/Assets/styles.css b/src/Elastic.Markdown/Assets/styles.css index 472d55bd4..fb30b216f 100644 --- a/src/Elastic.Markdown/Assets/styles.css +++ b/src/Elastic.Markdown/Assets/styles.css @@ -11,16 +11,27 @@ @import "./markdown/table.css"; @import "./markdown/definition-list.css"; -#default-search::-webkit-search-cancel-button { - padding-right: calc(var(--spacing) * 2); - -webkit-appearance: none; - height: 16px; - width: 16px; - margin-left: .4em; - background-image: url("data:image/svg+xml;utf8,"); - cursor: pointer; - background-repeat: no-repeat; -} + +:root { + --outline-size: max(2px, 0.08em); + --outline-style: auto; + --outline-color: var(--color-blue-elastic); + --outline-offset: 5; + --header-height: calc(var(--spacing) * 21); + --banner-height: calc(var(--spacing) * 9); + --offset-height: calc(var(--header-height) + var(--banner-height)); +} + +/*#default-search::-webkit-search-cancel-button {*/ +/* padding-right: calc(var(--spacing) * 2);*/ +/* -webkit-appearance: none;*/ +/* height: 16px;*/ +/* width: 16px;*/ +/* margin-left: .4em;*/ +/* background-image: url("data:image/svg+xml;utf8,");*/ +/* cursor: pointer;*/ +/* background-repeat: no-repeat;*/ +/*}*/ #pages-nav li.current { position: relative; @@ -31,7 +42,7 @@ left: -1px; width: calc(var(--spacing) * 6); height: 1px; - background-color: var(--color-gray-200); + background-color: var(--color-grey-10); } } @@ -49,7 +60,7 @@ text-blue-elastic text-nowrap font-semibold - hover:text-blue-800 + hover:text-blue-elastic-100 inline-flex justify-center items-center; @@ -72,8 +83,8 @@ .sidebar { .sidebar-nav { - @apply sticky top-21 z-30 overflow-y-auto; - max-height: calc(100vh - var(--spacing) * 22); + @apply sticky top-(--offset-height) z-30 overflow-y-auto; + max-height: calc(100vh - var(--offset-height)); scrollbar-gutter: stable; } @@ -81,11 +92,11 @@ @apply text-ink-light hover:text-black - text-sm + lg:text-sm text-wrap inline-block leading-[1.3em] - tracking-[-0.02em]; + tracking-[-0.02em] } } @@ -95,7 +106,7 @@ .applies { @apply font-sans; - border-bottom: 1px solid var(--color-gray-300); + border-bottom: 1px solid var(--color-grey-20); padding-bottom: calc(var(--spacing) * 3); .applies-to-label { @@ -113,7 +124,7 @@ font-size: 0.8em; border-radius: 0.4em; background-color: var(--color-white); - border: 1px solid var(--color-gray-300); + border: 1px solid var(--color-grey-20); } } } @@ -122,12 +133,7 @@ scroll-margin-top: calc(var(--spacing) * 26); } -:root { - --outline-size: max(2px, 0.08em); - --outline-style: auto; - --outline-color: var(--color-blue-elastic); - --outline-offset: 5; -} + :is(a, button, input, textarea, summary):focus { outline: var(--outline-size) var(--outline-style) var(--outline-color); diff --git a/src/Elastic.Markdown/Assets/theme.css b/src/Elastic.Markdown/Assets/theme.css index ac705780d..b9318cc9d 100644 --- a/src/Elastic.Markdown/Assets/theme.css +++ b/src/Elastic.Markdown/Assets/theme.css @@ -1,9 +1,10 @@ @theme { - /*--color-*: initial;*/ --font-sans: "Mier B", "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-body: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --color-*: initial; + --color-white: #FFFFFF; --color-black: #000000; @@ -13,10 +14,6 @@ --color-ink-light: #535966; --color-ink-dark: #1C1E23; - --color-gray: #E6EBF2; - --color-gray-light: #F5F7FA; - --color-gray-dark: #D4DAE5; - --color-blue-sky: #36B9FF; --color-blue-midnight: #20377D; --color-blue-developer: #101C3F; diff --git a/src/Elastic.Markdown/Slices/Layout/_Breadcrumbs.cshtml b/src/Elastic.Markdown/Slices/Layout/_Breadcrumbs.cshtml index cc71473ce..bedacc541 100644 --- a/src/Elastic.Markdown/Slices/Layout/_Breadcrumbs.cshtml +++ b/src/Elastic.Markdown/Slices/Layout/_Breadcrumbs.cshtml @@ -1,8 +1,8 @@ @using Elastic.Markdown.Helpers @inherits RazorSlice - diff --git a/src/Elastic.Markdown/Slices/Layout/_Header.cshtml b/src/Elastic.Markdown/Slices/Layout/_Header.cshtml index b722fbedd..86c6df859 100644 --- a/src/Elastic.Markdown/Slices/Layout/_Header.cshtml +++ b/src/Elastic.Markdown/Slices/Layout/_Header.cshtml @@ -101,18 +101,41 @@ ] }; } - -
- -
-
-
-
-
- - Elastic - +
+ +
+
+ + Elastic + @if (Model.Features.IsPrimaryNavEnabled) { @await RenderPartialAsync(_PrimaryNav.Create(primaryNavViewModel)) @@ -121,76 +144,39 @@ {
} - -
+
@if (Model.Features.IsPrimaryNavEnabled) { - + @await RenderPartialAsync(_SecondaryNav.Create(Model)) } diff --git a/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml b/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml index 71fbca700..1b5a0f457 100644 --- a/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml +++ b/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml @@ -1,13 +1,20 @@ @inherits RazorSlice -