Merge pull request #21 from enflujo/cambios-estilo-1

🐛 letras, márgenes y otras cositas
enflujo · Feb 9, 2024 · 4c965c1 · 4c965c1
2 parents 157bb45 + 4207abb
commit 4c965c1
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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,