20/july

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;
+    top: 4rem;
-    left: 40px;
+    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);
+    transform: translateY(-0.4rem);
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
 }
 
 .btn:active {
-    transform: translateY(-1px);
+    transform: translateY(-0.1rem);
-    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    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;

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: