Improve styling of documentation site and use Algolia search (#7753)
* Improve styling and add Netdata logo * More CSS fixes, add Algolia search * Remove -v from cp to make output less messy * Cleanup and making more CSS improvements * Tweaks and fixed badges * Links and sidebar widths * Better search result styling * Additional CSS tweaks * Responsiveness improvements * Converting back to flexbox, a few other tweaks * Finish comment
Joel Hans committed
Jan 17, 2020 at 11:19 UTC
7e90b89786b5118c72518acf73ab86595613b32f
9 files changed
+376
-113
DOCUMENTATION.md
+58
-61
@@ -11,77 +11,74 @@ questions about Netdata, such as how to install it, getting started guides, basi
11
Or, explore all of Netdata's documentation using the table of contents to your left.
12
13
<div class="homepage-nav">
14
-
15
- <div class="nav-page">
16
- <a href="packaging/installer/">
17
- <div class="button-header">
18
- <h3>Installation guide</h3>
19
- <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"></path></svg>
20
- </div>
21
- <div class="button-text">
22
- <p>Use our automated one-line installation script to install Netdata on Linux systems or find detailed instructions for binary packages, Kubernetes, Docker, macOS, and more.</p>
23
- </div>
24
- </a>
25
- </div>
26
- <div class="nav-page">
27
- <a href="docs/step-by-step/step-00/">
28
- <div class="button-header">
29
- <h3>Step-by-step tutorial</h3>
30
- <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"></path></svg>
31
- </div>
32
- <div class="button-text">
33
- <p>Take a guided tour through each of Netdata's core features—perfect for beginners. Follow detailed instructions to monitor your systems and apps, and start your journey into performance troubleshooting.</p>
34
- </div>
35
- </a>
36
- </div>
37
- <div class="nav-page">
38
- <a href="docs/getting-started/">
39
- <div class="button-header">
40
- <h3>Getting started guide</h3>
41
- <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"></path></svg>
42
- </div>
43
- <div class="button-text">
44
- <p>Have some monitoring and system administration experience? Dive right into configuring Netdata, accessing the dashboard, working with the daemon, and changing how Netdata stores metrics.</p>
45
- </div>
46
- </a>
47
- </div>
48
- <div class="nav-page">
49
- <a href="docs/configuration-guide/">
50
- <div class="button-header">
51
- <h3>Configuration guide</h3>
52
- <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"></path></svg>
53
- </div>
54
- <div class="button-text">
55
- <p>Take your configuration options from the <em>getting started guide</em> to the next level. Increase metrics retention, modify how charts are displayed, disable collectors, and modify alarms.</p>
56
- </div>
57
- </a>
58
- </div>
59
-
14
+ <a class="nav-page" href="packaging/installer/">
15
+ <div class="button-header">
16
+ <h3>Installation guide</h3>
17
+ <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"></path></svg>
18
+ </div>
19
+ <div class="button-text">
20
+ <p>Use our automated one-line installation script to install Netdata on Linux systems or find detailed instructions for binary packages, Kubernetes, Docker, macOS, and more.</p>
21
+ </div>
22
+ </a>
23
+ <a class="nav-page" href="docs/step-by-step/step-00/">
24
+ <div class="button-header">
25
+ <h3>Step-by-step tutorial</h3>
26
+ <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"></path></svg>
27
+ </div>
28
+ <div class="button-text">
29
+ <p>Take a guided tour through each of Netdata's core features—perfect for beginners. Follow detailed instructions to monitor your systems and apps, and start your journey into performance troubleshooting.</p>
30
+ </div>
31
+ </a>
32
+ <a class="nav-page" href="docs/getting-started/">
33
+ <div class="button-header">
34
+ <h3>Getting started guide</h3>
35
+ <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"></path></svg>
36
+ </div>
37
+ <div class="button-text">
38
+ <p>Have some monitoring and system administration experience? Dive right into configuring Netdata, accessing the dashboard, working with the daemon, and changing how Netdata stores metrics.</p>
39
+ </div>
40
+ </a>
41
+ <a class="nav-page" href="docs/configuration-guide/">
42
+ <div class="button-header">
43
+ <h3>Configuration guide</h3>
44
+ <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"></path></svg>
45
+ </div>
46
+ <div class="button-text">
47
+ <p>Take your configuration options from the <em>getting started guide</em> to the next level. Increase metrics retention, modify how charts are displayed, disable collectors, and modify alarms.</p>
48
+ </div>
49
+ </a>
50
</div>
51
62
-**Netdata Cloud**: Use [Netdata Cloud](docs/netdata-cloud/) and the [Nodes View](docs/netdata-cloud/nodes-view.md) to view real-time, distributed health monitoring and performance troubleshooting data for all your systems in one place. Add as many nodes as you'd like!
52
+**Netdata Cloud**: Use [Netdata Cloud](docs/netdata-cloud/) and the [Nodes View](docs/netdata-cloud/nodes-view.md) to
53
+view real-time, distributed health monitoring and performance troubleshooting data for all your systems in one place.
54
+Add as many nodes as you'd like!
55
64
-**Advanced users**: For those who already understand how to access a Netdata dashboard and perform basic configuration, feel free to see what's behind any of these other doors.
56
+**Advanced users**: For those who already understand how to access a Netdata dashboard and perform basic configuration,
57
+feel free to see what's behind any of these other doors.
58
66
-- [Netdata Behind Nginx](docs/Running-behind-nginx.md): Use an Nginx web server instead of Netdata's built-in server to enable TLS, HTTPS, and basic authentication.
67
-- [Add More Charts](docs/Add-more-charts-to-netdata.md): Enable new internal or external plugins and understand when auto-detection works.
68
-- [Performance](docs/Performance.md): Tips on running Netdata on devices with limited CPU and RAM resources, such as embedded devices, IoT, and edge devices.
69
-- [Streaming](streaming/): Information for those who want to centralize Netdata metrics from any number of distributed agents.
70
-- [Backends](backends/): Learn how to archive Netdata's real-time metrics to a time series database (like Prometheus) for long-term archiving.
59
+- [Netdata Behind Nginx](docs/Running-behind-nginx.md): Use an Nginx web server instead of Netdata's built-in server
60
+ to enable TLS, HTTPS, and basic authentication.
61
+- [Add More Charts](docs/Add-more-charts-to-netdata.md): Enable new internal or external plugins and understand when
62
+ auto-detection works.
63
+- [Performance](docs/Performance.md): Tips on running Netdata on devices with limited CPU and RAM resources, such as
64
+ embedded devices, IoT, and edge devices.
65
+- [Streaming](streaming/): Information for those who want to centralize Netdata metrics from any number of distributed
66
+ agents.
67
+- [Backends](backends/): Learn how to archive Netdata's real-time metrics to a time series database (like Prometheus)
68
+ for long-term archiving.
69
72
-Visit the [contributing guide](CONTRIBUTING.md), [contributing to documentation guide](docs/contributing/contributing-documentation.md), and [documentation style guide](docs/contributing/style-guide.md) to learn more about our community and how you can get started contributing to Netdata.
70
+Visit the [contributing guide](CONTRIBUTING.md), [contributing to documentation
71
+guide](docs/contributing/contributing-documentation.md), and [documentation style
72
+guide](docs/contributing/style-guide.md) to learn more about our community and how you can get started contributing to
73
+Netdata.
74
74
-## Subscribe for news and tips from monitoring pros
75
+**Want to get news, how-tos, and heaps of monitoring savvy straight from Netdata? Subscribe to our newsletter to monitor
76
+our team of monitoring pros.**
77
78
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
77
-
79
<script>
80
hbspt.forms.create({
81
portalId: "4567453",
82
formId: "6a20deb5-a1e6-4312-9c4d-f6862f947fe0"
82
-});
83
+ });
84
</script>
84
-
85
----
86
-
87
-
docs/generator/buildhtml.sh
+1
-1
@@ -23,7 +23,7 @@ git clone https://github.com/netdata/go.d.plugin.git ${GO_D_DIR}
23
echo "Copying files"
24
rm -rf ${SRC_DIR}
25
mkdir ${SRC_DIR}
26
-find . -type d \( -path ./${GENERATOR_DIR} -o -path ./node_modules \) -prune -o -name "*.md" -exec cp -prv --parents '{}' ./${SRC_DIR}/ ';'
26
+find . -type d \( -path ./${GENERATOR_DIR} -o -path ./node_modules \) -prune -o -name "*.md" -exec cp -pr --parents '{}' ./${SRC_DIR}/ ';'
27
28
# Copy Netdata html resources
29
cp -a ./${GENERATOR_DIR}/custom ./${SRC_DIR}/
docs/generator/buildyaml.sh
+2
@@ -73,8 +73,10 @@ theme:
73
accent: "light green"
74
custom_dir: custom/themes/material
75
favicon: custom/img/favicon.ico
76
+ logo: custom/img/netdata_logo.svg
77
language: '${language}'
78
extra_css:
79
+ - "https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"
80
- "https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css"
81
- "custom/css/netdata.css"
82
extra_javascript:
docs/generator/custom/css/netdata.css
+301
-43
@@ -1,32 +1,267 @@
1
-/* .md-nav__link {
2
- white-space: nowrap;
3
-} */
1
+/* Fonts */
2
+@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,400i,500,700,700i&display=swap');
3
+
4
+body, input {
5
+ font-family: "IBM Plex Sans","Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
6
+}
7
8
.md-typeset {
6
- font-size: .75rem
9
+ font-size: .85rem;
10
+ line-height: 1.5;
11
+}
12
+
13
+/* Main structure */
14
+.md-container {
15
+ flex-flow: row wrap;
16
+}
17
+
18
+.md-grid {
19
+ max-width: 80rem;
20
+ display: flex;
21
+ position: relative;
22
+ overflow: visible;
23
+ flex-direction: row;
24
+ justify-content: space-between;
25
+}
26
+
27
+.md-content {
28
+ margin-right: 0;
29
+ margin-bottom: 6rem;
30
+ margin-left: 0;
31
+ max-width: 45rem;
32
+ overflow: hidden;
33
+}
34
+
35
+.md-sidebar[data-md-state="lock"] {
36
+ position: sticky;
37
+}
38
+
39
+.md-sidebar {
40
+ position: sticky;
41
+ flex: 0 0 320px;
42
+}
43
+
44
+.md-sidebar--secondary {
45
+ right: 0;
46
+ margin-left: 0;
47
+ transform: none;
48
+ order: 3;
49
+}
50
+
51
+.md-content__inner {
52
+ margin-right: 2.5rem;
53
+ margin-left: 2.5rem;
54
+}
55
+
56
+@media screen and (max-width: 76.1875em) {
57
+ .md-sidebar--primary {
58
+ position: fixed;
59
+ }
60
+}
61
+
62
+@media only screen and (max-width: 500px) {
63
+ .md-content__inner {
64
+ margin-right: 1rem;
65
+ margin-left: 1rem;
66
+ }
67
+}
68
+
69
+/*
70
+ Navigation
71
+*/
72
+
73
+.md-header-nav {
74
+ padding: 0 0.6rem;
75
+}
76
+
77
+@media only screen and (max-width: 76.25em) {
78
+ .md-header-nav {
79
+ padding: 0 2.5rem;
80
+ }
81
+}
82
+
83
+@media only screen and (max-width: 500px) {
84
+ .md-header-nav {
85
+ padding: 0.3rem 1rem;
86
+ }
87
+
88
+ .md-header-nav__title {
89
+ display: none;
90
+ }
91
}
92
9
-/* Underline text */
93
+[data-md-color-primary="blue-grey"] .md-header {
94
+ background: #35414A;
95
+}
96
+
97
+html [data-md-color-primary="blue-grey"] .md-nav--primary .md-nav__title--site {
98
+ background-color: #35414A;
99
+}
100
+
101
+[data-md-color-primary="blue-grey"] .md-nav__source {
102
+ background-color: #546e7a
103
+}
104
+
105
+.md-flex__cell {
106
+ vertical-align: middle;
107
+}
108
+
109
+.md-header-nav__button {
110
+ margin: 0;
111
+ padding: 0;
112
+ top: 2px;
113
+}
114
+
115
+/* Change the language selector dropdown to match new color. */
116
+.md-header-nav select#sel {
117
+ background-color: rgba(0,0,0,.26) !important;
118
+ padding: 3px;
119
+ margin-left: 5px;
120
+ margin-right: 20px;
121
+}
122
+
123
+@media only screen and (max-width: 500px) {
124
+ img[src='/custom/img/geography-16.png'] {
125
+ display: none;
126
+ }
127
+
128
+ .md-header-nav select#sel {
129
+ margin: 0;
130
+ }
131
+}
132
+
133
+/* Algolia search */
134
+#search_algolia {
135
+ font-size: 0.7rem;
136
+ padding: 0.4rem;
137
+ border-radius: 3px;
138
+ min-width: 300px;
139
+}
140
+
141
+@media only screen and (max-width: 76.25em) {
142
+ #search_algolia {
143
+ min-width: 100px;
144
+ }
145
+}
146
+
147
+@media only screen and (max-width: 700px) {
148
+ #search_algolia {
149
+ width: 150px;
150
+ }
151
+}
152
+
153
+@media only screen and (max-width: 500px) {
154
+ #search_algolia {
155
+ width: 100px;
156
+ }
157
+}
158
+
159
+.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
160
+ font-size: 0.9rem !important;
161
+}
162
11
-.md-typeset a:not(.nav-button):not(.md-icon):not(.headerlink) {
12
- border-bottom: 1px solid #272b30;
163
+.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
164
+ font-size: 0.7rem;
165
}
166
15
-/* Custom styling for the new documentation homepage.
16
- In particular, the three buttons for install/getting started/configuration. */
167
+.algolia-autocomplete .algolia-docsearch-suggestion--title {
168
+ font-size: 0.8rem;
169
+}
170
+
171
+.algolia-autocomplete .algolia-docsearch-suggestion--text {
172
+ font-size: 0.7rem;
173
+ line-height: 1.5;
174
+}
175
+
176
+.algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl0 .algolia-docsearch-suggestion--highlight,
177
+.algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
178
+ box-shadow: inset 0 -1px 0 0 #00CB51;
179
+}
180
+
181
+.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
182
+ color: #00AB44;
183
+ background: #F1F2F3;
184
+}
185
+
186
+@media only screen and (max-width: 768px) {
187
+ .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
188
+ font-size: 0.7rem;
189
+ font-weight: 400;
190
+ }
191
+
192
+ .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
193
+ right: -150px !important;
194
+ }
195
+
196
+ .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu::before {
197
+ right: 248px;
198
+ }
199
+}
200
+
201
+@media only screen and (max-width: 600px) {
202
+ .algolia-autocomplete .ds-dropdown-menu {
203
+ min-width: 400px;
204
+ }
205
+}
206
+
207
+/*
208
+ Left-hand navigation
209
+*/
210
+
211
+.md-nav {
212
+ font-size: 0.8rem;
213
+}
214
+
215
+/* Bold the first item on the docs sidebar: Netdata Documentation. */
216
+.md-nav--primary > .md-nav__list > .md-nav__item:first-of-type {
217
+ font-weight: 700;
218
+}
219
+
220
+/* Hide the label at the top of the navigation menu. Does nothing.
221
+ Well, it does do something on mobile, and this media query makes
222
+ sure it's hidden only on screens wide enough to not use the mobile sidebar. */
223
+@media only screen and (min-width:76.25em) {
224
+ .md-nav--primary .md-nav__title {
225
+ display: none;
226
+ }
227
+}
228
+
229
+/* Differentiate between main TOC items and sub-items. */
230
+
231
+.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link {
232
+ font-weight: 500;
233
+}
234
+
235
+[data-md-color-primary="blue-grey"] .md-nav__link--active, [data-md-color-primary="blue-grey"] .md-nav__link:active {
236
+ color: #00AB44;
237
+}
238
+
239
+/*
240
+ Documentation homepage
241
+ In particular, the three buttons for install/getting started/configuration.
242
+*/
243
.homepage-nav {
18
- display: grid;
19
- grid-template-columns: repeat(4,[col-start] 1fr);
20
- grid-gap: 2rem;
21
- margin-top: 1.4rem;
22
- margin-bottom: 2rem;
244
+ display: flex;
245
+ flex-flow: row wrap;
246
+ margin: 1.4rem -1rem 2rem -1rem;
247
}
248
249
.nav-page {
26
- grid-column: span 2;
27
- border-radius: 3px;
28
- border: 1px solid #EFEFEF;
29
- box-shadow: 0 8px 48px 4px rgba(86,91,115,0.15);
250
+ display: flex;
251
+ flex: 1 1 calc(50% - 2rem);
252
+ flex-direction: column;
253
+ margin: 1rem;
254
+ border-radius: 2px;
255
+}
256
+
257
+.md-typeset .nav-page:hover {
258
+ border: 0;
259
+}
260
+
261
+@media only screen and (max-width:76.25em) {
262
+ .nav-page {
263
+ flex: 1 1 100%;
264
+ }
265
}
266
267
.button-header {
@@ -34,17 +269,18 @@
269
display: flex;
270
align-items: center;
271
justify-content: space-between;
37
- background: linear-gradient( to right, #306BAC, #56B2FF 140%);
272
+ border: 2px solid #00AB44;
273
border-radius: 3px 3px 0 0;
274
}
275
276
.button-header h3 {
42
- color: white;
277
+ color: #35414A;
278
+ font-weight: 700;
279
margin: 0;
280
}
281
282
.button-header svg {
47
- color: white;
283
+ color: #35414A;
284
position: relative;
285
transition-property: left;
286
transition-timing-function: ease-in-out;
@@ -56,8 +292,13 @@
292
}
293
294
.button-text {
295
+ flex: 1 1 auto;
296
color: #35414A;
297
padding: 1rem 1.4rem;
298
+ border-right: 1px solid #AEB3B7;
299
+ border-bottom: 1px solid #AEB3B7;
300
+ border-left: 1px solid #AEB3B7;
301
+ border-radius: 0 0 3px 3px;
302
}
303
304
.button-text p {
@@ -74,26 +315,17 @@
315
text-align: center;
316
}
317
77
-/* Hide the label at the top of the navigation menu. Does nothing.
78
- Well, it does do something on mobile, and this media query makes
79
- sure it's hidden only on screens wide enough to not use the mobile sidebar. */
80
-@media only screen and (min-width:76.25em) {
81
- .md-nav--primary .md-nav__title {
82
- display: none;
83
- }
84
-}
85
-
86
-/* Change the language selector dropdown to match new color. */
87
-.md-header-nav select#sel {
88
- background-color: rgba(0,0,0,.26) !important;
89
- padding: 3px;
90
- margin-left: 5px;
91
- margin-right: 20px;
92
-}
318
+/*
319
+ Markdown/body content
320
+*/
321
94
-/* Add some whitespace to the bottom of each doc. */
95
-.md-content {
96
- margin-bottom: 6rem;
322
+/* Make header a bit bolder with new IBM Plex Sans font. */
323
+.md-typeset h1,
324
+.md-typeset h2,
325
+.md-typeset h3,
326
+.md-typeset h4,
327
+.md-typeset h5 {
328
+ font-weight: 500;
329
}
330
331
/* Make sure inline code in tables don't break. */
@@ -123,7 +355,33 @@
355
padding: 0;
356
}
357
126
-/* Bold the first item on the docs sidebar: Netdata Documentation */
127
-.md-nav--primary > .md-nav__list > .md-nav__item:first-of-type {
128
- font-weight: 700;
358
+/* Underline links, but not badges/icons. */
359
+.md-typeset a:not(.nav-button):not(.md-icon):not(.nav-page):not(.headerlink):not(.md-footer-social__link) {
360
+ color: #00AB44;
361
+}
362
+
363
+.md-typeset a:not(.nav-button):not(.md-icon):not(.nav-page):not(.headerlink):not(.md-footer-social__link):hover {
364
+ color: #35414A;
365
+ border-bottom: 1px solid #35414A;
366
+}
367
+
368
+/* Remove underlines on specific badges. */
369
+.md-typeset a[href='https://travis-ci.com/netdata/netdata'],
370
+.md-typeset a[href='https://bestpractices.coreinfrastructure.org/projects/2231'],
371
+.md-typeset a[href='https://www.gnu.org/licenses/gpl-3.0'],
372
+.md-typeset a[href='https://codeclimate.com/github/netdata/netdata'],
373
+.md-typeset a[href='https://www.codacy.com/app/netdata/netdata?utm_source=github.com&utm_medium=referral&utm_content=netdata/netdata&utm_campaign=Badge_Grade'],
374
+.md-typeset a[href='https://lgtm.com/projects/g/netdata/netdata/context:cpp'],
375
+.md-typeset a[href='https://lgtm.com/projects/g/netdata/netdata/context:javascript'],
376
+.md-typeset a[href='https://lgtm.com/projects/g/netdata/netdata/context:python'],
377
+.md-typeset a[href='https://hub.docker.com/r/netdata/netdata/'],
378
+.md-typeset a[href='https://hub.docker.com/r/firehol/netdata/'],
379
+.md-typeset a[href='https://hub.docker.com/r/titpetric/netdata/'],
380
+.md-typeset a[href='https://registry.my-netdata.io/#menu_netdata_submenu_registry'] {
381
+ border-bottom: 0 !important;
382
+}
383
+
384
+/* Fix the font size of admonition and details sections. */
385
+.md-typeset .admonition, .md-typeset details {
386
+ font-size: 0.75rem;
387
}
\ No newline at end of file
docs/generator/custom/img/favicon.ico
Binary files a/docs/generator/custom/img/favicon.ico and b/docs/generator/custom/img/favicon.ico differ
docs/generator/custom/img/netdata_logo.svg
new
+1
@@ -0,0 +1 @@
1
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 114 114"><defs><style>.cls-1{fill:#fff;}</style></defs><title>logo_white_fill</title><g id="mask-2"><path class="cls-1" d="M70,102H47.24L.61,12H66.79a46.65,46.65,0,0,1,46.6,46.6A43.45,43.45,0,0,1,70,102Z"/></g></svg>
\ No newline at end of file
docs/generator/custom/img/netdata_text.svg
new
+1
@@ -0,0 +1 @@
1
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 398 398"><defs><style>.cls-1{fill:#fff;}</style></defs><title>logo_white_text_white</title><g id="mask-2"><path class="cls-1" d="M70.27,244H47.51L.88,154H67.06a46.65,46.65,0,0,1,46.6,46.6A43.44,43.44,0,0,1,70.27,244Z"/></g><g id="mask-2-2" data-name="mask-2"><path class="cls-1" d="M278,214h-8l-.06-30h7a15.53,15.53,0,0,1,15.52,15.52A14.51,14.51,0,0,1,278,214Zm-6.32-1.66H278a12.85,12.85,0,0,0,12.84-12.84A13.89,13.89,0,0,0,277,185.58H271.6Z"/></g><path class="cls-1" d="M157.22,183.91h2.33l19,27.67h.08V183.91h1.86v30.17h-2.19l-19.18-27.89h-.09v27.89h-1.86Z"/><path class="cls-1" d="M198.54,183.91h20.28v1.61H200.4V197.6h17.32v1.6H200.4v13.27H219v1.61H198.54Z"/><path class="cls-1" d="M231.62,185.52v-1.61h23.11v1.61H244.08v28.56h-1.86V185.52Z"/><path class="cls-1" d="M317.44,183.91h2l11.91,30.17h-2l-3.81-9.68H311.15l-3.85,9.68h-2ZM325,202.8l-6.46-17.07h-.08l-6.72,17.07Z"/><path class="cls-1" d="M339.66,185.52v-1.61h23.11v1.61H352.13v28.56h-1.86V185.52Z"/><path class="cls-1" d="M383.18,183.91h2l11.91,30.17h-2l-3.8-9.68H376.88L373,214.08h-2Zm7.56,18.89-6.46-17.07h-.09l-6.72,17.07Z"/></svg>
\ No newline at end of file
docs/generator/custom/themes/material/partials/footer.html
+9
@@ -65,3 +65,12 @@
65
}
66
67
</script>
68
+
69
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
70
+<script type="text/javascript"> docsearch({
71
+apiKey: '3af6387793ce3d86f1b9395ad6e4bc16',
72
+indexName: 'netdata',
73
+inputSelector: '#search_algolia',
74
+debug: true // Set debug to true if you want to inspect the dropdown
75
+});
76
+</script>
\ No newline at end of file
docs/generator/custom/themes/material/partials/header.html
+3
-8
@@ -6,7 +6,7 @@
6
{% if config.theme.logo.icon %}
7
<i class="md-icon">{{ config.theme.logo.icon }}</i>
8
{% else %}
9
- <img src="{{ config.theme.logo | url }}" width="24" height="24">
9
+ <img src="{{ config.theme.logo | url }}" width="32" height="32">
10
{% endif %}
11
</a>
12
</div>
@@ -30,12 +30,7 @@
30
</div>
31
</div>
32
<div class="md-flex__cell md-flex__cell--shrink">
33
- {% block search_box %}
34
- {% if "search" in config["plugins"] %}
35
- <label class="md-icon md-icon--search md-header-nav__button" for="__search"></label>
36
- {% include "partials/search.html" %}
37
- {% endif %}
38
- {% endblock %}
33
+ <input id="search_algolia" type="text" name="search" placeholder="Search Netdata's docs...">
34
</div>
35
36
<!-- netdata -->
@@ -105,4 +100,4 @@
100
{% endif %}
101
</div>
102
</nav>
108
-</header>
103
+</header>
\ No newline at end of file