feat: Add code-function and code-keyword classes for improved styling of code elements in documentation.

Author: Chamath-Adithya

docs/assets/css/main.css

@@ -647,6 +647,43 @@ code {
     color: #c084fc;
 }
 
+/* Architecture Diagram */
+.architecture-diagram {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2rem;
+}
+
+.arch-layer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.arch-box {
+    background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
+    color: white;
+    padding: 1rem 2rem;
+    border-radius: 0.75rem;
+    font-weight: 600;
+    font-size: 1rem;
+    text-align: center;
+    min-width: 200px;
+    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
+}
+
+.arch-box.arch-bottom {
+    background: linear-gradient(135deg, #06b6d4, #3b82f6);
+}
+
+.arch-arrow {
+    font-size: 1.5rem;
+    color: var(--primary-color);
+    padding: 0.5rem 0;
+    font-weight: bold;
+}
+
 /* Features */
 .features {
     padding: 8rem 0;

docs/documentation.html

@@ -55,15 +55,22 @@ <h1 data-aos="fade-up">Documentation</h1>
             <h2 data-aos="fade-up">Architecture</h2>
             <p data-aos="fade-up">WiBLE uses a layered architecture to ensure security and reliability.</p>
 
-            <div class="feature-card" style="margin-top: 2rem;" data-aos="fade-up">
-                <pre class="mermaid">
-graph TD
-    App["Application Layer"] --> Core["Core Services"]
-    Core --> Proto["Protocol Layer"]
-    Proto --> HAL["ESP32 HAL"]
-                </pre>
-                <p style="margin-top: 1rem; font-size: 0.9rem; color: var(--text-muted);">* Note: Diagram simplified for
-                    web view.</p>
+            <div class="feature-card architecture-diagram" style="margin-top: 2rem;" data-aos="fade-up">
+                <div class="arch-layer">
+                    <div class="arch-box">Application Layer</div>
+                    <div class="arch-arrow">↓</div>
+                </div>
+                <div class="arch-layer">
+                    <div class="arch-box">Core Services</div>
+                    <div class="arch-arrow">↓</div>
+                </div>
+                <div class="arch-layer">
+                    <div class="arch-box">Protocol Layer</div>
+                    <div class="arch-arrow">↓</div>
+                </div>
+                <div class="arch-layer">
+                    <div class="arch-box arch-bottom">ESP32 HAL</div>
+                </div>
             </div>
         </div>
 
@@ -74,20 +81,21 @@ <h2 data-aos="fade-up">API Reference</h2>
                 <div class="feature-card" data-aos="fade-up">
                     <h3>WiBLE Class</h3>
                     <ul class="check-list">
-                        <li><code>begin(config)</code>: Initialize the library</li>
-                        <li><code>startProvisioning()</code>: Start BLE advertising</li>
-                        <li><code>loop()</code>: Handle events (call in loop)</li>
-                        <li><code>isProvisioned()</code>: Check status</li>
+                        <li><code><span class="code-function">begin</span>(config)</code>: Initialize the library</li>
+                        <li><code><span class="code-function">startProvisioning</span>()</code>: Start BLE advertising
+                        </li>
+                        <li><code><span class="code-function">loop</span>()</code>: Handle events (call in loop)</li>
+                        <li><code><span class="code-function">isProvisioned</span>()</code>: Check status</li>
                     </ul>
                 </div>
 
                 <div class="feature-card" data-aos="fade-up" data-aos-delay="100">
                     <h3>Callbacks</h3>
                     <ul class="check-list">
-                        <li><code>onWiFiConnected(cb)</code></li>
-                        <li><code>onProvisioningComplete(cb)</code></li>
-                        <li><code>onError(cb)</code></li>
-                        <li><code>onCustomDataReceived(cb)</code></li>
+                        <li><code><span class="code-function">onWiFiConnected</span>(cb)</code></li>
+                        <li><code><span class="code-function">onProvisioningComplete</span>(cb)</code></li>
+                        <li><code><span class="code-function">onError</span>(cb)</code></li>
+                        <li><code><span class="code-function">onCustomDataReceived</span>(cb)</code></li>
                     </ul>
                 </div>
             </div>
@@ -105,11 +113,11 @@ <h2 data-aos="fade-up">Security Levels</h2>
                 </thead>
                 <tbody>
                     <tr style="border-bottom: 1px solid var(--border-color);">
-                        <td style="padding: 1rem;"><code>NONE</code></td>
+                        <td style="padding: 1rem;"><code><span class="code-keyword">NONE</span></code></td>
                         <td style="padding: 1rem;">No encryption (Development only)</td>
                     </tr>
                     <tr style="border-bottom: 1px solid var(--border-color);">
-                        <td style="padding: 1rem;"><code>SECURE</code></td>
+                        <td style="padding: 1rem;"><code><span class="code-keyword">SECURE</span></code></td>
                         <td style="padding: 1rem;">ECDH Key Exchange + AES-256 (Recommended)</td>
                     </tr>
                 </tbody>