|
|
| Line 1: |
Line 1: |
| @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&family=Abhaya+Libre:wght@400;700&family=Newsreader:wght@400;700&family=Garamond:wght@400&family=Commissioner:wght@400;700&display=swap');
| |
|
| |
|
| /* General */
| |
| body {
| |
| background-color: #18181e; /* Fondo oscuro */
| |
| font-family: "Newsreader", serif; /* Fuente principal para el cuerpo */
| |
| font-size: 1.1em;
| |
| color: #ffffff;
| |
| line-height: 1.7; /* Mejor legibilidad */
| |
| }
| |
|
| |
| /* Letra capital al inicio del artículo */
| |
| .mw-body-content p:first-of-type::first-letter {
| |
| font-size: 3em; /* Tamaño mayor */
| |
| font-family: "Newsreader", serif; /* Fuente elegante */
| |
| font-weight: 700; /* Negrita */
| |
| float: left; /* Flota la letra a la izquierda */
| |
| line-height: 1; /* Ajuste para alineación */
| |
| margin-right: 10px; /* Espaciado con el texto */
| |
| color: inherit; /* Mantiene el color blanco */
| |
| }
| |
|
| |
| /* Títulos */
| |
| #firstHeading {
| |
| font-family: "Libre Baskerville", serif;
| |
| font-size: 2.5em;
| |
| text-decoration: none;
| |
| text-align: center; /* Centra el título principal */
| |
| margin-bottom: 20px; /* Espaciado inferior */
| |
| }
| |
|
| |
| h2 {
| |
| font-family: "EB Garamond", serif;
| |
| font-size: 1.8em;
| |
| font-weight: 700;
| |
| margin-bottom: 10px;
| |
| padding-bottom: 5px;
| |
| border-bottom: 2px solid #f5ed56; /* Línea amarilla */
| |
| }
| |
|
| |
| h3, h4, h5 {
| |
| font-family: "EB Garamond", serif;
| |
| font-weight: 700;
| |
| }
| |
|
| |
| h6 {
| |
| font-family: "Ysabeau Infant", sans-serif;
| |
| font-size: 1.2em;
| |
| font-weight: 700;
| |
| margin-top: 15px;
| |
| }
| |
|
| |
| /* Enlaces en el cuerpo del artículo */
| |
| .mw-body-content a {
| |
| color: inherit; /* Mantiene el color del texto normal */
| |
| text-decoration: underline 3px #f5ed56; /* Subrayado grueso amarillo */
| |
| position: relative;
| |
| overflow: hidden;
| |
| transition: color 0.3s ease, text-decoration-color 0.3s ease;
| |
| }
| |
|
| |
| .mw-body-content a:visited {
| |
| text-decoration-color: #707070; /* Subrayado gris claro en enlaces visitados */
| |
| }
| |
|
| |
| .mw-body-content a:active {
| |
| color: #707070; /* Gris claro al hacer clic */
| |
| text-decoration-color: #707070;
| |
| }
| |
|
| |
| .mw-body-content a:hover {
| |
| color: #ffffff; /* Mantiene el color blanco al pasar el cursor */
| |
| text-decoration-color: #f5ed56; /* Subrayado amarillo */
| |
| }
| |
|
| |
| .mw-body-content a::before {
| |
| content: "";
| |
| position: absolute;
| |
| bottom: 0;
| |
| left: 0;
| |
| width: 0;
| |
| height: 100%;
| |
| background-color: #f5ed56;
| |
| z-index: -1;
| |
| transition: width 0.4s ease;
| |
| }
| |
|
| |
| .mw-body-content a:hover::before {
| |
| width: 100%; /* Fondo amarillo dinámico */
| |
| }
| |
|
| |
| /* Quitar subrayados en enlaces dentro de títulos */
| |
| #firstHeading a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
| |
| text-decoration: none;
| |
| }
| |
|
| |
| /* Texto seleccionado */
| |
| ::selection {
| |
| background-color: #f5ed56; /* Fondo amarillo */
| |
| color: #18181e; /* Texto oscuro */
| |
| }
| |
|
| |
| /* Citas */
| |
| blockquote {
| |
| font-family: "Newsreader", serif;
| |
| font-size: 1em;
| |
| color: #dcdcdc;
| |
| border-left: 5px solid #f5ed56; /* Línea amarilla más visible */
| |
| padding: 10px 20px; /* Espaciado interior */
| |
| margin: 20px 25px; /* Espaciado externo */
| |
| line-height: 1.8;
| |
| background: #202020; /* Fondo ligeramente oscuro */
| |
| border-radius: 4px; /* Bordes ligeramente redondeados */
| |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Sombra sutil */
| |
| }
| |
|
| |
| blockquote p {
| |
| margin: 0; /* Sin márgenes extra */
| |
| font-style: italic; /* Texto en cursiva para estilo clásico de cita */
| |
| }
| |
|
| |
| /* Botón flotante "Volver al inicio" */
| |
| #backToTop {
| |
| position: fixed;
| |
| bottom: 20px;
| |
| right: 20px;
| |
| width: 50px;
| |
| height: 50px;
| |
| background-color: #f5ed56;
| |
| color: #090a0a;
| |
| border-radius: 50%;
| |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| font-size: 1.5em;
| |
| font-weight: bold;
| |
| cursor: pointer;
| |
| z-index: 1000;
| |
| opacity: 0;
| |
| visibility: hidden;
| |
| transition: opacity 0.3s ease, visibility 0.3s ease;
| |
| }
| |
|
| |
| #backToTop.show {
| |
| opacity: 1;
| |
| visibility: visible;
| |
| }
| |
|
| |
| #backToTop:hover {
| |
| background-color: #e0e0e0;
| |
| color: #18181e;
| |
| }
| |
|
| |
| /* Barra de progreso de lectura */
| |
| .reading-progress-bar-container {
| |
| position: fixed;
| |
| top: 0;
| |
| left: 0;
| |
| width: 100%;
| |
| height: 5px;
| |
| background-color: #f0f0f0;
| |
| z-index: 1000;
| |
| }
| |
|
| |
| .reading-progress-bar {
| |
| height: 100%;
| |
| width: 0;
| |
| background-color: #0078d7; /* Azul para el progreso */
| |
| transition: width 0.2s ease-out;
| |
| }
| |
