diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index df120970..e0008af0 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -249,12 +249,11 @@ textarea:not([rows]) {
--grid-gutter: var(--space-s-l, clamp(1rem, 0.4975rem + 2.5126vw, 2.25rem));
--grid-columns: 12;
- /* TODO: This aligns the logo in the header perfectly with the one in the sidebar, but
- this is not a safe way to do it, and likely to get out of sync */
- --header-height: 93px;
+ --header-height: 4rem;
--sidebar-width: 22rem;
- --sidebar-item-padding: 0.25rem 0.75rem;
+ --sidebar-item-padding-lr: 0.75rem;
+ --sidebar-item-padding-tb: 0.25rem;
--content-max-width: 88rem;
--main-col: minmax(34rem, 50rem);
@@ -352,14 +351,31 @@ ol li:last-child {
@media (max-width: 68rem) {
grid-template-columns: 1fr;
grid-template-areas:
- "header"
- "content"
- "footer";
+ "sidebar header"
+ "sidebar content"
+ "sidebar footer";
+
+ .text-content {
+ margin-top: 1rem;
+ }
+
+ .breadcrumb-layout {
+ border-bottom: 1px solid oklch(var(--color-divider));
+ align-items: center;
+ padding: var(--space-xs) 0;
+ }
+ }
+ .content {
+ padding: 0 var(--space-s) 2rem;
}
.header__logo {
display: none;
}
+
+ .header__logo-small {
+ display: none;
+ }
}
/* Homepage specific layout */
@@ -370,15 +386,14 @@ ol li:last-child {
"content"
"footer";
- .sidebar {
- display: none;
- }
-
.header__logo {
display: unset;
}
- .header__product-selector {
+ .sidebar,
+ .header__product-selector,
+ .header__sidebar__panel,
+ .header__logo-small {
display: none;
}
}
@@ -404,11 +419,19 @@ ol li:last-child {
grid-area: header;
display: flex;
padding: 0 var(--space-s);
+ border-bottom: 1px solid oklch(var(--color-divider));
+
+ background: rgba(255, 255, 255, 0.5);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ position: sticky;
+ top: 0;
+ z-index: 1;
.header-container {
display: flex;
flex-direction: row;
- justify-content: space-between;
+ justify-content: space-around;
align-items: center;
width: 100%;
@@ -418,16 +441,26 @@ ol li:last-child {
}
.header__search {
+ display: block;
width: 14rem;
+ /* This is a horrible hack to stop coveo overflowing 3500px for no reason. :sad */
+ transform: translateY(0);
+ overflow: hidden;
}
.header__product-selector {
width: 10rem;
+ background: rgba(0, 0, 0, 0);
+ color: oklch(var(--color-foreground));
+ text-decoration-color: oklch(var(--color-brand) / 0.3);
+ & :hover {
+ color: oklch(var(--color-brand));
+ }
.product-selector__button {
display: flex;
align-items: center;
- background: oklch(var(--color-background));
+ background: rgba(0, 0, 0, 0);
border: none;
width: 16rem;
font-weight: 500;
@@ -502,32 +535,78 @@ ol li:last-child {
margin-top: auto;
}
+/* sidebar toggling */
+#sidebar-panel:checked ~ .grid-container {
+ grid-template-columns: 1fr;
+ grid-template-areas:
+ "header"
+ "content"
+ "footer";
+
+ .sidebar {
+ display: none;
+ }
+
+ .header__sidebar__panel {
+ display: flex;
+ align-self: center;
+ }
+
+ .header {
+ .header__logo-small {
+ display: unset;
+ }
+ }
+}
+
/* sidebar layout */
+
+.header__sidebar__panel,
+.sidebar__panel {
+ cursor: pointer;
+ color: var(--color-foreground);
+ label {
+ cursor: pointer;
+ }
+
+ :hover {
+ color: oklch(var(--color-brand));
+ }
+}
+
+.header__sidebar__panel {
+ display: none;
+}
+
.sidebar {
grid-area: sidebar;
position: fixed;
top: 0;
left: 0;
width: var(--sidebar-width);
- height: 100vh;
+ /* for sticky header, this needs to be calculated to avoid extra whitespace */
+ height: calc(110vh - var(--header-height));
border-right: 1px solid oklch(var(--color-divider));
overflow: hidden;
background: oklch(var(--color-background));
box-sizing: border-box;
transform: translateX(0);
- padding: var(--space-s) 0 var(--space-s) var(--space-s);
+ padding: 0 0 var(--space-s) var(--space-s);
.sidebar__container {
display: grid;
- grid-template-rows: auto 1fr;
+ grid-template-rows: var(--header-height) 1fr;
height: 100%;
.sidebar__header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
position: sticky;
top: 0;
background: oklch(var(--color-background));
z-index: 1;
- padding: var(--sidebar-item-padding);
+ padding: 0 2.25rem 0 var(--sidebar-item-padding-lr);
.sidebar__img {
height: 2rem;
@@ -542,9 +621,62 @@ ol li:last-child {
scrollbar-gutter: stable;
}
}
+
+ .sidebar__search {
+ display: none;
+ }
}
+/* This is our "mobile" or no sidebar breakpoint */
@media (max-width: 68rem) {
+ #sidebar-panel:checked ~ .grid-container {
+ .sidebar {
+ /* Above search */
+ z-index: 11;
+ display: block;
+ transform: translateX(0);
+ border-bottom: 1px solid oklch(var(--color-divider));
+
+ position: fixed;
+ top: 0;
+ left: 0;
+
+ .sidebar__content__wrapper {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .sidebar__search {
+ display: unset;
+ width: calc(var(--sidebar-width) - 4rem);
+ margin-left: 1rem;
+ }
+ }
+ }
+
+ .header {
+ .header__logo-small {
+ display: unset;
+ img {
+ margin: 0;
+ }
+ }
+ .header-container {
+ .header__search {
+ display: none;
+ }
+ }
+ }
+
+ .header__product-selector {
+ display: none;
+ }
+
+ .header__sidebar__panel {
+ display: flex;
+ align-items: center;
+ }
+
.sidebar {
grid-area: sidebar;
position: absolute;
@@ -555,10 +687,6 @@ ol li:last-child {
transform: translateX(-100%);
}
- #sidebar-toggle:checked ~ .sidebar {
- transform: translateX(0);
- }
-
.sidebar-button {
display: block;
margin-bottom: 1rem;
@@ -760,93 +888,15 @@ nav {
width: 100%;
}
-@media (max-width: 88rem) {
- .content-layout .breadcrumb-layout {
- position: sticky;
- top: 0;
- z-index: 3;
- }
-
- body:has(.sidebar__mobile-open) {
- /* Disable scrolling in main content + hide footer if the sidebar is visible */
- overflow-y: hidden;
-
- .sidebar-layout {
- position: absolute;
- height: 100%;
- }
-
- footer {
- display: none;
- }
-
- .sidebar-layout .sidebar__mobile__toggle {
- display: flex;
- align-items: center;
- position: sticky;
- top: 1rem;
- margin-top: 2rem;
- margin-left: 2rem;
- margin-right: 2rem;
- padding: 0.5rem;
- color: white;
- background-color: oklch(var(--color-brand));
- }
- }
-
- .sidebar__mobile__toggle {
- background-color: transparent;
- border: none;
-
- .lucide {
- margin-right: 1rem;
- }
- }
-
- .main-layout {
- /* Mobile support for sidebar */
- display: flex;
- flex-direction: column;
- position: relative;
-
- .sidebar-layout {
- min-height: fit-content;
- background: white;
- z-index: 999;
- width: calc(100% + 4rem);
- margin-left: -2rem;
-
- &::before {
- display: none;
- }
-
- nav {
- width: 100%;
- display: none;
- top: var(--sidebar-mobile-top-displacement);
- max-height: calc(100vh - var(--sidebar-mobile-top-displacement));
- padding: 0 2rem;
-
- .sidebar__container {
- width: 100%;
- }
- }
- }
-
- .content-layout {
- .breadcrumb-layout .sidebar__mobile__toggle {
- display: inline;
- padding: 0;
- }
- }
- }
-
- main {
- margin: 0 2rem 2rem 2rem;
- }
+main {
+ margin: 0 var(--space-s) var(--space-s) var(--space-s);
}
@media (min-width: 88em) {
+ .header__logo {
+ display: unset;
+ }
+
.text-content {
grid-template-columns: var(--grid-content) var(--grid-side-callout);
grid-template-rows: 3rem max-content;
@@ -906,6 +956,10 @@ nav {
--atomic-border-radius-md: 0;
--atomic-border-radius: 0;
--atomic-font-family: var(--font-family);
+
+ atomic-search-box {
+ z-index: 0;
+ }
}
atomic-search-interface {
@@ -1022,7 +1076,7 @@ body:not(:has(.main-layout)) header atomic-search-interface {
display: none;
position: absolute;
top: 0;
- margin-top: 4em;
+ margin-top: calc(var(--header-height) - 1rem);
padding: 1rem 1.5rem;
background-color: oklch(var(--color-background));
border: oklch(var(--color-foreground)) 1px solid;
@@ -1097,7 +1151,7 @@ nav.sidebar.sidebar__mobile-open {
}
.sidebar__container button {
- padding: var(--sidebar-item-padding);
+ padding: var(--sidebar-item-padding-tb) var(--sidebar-item-padding-lr);
justify-content: space-between;
}
@@ -1159,7 +1213,7 @@ nav.sidebar.sidebar__mobile-open {
.sidebar__link {
display: block;
- padding: var(--sidebar-item-padding);
+ padding: var(--sidebar-item-padding-tb) var(--sidebar-item-padding-lr);
margin: 2px 0 2px 0;
border-radius: 5px 0 0 5px;
color: oklch(0 0 0 / 0.75);
@@ -1904,7 +1958,6 @@ figure {
img,
.figure-bitmap {
- margin-bottom: 0.625rem;
display: inline-block;
width: auto;
max-width: 100%;
diff --git a/assets/js/coveo.js b/assets/js/coveo.js
index a1cd00ab..0d8798fe 100644
--- a/assets/js/coveo.js
+++ b/assets/js/coveo.js
@@ -36,6 +36,7 @@ async function atomicCoveo() {
/* Initialize the interfaces with credentials */
const searchPageInterface = document.querySelector('#search-v2');
const searchBarHeader = document.querySelector('#search-standalone-header');
+ const searchBarSidebar = document.querySelector('#search-standalone-sidebar');
if (searchPageInterface) {
await searchPageInterface.initialize({
@@ -53,21 +54,41 @@ async function atomicCoveo() {
await searchPageInterface.executeFirstSearch();
}
- /* Initialize the header searchbar*/
- await searchBarHeader.initialize({
- accessToken: token,
- organizationId: org_id,
- analytics: { analyticsMode: 'legacy' },
- preprocessRequest: (request) => {
- const body = JSON.parse(request.body);
- body.q = `<@- ${body.q} -@>`;
- request.body = JSON.stringify(body);
+ /* Initialize the header searchbar */
+ if (searchBarHeader) {
+ await searchBarHeader.initialize({
+ accessToken: token,
+ organizationId: org_id,
+ analytics: { analyticsMode: 'legacy' },
+ preprocessRequest: (request) => {
+ const body = JSON.parse(request.body);
+ body.q = `<@- ${body.q} -@>`;
+ request.body = JSON.stringify(body);
- return request;
- },
- });
+ return request;
+ },
+ });
- await searchBarHeader.executeFirstSearch();
+ await searchBarHeader.executeFirstSearch();
+ }
+
+ /* Initialize the sidebar searchbar */
+ if (searchBarSidebar) {
+ await searchBarSidebar.initialize({
+ accessToken: token,
+ organizationId: org_id,
+ analytics: { analyticsMode: 'legacy' },
+ preprocessRequest: (request) => {
+ const body = JSON.parse(request.body);
+ body.q = `<@- ${body.q} -@>`;
+ request.body = JSON.stringify(body);
+
+ return request;
+ },
+ });
+
+ await searchBarSidebar.executeFirstSearch();
+ }
}
document.addEventListener('DOMContentLoaded', async () => {
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index e00ee014..4046f384 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 }}
+