diff --git a/src/componentes/Ficha.astro b/src/componentes/Ficha.astro index aadf604..4a53f56 100644 --- a/src/componentes/Ficha.astro +++ b/src/componentes/Ficha.astro @@ -88,46 +88,79 @@ display: flex; text-align: center; color: var(--textoOscuro); - min-height: 80px; + min-height: 70px; + font-family: var(--fuenteNumeros); + #contenedorTitulo { background-color: var(--resaltadoVerde); flex-basis: 90%; margin: 0; + display: flex; padding: 0.5em 0; + gap: 0.15em 0; + flex-direction: column; + justify-content: center; } #listaFicha { margin: 0; + font-size: 16px; + font-weight: 700; } #tituloFicha { margin: 0; + font-size: 18px; } #conteoFicha { margin: auto; color: var(--textoClaro); - width: 80px; + width: 70px; + font-family: var(--fuenteNumeros); } } #inferior { border: 1px solid var(--resaltadoVerde); + display: flex; + padding: 10px; + flex-direction: column; + align-items: flex-start; + gap: 10px; + flex: 1 0 0; + align-self: stretch; .seccionDatos { display: flex; - width: 90%; + // width: 90%; border-bottom: 1px solid var(--resaltadoVerde); - margin: 0 auto; - padding: 0.63rem 0.63rem 0.94rem 0.63rem; + // margin: 0 auto; + // padding: 0.63rem 0.63rem 0.94rem 0.63rem; + display: flex; + padding: 10px 10px 15px 10px; + align-items: flex-start; + gap: 10px; + align-self: stretch; .contenido { + display: flex; + padding: 0.4em 0; + justify-content: center; + flex-direction: column; + align-items: flex-start; + gap: 2px; + flex: 1 0 0; + align-self: stretch; + li { - margin: 0.5em; + margin-bottom: 0.5em; } } + .titulo { margin: 0; flex-basis: 45%; + gap: 5px; } &.oculta { diff --git a/src/scss/_constantes.scss b/src/scss/_constantes.scss index c8e1f1d..9c8b3d1 100644 --- a/src/scss/_constantes.scss +++ b/src/scss/_constantes.scss @@ -4,6 +4,11 @@ $corte3: 1000px; $corte4: 1333px; :root { + /// Fuentes tipográficas hemochas + --fuenteParrafo: 'Inter', 'Helvetica', 'Roboto', 'Arial', 'Tahoma', 'Verdana', sans-serif; + --fuenteNumeros: 'IBM Plex Mono', 'Courier New', monospace; + --fuenteLogo: 'mixta-didone', 'Garamond', 'Georgia', 'Times', serif; + // Paleta --grisMedio: #e0e0e0; --grisClaro: #f5f5f5; @@ -21,3 +26,9 @@ $corte4: 1333px; --textoOscuro: #1a2a22; --textoClaro: #ffffff; } + +@supports (font-variation-settings: normal) { + :root { + --fuenteParrafo: InterVariable, 'Helvetica', 'Roboto', 'Arial', 'Tahoma', 'Verdana', sans-serif; + } +} diff --git a/src/scss/estilos.scss b/src/scss/estilos.scss index 7cd2ea5..28d71eb 100644 --- a/src/scss/estilos.scss +++ b/src/scss/estilos.scss @@ -1,26 +1,8 @@ @import './normalizar'; -@import url('https://fonts.googleapis.com/css2?family=Tourney&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap'); +@import url('https://use.typekit.net/xvu8mbx.css'); :root { - /// Fuentes tipográficas hemochas - --fuenteTitulo: font-family: 'Tourney', 'Garamond', 'Georgia', 'Times', serif; - --fuenteParrafo: 'Inter', 'Helvetica', 'Roboto', 'Arial', 'Tahoma', 'Verdana', sans-serif; - - //Colores * CSS HEX * - --negro: #0a0908ff; - --linoAntro: #f7efe8ff; - --papelViejo: #f1edeaff; - --pantalonCaqui: #968176ff; - --chalecoCafe: #5e503fff; - --cafeBota: #4a3221ff; - --cafeCaraota: #351303ff; - --bufandaVieja: #22333bff; - --azulBic: #06235fff; - --lavandaFranchute: #858ae3ff; - --rosaPigmento: #ffadc6ff; - --rojoRubor: #ff0a54ff; - - --colorFuente: #252424; } body { @@ -30,13 +12,12 @@ body { 'calt' 1; /* fix for Chrome */ } -@supports (font-variation-settings: normal) { - :root { - --fuenteParrafo: InterVariable, 'Helvetica', 'Roboto', 'Arial', 'Tahoma', 'Verdana', sans-serif; - } +h1 { + font-family: var(--fuenteLogo); + letter-spacing: 2.42px; + text-transform: uppercase; } -h1, h2, h3, h4,