Optimized CSS a little

Author: vbakke

src/app/component/activity-description/activity-description.component.css

@@ -64,7 +64,8 @@
   transition: opacity 0.3s ease;
 }
 
-.difficulty-summary.hidden {
+/* Shared collapsing state for preview/summary elements */
+.hidden {
   opacity: 0;
   height: 0;
   overflow: hidden;
@@ -190,14 +191,6 @@ mat-icon.mat-icon {
   transition: opacity 0.3s ease;
 }
 
-.references-summary.hidden {
-  opacity: 0;
-  height: 0;
-  overflow: hidden;
-  margin: 0;
-  gap: 0;
-}
-
 .ref-section {
   display: flex;
   flex-direction: column;
@@ -229,7 +222,7 @@ mat-icon.mat-icon {
 
 .references-grid {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   padding: 15px 0;
   width: 100%;
@@ -296,7 +289,7 @@ mat-icon.mat-icon {
 /* Responsive design for smaller screens */
 @media (max-width: 550px) {
   .references-grid {
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: repeat(2, 1fr);
     gap: 15px;
   }
 
@@ -340,13 +333,6 @@ mat-icon.mat-icon {
   transition: opacity 0.3s ease;
 }
 
-.implementation-preview.hidden {
-  opacity: 0;
-  height: 0;
-  overflow: hidden;
-  margin: 0;
-}
-
 .tool-count-badge {
   background-color: #e8f5e8;
   color: #2e7d32;
@@ -398,39 +384,6 @@ mat-icon.mat-icon {
 
 /* Dark Mode Support */
 @media (prefers-color-scheme: dark) {
-  /* Mapping/References section - improve text readability */
-  /* .references-summary {
-    color: #e0e0e0;
-  }
-  
-  .ref-section strong {
-    color: #ffffff;
-  }
-  
-  .ref-values {
-    color: #b0b0b0;
-  }
-  
-  .reference-value {
-    background-color: #424242;
-    border-color: #616161;
-    color: #ffffff;
-  }
-  
-  .reference-header {
-    color: #e0e0e0;
-    border-bottom-color: #616161;
-  } */
-  
-  /* .no-references {
-    color: #757575;
-  }
-   */
-  /* Tool descriptions in dark mode */
-  /* .tool-description {
-    color: #b0b0b0;
-  }
-   */
   /* Level badges in dark mode - maintain readability */
   .level-1 { background-color: #2e7d32; color: #e8f5e8; }
   .level-2 { background-color: #388e3c; color: #e0f2e7; }

src/app/component/activity-description/activity-description.component.html

@@ -320,9 +320,6 @@ <h4 class="tool-name" [innerHTML]="implement['name']"></h4>
               <mat-icon class="link-icon" *ngIf="implement['url']">open_in_new</mat-icon>
             </a>
           </div>
-          <!-- <div class="tool-url" *ngIf="implement['url']">
-            <a [href]="implement['url']" target="_blank" [innerHTML]="implement['url']"></a>
-          </div> -->
           <div class="tool-description" *ngIf="implement['description']">
             <p [innerHTML]="implement['description']"></p>
           </div>