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 998f310076..bc743596d6 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 b422890751..d1b8e9b926 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 a7c0ed7114..55ae4a427d 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;