Update documentation

Author: Your Name

cecli/website/_includes/works-best.md

@@ -1 +1 @@
-cecli works best with Claude 3.5 Sonnet, DeepSeek R1 & Chat V3, OpenAI o1, o3-mini & GPT-4o. cecli can [connect to almost any LLM, including local models](https://cecli.chat/docs/llms.html).
+cecli can [connect to almost any LLM, including local models](https://cecli.chat/docs/llms.html).

cecli/website/_sass/global-overrides.scss

@@ -17,7 +17,7 @@
         // Grid layout for documentation pages on large screens
         display: grid !important;
         grid-template-columns: 300px 1fr; // Sidebar on left, main content on right
-        grid-template-rows: auto 1fr; // Top nav bar, then main content
+        grid-template-rows: 100vh; // Top nav bar, then main content
         grid-template-areas:
             "sidebar topnav"
             "sidebar main";

cecli/website/assets/home.css

@@ -289,6 +289,124 @@ nav {
     letter-spacing: -0.5px;
 }
 
+/* ── Install Section ── */
+.install {
+    padding: 60px 0 40px;
+    text-align: center;
+}
+
+.install .code-block {
+    margin: 0 auto;
+    position: relative;
+}
+
+/* ── Install Grid (side-by-side cards) ── */
+.install-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 24px;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.install-card {
+    background: #1a1a1a;
+    border-radius: 8px;
+    padding: 20px;
+    border-left: 3px solid var(--primary);
+}
+
+.install-card-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 12px;
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: var(--dark);
+}
+
+.install-card-header i {
+    font-size: 1.3rem;
+    color: var(--primary);
+}
+
+.install-card .code-block {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    font-size: 0.85rem;
+}
+
+.install-card .code-block pre {
+    margin: 0;
+}
+
+/* ── Copy Button (clickable <pre>) ── */
+.copy-btn {
+    cursor: pointer !important;
+    user-select: none;
+    transition: background-color 0.3s, border-color 0.3s, transform 0.2s;
+    border: 1px solid transparent;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+    margin: 0;
+}
+
+.copy-btn:hover {
+    background-color: #2a2a2a !important;
+    border-color: var(--primary);
+    transform: translateY(-1px);
+}
+
+.copy-btn:active {
+    transform: translateY(0px);
+}
+
+.copy-btn:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+}
+
+.copy-btn code {
+    flex: 1;
+}
+
+.copy-btn i {
+    font-size: 1.2rem;
+    color: var(--gray);
+    transition: color 0.3s;
+    flex-shrink: 0;
+}
+
+.copy-btn:hover i {
+    color: white;
+}
+
+/* ── Install Note ── */
+.install-note {
+    margin-top: 1.5rem;
+    color: var(--gray);
+    font-size: 0.95rem;
+}
+
+.install-note a {
+    color: var(--primary);
+    text-decoration: none;
+    font-weight: 500;
+}
+
+.install-note a:hover {
+    text-decoration: underline;
+}
+
+@media (max-width: 768px) {
+    .install-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
 .feature-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -391,11 +509,11 @@ code, pre, .code-block {
 .code-block {
     background-color: var(--code-bg);
     border-radius: 8px;
-    padding: 1.5rem;
+    padding: 1rem;
     color: white;
     font-size: 1.1rem;
     line-height: 1.5;
-    margin: 1.5rem 0;
+    margin: 1rem 0;
     overflow-x: auto;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
     tab-size: 2;

cecli/website/docs/config.md

@@ -1,5 +1,5 @@
 ---
-nav_order: 55
+nav_order: 40
 has_children: true
 description: Information on all of cecli's settings and how to use them.
 ---

cecli/website/docs/config/skills.md

@@ -3,6 +3,7 @@ parent: Configuration
 nav_order: 35
 description: Extend AI capabilities with custom instructions, reference materials, scripts, and assets through the skills system.
 ---
+
 # Skills System
 
 Agent Mode includes a powerful skills system that allows you to extend the AI's capabilities with custom instructions, reference materials, scripts, and assets. Skills are organized collections of knowledge and tools that help the AI perform specific tasks more effectively.