From f37b5a00ec69fdc74db7c45eeb90d2ac38da1ceb Mon Sep 17 00:00:00 2001
From: Fernando Celmer <email@fernandocelmer.com>
Date: Tue, 28 Jan 2025 01:29:15 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=98=20DOCS-#23:=20Updated=20documentat?=
 =?UTF-8?q?ion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/index.md                             | 10 ++--
 docs/nav/development/development-guide.md |  2 +
 docs/nav/development/release-notes.md     |  2 +
 docs/nav/getting-started.md               | 10 ++--
 docs/nav/setup/colors.md                  | 68 ++++++++++++-----------
 docs/nav/setup/components.md              |  2 +
 docs/nav/setup/favicon.md                 |  2 +
 docs/nav/setup/fonts.md                   | 26 +++++----
 docs/nav/setup/logo.md                    |  2 +
 docs/nav/setup/sidebar.md                 | 14 +++++
 10 files changed, 84 insertions(+), 54 deletions(-)
 create mode 100644 docs/nav/setup/sidebar.md

diff --git a/docs/index.md b/docs/index.md
index 61a4a23..cc3ba8f 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,4 +1,6 @@
-Jan 1, 2025
+# Home
+
+January 1, 2025
 
 ---
 
@@ -20,7 +22,7 @@ docs/
     ...       # Other markdown pages, images and other files.
 ```
 
-### Installation MkDocs
+## Installation MkDocs
 
 To install MkDocs, run the following command from the command line:
 
@@ -28,7 +30,7 @@ To install MkDocs, run the following command from the command line:
 pip install mkdocs
 ```
 
-### Installation theme
+## Installation theme
 
 Install the theme using PIP:
 
@@ -36,7 +38,7 @@ Install the theme using PIP:
 pip install mkdocs-simple-blog
 ```
 
-### Activating theme
+## Activating theme
 
 After the theme is installed, edit your `mkdocs.yml` file and set the theme name to `simple-blog`:
 
diff --git a/docs/nav/development/development-guide.md b/docs/nav/development/development-guide.md
index 0a6f2ab..f9188be 100644
--- a/docs/nav/development/development-guide.md
+++ b/docs/nav/development/development-guide.md
@@ -1,3 +1,5 @@
+# Development guide
+
 Last updated January 28, 2024
 
 ---
diff --git a/docs/nav/development/release-notes.md b/docs/nav/development/release-notes.md
index aad08f5..d5587b6 100644
--- a/docs/nav/development/release-notes.md
+++ b/docs/nav/development/release-notes.md
@@ -1,3 +1,5 @@
+# Release
+
 March 25, 2023
 
 ---
diff --git a/docs/nav/getting-started.md b/docs/nav/getting-started.md
index 8fef5d3..aa9a367 100644
--- a/docs/nav/getting-started.md
+++ b/docs/nav/getting-started.md
@@ -1,10 +1,10 @@
+# Getting Started
+
 March 25, 2023
 
 ---
 
-## Install
-
-### Installation MkDocs
+## Installation MkDocs
 
 To install MkDocs, run the following command from the command line:
 
@@ -12,7 +12,7 @@ To install MkDocs, run the following command from the command line:
 pip install mkdocs
 ```
 
-### Installation theme
+## Installation theme
 
 Install the theme using PIP:
 
@@ -20,7 +20,7 @@ Install the theme using PIP:
 pip install mkdocs-simple-blog
 ```
 
-### Activating theme
+## Activating theme
 
 After the theme is installed, edit your `mkdocs.yml` file and set the theme name to `simple-blog`:
 
diff --git a/docs/nav/setup/colors.md b/docs/nav/setup/colors.md
index 54ffb71..235eff6 100644
--- a/docs/nav/setup/colors.md
+++ b/docs/nav/setup/colors.md
@@ -1,3 +1,5 @@
+# Colors
+
 January 17, 2023
 
 ---
@@ -14,7 +16,7 @@ theme:
 ```
 
 <button class="color-button" data-theme="light">
-    <code style="background: #ffffff; color: #000000 !important">light</code>
+    <code style="background: #ffffff !important; color: #000000 !important">light</code>
 </button>
 <button class="color-button" data-theme="dark">
     <code style="background: #000000; color: #ffffff !important">dark</code>
@@ -31,28 +33,28 @@ theme:
 ```
 
 <button color-primary="#000000">
-    <code style="background: var(--color-black); color: #ffffff !important;">black</code>
+    <code style="background: var(--color-black) !important; color: #ffffff !important;">black</code>
 </button>
 <button color-primary="#4051b5">
-    <code style="background: var(--color-blue); color: #ffffff !important;">blue</code>
+    <code style="background: var(--color-blue) !important; color: #ffffff !important;">blue</code>
 </button>
 <button color-primary="#4cae4f">
-    <code style="background: var(--color-green); color: #ffffff !important;">green</code>
+    <code style="background: var(--color-green) !important; color: #ffffff !important;">green</code>
 </button>
 <button color-primary="#f1dc15">
-    <code style="background: var(--color-yellow); color: #000000 !important;">yellow</code>
+    <code style="background: var(--color-yellow) !important; color: #000000 !important;">yellow</code>
 </button>
 <button color-primary="#ffa724">
-    <code style="background: var(--color-orange); color: #000000 !important;">orange</code>
+    <code style="background: var(--color-orange) !important; color: #000000 !important;">orange</code>
 </button>
 <button color-primary="#ab47bd">
-    <code style="background: var(--color-purple); color: #ffffff !important;">purple</code>
+    <code style="background: var(--color-purple) !important; color: #ffffff !important;">purple</code>
 </button>
 <button color-primary="#ff2c06">
-    <code style="background: var(--color-red); color: #ffffff !important;">red</code>
+    <code style="background: var(--color-red) !important; color: #ffffff !important;">red</code>
 </button>
 <button color-primary="#ffffff">
-    <code style="background: var(--color-white); color: #000000 !important;">white</code>
+    <code style="background: var(--color-white) !important; color: #000000 !important;">white</code>
 </button>
 
 ### Text color
@@ -66,28 +68,28 @@ theme:
 ```
 
 <button color-text="#000000">
-    <code style="background: var(--color-white); color: var(--color-black) !important;">black</code>
+    <code style="background: var(--color-white) !important; color: var(--color-black) !important;">black</code>
 </button>
 <button color-text="#4051b5">
-    <code style="background: var(--color-white); color: var(--color-blue) !important;">blue</code>
+    <code style="background: var(--color-white) !important; color: var(--color-blue) !important;">blue</code>
 </button>
 <button color-text="#4cae4f">
-    <code style="background: var(--color-white); color: var(--color-green) !important;">green</code>
+    <code style="background: var(--color-white) !important; color: var(--color-green) !important;">green</code>
 </button>
 <button color-text="#f1dc15">
-    <code style="background: var(--color-white); color: var(--color-yellow) !important;">yellow</code>
+    <code style="background: var(--color-white) !important; color: var(--color-yellow) !important;">yellow</code>
 </button>
 <button color-text="#ffa724">
-    <code style="background: var(--color-white); color: var(--color-orange) !important;">orange</code>
+    <code style="background: var(--color-white) !important; color: var(--color-orange) !important;">orange</code>
 </button>
 <button color-text="#ab47bd">
-    <code style="background: var(--color-white); color: var(--color-purple) !important;">purple</code>
+    <code style="background: var(--color-white) !important; color: var(--color-purple) !important;">purple</code>
 </button>
 <button color-text="#ff2c06">
-    <code style="background: var(--color-white); color: var(--color-red) !important;">red</code>
+    <code style="background: var(--color-white) !important; color: var(--color-red) !important;">red</code>
 </button>
 <button color-text="#ffffff">
-    <code style="background: var(--color-white); color: #000000 !important;">white</code>
+    <code style="background: var(--color-white) !important; color: #000000 !important;">white</code>
 </button>
 
 ### Title color
@@ -101,28 +103,28 @@ theme:
 ```
 
 <button color-title="#000000">
-    <code style="background: var(--color-white); color: var(--color-black) !important;">black</code>
+    <code style="background: var(--color-white) !important; color: var(--color-black) !important;">black</code>
 </button>
 <button color-title="#4051b5">
-    <code style="background: var(--color-white); color: var(--color-blue) !important;">blue</code>
+    <code style="background: var(--color-white) !important; color: var(--color-blue) !important;">blue</code>
 </button>
 <button color-title="#4cae4f">
-    <code style="background: var(--color-white); color: var(--color-green) !important;">green</code>
+    <code style="background: var(--color-white) !important; color: var(--color-green) !important;">green</code>
 </button>
 <button color-title="#f1dc15">
-    <code style="background: var(--color-white); color: var(--color-yellow) !important;">yellow</code>
+    <code style="background: var(--color-white) !important; color: var(--color-yellow) !important;">yellow</code>
 </button>
 <button color-title="#ffa724">
-    <code style="background: var(--color-white); color: var(--color-orange) !important;">orange</code>
+    <code style="background: var(--color-white) !important; color: var(--color-orange) !important;">orange</code>
 </button>
 <button color-title="#ab47bd">
-    <code style="background: var(--color-white); color: var(--color-purple) !important;">purple</code>
+    <code style="background: var(--color-white) !important; color: var(--color-purple) !important;">purple</code>
 </button>
 <button color-title="#ff2c06">
-    <code style="background: var(--color-white); color: var(--color-red) !important;">red</code>
+    <code style="background: var(--color-white) !important; color: var(--color-red) !important;">red</code>
 </button>
 <button color-title="#ffffff">
-    <code style="background: var(--color-white); color: #000000 !important;">white</code>
+    <code style="background: var(--color-white) !important; color: #000000 !important;">white</code>
 </button>
 
 ### Background color
@@ -136,26 +138,26 @@ theme:
 ```
 
 <button color-background="#000000">
-    <code style="background: var(--color-black); color: #ffffff !important;">black</code>
+    <code style="background: var(--color-black) !important; color: #ffffff !important;">black</code>
 </button>
 <button color-background="#4051b5">
-    <code style="background: var(--color-blue); color: #ffffff !important;">blue</code>
+    <code style="background: var(--color-blue) !important; color: #ffffff !important;">blue</code>
 </button>
 <button color-background="#4cae4f">
-    <code style="background: var(--color-green); color: #ffffff !important;">green</code>
+    <code style="background: var(--color-green) !important; color: #ffffff !important;">green</code>
 </button>
 <button color-background="#f1dc15">
-    <code style="background: var(--color-yellow); color: #000000 !important;">yellow</code>
+    <code style="background: var(--color-yellow) !important; color: #000000 !important;">yellow</code>
 </button>
 <button color-background="#ffa724">
-    <code style="background: var(--color-orange); color: #000000 !important;">orange</code>
+    <code style="background: var(--color-orange) !important; color: #000000 !important;">orange</code>
 </button>
 <button color-background="#ab47bd">
-    <code style="background: var(--color-purple); color: #ffffff !important;">purple</code>
+    <code style="background: var(--color-purple) !important; color: #ffffff !important;">purple</code>
 </button>
 <button color-background="#ff2c06">
-    <code style="background: var(--color-red); color: #ffffff !important;">red</code>
+    <code style="background: var(--color-red) !important; color: #ffffff !important;">red</code>
 </button>
 <button color-background="#ffffff">
-    <code style="background: var(--color-white); color: #000000 !important;">white</code>
+    <code style="background: var(--color-white) !important; color: #000000 !important;">white</code>
 </button>
\ No newline at end of file
diff --git a/docs/nav/setup/components.md b/docs/nav/setup/components.md
index 0f36f63..a0eac12 100644
--- a/docs/nav/setup/components.md
+++ b/docs/nav/setup/components.md
@@ -1,3 +1,5 @@
+# Components
+
 January 21, 2023
 
 ---
diff --git a/docs/nav/setup/favicon.md b/docs/nav/setup/favicon.md
index 52219dc..37049ba 100644
--- a/docs/nav/setup/favicon.md
+++ b/docs/nav/setup/favicon.md
@@ -1,3 +1,5 @@
+# Favicon
+
 January 17, 2023
 
 ---
diff --git a/docs/nav/setup/fonts.md b/docs/nav/setup/fonts.md
index 056e54d..c0e26c0 100644
--- a/docs/nav/setup/fonts.md
+++ b/docs/nav/setup/fonts.md
@@ -1,3 +1,5 @@
+# Fonts
+
 January 17, 2023
 
 ---
@@ -14,22 +16,22 @@ theme:
 ```
 
 <button style-site-name="normal">
-    <code class="normal" style="background: var(--color-white); color: #000000 !important;">normal</code>
+    <code class="normal" style="background: var(--color-white) !important; color: #000000 !important;">normal</code>
 </button>
 <button style-site-name="bold">
-    <code class="bold" style="background: var(--color-white); color: #000000 !important;">bold</code>
+    <code class="bold" style="background: var(--color-white) !important; color: #000000 !important;">bold</code>
 </button>
 <button style-site-name="italic">
-    <code class="italic" style="background: var(--color-white); color: #000000 !important;">italic</code>
+    <code class="italic" style="background: var(--color-white) !important; color: #000000 !important;">italic</code>
 </button>
 <button style-site-name="scratched">
-    <code class="scratched" style="background: var(--color-white); color: #000000 !important;">scratched</code>
+    <code class="scratched" style="background: var(--color-white) !important; color: #000000 !important;">scratched</code>
 </button>
 <button style-site-name="underline">
-    <code class="underline" style="background: var(--color-white); color: #000000 !important;">underline</code>
+    <code class="underline" style="background: var(--color-white) !important; color: #000000 !important;">underline</code>
 </button>
 <button style-site-name="overline">
-    <code class="overline" style="background: var(--color-white); color: #000000 !important;">overline</code>
+    <code class="overline" style="background: var(--color-white) !important; color: #000000 !important;">overline</code>
 </button>
 
 
@@ -43,20 +45,20 @@ theme:
 ```
 
 <button style-title="normal">
-    <code class="normal" style="background: var(--color-white); color: #000000 !important;">normal</code>
+    <code class="normal" style="background: var(--color-white) !important; color: #000000 !important;">normal</code>
 </button>
 <button style-title="bold">
-    <code class="bold" style="background: var(--color-white); color: #000000 !important;">bold</code>
+    <code class="bold" style="background: var(--color-white) !important; color: #000000 !important;">bold</code>
 </button>
 <button style-title="italic">
-    <code class="italic" style="background: var(--color-white); color: #000000 !important;">italic</code>
+    <code class="italic" style="background: var(--color-white) !important; color: #000000 !important;">italic</code>
 </button>
 <button style-title="scratched">
-    <code class="scratched" style="background: var(--color-white); color: #000000 !important;">scratched</code>
+    <code class="scratched" style="background: var(--color-white) !important; color: #000000 !important;">scratched</code>
 </button>
 <button style-title="underline">
-    <code class="underline" style="background: var(--color-white); color: #000000 !important;">underline</code>
+    <code class="underline" style="background: var(--color-white) !important; color: #000000 !important;">underline</code>
 </button>
 <button style-title="overline">
-    <code class="overline" style="background: var(--color-white); color: #000000 !important;">overline</code>
+    <code class="overline" style="background: var(--color-white) !important; color: #000000 !important;">overline</code>
 </button>
diff --git a/docs/nav/setup/logo.md b/docs/nav/setup/logo.md
index 4d30b33..8ed7e1e 100644
--- a/docs/nav/setup/logo.md
+++ b/docs/nav/setup/logo.md
@@ -1,3 +1,5 @@
+# Logo
+
 January 17, 2023
 
 ---
diff --git a/docs/nav/setup/sidebar.md b/docs/nav/setup/sidebar.md
new file mode 100644
index 0000000..7f7932c
--- /dev/null
+++ b/docs/nav/setup/sidebar.md
@@ -0,0 +1,14 @@
+# Sidebar
+
+January 28, 2025
+
+---
+
+## How to activate
+
+- Default: false
+
+```
+theme:
+  sidebar: true
+```