styles

.astro/types.d.ts

@@ -1,2 +1 @@
 /// <reference types="astro/client" />
-/// <reference path="content.d.ts" />

src/components/ToolMatrix.astro

@@ -34,9 +34,19 @@ domains.forEach((domain: any) => {
 ---
 
 <div id="matrix-container" class="matrix-wrapper" style="display: none;">
-  <!-- Collaboration Tools Section (compact horizontal layout for matrix view) -->
-  <div id="collaboration-tools-section" style="margin-bottom: 1.5rem;">
-    <h3 style="margin-bottom: 0.75rem; color: var(--color-text); font-size: 1.125rem;">Übergreifend & Kollaboration</h3>
+<div id="collaboration-tools-section" class="collaboration-section-collapsed" style="margin-bottom: 1.5rem;">
+  <div class="collaboration-header" onclick="toggleCollaborationSection()" style="cursor: pointer; display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.1rem;">
+    <h3 style="margin: 0; color: var(--color-text); font-size: 1.125rem;">Übergreifend & Kollaboration</h3>
+    <div class="collaboration-expand-icon">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <polyline points="6 9 12 15 18 9"></polyline>
+      </svg>
+    </div>
+  </div>
+  </div>
+  </div>
+</div>
+  <div class="collaboration-content" style="display: none;">
     <div class="collaboration-tools-compact" id="collaboration-tools-container">
       {collaborationTools.map((tool: any) => {
         const hasValidProjectUrl = tool.projectUrl !== undefined &&
@@ -54,7 +64,7 @@ domains.forEach((domain: any) => {
                 {tool.knowledgebase === true && <span class="badge badge--mini badge-error">Infos 📖</span>}
               </div>
             </div>
-            <p style="font-size: 0.75rem; color: var(--color-text-secondary); margin: 0.25rem 0; line-height: 1.3;">
+            <p class="text-muted">              
               {tool.description}
             </p>
             <div style="display: flex; gap: 0.75rem; font-size: 0.6875rem; color: var(--color-text-secondary);">
@@ -190,6 +200,33 @@ domains.forEach((domain: any) => {
     }
   }
 
+  // Toggle collaboration section
+function toggleCollaborationSection() {
+  const section = document.getElementById('collaboration-tools-section');
+  const content = document.querySelector('.collaboration-content');
+  const icon = document.querySelector('.collaboration-expand-icon svg');
+  
+  if (!section || !content || !icon) return;
+  
+  const isExpanded = section.classList.contains('collaboration-section-expanded');
+  
+  if (isExpanded) {
+    // Collapse
+    section.classList.remove('collaboration-section-expanded');
+    section.classList.add('collaboration-section-collapsed');
+    content.style.display = 'none';
+    icon.style.transform = 'rotate(0deg)';
+  } else {
+    // Expand
+    section.classList.remove('collaboration-section-collapsed');
+    section.classList.add('collaboration-section-expanded');
+    content.style.display = 'block';
+    icon.style.transform = 'rotate(180deg)';
+  }
+}
+
+// Make function globally available
+window.toggleCollaborationSection = toggleCollaborationSection;
   // Helper function to create compact collaboration tool cards for matrix view
   function createCollaborationToolCardCompact(tool) {
     const hasValidProjectUrl = tool.projectUrl !== undefined && 
@@ -211,7 +248,7 @@ domains.forEach((domain: any) => {
           ${tool.knowledgebase === true ? '<span class="badge badge--mini badge-error">Infos 📖</span>' : ''}
         </div>
       </div>
-      <p style="font-size: 0.75rem; color: var(--color-text-secondary); margin: 0.25rem 0; line-height: 1.3;">
+      <p class="text-muted">
         ${tool.description}
       </p>
       <div style="display: flex; gap: 0.75rem; font-size: 0.6875rem; color: var(--color-text-secondary);">

src/data/tools.yaml

@@ -15,7 +15,6 @@ tools:
       - mobile-forensics
       - cloud-forensics
     phases:
-      - data-collection
       - examination
       - analysis
       - reporting

src/styles/global.css

@@ -278,11 +278,11 @@ input[type="checkbox"] {
   border-color: var(--color-oss);
 }
 
-/* Simplified Grid System */
 .grid-auto-fit {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(300px, 350px));
   gap: 1rem;
+  justify-content: center;
 }
 
 /* Tool Cards */
@@ -325,7 +325,7 @@ input[type="checkbox"] {
   line-height: 1.4;
   max-height: calc(1.4em * 3);
   font-size: 0.875rem;
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
   word-break: break-word;
 }
 
@@ -363,7 +363,7 @@ input[type="checkbox"] {
   display: flex;
   flex-wrap: wrap;
   gap: 0.25rem;
-  max-height: 2.5rem;
+  max-height: 3.5rem;
   overflow: hidden;
   position: relative;
   margin-bottom: 1rem;
@@ -415,7 +415,7 @@ input[type="checkbox"] {
 /* Matrix Components */
 .matrix-wrapper {
   overflow-x: auto;
-  margin: 2rem 0;
+  margin: 1rem 0;
 }
 
 .matrix-table {
@@ -756,6 +756,45 @@ input[type="checkbox"] {
   border-color: var(--color-oss);
 }
 
+.collaboration-tool-compact .text-muted {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.3;
+  max-height: calc(1.3em * 3);
+  font-size: 0.75rem;
+  margin: 0.25rem 0;
+  word-break: break-word;
+}
+
+/* 
+.collaboration-header:hover {
+  background-color: var(--color-bg-secondary);
+  margin: -0.5rem;
+  padding: 1rem;
+  border-radius: 0.5rem;
+}
+Collaboration Section Collapse */
+
+.collaboration-expand-icon {
+  transition: var(--transition-medium);
+  color: var(--color-text-secondary);
+}
+
+.collaboration-expand-icon svg { 
+  transition: var(--transition-medium); 
+}
+
+.collaboration-section-expanded .collaboration-expand-icon svg {
+  transform: rotate(180deg);
+}
+
+.collaboration-content {
+  animation: slideDown 0.3s ease-out;
+}
+
 .tool-compact-header {
   display: flex;
   justify-content: space-between;