adding unhealthy and health filters - percentage status on top. Docs update (#84)

Signed-off-by: Daniel Guns <danbguns@gmail.com>

Author: dgunzy

docs/assets/scss/_styles_project.scss

@@ -33,6 +33,17 @@
     text-align: center !important;
   }
 
+  // Button container - proper flexbox alignment
+  .d-flex {
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+    
+    &.gap-3 {
+      gap: 1rem !important;
+    }
+  }
+  
   // Make content wider - less squashed
   .row {
     max-width: 1200px;
@@ -456,10 +467,44 @@ code:not(pre code) {
   }
 }
 
-// Main wrapper - let Docsy handle layout naturally
+// Main wrapper - ensure proper width constraints
 .td-main {
   background-color: var(--bs-body-bg);
 
+  // Ensure main content area uses more width on larger screens
+  // Docsy uses Bootstrap grid: col-xl-8 (66.7%), we'll make it wider
+  main[role="main"] {
+    // On xl screens and above, use more width for better readability
+    @media (min-width: 1200px) {
+      // Override Docsy's col-xl-8 to use more space
+      flex: 0 0 auto;
+      width: 70% !important; // Use 70% instead of 66.7%
+      max-width: 70% !important;
+    }
+    
+    @media (min-width: 1400px) {
+      width: 72% !important;
+      max-width: 72% !important;
+    }
+  }
+  
+  // Adjust sidebar widths to accommodate wider content
+  .td-sidebar {
+    @media (min-width: 1200px) {
+      flex: 0 0 auto;
+      width: 15% !important; // Reduce from 16.67% to 15%
+      max-width: 15% !important;
+    }
+  }
+  
+  .td-sidebar-toc {
+    @media (min-width: 1200px) {
+      flex: 0 0 auto;
+      width: 15% !important; // Reduce from 16.67% to 15%
+      max-width: 15% !important;
+    }
+  }
+  
   [data-bs-theme="dark"] & {
     background-color: #{$dark-bg};
   }
@@ -480,12 +525,34 @@ code:not(pre code) {
   display: block !important;
 }
 
-// Content area - wider, less squashed (Docsy handles layout)
+// Content area - proper width constraints following Hugo/Docsy best practices
 .td-content {
   background-color: var(--bs-body-bg);
   padding: 3rem 2rem;
-  // Wider content - less squashed
-  max-width: 100%;
+  
+  // Docsy wraps content in td-content__inner - ensure it uses available space
+  // but doesn't get too wide (readability: ~80-100 chars = ~800-1000px)
+  .td-content__inner {
+    max-width: 100%;
+    
+    // On larger screens, allow content to use more width
+    @media (min-width: 1200px) {
+      max-width: 100%;
+    }
+  }
+  
+  // Ensure container-fluid doesn't constrain content unnecessarily
+  .container-fluid {
+    max-width: 100%;
+    padding-left: 2rem;
+    padding-right: 2rem;
+    
+    // On larger screens, use more horizontal space
+    @media (min-width: 1400px) {
+      padding-left: 3rem;
+      padding-right: 3rem;
+    }
+  }
 
   [data-bs-theme="dark"] & {
     background-color: #{$dark-bg};
@@ -658,7 +725,7 @@ code:not(pre code) {
     opacity: 0.9;
   }
 
-  // Feature blocks
+  // Feature blocks - make screenshots larger
   .feature {
     text-align: left;
 
@@ -667,6 +734,34 @@ code:not(pre code) {
     }
   }
 
+  // Make screenshots in feature blocks larger
+  // Feature blocks use col-lg-4 (3 columns), so we override to make screenshots bigger
+  // Target screenshots section specifically
+  section.td-box {
+    .col-lg-4 {
+      // Make feature blocks wider for screenshots
+      @media (min-width: 992px) {
+        flex: 0 0 auto;
+        width: 50% !important; // Change from 33.33% (col-lg-4) to 50% (2 columns)
+        max-width: 50% !important;
+      }
+      
+      img {
+        max-width: 100% !important;
+        width: 100% !important;
+        height: auto;
+        margin: 1.5rem auto;
+        display: block;
+        border-radius: $border-radius;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        
+        [data-bs-theme="dark"] & {
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+        }
+      }
+    }
+  }
+  
   // Breadcrumbs
   .td-breadcrumb {
     margin-bottom: 1rem;

docs/content/_index.md

@@ -23,11 +23,11 @@ notoc: true
     <p class="lead mb-5">A K9s-inspired terminal UI for monitoring Flux GitOps resources</p>
 
     <!-- Action Buttons -->
-    <div class="mb-5">
-      <a class="btn btn-lg btn-primary me-3 mb-3" href="{{< relref \"getting-started/\" >}}">
+    <div class="d-flex flex-wrap justify-content-center gap-3 mb-5">
+      <a class="btn btn-lg btn-primary" href="{{< relref \"getting-started/\" >}}">
         Get Started <i class="fas fa-arrow-alt-circle-right ms-2"></i>
       </a>
-      <a class="btn btn-lg btn-outline-primary mb-3" href="https://github.com/dgunzy/flux9s">
+      <a class="btn btn-lg btn-outline-primary" href="https://github.com/dgunzy/flux9s">
         <i class="fab fa-github me-2"></i>View on GitHub
       </a>
     </div>

docs/content/configuration/_index.md

@@ -21,7 +21,8 @@ flux9s stores its configuration in a YAML file. The location depends on your ope
 
 ### Read-Only Mode
 
-By default, flux9s launches in readonly mode to prevent accidental changes. You can change this:
+By default, flux9s launches in readonly mode to prevent accidental changes (Delete operations always have a confirmation screen).
+You can change this:
 
 **Via command line:**
 

docs/content/user-guide/_index.md

@@ -34,11 +34,26 @@ Type these commands in command mode (press `:`):
 | `:ns <namespace>` | Switch to a specific namespace           |
 | `:ns all`         | View all namespaces                      |
 | `:all`            | Show all resources                       |
+| `:healthy`        | Show only healthy resources              |
+| `:unhealthy`      | Show only unhealthy resources            |
 | `:skin <name>`    | Change theme/skin                        |
 | `:readonly`       | Toggle readonly mode                     |
 | `:help`           | Show/hide help                           |
 | `:q` or `:q!`     | Quit application                         |
 
+## Health Filtering
+
+Filter resources by health status:
+
+- **`:healthy`** - Show only healthy resources (ready=true, not suspended, or null status)
+- **`:unhealthy`** - Show only unhealthy resources (ready=false or suspended=true)
+- **`:all`** - Clear health filter and show all resources
+
+The header displays a health percentage indicator showing the overall health of your resources. The indicator uses color coding:
+- **Green (●)** - 90% or higher health
+- **Yellow (⚠)** - 70-89% health
+- **Red (✗)** - Below 70% health
+
 ## Operations
 
 Perform actions on selected resources: