diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index b6626dfb..11cd91b3 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -410,7 +410,7 @@ ol li:last-child { .grid-container { display: grid; grid-template-columns: var(--sidebar-width) 1fr; - grid-template-rows: var(--header-height) 1fr auto; + grid-template-rows: auto 1fr auto; grid-template-areas: "sidebar header" "sidebar content" @@ -504,23 +504,71 @@ ol li:last-child { .header { grid-area: header; display: flex; - padding: 0 var(--space-s); border-bottom: 1px solid oklch(var(--color-divider)); background: oklch(var(--color-background)); position: sticky; top: 0; z-index: 2; + .header-base { + width: 100%; + position: relative; + } + + .header-search-dropdown { + position: absolute; + width: 100%; + background: white; + border-top: 1px solid oklch(var(--color-divider)); + border-bottom: 1px solid oklch(var(--color-divider)); + padding: var(--space-m) var(--space-s); + align-items: center; + display: none; + + atomic-external { + width: 100%; + } + + atomic-search-box { + width: 100%; + + &::part(wrapper) { + border-color: oklch(var(--color-codeblock-border)); + } + + &::part(submit-button-wrapper) { + display: none; + } + + &::part(textarea) { + font-size: var(--atomic-text-base); + padding: var(--space-s) var(--space-s); + font-weight: 400; + } + + &::part(suggestions-wrapper) { + border-color: oklch(var(--color-codeblock-border)); + } + } + } + + .header-dropdown-mobile { + position: absolute; + bottom: 0; + width: 100%; + height: 8rem; + } + .header-container { display: flex; flex-direction: row; + padding: 0 var(--space-s); justify-content: space-between; flex-wrap: wrap; column-gap: 2rem; align-items: center; width: 100%; height: 64px; - position: relative; /* This is fine unless we actually want it to break document flow at super tiny viewports */ .header__logo { @@ -533,6 +581,11 @@ ol li:last-child { height: 2.5rem; } + .header__search--mobile--search--button { + cursor: pointer; + display: none; + } + .header__search { display: block; width: auto; @@ -595,7 +648,7 @@ ol li:last-child { background-color: oklch(var(--color-background)); border: oklch(var(--color-foreground)) 1px solid; box-shadow: 3px 3px 0px oklch(var(--color-shadow)); - z-index: 1; + z-index: 20; right: 0; display: none; width: 400px; @@ -811,6 +864,13 @@ ol li:last-child { /* This is our "mobile" or no sidebar breakpoint */ @media (max-width: 68rem) { + #search-standalone-header-panel:checked ~ .grid-container { + .header { + .header-search-dropdown { + display: flex; + } + } + } #sidebar-panel:not(:checked) ~ .grid-container { .header { .header__control--sidebar--close { @@ -883,6 +943,14 @@ ol li:last-child { } } + .grid-container:has(.no-sidebar) { + .header { + .header__search--mobile--search--button { + display: block; + } + } + } + .header { .product-selector { display: none; @@ -900,7 +968,9 @@ ol li:last-child { } .header-container { .header__search { - display: none; + #search-standalone-header { + display: none; + } } } } @@ -1336,6 +1406,7 @@ atomic-search-box::part(textarea-expander) { atomic-search-box::part(textarea) { padding-left: 0; padding-right: 0; + font-weight: 400; } atomic-search-box::part(wrapper) { @@ -1359,8 +1430,8 @@ atomic-search-interface#search-standalone-header { .header-search-box { &::part(wrapper) { + border-color: oklch(var(--color-codeblock-border)); border-radius: 0; - border-color: oklch(var(--color-foreground)); } &::part(textarea) { @@ -1370,7 +1441,7 @@ atomic-search-interface#search-standalone-header { &::part(suggestions-wrapper) { border-radius: 0; - border-color: oklch(var(--color-foreground)); + border-color: oklch(var(--color-codeblock-border)); width: calc(100% + 2px); margin-inline-start: -1px; } diff --git a/exampleSite/hugo.toml b/exampleSite/hugo.toml index 1ff05b37..8bc7b7b0 100644 --- a/exampleSite/hugo.toml +++ b/exampleSite/hugo.toml @@ -24,4 +24,5 @@ maxAge = -1 [params] github_repo = "https://github.com/nginxinc/nginx-hugo-theme" github_subdir = "exampleSite" - enable_last_modified = true \ No newline at end of file + enable_last_modified = true + coveo_search_redirect = "/search.html" \ No newline at end of file diff --git a/layouts/404.html b/layouts/404.html index 4fdced6e..209abd72 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -1,6 +1,6 @@ {{ define "main"}} -
+

HTTP 404 - Page not found diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index f5625a9e..4eabd547 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -41,6 +41,7 @@ {{ if or ( not hugo.IsServer ) ( not ( in .Site.Params.buildtype "package" ) ) }} {{ partial "universal-tag.html" . }} {{ end }} +