Styles: Sidebar style refresh

Author: danielledeleo

assets/css/v2/style.css

@@ -83,11 +83,11 @@
   --code-copy-icon-height: 1rem;
   --code-copy-icon-width: 1rem;
   --breadcrumb-max-height: 54px;
-  --sidebar-margin: 24px;
+  --sidebar-margin: 1.5rem;
   --sidebar-line-box-side-length: 8px;
   --sidebar-line-box-top: 6px;
   --sidebar-line-box-left: 12px;
-  --sidebar-width: 24rem;
+  --sidebar-width: 22rem;
   --sidebar-line-width: 11.5px;
   --side-gutter-width: 20rem;
   --table-top-bottom-spacing: 1rem;
@@ -617,12 +617,17 @@ body:not(:has(.main-layout)) header atomic-search-interface {
 .sidebar {
   display: flex;
   flex-direction: column;
-  width: 24rem;
+  width: var(--sidebar-width);
   max-height: 100vh;
   position: sticky;
   top: 0;
-  margin-top: -1rem;
-  padding-top: 1rem;
+  padding: 1rem 1rem 0 1rem;
+}
+
+/* reset */
+.sidebar ul, .sidebar li {
+  margin: 0;
+  padding: 0;
 }
 
 .sidebar .product-selector-button {
@@ -647,9 +652,9 @@ body:not(:has(.main-layout)) header atomic-search-interface {
   display: none;
   position: absolute;
   top: 0;
-  min-width: 80%;
+  min-width: 20rem;
   margin-top: 8.375rem;
-  margin-left: 44rem;
+  margin-left: calc(var(--sidebar-width) + 20rem);
   padding: 1rem 1.5rem;
   background-color: white;
   border: black 1px solid;
@@ -688,19 +693,16 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
 .sidebar .scrollbar-container {
   width: 100%;
   max-height: 100vh;
-  overflow: scroll;
+  overflow: auto;
   scrollbar-gutter: stable;
-  scrollbar-width: none;
+  scrollbar-width: thin;
+  font-size: 0.875rem;
 }
 
 .sidebar .scrollbar-container:hover {
   overflow: auto;
 }
 
-.sidebar .sidebar-navigation {
-  margin-left: var(--sidebar-margin);
-}
-
 /* removes the built in ul padding/margin */
 .sidebar .sidebar-navigation ul {
   margin-left: 0;
@@ -709,19 +711,18 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
 }
 
 .sidebar ul :not(.sidebar-navigation) ul {
-  padding-left: 16px;
+  /* padding-left: 0.25rem; */
 }
 
 .sidebar .sidebar-navigation li {
-  margin-bottom: 16px;
 }
 
 .sidebar .sidebar-navigation a {
   text-decoration: none;
-  color: black;
 }
 
 .sidebar .sidebar-navigation .collapsible-header {
+  display: block;
   cursor: pointer;
 }
 
@@ -752,162 +753,37 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
   display: block;
 }
 
-/* Every other Sidebar Partial Vertical Line */
-.toggle-checkbox:checked ~ .collapsible-content::before {
-  content: "";
-  position: absolute;
-  border-left: black 1px solid;
-  left: -8.5px;
-  top: -22.5px;
-  height: calc(100% + 13.5px);
-}
-
-/* Every other Sidebar Partial Horizontal Lines */
-.toggle-checkbox:checked ~ .collapsible-content li {
-  position: relative;
-}
-
-.collapsible-content .box::after {
-  content: "";
-  position: absolute;
-  border-top: black 1px solid;
-  left: -11.5px;
-  width: var(--sidebar-line-width);
-  top: 50%;
-}
-
-.collapsible-content .opened::after {
-  content: "";
-  position: absolute;
-  border-top: black 1px solid;
-  left: -12.5px;
-  width: var(--sidebar-line-width);
-  top: 50%;
-}
-
-.collapsible-content .box-link::after {
-  content: "";
-  position: absolute;
-  border-top: black 1px solid;
-  left: -11.5px;
-  width: var(--sidebar-line-width);
-  top: 50%;
-}
-
-.selected {
-  font-weight: 800;
-}
-
-.sidebar .sidebar-navigation li:first-child {
-  margin-top: 16px;
-}
-
-.sidebar .sidebar-navigation ul li .parent-box-link {
-  content: "";
-  background-color: black;
-  position: absolute;
-  width: 1px;
-  height: var(--sidebar-line-box-side-length);
-  margin-top: var(--sidebar-line-box-top);
-  left: calc(0px - var(--sidebar-line-box-left));
-}
-
-.sidebar .sidebar-navigation ul li .box-link {
-  content: "";
-  background-color: black;
-  position: absolute;
-  width: 1px;
-  height: var(--sidebar-line-box-side-length);
-  margin-top: var(--sidebar-line-box-top);
-  left: var(--sidebar-line-box-left);
-}
-
-.sidebar .sidebar-navigation ul li .parent-box {
-  content: "";
-  display: inline-block;
-  width: var(--sidebar-line-box-side-length);
-  height: var(--sidebar-line-box-side-length);
-  vertical-align: middle;
-  margin-left: -12px;
-  margin-top: -4px;
-}
-
-.sidebar .sidebar-navigation ul li .box {
-  content: "";
-  position: absolute;
-  width: var(--sidebar-line-box-side-length);
-  height: var(--sidebar-line-box-side-length);
-  margin-top: var(--sidebar-line-box-top);
-  left: var(--sidebar-line-box-left);
-}
-
-.sidebar .sidebar-navigation ul li .expand {
-  background-color: black;
-}
-
-.sidebar .sidebar-navigation ul li .opened {
-  border: black 1px solid;
-}
-
-.sidebar .sidebar-navigation ul li .current {
-  background-color: oklch(var(--color-brand));
-}
-
-.sidebar .sidebar-navigation ul li .partial-box {
-  margin-left: -24px;
+ul.collapsible-content {
+  padding: 0.25rem 0;
 }
 
-.sidebar .sidebar-navigation ul li .partial {
-  margin-top: 0;
-  top: 5px;
-  left: -13px;
-}
+li.parent-collapsible-content-item {
+  padding: 0.5rem 0 0.4rem 0;
+  font-weight: 450;
 
-/* First Sidebar Nav Vertical Line */
-.sidebar .sidebar-navigation .parent-collapsible-content {
-  position: relative;
+  a, label {
+    color: black;
+    display: block;
+  }
 }
 
-.sidebar .sidebar-navigation .parent-collapsible-content:first-child::before {
-  content: "";
-  position: absolute;
-  border-left: black 1px solid;
-  left: -24px;
-  top: 10px;
-  height: calc(100% - 9px - 10px);
-}
-
-.sidebar
-  .sidebar-navigation
-  .parent-collapsible-content
-  li:not(:only-child)
-  a
-  + :not(:has(#TableOfContents))
-  li::before {
-  border: none;
-}
+ul.collapsible-content > li > a,
+#TableOfContents ul > li > a {
+  padding: 0.25rem 0.75rem;
+  margin: 2px 0.5rem 2px 0;
+  border-radius: 5px;
 
-/* First Sidebar Nav Horizontal Lines */
-.sidebar
-  .sidebar-navigation
-  .parent-collapsible-content
-  li:not(:only-child)
-  .parent-box::before {
-  content: "";
-  display: block;
-  border-top: black 1px solid;
-  margin-left: -12px;
-  margin-top: 50%;
-  width: var(--sidebar-line-width);
+  color: oklch(0 0 0 / 0.75);
+  
+  &.current {
+    color: oklch(var(--color-brand) / 1);
+    background-color: oklch(var(--color-brand) / 0.1);
+  }
 }
 
-.parent-collapsible-content .parent-box-link::after {
-  content: "";
-  position: absolute;
-  border-top: black 1px solid;
-  left: -11.5px;
-  width: var(--sidebar-line-width);
-  top: 50%;
+ul.collapsible-content .current,
+ul.parent-collapsible-content .current {
+  font-weight: 600;
 }
 
 .row {
@@ -917,9 +793,8 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
 }
 
 /* Table of Contents */
-#TableOfContents {
-  /* Close all TOC on sidebar */
-  display: none;
+#TableOfContents ul {
+  padding: 0 0 0.5rem 0.75rem;
 }
 
 .collapsible-content li ul li:has(.current) > nav {
@@ -928,16 +803,15 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
 }
 
 #TableOfContents li:not(:empty) {
-  position: relative;
-  list-style: square;
+  list-style: none;
 }
 
 /* MARK: Content
 */
 main {
   flex: 1;
   min-width: 20rem;
-  margin: 0 2rem 2rem 2rem;
+  margin: 0 2rem 2rem 0;
 }
 
 p {

exampleSite/content/test-product/call-out/_index.md

@@ -4,3 +4,5 @@ title: Call Out usages
 weight: 100
 toc: true
 ---
+
+This is a landing page for callout usages. It replaces the default list page.

exampleSite/content/test-product/call-out/all-callouts.md

@@ -3,6 +3,7 @@
 description: All Callouts
 title: All Callouts
 weight: 100
+toc: true
 ---
 
 
@@ -18,12 +19,12 @@ This is a plain callout with a title. It has a [link](#plain-callouts) to a head
 {{</call-out>}}
 
 {{<before-you-begin>}}
-This is a plain callout with a default title for its type. It has a [link](#plain-callouts) to a heading on this page. Its shortcode is `<before-you-begin>`.
+This is a plain `callout` with a default title for its type. It has a [link](#plain-callouts) to a heading on this page. Its shortcode is `<before-you-begin>`.
 {{</before-you-begin>}}
 
 ## Side Callouts
 
-Naturally, callouts should contain less text within them than the text it lives next to. We do this for several reasons. Firstly, it looks weird to have a big empty space in the primary content area. Secondly, if you have more text in the callout, then it stops being a callout. I have asked an LLM to lengthen this passage.
+Naturally, callouts should `contain` less text within them than the text it lives next to. We do this for several reasons. Firstly, it looks `weird` to have a big empty space in the primary content area. Secondly, if you have more text in the callout, then it stops being a callout. I have asked an LLM to lengthen this passage.
 
 {{<call-out "side-callout">}}
 This is a plain side callout with no title. It has a [link](#plain-callouts) to a heading on this page. Its shortcode is `<call-out>` with the `.side-callout` class.

exampleSite/content/test-product/lists/_index.md

@@ -1,4 +1,5 @@
 ---
 description: Lists
 title: Lists
+weight: 200
 ---

exampleSite/content/test-product/prose/_index.md

@@ -0,0 +1,7 @@
+---
+description: Prose
+title: Prose
+weight: 400
+---
+
+This is meant to be an overview of the different kinds of prose-heavy content we expect to find in our docs.