Skip to content

Commit 590fcb6

Browse files
reakaleekreakaleek
authored
Add mobile navigations (#662)
* Add mobile navigations * Remove landing-page feature toggle
1 parent 9f50a62 commit 590fcb6

19 files changed

+305
-204
lines changed

‎docs/index.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
---
2+
navigation_title: Elastic Docs v3
3+
---
4+
15
# Welcome to Elastic Docs v3
26

37
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.

‎src/Elastic.Markdown/Assets/copybutton.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ button.copybtn {
1717
/* The colors that GitHub uses */
1818
border: #1b1f2426 1px solid;
1919
/*background-color: #f6f8fa;*/
20-
color: var(--color-gray-400);
20+
color: var(--color-grey-50);
2121
}
2222

2323
button.copybtn.success {
@@ -73,7 +73,7 @@ div.highlight {
7373
font-size: .8em;
7474
left: -.2em;
7575
/*background: grey;*/
76-
color: var(--color-gray-400);
76+
color: var(--color-grey-50);
7777
white-space: nowrap;
7878
z-index: 2;
7979
border-radius: 2px;

‎src/Elastic.Markdown/Assets/markdown/code.css

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
@apply grid;
99
code {
1010
@apply text-sm
11-
text-gray-300
11+
text-grey-30
1212
rounded-none
1313
border-0
1414
overflow-x-auto
@@ -24,7 +24,7 @@
2424
@apply rounded-b-sm;
2525
}
2626
code.language-apiheader {
27-
@apply border-b-1 border-b-gray-700;
27+
@apply border-b-1 border-b-grey-100;
2828
}
2929
}
3030

@@ -70,10 +70,10 @@
7070

7171
code {
7272
@apply font-mono
73-
bg-gray-100
73+
bg-grey-10
7474
rounded-xs
7575
border-1
76-
border-gray-300
76+
border-grey-20
7777
;
7878
font-size: 0.875em;
7979
line-height: 1.4em;

‎src/Elastic.Markdown/Assets/markdown/dropdown.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@layer components {
22
.markdown-content {
33
.dropdown {
4-
@apply mt-4 border-1 border-gray-300 rounded-sm shadow-xs;
4+
@apply mt-4 border-1 border-grey-20 rounded-sm shadow-xs;
55
.dropdown-title {
66
@apply flex
77
justify-between
@@ -15,7 +15,7 @@
1515
}
1616

1717
&[open] .dropdown-title {
18-
@apply border-b-1 border-b-gray-300;
18+
@apply border-b-1 border-b-grey-20;
1919
svg {
2020
transform: rotate(90deg);
2121
}

‎src/Elastic.Markdown/Assets/markdown/list.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@
66
margin-left: 1.5em;
77
/*list-style-position: inside;*/
88
li::marker {
9-
@apply font-mono text-grey-80;
9+
@apply text-grey-80;
1010
}
1111
}
1212

1313
ul li {
14-
@apply pl-[.5ch];
14+
/*@apply pl-[.5ch];*/
1515
}
1616

1717
li>ul, li>ol {

‎src/Elastic.Markdown/Assets/markdown/tabs.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
@apply flex flex-wrap relative overflow-hidden mt-4;
44

55
.tabs-label {
6-
@apply cursor-pointer px-6 py-2 z-20 text-ink-light flex items-center border-1 border-gray-200 -mb-[1px];
6+
@apply cursor-pointer px-6 py-2 z-20 text-ink-light flex items-center border-1 border-grey-20 -mb-[1px];
77
&:not(:nth-of-type(1)) {
88
margin-left: -1px;
99
}
1010

1111
&:hover {
12-
@apply border-b-1 border-b-black text-black bg-gray-100;
12+
@apply border-b-1 border-b-black text-black bg-grey-10;
1313
}
1414
}
1515

@@ -18,7 +18,7 @@
1818
}
1919

2020
.tabs-content {
21-
@apply w-full order-99 border-1 border-gray-200 px-6 z-0 hidden pb-6 pt-2;
21+
@apply w-full order-99 border-1 border-grey-20 px-6 z-0 hidden pb-6 pt-2;
2222
}
2323

2424
.tabs-input:checked+.tabs-label+.tabs-content {

‎src/Elastic.Markdown/Assets/markdown/typography.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,6 @@
5454
}
5555

5656
a {
57-
@apply font-body text-blue-elastic hover:text-blue-800 underline;
57+
@apply font-body text-blue-elastic hover:text-blue-elastic-100 underline;
5858
}
5959
}

‎src/Elastic.Markdown/Assets/styles.css

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,27 @@
1111
@import "./markdown/table.css";
1212
@import "./markdown/definition-list.css";
1313

14-
#default-search::-webkit-search-cancel-button {
15-
padding-right: calc(var(--spacing) * 2);
16-
-webkit-appearance: none;
17-
height: 16px;
18-
width: 16px;
19-
margin-left: .4em;
20-
background-image: url("data:image/svg+xml;utf8,<svg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 24 24'><path stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18 17.94 6M18 18 6.06 6'/></svg>");
21-
cursor: pointer;
22-
background-repeat: no-repeat;
23-
}
14+
15+
:root {
16+
--outline-size: max(2px, 0.08em);
17+
--outline-style: auto;
18+
--outline-color: var(--color-blue-elastic);
19+
--outline-offset: 5;
20+
--header-height: calc(var(--spacing) * 21);
21+
--banner-height: calc(var(--spacing) * 9);
22+
--offset-height: calc(var(--header-height) + var(--banner-height));
23+
}
24+
25+
/*#default-search::-webkit-search-cancel-button {*/
26+
/* padding-right: calc(var(--spacing) * 2);*/
27+
/* -webkit-appearance: none;*/
28+
/* height: 16px;*/
29+
/* width: 16px;*/
30+
/* margin-left: .4em;*/
31+
/* background-image: url("data:image/svg+xml;utf8,<svg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 24 24'><path stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18 17.94 6M18 18 6.06 6'/></svg>");*/
32+
/* cursor: pointer;*/
33+
/* background-repeat: no-repeat;*/
34+
/*}*/
2435

2536
#pages-nav li.current {
2637
position: relative;
@@ -31,7 +42,7 @@
3142
left: -1px;
3243
width: calc(var(--spacing) * 6);
3344
height: 1px;
34-
background-color: var(--color-gray-200);
45+
background-color: var(--color-grey-10);
3546
}
3647
}
3748

@@ -49,7 +60,7 @@
4960
text-blue-elastic
5061
text-nowrap
5162
font-semibold
52-
hover:text-blue-800
63+
hover:text-blue-elastic-100
5364
inline-flex
5465
justify-center
5566
items-center;
@@ -72,20 +83,20 @@
7283

7384
.sidebar {
7485
.sidebar-nav {
75-
@apply sticky top-21 z-30 overflow-y-auto;
76-
max-height: calc(100vh - var(--spacing) * 22);
86+
@apply sticky top-(--offset-height) z-30 overflow-y-auto;
87+
max-height: calc(100vh - var(--offset-height));
7788
scrollbar-gutter: stable;
7889
}
7990

8091
.sidebar-link {
8192
@apply
8293
text-ink-light
8394
hover:text-black
84-
text-sm
95+
lg:text-sm
8596
text-wrap
8697
inline-block
8798
leading-[1.3em]
88-
tracking-[-0.02em];
99+
tracking-[-0.02em]
89100
}
90101
}
91102

@@ -95,7 +106,7 @@
95106

96107
.applies {
97108
@apply font-sans;
98-
border-bottom: 1px solid var(--color-gray-300);
109+
border-bottom: 1px solid var(--color-grey-20);
99110
padding-bottom: calc(var(--spacing) * 3);
100111

101112
.applies-to-label {
@@ -113,7 +124,7 @@
113124
font-size: 0.8em;
114125
border-radius: 0.4em;
115126
background-color: var(--color-white);
116-
border: 1px solid var(--color-gray-300);
127+
border: 1px solid var(--color-grey-20);
117128
}
118129
}
119130
}
@@ -122,12 +133,7 @@
122133
scroll-margin-top: calc(var(--spacing) * 26);
123134
}
124135

125-
:root {
126-
--outline-size: max(2px, 0.08em);
127-
--outline-style: auto;
128-
--outline-color: var(--color-blue-elastic);
129-
--outline-offset: 5;
130-
}
136+
131137

132138
:is(a, button, input, textarea, summary):focus {
133139
outline: var(--outline-size) var(--outline-style) var(--outline-color);

‎src/Elastic.Markdown/Assets/theme.css

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
@theme {
2-
/*--color-*: initial;*/
32

43
--font-sans: "Mier B", "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
54
--font-body: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
65

6+
--color-*: initial;
7+
78
--color-white: #FFFFFF;
89
--color-black: #000000;
910

@@ -13,10 +14,6 @@
1314
--color-ink-light: #535966;
1415
--color-ink-dark: #1C1E23;
1516

16-
--color-gray: #E6EBF2;
17-
--color-gray-light: #F5F7FA;
18-
--color-gray-dark: #D4DAE5;
19-
2017
--color-blue-sky: #36B9FF;
2118
--color-blue-midnight: #20377D;
2219
--color-blue-developer: #101C3F;

‎src/Elastic.Markdown/Slices/Layout/_Breadcrumbs.cshtml

Lines changed: 47 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
@using Elastic.Markdown.Helpers
22
@inherits RazorSlice<LayoutViewModel>
3-
<ol id="breadcrumbs" class="block w-full" itemscope="" itemtype="https://schema.org/BreadcrumbList">
4-
<li class="inline text-ink text-sm hover:text-ink leading-[1.2em] tracking-[-0.02em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
5-
<a
3+
<ol id="breadcrumbs" class="block items-center w-full py-6" itemscope="" itemtype="https://schema.org/BreadcrumbList">
4+
<li class="inline text-grey-80 text-sm leading-[1.2em] tracking-[-0.02em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
5+
<a
66
itemprop="item"
77
href="@Model.Link("/")"
88
hx-get="@Model.Link("/")"
@@ -11,14 +11,51 @@
1111
hx-push-url="true"
1212
hx-indicator="#htmx-indicator"
1313
preload="@Htmx.GetPreload()"
14-
>
15-
<span itemprop="name" class="hover:text-ink">Elastic</span>
14+
>
15+
<span itemprop="name" class="hover:text-black">
16+
Home
17+
</span>
1618
</a>
1719
<meta itemprop="position" content="1">
1820
</li>
19-
@foreach (var item in Model.Parents.Reverse().Skip(1))
21+
@{
22+
var firstCrumb = Model.Parents.Reverse().Skip(1).FirstOrDefault();
23+
}
24+
@if (firstCrumb != null)
25+
{
26+
<li class="inline text-grey-80 text-sm leading-[1.2em] tracking-[-0.02em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
27+
<span class="px-1">/</span>
28+
<a
29+
itemprop="item"
30+
href="@firstCrumb.Url"
31+
hx-get="@firstCrumb.Url"
32+
hx-select-oob="@Htmx.GetHxSelectOob(Model.Features, Model.UrlPathPrefix, firstCrumb.Url, Model.CurrentDocument.Url)"
33+
hx-swap="none"
34+
hx-push-url="true"
35+
hx-indicator="#htmx-indicator"
36+
preload="@Htmx.GetPreload()"
37+
>
38+
<span itemprop="name" class="hover:text-black">@firstCrumb.NavigationTitle</span>
39+
</a>
40+
<meta itemprop="position" content="2">
41+
</li>
42+
}
43+
@{
44+
var crumbs = Model.Parents.Reverse().Skip(2).TakeLast(2).ToList();
45+
}
46+
47+
@if (crumbs.Count < Model.Parents.Reverse().Skip(2).Count())
2048
{
21-
<li class="inline text-gray-500 text-sm leading-[1.2em] tracking-[-0.02em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
49+
<li class="inline text-grey-80 text-sm leading-[1.2em] tracking-[-0.02em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
50+
<span class="px-1">/</span>
51+
…
52+
</li>
53+
}
54+
55+
@for (var i = 0; i < crumbs.Count; i++)
56+
{
57+
var item = crumbs[i];
58+
<li class="inline text-grey-80 text-sm leading-[1.2em] tracking-[-0.02em] text-pretty" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
2259
<span class="px-1">/</span>
2360
<a
2461
itemprop="item"
@@ -30,12 +67,12 @@
3067
hx-indicator="#htmx-indicator"
3168
preload="@Htmx.GetPreload()"
3269
>
33-
<span itemprop="name" class="hover:text-ink">@item.NavigationTitle</span>
70+
<span itemprop="name" class="hover:text-black">@item.NavigationTitle</span>
3471
</a>
35-
<meta itemprop="position" content="2">
72+
<meta itemprop="position" content="@(i+2)">
3673
</li>
3774
}
38-
<li class="inline text-gray-500 text-sm leading-[1.2em] tracking-[-0.02em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
75+
<li class="inline text-grey-80 text-sm leading-[1.2em] tracking-[-0.02em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
3976
<span class="px-1">/</span>
4077
</li>
4178
</ol>

0 commit comments

Comments
 (0)