docs: update styles and content for mobile optimization and clarity in index.md and extra.css

Author: dataGriff

.vscode/settings.json

@@ -14,6 +14,7 @@
         "pymdown",
         "pymdownx",
         "RUNBOOK",
+        "runbooks",
         "striptags",
         "superfences",
         "taskfile",

docs/assets/stylesheets/extra.css

@@ -12,19 +12,15 @@
   --ci-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
 
-/* Hero Section Styling */
+/* Hero Section Styling - Mobile Optimized */
 .hero-section {
   text-align: center;
-  padding: 3rem 0;
-  background: var(--ci-gradient);
-  background-clip: text;
-  -webkit-background-clip: text;
-  color: transparent;
-  margin-bottom: 2rem;
+  padding: 1.5rem 0;
+  margin-bottom: 1rem;
 }
 
 .hero-section h2 {
-  font-size: 2.5rem;
+  font-size: 2rem;
   font-weight: 700;
   margin-bottom: 1rem;
   background: var(--ci-gradient);
@@ -34,13 +30,18 @@
 }
 
 .hero-buttons {
-  margin-top: 2rem;
+  margin-top: 1.5rem;
   display: flex;
-  gap: 1rem;
+  gap: 0.75rem;
   justify-content: center;
   flex-wrap: wrap;
 }
 
+.hero-buttons .md-button {
+  padding: 0.6rem 1rem;
+  font-size: 0.9rem;
+}
+
 /* Interface Example Styling */
 .interface-example {
   background: var(--md-code-bg-color);
@@ -274,31 +275,67 @@
 
 /* Mobile Responsiveness */
 @media (max-width: 768px) {
+  .hero-section {
+    padding: 1rem 0;
+    margin-bottom: 0.5rem;
+  }
+  
   .hero-section h2 {
-    font-size: 2rem;
+    font-size: 1.6rem;
+    margin-bottom: 0.75rem;
   }
 
   .hero-buttons {
     flex-direction: column;
-    align-items: center;
+    gap: 0.5rem;
+    margin-top: 1rem;
   }
 
   .hero-buttons .md-button {
     width: 100%;
     max-width: 300px;
+    margin: 0 auto;
   }
 
   .audience-grid,
   .principles-grid {
     grid-template-columns: 1fr;
+    gap: 1rem;
   }
 
   .stats-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 
   .cta-section {
-    padding: 2rem 1rem;
+    padding: 1.5rem 1rem;
+    margin: 1.5rem 0;
+  }
+  
+  .interface-example {
+    padding: 1.5rem;
+    margin: 1rem 0;
+  }
+  
+  .principle-card {
+    padding: 1.25rem;
+  }
+}
+
+/* Compact spacing for mobile */
+@media (max-width: 768px) {
+  .md-typeset h1 {
+    margin-bottom: 0.5rem;
+    font-size: 1.8rem;
+  }
+  
+  .md-typeset h2 {
+    margin-top: 1.5rem;
+    margin-bottom: 0.75rem;
+  }
+  
+  .md-typeset hr {
+    margin: 1rem 0;
   }
 }
 

docs/index.md

@@ -1,7 +1,7 @@
 ---
 title: Codebase Interface - Promoting Ease of Use Across Languages and Frameworks
 description: A comprehensive set of principles and tools that promote ease of use of codebases across languages, frameworks, and audiences. Explore documentation, CLI tools, templates, and implementation guides for contributors, consumers, operators, and AI agents.
-keywords: codebase interface, documentation standards, CLI tools, templates, automation, contributors, consumers, operators, AI agents, build agents, implementation guides, best practices, project structure, documentation generation, compliance validation, cross-platform, multi-language
+keywords: codebase interface, documentation standards, README, CONTRIBUTING, RUNBOOK, AGENTS, CLI tools, templates, automation, contributors, consumers, operators, AI agents, build agents, implementation guides, best practices, project structure, documentation generation, compliance validation, cross-platform, multi-language
 hide:
   - navigation
   - toc
@@ -19,9 +19,9 @@ search:
 
 <div class="hero-section" markdown>
 
-## 🚀 Promoting Ease of Use of Codebases Across Languages and Frameworks
+## 🚀 Promoting Ease of Codebase Use for All Audiences
 
-A **comprehensive set of principles** that promote ease of use of codebases across languages, frameworks, and multiple audiences.
+A **comprehensive set of principles** that promote ease of use codebase use across platforms, languages and IDEs for multiple audiences.
 
 <div class="hero-buttons" markdown>
 [Comprehensive Docs →](https://codebaseinterface.org/docs){ .md-button .md-button--primary }
@@ -79,7 +79,7 @@ The principles apply across **programming languages and frameworks**, promoting
 
 <div class="principle-card" markdown>
 ### 🔧 Tool Integration
-Leverage common tools like **Taskfile**, `.editorconfig`, and conventional commits for better developer experience and automated quality assurance.
+Leverage common tools like **Taskfile**, `.editorconfig`, and conventional commits for better developer experience and streamlined contributing methods.
 </div>
 
 <div class="principle-card" markdown>
@@ -117,7 +117,7 @@ A well-structured codebase serves **diverse audiences** with distinct needs. Adh
 
     🖥️ **Anyone who runs a service in production**
 
-    Operational runbooks, deployment guides, monitoring setup, and troubleshooting documentation for production environments.
+    Operational runbooks contain monitoring guides and troubleshooting documentation for production environments.
 
 !!! warning "**AI Agents**"