Adjusted icon size.

Author: ProCO-RPHopkins

frontend/index.html

@@ -779,7 +779,7 @@ <h2 class="text-3xl font-bold text-teal-600 dark:text-teal-300">
       </h2>
       <!-- Optional icon (replace file when available) -->
       <img src="assets/raspberry-pi-icon.png" alt="Raspberry Pi"
-          class="w-10 h-10 rounded-lg ring-1 ring-gray-200 dark:ring-white/10 bg-white/30 dark:bg-white/5 p-1 hidden sm:block" />
+          class="w-26 h-26 rounded-lg ring-1 ring-gray-200 dark:ring-white/10 bg-white/30 dark:bg-white/5 p-1 hidden sm:block" />
     </div>
 
     <!-- Intro / Outcome -->
@@ -816,17 +816,17 @@ <h3 class="font-semibold mb-2">My Role — Context Engineer</h3>
                   transition-all duration-300 flex items-center justify-center h-64">
         <div class="text-center text-sm text-gray-600 dark:text-white/70">
           <img src="assets/raspberry-pi-icon.png" alt="Raspberry Pi"
-              class="w-16 h-16 mx-auto mb-3 opacity-80" />
-          <p>Device + Classroom Topology (placeholder)</p>
+              class="w-50 h-50 mx-auto mb-3 opacity-80" />
+          <p>Device + Classroom Topology</p>
         </div>
       </div>
       <div class="rounded-xl ring-1 ring-gray-200 dark:ring-white/10 bg-white/5
                   shadow-md hover:shadow-2xl hover:shadow-teal-500/30
                   transition-all duration-300 flex items-center justify-center h-64">
         <div class="text-center text-sm text-gray-600 dark:text-white/70">
           <img src="assets/raspberry-pi-icon.png" alt="Raspberry Pi"
-              class="w-16 h-16 mx-auto mb-3 opacity-80" />
-          <p>Content Flow: ZIM → Kiwix → Local Wi-Fi (placeholder)</p>
+              class="w-50 h-50 mx-auto mb-3 opacity-80" />
+          <p>Content Flow: ZIM → Kiwix → Local Wi-Fi</p>
         </div>
       </div>
     </div>

frontend/src/output.css

@@ -372,12 +372,36 @@
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
+  .h-5 {
+    height: calc(var(--spacing) * 5);
+  }
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
+  .h-14 {
+    height: calc(var(--spacing) * 14);
+  }
   .h-16 {
     height: calc(var(--spacing) * 16);
   }
+  .h-18 {
+    height: calc(var(--spacing) * 18);
+  }
+  .h-20 {
+    height: calc(var(--spacing) * 20);
+  }
+  .h-24 {
+    height: calc(var(--spacing) * 24);
+  }
+  .h-26 {
+    height: calc(var(--spacing) * 26);
+  }
+  .h-32 {
+    height: calc(var(--spacing) * 32);
+  }
+  .h-50 {
+    height: calc(var(--spacing) * 50);
+  }
   .h-64 {
     height: calc(var(--spacing) * 64);
   }
@@ -399,12 +423,39 @@
   .min-h-screen {
     min-height: 100vh;
   }
+  .w-2 {
+    width: calc(var(--spacing) * 2);
+  }
+  .w-5 {
+    width: calc(var(--spacing) * 5);
+  }
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
+  .w-14 {
+    width: calc(var(--spacing) * 14);
+  }
   .w-16 {
     width: calc(var(--spacing) * 16);
   }
+  .w-18 {
+    width: calc(var(--spacing) * 18);
+  }
+  .w-20 {
+    width: calc(var(--spacing) * 20);
+  }
+  .w-24 {
+    width: calc(var(--spacing) * 24);
+  }
+  .w-26 {
+    width: calc(var(--spacing) * 26);
+  }
+  .w-32 {
+    width: calc(var(--spacing) * 32);
+  }
+  .w-50 {
+    width: calc(var(--spacing) * 50);
+  }
   .w-78 {
     width: calc(var(--spacing) * 78);
   }