From 9fec1d8d8884a9903de873a400de317ab88b81a8 Mon Sep 17 00:00:00 2001
From: dqnid <dani.heras@hotmail.com>
Date: Thu, 20 Jul 2023 23:34:30 +0200
Subject: [PATCH] 20/july

---
 Natours/starter/css/style.css | 57 ++++++++++++++++++++---------------
 README.md                     | 13 ++++++++
 2 files changed, 46 insertions(+), 24 deletions(-)

diff --git a/Natours/starter/css/style.css b/Natours/starter/css/style.css
index a107e1d..e10893e 100644
--- a/Natours/starter/css/style.css
+++ b/Natours/starter/css/style.css
@@ -7,19 +7,27 @@ Dark green: #28b485
 
 */
 
-* {
+*,
+::after,
+::before {
     margin: 0;
     padding: 0;
-    box-sizing: border-box;
+    box-sizing: inherit;
+}
+
+html {
+    font-size: 62.5%;
 }
 
 body {
     font-family: "Lato",Verdana, Geneva, Tahoma, sans-serif;
     font-weight: 400;
-    font-size: 16px;
+    /* font-size: 16px; */
     line-height: 1.7;
     color: #777;
-    padding: 30px;
+    padding: 3rem;
+
+    box-sizing: border-box;
 }
 
 .header {
@@ -34,12 +42,12 @@ body {
 
 .logo-box {
     position: absolute;
-    top: 40px;
-    left: 40px;
+    top: 4rem;
+    left: 4rem;
 }
 
 .logo {
-    height: 35px;
+    height: 3.5rem;
 }
 
 /*
@@ -64,14 +72,14 @@ body {
 .heading-primary {
     color: #fff;
     text-transform: uppercase;
-    margin-bottom: 60px;
+    margin-bottom: 6rem;
 }
 
 .heading-primary-main {
     display: block;
-    font-size: 60px;
+    font-size: 6rem;
     font-weight: 400;
-    letter-spacing: 35px;
+    letter-spacing: 3.5rem;
     
     animation-name: slideLeft;
     animation-duration: 1s;
@@ -80,9 +88,9 @@ body {
 
 .heading-primary-sub {
     display: block;
-    font-size: 22px;
+    font-size: 2rem;
     font-weight: 700;
-    letter-spacing: 16px;
+    letter-spacing: 1.75rem;
     
     animation-name: slideRight;
     animation-duration: 1s;
@@ -91,12 +99,12 @@ body {
 
 @keyframes slideLeft {
     0% {
-        transform: translateX(-160px);
+        transform: translateX(-16rem);
         opacity: 0;
     }
 
     80% {
-        transform: translateX(15px);
+        transform: translateX(1.5rem);
     }
 
     100% {
@@ -107,12 +115,12 @@ body {
 
 @keyframes slideRight {
     0% {
-        transform: translateX(160px);
+        transform: translateX(16rem);
         opacity: 0;
     }
 
     80% {
-        transform: translateX(-15px);
+        transform: translateX(-1.5rem);
     }
 
     100% {
@@ -123,7 +131,7 @@ body {
 
 @keyframes slideBottom {
     0% {
-        transform: translateY(50px);
+        transform: translateY(5rem);
         opacity: 0;
     }
 
@@ -137,11 +145,12 @@ body {
 .btn:visited {
     text-transform: uppercase;
     text-decoration: none;
-    padding: 15px 40px;
+    padding: 1.5rem 4rem;
     display: inline-block;
-    border-radius: 100px;
+    border-radius: 10rem;
     transition: all 0.2s;
     position: relative;
+    font-size: 1.6rem;
 }
 
 .btn-animated {
@@ -150,13 +159,13 @@ body {
 }
 
 .btn:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+    transform: translateY(-0.4rem);
+    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
 }
 
 .btn:active {
-    transform: translateY(-1px);
-    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    transform: translateY(-0.1rem);
+    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.2);
 }
 
 .btn-white {
@@ -169,7 +178,7 @@ body {
     display: inline-block;
     height: 100%;
     width: 100%;
-    border-radius: 100px;
+    border-radius: 10rem;
     position: absolute;
     top: 0;
     left: 0;
diff --git a/README.md b/README.md
index 8984e30..785b668 100644
--- a/README.md
+++ b/README.md
@@ -42,6 +42,19 @@ En caso de empatar en importancia entra en juego la especificidad. Se mira como
 
 #### Procesamiento de los valores
 
+- La unidad (no es una unidad pero la tratamos como tal) '%' cuando se aplica en fuentes, parte del tamaño de la fuente del padre.
+- La unidad 'em' actua diferente para tamaños de letra y para elementos:
+    - Para fuentes toma el tamaño de la fuente del elemento padre.
+    - Para elementos toma el tamaño de la fuente del elemento actual.
+- Si una propiedad es heredada, no se hereda el valor especificado, si no el ya procesado sobre los valores del padre (en pixeles por ejemplo).
+- NO todas las propiedades heredan del padre a falta de estar especificadas, es cuyo caso el valor especificado será el inicial (por defecto).
+- Darle valor a 'font-size' en 'html{}' hará que no se cambien los valores de la fuente con los ajustes del navegador, esta es una práctica muy mala.
+    - Solución: `html { font-size: 100%; }` -> Tendrá por defecto 16px, y cambiará si el usuario así lo decide en las opciones de su navegador.
+
+#### Tamaños de los contenedores
+- Por defecto, si creamos un contenedor con altura 100px y le añadimos un padding de 20 píxeles arriba y abajo, el contenedor terminará ocupando 140px. No es muy práctico:
+    - Solución: `box-sizing: border-box`. El elemento terminará con 100px.
+
 ## Animaciones
 
 Hay dos tipos de animaciones: