From ddcd45bb457215afcd74f3d2bf995c7687604ff1 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Thu, 3 Oct 2024 17:27:42 +0200
Subject: [PATCH] docs: Add tweaks to the outline panel page (#18697)

Thought we could be extra clear here with the meaning of "singleton
buffers".

Release Notes:

- N/A
---
 docs/src/outline-panel.md    | 13 +++++++++----
 docs/theme/css/general.css   |  1 +
 docs/theme/css/variables.css |  4 ++++
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/docs/src/outline-panel.md b/docs/src/outline-panel.md
index 998f310076f01b5a3416652792215bbddc9b0236..bc743596d6bcb198250d9073a43481ddd3d4f250 100644
--- a/docs/src/outline-panel.md
+++ b/docs/src/outline-panel.md
@@ -2,25 +2,30 @@
 
 In addition to the modal outline (`cmd-shift-o`), Zed offers an outline panel. The outline panel can be deployed via `cmd-shift-b` (`outline panel: toggle focus` via the command palette), or by clicking the `Outline Panel` button in the status bar.
 
-When viewing a "singleton" buffer, the outline panel works similarly to that of the outline modal - it displays the outline of the current buffer's symbols, as reported by tree-sitter. Clicking on an entry allows you to jump to the associated section in the file. The outline view will also automatically scroll to the section associated with the current cursor position within the file.
+When viewing a "singleton" buffer (i.e., a single file on a tab), the outline panel works similarly to that of the outline modal－it displays the outline of the current buffer's symbols, as reported by tree-sitter. Clicking on an entry allows you to jump to the associated section in the file. The outline view will also automatically scroll to the section associated with the current cursor position within the file.
 
 ![Using the outline panel in a singleton buffer](https://zed.dev/img/outline-panel/singleton.png)
 
+## Usage with multibuffers
+
 The outline panel truly excels when used with multi-buffers. Here are some examples of its versatility:
 
-1. Project Search Results:
+### Project Search Results
 
 Get an overview of search results across your project.
+
 ![Using the outline panel in a project search multi-buffer](https://zed.dev/img/outline-panel/project-search.png)
 
-2. Project Diagnostics:
+### Project Diagnostics
 
 View a summary of all errors and warnings reported by the language server.
+
 ![Using the outline panel while viewing project diagnostics multi-buffer](https://zed.dev/img/outline-panel/project-diagnostics.png)
 
-3. Find All References:
+### Find All References
 
 Quickly navigate through all references when using the `editor: find all references` action.
+
 ![Using the outline panel while viewing `find all references` multi-buffer](https://zed.dev/img/outline-panel/find-all-references.png)
 
 The outline view provides a great way to quickly navigate to specific parts of your code and helps you maintain context when working with large result sets in multi-buffers.
diff --git a/docs/theme/css/general.css b/docs/theme/css/general.css
index b422890751c50812127f45981a6e9e10577c95fc..d1b8e9b92653e7ffc0dce7245b5ebd3da378ef17 100644
--- a/docs/theme/css/general.css
+++ b/docs/theme/css/general.css
@@ -182,6 +182,7 @@ h6:target::before {
 .content img,
 .content video {
   max-width: 100%;
+  background-color: var(--media-bg);
   border: 1px solid;
   border-color: var(--border);
   border-radius: 8px;
diff --git a/docs/theme/css/variables.css b/docs/theme/css/variables.css
index a7c0ed7114b40550f8fca2571388cafda856656a..55ae4a427da269620cb9b15d10ff33d0f4ace958 100644
--- a/docs/theme/css/variables.css
+++ b/docs/theme/css/variables.css
@@ -26,6 +26,8 @@
   --border-light: hsl(220, 13%, 90%);
   --border-hover: hsl(220, 13%, 70%);
 
+  --media-bg: hsl(50, 25%, 92%);
+
   --sidebar-fg: hsl(0, 0%, 0%);
   --sidebar-non-existant: #aaaaaa;
   --sidebar-active: hsl(220, 93%, 42%);
@@ -98,6 +100,8 @@
   --border-light: hsl(220, 13%, 90%);
   --border-hover: hsl(220, 13%, 40%);
 
+  --media-bg: hsl(220, 13%, 8%);
+
   --sidebar-bg: hsl(220, 13%, 10%);
   --sidebar-fg: hsl(220, 14%, 71%);
   --sidebar-non-existant: #505254;