diff --git a/css/index.css b/css/index.css index 8ef8416..536a7fb 100644 --- a/css/index.css +++ b/css/index.css @@ -29,8 +29,8 @@ - Contrast controls how contrast the text colors will be. */ --theme-hue: 255; - --theme-saturation: 0.2; /* 0...1 where 0 means grayscale colors; 1 means fully saturated colors */ - --theme-contrast: 0.8; /* 0...1 where 0 means low contrast; 1 means high contrast, black-n-white in fact */ + --theme-saturation: 0.3; /* 0...1 where 0 means grayscale colors; 1 means fully saturated colors */ + --theme-contrast: 0.85; /* 0...1 where 0 means low contrast; 1 means high contrast, black-n-white in fact */ /* Fonts */ --font-text: "Inter Variable", Arial, sans-serif; @@ -98,6 +98,7 @@ --color-gradient-bg-end: #0081ff00; --color-gradient-promo-start: #800069; --color-gradient-promo-end: #005196; + --color-focus: #0081ff; } .theme-light { @@ -145,6 +146,8 @@ --color-gradient-promo-start: #ffd2f7; --color-gradient-promo-end: #b9dfff; + + --color-focus: var(--color-accent); } .theme-dark { @@ -196,6 +199,8 @@ --color-gradient-promo-start: #800069; --color-gradient-promo-end: #005196; + + --color-focus: var(--color-accent); } .page-container { @@ -223,6 +228,11 @@ body { line-height: var(--line-height-paragraph-m); } +:focus-visible { + outline: 2px solid var(--color-focus); + outline-offset: 2px; +} + /* Headers */ h1, @@ -577,15 +587,21 @@ section { border-radius: var(--radius-l); max-width: 1008px; padding: 12px 12px 12px 16px; - z-index: 1000; + z-index: 300; } .nav-brand { display: flex; + gap: 16px; align-items: center; justify-content: center; } +.nav-menu { + display: flex; + gap: 0; +} + .nav-link { color: var(--color-text-secondary); font-size: var(--font-size-m); diff --git a/css/search.css b/css/search.css new file mode 100644 index 0000000..6f2fb30 --- /dev/null +++ b/css/search.css @@ -0,0 +1,47 @@ +:root { + --docsearch-key-color: var(--color-text-secondary); + --docsearch-muted-color: var(--color-text-secondary); +} + +.search-container { + padding: 0 !important; + background-color: var(--color-surface); + box-shadow: none !important; + + &:hover { + background-color: var(--color-border-level-2) !important; + } +} + +#docsearch button { + background: transparent; + border: none; + border-radius: var(--radius-s); +} + +.DocSearch-Button-Keys { + box-shadow: inset 0 0 0 1px var(--color-border-level-3); + border-radius: var(--radius-xs); + min-width: 0px; +} + +.DocSearch-Button-Key { + background-color: transparent; + width: 20px; + height: 20px; + border: none; +} + +.DocSearch-Button-Key:first-child { + margin-right: -10px; +} + +.DocSearch-Button-Placeholder { + font-size: var(--font-size-s); + line-height: var(--line-height-ui-s); + font-weight: var(--ui-button-font-weight); +} + +#docsearch-input:focus-within { + outline: none; +} diff --git a/index.html b/index.html index f9e1132..bc4e119 100644 --- a/index.html +++ b/index.html @@ -33,20 +33,27 @@ + + + + +
- Logo Template +
+ Logo Template +
+
+
+ +

How do I integrate search?

+ + +
+

+ To integrate search into your documentation: +

+
    +
  1. + Go to docsearch.algolia.com, sign up, and + set up your documentation database. +
    2. +
  2. + Go to src/js/config.js and replace credentials with yours +
    3. +
+
+
+

How do I add a new page?

@@ -549,6 +577,7 @@

Start using our product today

+ \ No newline at end of file diff --git a/js/search.js b/js/search.js new file mode 100644 index 0000000..f433feb --- /dev/null +++ b/js/search.js @@ -0,0 +1,26 @@ +/** + * To integrate search into your documentation: + * 1. Go to https://docsearch.algolia.com/, sign up, and set up your documentation database. + * 2. Replace the following constants with the credentials found in your dashboard: + */ + +const APP_ID = "BH4D9OD16A"; +const INDEX_NAME = "docsearch"; +const API_KEY = "25626fae796133dc1e734c6bcaaeac3c"; + +function initializeDocSearch() { + window.docsearch({ + container: "#docsearch", + appId: APP_ID, + indexName: INDEX_NAME, + apiKey: API_KEY, + placeholder: "Search documentation…", + searchParameters: { + facetFilters: [], + }, + }); +} + +document.addEventListener("DOMContentLoaded", () => { + initializeDocSearch(); +}); diff --git a/licenses.html b/licenses.html index c657fb9..cf14777 100644 --- a/licenses.html +++ b/licenses.html @@ -21,20 +21,27 @@ + + + + +
- Logo Template +
+ Logo Template +
+
+ \ No newline at end of file diff --git a/pricing.html b/pricing.html index 0e4a6ed..c468ff7 100644 --- a/pricing.html +++ b/pricing.html @@ -20,13 +20,18 @@ + + + + + @@ -34,8 +39,10 @@
- Logo Template +
+ Logo Template +
+
+ \ No newline at end of file