feat: enhance documentation links and improve SCSS styles for better readability

core/scss/ui/_alerts.scss

@@ -15,7 +15,7 @@
   position: relative;
   padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
   margin-bottom: var(--#{$prefix}alert-margin-bottom);
-  background-color: var(--#{$prefix}alert-bg);
+  background-color: color-mix(in srgb, var(--#{$prefix}alert-bg), var(--#{$prefix}bg-surface));
   border-radius: var(--#{$prefix}alert-border-radius);
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}alert-border-color);
   display: flex;

core/scss/ui/_markdown.scss

@@ -2,6 +2,7 @@
 Markdown
  */
 .markdown {
+  font-size: $font-size-200;
   line-height: $line-height-xl;
 
   > :first-child {

core/scss/ui/_type.scss

@@ -71,6 +71,10 @@ h6,
   line-height: var(--#{$prefix}line-height-h6);
 }
 
+.fs-base {
+  font-size: var(--#{$prefix}body-font-size);
+}
+
 strong,
 .strong,
 b {

docs/content/emails/introduction/contents.md

@@ -44,8 +44,8 @@ The **Tabler Emails** package is organized into a clear and efficient folder str
 
 ### 1. Email Templates: `emails/`
 This folder contains {{ emailsCount }} email subfolders, each with a specific template. Each email folder contains the following files:
-* Compiled HTML files for light and dark themes. Read more about their usage in the [Compiled HTML](/docs/emails/compiled-html) section.
-* Source HTML files for light and dark themes. Find more information in the [Source HTML](/docs/emails/source-html) section.
+* Compiled HTML files for light and dark themes. Read more about their usage in the [Compiled HTML](/img/emails/compiled-html) section.
+* Source HTML files for light and dark themes. Find more information in the [Source HTML](/img/emails/source-html) section.
 * Screenshot images for desktop and mobile views.
 * Assets folder with images used in the email template and the CSS file with styles.
 

docs/content/icons/plugins/figma.md

@@ -4,7 +4,7 @@ description: Use Tabler Icons directly in Figma.
 summary: The Tabler Figma plugin allows designers to seamlessly integrate Tabler Icons into their Figma projects, providing quick access to a vast library of customizable icons that enhance the design workflow.
 ---
 
-![Tabler Figma Plugin](/docs/icons/figma-plugin.png)
+![Tabler Figma Plugin](/img/icons/figma-plugin.png)
 
 The Tabler Icons Figma plugin is an essential tool for designers looking to enhance their workflow. It provides seamless access to a comprehensive library of high-quality, customizable icons directly within Figma. Whether you're designing dashboards, websites, or mobile apps, this plugin allows you to quickly search, preview, and integrate Tabler Icons into your projects, saving time and ensuring a consistent, modern aesthetic.
 

docs/content/ui/components/alerts.md

@@ -14,22 +14,10 @@ Combine `alert` class with one of the following: `alert-success`, `alert-info`,
 Alert classes affect the color of all the text inside an alert. Use another class, e.g. `text-secondary` to change the color of the alert's content.
 
 {% capture html -%}
-<div class="alert alert-success" role="alert">
-  <h4 class="alert-title">Wow! Everything worked!</h4>
-  <div class="text-secondary">Your account has been saved!</div>
-</div>
-<div class="alert alert-info" role="alert">
-  <h4 class="alert-title">Did you know?</h4>
-  <div class="text-secondary">Here is something that you might like to know.</div>
-</div>
-<div class="alert alert-warning" role="alert">
-  <h4 class="alert-title">Uh oh, something went wrong</h4>
-  <div class="text-secondary">Sorry! There was a problem with your request.</div>
-</div>
-<div class="alert alert-danger" role="alert">
-  <h4 class="alert-title">I'm so sorry&hellip;</h4>
-  <div class="text-secondary">Your account has been deleted and can't be restored.</div>
-</div>
+{% include "ui/alert.html" type="success" title="Wow! Everything worked!" description="Your account has been saved!" %}
+{% include "ui/alert.html" type="info" title="Did you know?" description="Here is something that you might like to know." %}
+{% include "ui/alert.html" type="warning" title="Uh oh, something went wrong" description="Sorry! There was a problem with your request." %}
+{% include "ui/alert.html" type="danger" title="I'm so sorry&hellip;" description="Your account has been deleted and can't be restored." %}
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 
@@ -38,9 +26,7 @@ Alert classes affect the color of all the text inside an alert. Use another clas
 Add a link to your alert message to redirect users to the details they need to complete or additional information they should read. Use `alert-link` class to style the link and match the text color.
 
 {% capture html -%}
-<div class="alert alert-danger m-0">
-  This is a danger alert — <a href="#" class="alert-link">check it out</a>!
-</div>
+{% include "ui/alert.html" type="danger" title="This is a danger alert" link="check it out" %}
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 
@@ -53,34 +39,7 @@ Add the `x` close button to make an alert modal dismissible. Thanks to that, you
 ```
 
 {% capture html -%}
-<div class="alert alert-success alert-dismissible" role="alert">
-  <div>
-    <h4 class="alert-title">Wow! Everything worked!</h4>
-    <div class="text-secondary">Your account has been saved!</div>
-  </div>
-  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-<div class="alert alert-info alert-dismissible" role="alert">
-  <div>
-    <h4 class="alert-title">Did you know?</h4>
-    <div class="text-secondary">Here is something that you might like to know.</div>
-  </div>
-  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-<div class="alert alert-warning alert-dismissible" role="alert">
-  <div>
-    <h4 class="alert-title">Uh oh, something went wrong</h4>
-    <div class="text-secondary">Sorry! There was a problem with your request.</div>
-  </div>
-  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-<div class="alert alert-danger alert-dismissible" role="alert">
-  <div>
-    <h4 class="alert-title">I'm so sorry&hellip;</h4>
-    <div class="text-secondary">Your account has been deleted and can't be restored.</div>
-  </div>
-  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
+{% include "ui/alert.html" type="danger" title="This is a danger alert" show-close %}
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 
@@ -415,4 +374,6 @@ You're not limited to the 4 default alert colors. You can use any [base or socia
 
 ## SASS variables
 
+You can customize the alert colors by changing the SASS variables. The default values are:
+
 {% scss-docs "alert-variables" "ui/_alerts.scss" %}

docs/content/ui/components/avatars.md

@@ -64,7 +64,7 @@ Besides pictures and initials, you can also use icons to make the avatars more u
 
 ## Avatar initials color
 
-Customize the color of the avatars' background. You can click [here](/docs/ui/base/colors) to see the list of available colors.
+Customize the color of the avatars' background. You can click [here](/img/ui/base/colors) to see the list of available colors.
 
 {% capture html -%}
 <span class="avatar bg-green-lt">AB</span>

docs/content/ui/components/buttons.md

@@ -151,7 +151,7 @@ Add `.btn-lg` or `.btn-sm` to change the size of your button and differentiate t
 
 Label your button with text and add an icon to communicate the action and make it easy to identify for users. Icons are easily recognized and improve the aesthetics of your button design, giving it a modern and attractive look.
 
-Icons can be found [**here**](/docs/components/icons)
+Icons can be found [**here**](/img/components/icons)
 
 {% capture html -%}
 <button type="button" class="btn">

docs/content/ui/components/divider.md

@@ -46,7 +46,7 @@ You can modify the position of the text which is to be included in a separator a
 
 ## Divider color
 
-Customize the color of dividers to make them go well with your design. Click [here](/docs/ui/base/colors) to see the list of available colors.
+Customize the color of dividers to make them go well with your design. Click [here](/img/ui/base/colors) to see the list of available colors.
 
 {% capture html -%}
 <p>

docs/content/ui/components/icons.md

@@ -45,7 +45,7 @@ Look at the example below to see the filled icons.
 
 ## Icon colors
 
-To change the color of the icon, you need to add the `text-` class to the parent element of the icon. Full list of available colors can be found [here](/docs/ui/colors). Color classes can be used with any HTML element.
+To change the color of the icon, you need to add the `text-` class to the parent element of the icon. Full list of available colors can be found [here](/img/ui/colors). Color classes can be used with any HTML element.
 
 ```html
 <span class="text-red">

docs/content/ui/components/progress.md

@@ -89,7 +89,7 @@ This is how it looks:
 
 You can change the color of the progress bar by adding a color class to the `.progress-bar` element. You can use the color classes like `.bg-primary`, `.bg-success`, etc. to change the color of the progress bar.
 
-Full list of available colors can be found [here](/docs/ui/base/colors).
+Full list of available colors can be found [here](/img/ui/base/colors).
 
 {% capture html -%}
 <div class="progress">

docs/content/ui/components/ribbons.md

@@ -59,7 +59,7 @@ Using multiple classes at once will give you more position options. For example,
 
 ## Ribbon color
 
-Customize the ribbon's background color. You can click [here](/docs/ui/base/colors) to see the list of available colors.
+Customize the ribbon's background color. You can click [here](/img/ui/base/colors) to see the list of available colors.
 
 {% capture html -%}
 <div class="card">

docs/content/ui/components/spinners.md

@@ -23,7 +23,7 @@ Look at the example below to see how the spinner works:
 
 ## Colors
 
-Choose one of the available colors to customize the spinner and make it suit your design. Full list of available colors can be found in the [Colors](/docs/ui/base/colors) section.
+Choose one of the available colors to customize the spinner and make it suit your design. Full list of available colors can be found in the [Colors](/img/ui/base/colors) section.
 
 {% capture html -%}
 <div class="spinner-border text-blue" role="status"></div>

docs/content/ui/components/statuses.md

@@ -6,7 +6,7 @@ description: Highlight interface elements with status dots.
 
 ## Default markup
 
-Use the default status to notify users about the status of a component or page, helping them avoid confusion. Full list of available colors can be found in the [Colors](/docs/ui/base/colors) section.
+Use the default status to notify users about the status of a component or page, helping them avoid confusion. Full list of available colors can be found in the [Colors](/img/ui/base/colors) section.
 
 ```html
 <span class="status status-blue">Blue</span>

docs/content/ui/components/steps.md

@@ -95,7 +95,7 @@ The example below demonstrates a progress tracker with tooltips for each step.
 
 ## Color
 
-You can customize the default progress indicator by changing the color to one that better suits your design. Click [here](/docs/ui/base/colors) to see the range of available colors.
+You can customize the default progress indicator by changing the color to one that better suits your design. Click [here](/img/ui/base/colors) to see the range of available colors.
 
 ```html
 <div class="steps steps-green">...</div>

docs/content/ui/components/tracking.md

@@ -219,7 +219,7 @@ description: Monitor data activity visually.
 
 ## Tracking inside a card
 
-You can add a tracking component inside the cards to give your reports a fresh look and visualize the status of your system in an attractive way. If you want to read how to add other elements to a card it is worth reading [documentation of card](/docs/components/cards).
+You can add a tracking component inside the cards to give your reports a fresh look and visualize the status of your system in an attractive way. If you want to read how to add other elements to a card it is worth reading [documentation of card](/img/components/cards).
 
 {% capture html -%}
 <div class="card">

docs/content/ui/forms/form-color-check.md

@@ -4,7 +4,7 @@ summary: The color check is a great way to make your form more user-friendly and
 description: Enhance forms with color checks.
 ---
 
-Your input controls can come in a variety of colors, depending on your preferences. Click [here](/docs/ui/base/colors) to see the list of available colors.
+Your input controls can come in a variety of colors, depending on your preferences. Click [here](/img/ui/base/colors) to see the list of available colors.
 
 ```html
 <label class="form-colorinput">

docs/content/ui/forms/form-elements.md

@@ -120,15 +120,13 @@ Use the `form-control-rounded` class if you prefer form controls with rounded co
 You can remove borders from your form control by adding the `form-control-flush` class.
 
 {% capture html -%}
-<div class="mb-3">
-  <label class="form-label">Form control flush</label>
-  <input
-    type="text"
-    class="form-control form-control-flush"
-    name="Form control flush"
-    placeholder="Text.."
-  />
-</div>
+<label class="form-label">Form control flush</label>
+<input
+	type="text"
+	class="form-control form-control-flush"
+	name="Form control flush"
+	placeholder="Text.."
+/>
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 

docs/content/ui/forms/form-image-check.md

@@ -144,7 +144,7 @@ If you want to use the image check as a radio button, you can change the input t
 
 ## Avatars
 
-If you want to use the image check with avatars, you can use an [avatar component](/docs/ui/components/avatars) instead of an image.
+If you want to use the image check with avatars, you can use an [avatar component](/img/ui/components/avatars) instead of an image.
 
 {% capture html -%}
 <div class="mb-3">

docs/content/ui/getting-started/how-to-contribute.md

@@ -13,7 +13,7 @@ When contributing to Tabler, please adhere to the following guidelines:
 1. By submitting a contribution, you grant a non-exclusive license to the Tabler project to use your contribution in any context deemed appropriate.
 2. If your contribution includes content from other sources, it must be appropriately licensed under an open source license.
 3. Contributions must be submitted via GitHub pull requests.
-4. Ensure your code works in all supported browsers (refer to our [browser support documentation](/docs/ui/getting-started/browser-support)).
+4. Ensure your code works in all supported browsers (refer to our [browser support documentation](/img/ui/getting-started/browser-support)).
 
 ## Installation
 

docs/content/ui/getting-started/installation.md

@@ -56,7 +56,7 @@ Update your HTML file to include these resources:
 
 This setup includes the Tabler CSS and JavaScript via a CDN, providing a responsive and functional base for your project.
 
-You can also download the files and include them locally in your project. For more information, see the [Download](/docs/ui/getting-started/download) page.
+You can also download the files and include them locally in your project. For more information, see the [Download](/img/ui/getting-started/download) page.
 
 ### Open in Your Browser
 

docs/content/ui/layout/page-layouts.md

@@ -5,7 +5,7 @@ description: Learn to design dashboard layouts.
 ---
 
 <Callout>
-   Before you start with this section, make sure you have followed the [installation guideline](/docs/ui/getting-started/installation). 
+   Before you start with this section, make sure you have followed the [installation guideline](/img/ui/getting-started/installation). 
 </Callout>
 
 ## Sample layout

docs/eleventy.config.mjs

@@ -267,7 +267,6 @@ export default function (eleventyConfig) {
 
 	eleventyConfig.addGlobalData("docs-links", [
 		{ title: 'Website', url: 'https://tabler.io', icon: 'world' },
-		{ title: 'Forum', url: '/', icon: 'messages' },
 		{ title: 'Support', url: 'https://tabler.io/support', icon: 'headset' },
 	]);
 

docs/scss/docs.scss

@@ -8,6 +8,14 @@
   --docsearch-key-gradient: var(--tblr-bg-surface-secondary);
 }
 
+.col-docs {
+  width: 15rem;
+}
+
+.bg-docs-gradient {
+  background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--tblr-primary) 4%, transparent), transparent 80%) no-repeat 0 0 / 800px 800px !important;
+}
+
 .DocSearch-Button {
   width: 100%;
   box-shadow: 0 0 0 1px var(--tblr-border-color);
@@ -24,23 +32,22 @@
 }
 
 .no-transition {
-	* {
-		transition: none !important;
-	}
+  * {
+    transition: none !important;
+  }
 }
 
-.example>.modal,
-.example>.offcanvas {
-	display: block !important;
-	position: relative !important;
+.example > .modal,
+.example > .offcanvas {
+  display: block !important;
+  position: relative !important;
 }
 
-.example>.offcanvas-backdrop {
-	position: absolute !important;
+.example > .offcanvas-backdrop {
+  position: absolute !important;
 }
 
-
 .shiki {
   background: var(--tblr-gray-900) !important;
   color: var(--tblr-gray-300) !important;
-}
+}

shared/e11ty/filters.mjs

@@ -229,4 +229,12 @@ export function appFilters(eleventyConfig) {
 			return ''
 		});
 	});
+
+	eleventyConfig.addPairedShortcode(`removeemptylines`, function (content) {
+		if (content) {
+			return content.split('\n').filter(line => line.trim() !== '').join('\n');
+		}
+
+		return '';
+	})
 }

shared/includes/docs/download-button.html

@@ -1,3 +1,3 @@
 <div class="my-6 text-center">
-	<a href="{{ include.href }}" class="btn btn btn-primary">{{ include.title }}</a>
+	<a href="{{ include.href }}" class="btn btn btn-primary" target="_blank">{{ include.title }}</a>
 </div>

shared/includes/docs/example.html

@@ -1,5 +1,5 @@
 <div
-	class="example border rounded my-5{% unless include.raw %} d-flex flex-wrap justify-content-center{% endunless %} overflow-{{ include.overflow | default: 'auto' }} position-relative {% if include.bg %}bg-{{ include.bg }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.height %} style="height: {{ include.height }}"{% endif %}{% unless include.bg %} style="background: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'20\' height=\'20\' viewBox=\'0 0 20 20\'><rect fill=\'rgba(0, 0, 0, .01)\' x=\'0\' y=\'0\' width=\'10\' height=\'10\' /><rect fill=\'rgba(0, 0, 0, .01)\' x=\'10\' y=\'10\' width=\'10\' height=\'10\' /></svg>')"{% endunless %}}>
+	class="example fs-base border rounded my-5{% unless include.raw %} d-flex flex-wrap justify-content-center{% endunless %} overflow-{{ include.overflow | default: 'auto' }} position-relative {% if include.bg %}bg-{{ include.bg }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.height %} style="height: {{ include.height }}"{% endif %}{% unless include.bg %} style="background: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'20\' height=\'20\' viewBox=\'0 0 20 20\'><rect fill=\'rgba(0, 0, 0, .01)\' x=\'0\' y=\'0\' width=\'10\' height=\'10\' /><rect fill=\'rgba(0, 0, 0, .01)\' x=\'10\' y=\'10\' width=\'10\' height=\'10\' /></svg>')"{% endunless %}}>
 	{%- unless include.raw -%}<div class="p-6 w-full{% if include.centered %} d-flex justify-content-center flex-fill flex-wrap{% if include.vertical %} flex-column{% endif %} gap-2{% endif %}" {% if include.column %}style="max-width: 25rem;"{% endif %}>{%- endunless -%}
 		{{ html | remove-href }}
 	{%- unless include.raw -%}</div>{%- endunless -%}

shared/includes/docs/menu.html

@@ -3,9 +3,11 @@
 <nav class="space-y" id="menu">
 	{% for level1 in menu %}
 	<div>
-		<div class="h4 mb-2 cursor-pointer" data-bs-toggle="collapse" data-bs-target="#collapse-{{ level1.url | slug }}" aria-expanded="true">{{ level1.data.title }}</div>
+		<div class="subheader">
+			{{ level1.data.title }}
+		</div>
 		{% if level1.children %}
-		<nav class="nav nav-vertical nav-pills collapse{% if forloop.index == 1 %} show{% endif %}" id="collapse-{{ level1.url | slug }}" data-bs-parent="#menu">
+		<nav class="nav nav-vertical nav-pills">
 			{% for level2 in level1.children %}
 			<div>
 				<a class="nav-link{% if page.url == level2.url %} active{% endif %}"{% if level2.children %} href="{{ level2.url }}" data-bs-toggle="collapse" data-bs-target="#collapse-{{ level2.url | slug }}" aria-expanded="false"{% endif %}>{{ level2.data.title }}</a>

shared/includes/docs/navbar.html

@@ -16,6 +16,9 @@
 			</div>
 			<div class="col d-flex">
 				<ul class="navbar-nav ms-auto gap-2">
+					<div class="nav-item">
+						<a href="https://tabler.io/changelog" class="nav-link">Changelog</a>
+					</div>
 					<li class="nav-item hide-theme-dark">
 						<a href="?theme=dark" class="btn btn-icon">
 							{% include "ui/icon.html" icon="moon" %}

shared/includes/ui/alert.html

@@ -1,23 +1,22 @@
-{% assign icon = include.icon %}
-{% unless icon %}
-	{% if include.type == 'success' %}
-		{% assign icon = 'check' %}
-	{% elsif include.type == 'warning' %}
-		{% assign icon = 'alert-triangle' %}
-	{% elsif include.type == 'danger' %}
-		{% assign icon = 'alert-circle' %}
-	{% elsif include.type == 'info' %}
-		{% assign icon = 'info-circle' %}
-	{% endif %}
-{% endunless %}
-
-<div class="alert{% if include.important %} alert-important{% elsif include.minor %} alert-minor{% endif %} alert-{{ include.type | default: 'primary'}}{%if include.show-close %} alert-dismissible{% endif %}{% if include.avatar %} alert-avatar{% endif %}" role="alert">
-
+{% removeemptylines %}
+{%- assign icon = include.icon -%}
+{%- assign type = include.type | default: 'success' -%}
+{%- unless icon -%}
+	{%- if type == 'success' -%}
+		{%- assign icon = 'check' -%}
+	{%- elsif type == 'warning' -%}
+		{%- assign icon = 'alert-triangle' -%}
+	{%- elsif type == 'danger' -%}
+		{%- assign icon = 'alert-circle' -%}
+	{%- elsif type == 'info' -%}
+		{%- assign icon = 'info-circle' -%}
+	{%- endif -%}
+{%- endunless -%}
+<div class="alert{% if include.important %} alert-important{% elsif include.minor %} alert-minor{% endif %} alert-{{ type }}{%if include.show-close %} alert-dismissible{% endif %}{% if include.avatar %} alert-avatar{% endif %}" role="alert">
 	<div class="alert-icon">
-		{% include "ui/icon.html" icon=icon class="alert-icon" %}
+		{%- include "ui/icon.html" icon=icon class="alert-icon" -%}
 	</div>
-
-	{% if include.description or include.list %}
+	{% if include.description or include.list -%}
 		<div>
 			<h4 class="alert-heading">{{ include.title | default: "This is a custom alert box!" }}</h4>
 			<div class="alert-description">
@@ -32,23 +31,20 @@
 				{% endif %}
 			</div>
 		</div>
-	{% else %}
+	{%- else -%}
 		{{ include.title | default: "This is a custom alert box!" }}
-
-		{% if include.action %}
-		<a href="#" class="alert-action">
-			Link
-		</a>
-		{% endif %}
-	{% endif %}
-
-	{% if include.buttons %}
+		{% if include.action -%}
+		<a href="#" class="alert-action">{{ include.action | default: "Action" }}</a>
+		{%- elsif include.link -%}
+		<a href="#" class="alert-link">{{ include.link | default: "Link" }}</a>
+		{%- endif %}
+	{%- endif -%}
+	{%- if include.buttons -%}
 	<div class="btn-list">
 		<a href="#" class="btn btn-{{ include.type | default: 'primary'}}">Okay</a>
 		<a href="#" class="btn">Cancel</a>
 	</div>
-	{% endif %}
-
-
-	{% if include.show-close %}<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>{% endif %}
+	{%- endif -%}
+	{%- if include.show-close %}<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>{% endif -%}
 </div>
+{% endremoveemptylines %}

shared/layouts/docs/default.html

@@ -35,9 +35,9 @@
 	<div class="flex-fill h-full">
 		<div class="container h-full">
 			<div class="row g-0 h-full">
-				<div class="col-3 h-full d-none d-lg-block border-end">
+				<div class="col-docs h-full d-none d-lg-block border-end">
 					<div class="py-4 h-full">
-						<div class="space-y h-full overflow-auto">
+						<div class="space-y h-full">
 							<div class="nav nav-vertical nav-pills">
 								{% for link in docs-links %}
 								<a href="{{ link.url }}" class="nav-link" target="_blank">
@@ -52,7 +52,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="col">
+				<div class="col bg-docs-gradient">
 					<div class="py-lg-5 ps-lg-5">
 						<div class="py-6 ps-lg-6 p-xxl-6">
 							<div class="markdown" data-bs-spy="scroll" data-bs-target="#toc" data-bs-root-margin="50px 0px -0%" data-bs-smooth-scroll="true" tabindex="0">