Diferencias

Muestra las diferencias entre dos versiones de la página.

--- hardware:placas_monitor [2026/05/13 06:15] – jesus
+++ hardware:placas_monitor [2026/05/21 06:17] (actual) – jesus
@@ Línea 68: / Línea 68: @@
   }
-  /* --- REJILLA TÉCNICA Y RESALTADOS --- */
+  /* --- REJILLA TÉCNICA AJUSTADA A LA PANTALLA --- */
   .drive-grid-container {
     display: flex;
@@ Línea 100: / Línea 100: @@
   }
-  /* Etiqueta de Resaltado del Modelo */
   .model-highlight {
     background-color: #00ff00;
@@ Línea 109: / Línea 108: @@
   }
+  /* REJILLA DISTRIBUIDA EN UNA SOLA LÍNEA SIN DESBORDAMIENTO */
   .drive-gallery {
     display: flex;
-    gap: 15px;
+    gap: 10px;
-    flex-wrap: wrap;
+    flex-direction: row;
-    justify-content: flex-start;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    width: 100%;
   }
@@ Línea 124: / Línea 126: @@
     flex-direction: column;
     align-items: center;
+    flex: 1 1 0px;        /* Reparto equitativo del espacio */
+    max-width: 24%;       /* Evita que superen el cuarto de pantalla */
+    box-sizing: border-box;
   }
-  .img-frame img { max-height: 240px; width: auto; cursor: pointer; }
-  .img-label { font-size: 0.75em; color: #00aa00; margin-top: 4px; text-transform: uppercase; }
-  /* --- LIGHTBOX ULTRA CON SCROLL FLUIDO SIN RECORTES SUPERIORES --- */
+  /* Auto-escalado elástico manteniendo proporciones cuadradas */
+  .img-frame img {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 1 / 1;  /* Fuerza proporciones cuadradas idénticas */
+    object-fit: contain;
+    cursor: pointer;
+    background-color: #000;
+  }
+  .img-label { font-size: 0.68em; color: #00aa00; margin-top: 6px; text-transform: uppercase; word-break: break-word; }
+  /* --- LIGHTBOX SCROLL --- */
   .modal-pcw {
     display: none;
@@ Línea 139: / Línea 154: @@
   }
-  /* Bloque de alineación por margen para evitar bugs de recorte flex */
   .modal-pcw:target { display: block; text-align: center; }
@@ Línea 163: / Línea 177: @@
 </style>
-<!-- CAPA DE MODALES INTERACTIVOS (RUTAS CORREGIDAS A HARDWARE:PLACAS) -->
+<!-- CAPA DE MODALES INTERACTIVOS -->
 <div id="pmm1t" class="modal-pcw"><a href="#close" class="close-overlay"><img class="modal-content" src="/lib/exe/fetch.php?media=hardware:placas:Amstrad_PCW_Z70240_MM0010E_PCB_Top.jpg"></a></div>
 <div id="pmm1b" class="modal-pcw"><a href="#close" class="close-overlay"><img class="modal-content" src="/lib/exe/fetch.php?media=hardware:placas:Amstrad_PCW_Z70240_MM0010E_PCB_Bottom.jpg"></a></div>
@@ Línea 173: / Línea 187: @@
   <div class="content-body">
-    <p>Esta página pretende recopilar las distintas versiones de las placas base de los distintos monitores de <a href="doku.php?id=es:companias:amstrad" class="retro-text-green" style="text-decoration:underline !important;">Amstrad</a> <a href="doku.php?id=pcw" class="retro-text-green" style="text-decoration:underline !important;">PCW</a>.</p>
+    <p>Esta página pretende recopilar las distintas versiones de las placas base de los distintos monitores de <a href="doku.php?id=companias:amstrad" class="retro-text-green" style="text-decoration:underline !important;">Amstrad</a> <a href="doku.php?id=pcw" class="retro-text-green" style="text-decoration:underline !important;">PCW</a>.</p>
   </div>