From 5609e72cc0b05167d9fbf6ded7ed9d99e43550e2 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Sat, 22 Jan 2022 00:34:02 +0100
Subject: [PATCH] docs improvement

---
 src/pages/_includes/docs/plugin.html | 12 ++++++------
 src/pages/_layouts/docs.html         |  4 ++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/pages/_includes/docs/plugin.html b/src/pages/_includes/docs/plugin.html
index eee73078a..729b814da 100644
--- a/src/pages/_includes/docs/plugin.html
+++ b/src/pages/_includes/docs/plugin.html
@@ -1,9 +1,9 @@
-<h3>Installation</h3>
+<div class="alert alert-info mb-5">
+	<h3>Installation</h3>
 
-<p>This part of Tabler is distributed as plugin. To enable it you should include <code>tabler-{{ include.plugin }}.css</code> or <code>tabler-{{ include.plugin }}.min.css</code> file to your page.</p>
+	<p>This part of Tabler is distributed as plugin. To enable it you should include <code>tabler-{{ include.plugin }}.css</code> or <code>tabler-{{ include.plugin }}.min.css</code> file to your page.</p>
 
-<p>You can also include plugin via CDN:</p>
+	<p>You can also include plugin via CDN:</p>
 
-{% highlight html %}
-<link rel="stylesheet" href="https://unpkg.com/{{ site.npm-package }}@{{ site.data.package.version }}/dist/css/tabler-{{ include.plugin }}.min.css">
-{% endhighlight %}
\ No newline at end of file
+	{% highlight html %}<link rel="stylesheet" href="https://unpkg.com/{{ site.npm-package }}@{{ site.data.package.version }}/dist/css/tabler-{{ include.plugin }}.min.css">{% endhighlight %}
+</div>
\ No newline at end of file
diff --git a/src/pages/_layouts/docs.html b/src/pages/_layouts/docs.html
index a76b66fcd..8dbe0cc9d 100644
--- a/src/pages/_layouts/docs.html
+++ b/src/pages/_layouts/docs.html
@@ -7,7 +7,7 @@ page-header: Documentation
 
 {% assign current-url = page.url | replace_regex: "^/", "" %}
 
-<div class="row gx-lg-4">
+<div class="row gx-lg-5">
 	<div class="d-none d-lg-block col-lg-3">
 		{% include docs/menu.html %}
 	</div>
@@ -34,7 +34,7 @@ page-header: Documentation
 						</div>
 
 						{% if page.description %}
-						<p class="mb-5 text-muted">{{ page.description }}</p>
+						<p class="mb-4 text-muted">{{ page.description }}</p>
 						{% endif %}
 
 						{% if page.plugin %}