/* printing.css - Estilos hiper-optimizados para impresión (Low Tech Magazine) */ @media print { /* 1. Resetear colores a blanco y negro estricto para ahorrar tinta */ :root { --accent: #000 !important; } * { background: transparent !important; color: #000 !important; text-shadow: none !important; box-shadow: none !important; } body { font-size: 9.5pt; /* Tamaño de fuente más pequeño */ line-height: 1.4; max-width: 100%; margin: 0; padding: 0; } /* 2. Mantener cabecera/pie pero ocultar controles innecesarios */ .figure-controls, button, .dashboard, #battery, .sidebar { display: none !important; } .print-only { display: block !important; } .screen-only { display: none !important; } /* 2.5 Ocultar la caja de enviar comentarios al imprimir */ .cactus-editor, .cactus-login-form-wrapper, .cactus-view-more { display: none !important; } /* El H2 original ya está oculto por ser .screen-only */ /* Ocultamos la caja de comentarios real en impresión porque JS inyecta un clon perfecto */ #comment-section { display: none !important; } #print-comments-clone { display: block !important; } .cactus-container, .cactus-comments-list { break-before: avoid !important; page-break-before: avoid !important; -webkit-column-break-before: avoid !important; } /* FIX PARA FIREFOX: Flexbox dentro de CSS Columns causa saltos de página erráticos. Convertimos todo a bloques normales de documento. */ .cactus-container, .cactus-comments-list, .cactus-comment { display: block !important; } .cactus-comment { margin-bottom: 2rem !important; } .cactus-comment-header { margin-bottom: 0.5rem !important; } .cactus-comments-list { margin-top: 0 !important; /* Elimina el margen gigante que causa el salto de columna */ } /* Mostrar fecha absoluta en vez de tiempo relativo ("hace X días") */ .cactus-comment-time { font-size: 0 !important; /* Oculta el texto original sin romper el layout */ } .cactus-comment-time::after { content: attr(data-exact-date); font-size: 0.85rem !important; /* Restaura el tamaño para la fecha absoluta */ } /* Estilizar la cabecera para que parezca la portada del Low Tech Magazine */ header.print-header { text-align: left; margin-bottom: 0; } header.print-header h1 { margin-bottom: 0.1em; font-size: 2.5em; text-transform: uppercase; font-weight: normal; border-bottom: none !important; } header.print-header .subtitle { font-size: 0.9em; margin-top: 0.2em; margin-bottom: 0.5em; } header.print-header .header-meta { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #000; padding-bottom: 0.5rem; margin-bottom: 3em; font-size: 0.85em; } /* Ocultar el h1 original generado por mkdocs para no duplicarlo al imprimir */ .content h1:first-of-type { display: none !important; } footer { display: none !important; /* Evita que cree una página en blanco al final si no cabe */ } html { min-height: 100%; } /* Diseño de libro a doble columna SOLO para el contenido */ .content { column-count: 2; column-gap: 0.8cm; /* Menor espaciado entre columnas */ text-align: justify; /* Justificado típico de libros impresos */ column-fill: auto; /* Llena la primera columna hasta el fondo antes de pasar a la segunda */ hyphens: auto; /* Evita los ríos de blanco al justificar */ } /* 3. Expansión de enlaces: El lector necesita saber a dónde lleva el enlace */ a { text-decoration: underline; } header.print-header h1 a { text-decoration: none !important; } main a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; } /* Sustituir el chorizo de matrix.to por el ID limpio de Matrix en los comentarios */ .cactus-comment-displayname[data-matrix-id]::after { content: " (" attr(data-matrix-id) ") " !important; word-break: normal; } /* Excepción para enlaces ancla (índices internos) */ main a[href^="#"]::after { content: ""; } /* Ocultar el símbolo ¶ (ancla) que MkDocs genera al lado de los títulos */ a.headerlink { display: none !important; } /* 4. Tipografía técnica y viudas/huérfanas */ p, h2, h3, .cactus-comment, .cactus-message-text { orphans: 3; /* Líneas mínimas al final de una página */ widows: 3; /* Líneas mínimas al inicio de una página */ } /* Evitar que el nombre del autor se separe del texto de su comentario */ .cactus-comment-header { break-after: avoid !important; page-break-after: avoid !important; -webkit-column-break-after: avoid !important; } h1, h2, h3, h4, h5, h6 { font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; color: #000 !important; border-bottom: 1px solid #000 !important; } h1 { font-size: 2.5em !important; } h2 { font-size: 1.8em !important; padding-bottom: 0.5em !important; } h3 { font-size: 1.4em !important; } h4 { font-size: 1.2em !important; } h2, h3, h4, h5 { page-break-after: avoid !important; break-after: avoid !important; -webkit-column-break-after: avoid !important; break-inside: avoid !important; margin-top: 2em; text-align: left; } /* Forzar al elemento que va justo debajo del título a que no se separe de él */ h2 + *, h3 + *, h4 + *, h5 + * { page-break-before: avoid !important; break-before: avoid !important; -webkit-column-break-before: avoid !important; } /* 5. Imágenes ajustadas a las columnas (sin romper el flujo) */ img, pre, blockquote, figure, table { page-break-inside: avoid !important; break-inside: avoid !important; -moz-column-break-inside: avoid !important; -webkit-column-break-inside: avoid !important; margin: 1.5em 0; display: inline-block; width: 100%; } img { max-width: 100% !important; height: auto; border: 1px solid #000; } pre, code { border: 1px solid #999; color: #000; background: transparent; white-space: pre-wrap !important; word-break: break-word !important; } /* 6. Formato de la página física */ @page { margin: 1.5cm; /* Márgenes reducidos para aprovechar más la hoja */ } }