Natours project finished

Natours/starter/sass/abstracts/_mixins.scss

@@ -31,25 +31,25 @@
  */
 @mixin respond($breakpoint) {
   @if $breakpoint == phone {
-    @media (max-width: 37.5em) {
+    @media only screen and (max-width: 37.5em) {
       //600px
       @content;
     }
   }
   @if $breakpoint == tab-port {
-    @media (max-width: 56.25em) {
+    @media only screen and (max-width: 56.25em) {
       //900px
       @content;
     }
   }
   @if $breakpoint == tab-land {
-    @media (max-width: 75em) {
+    @media only screen and (max-width: 75em) {
       //1200px
       @content;
     }
   }
   @if $breakpoint == big-desktop {
-    @media (min-width: 112.5em) {
+    @media only screen and (min-width: 112.5em) {
       //1800px
       @content;
     }

Natours/starter/sass/base/_base.scss

@@ -30,6 +30,10 @@ body {
 
   @include respond(tab-port) {
     padding: 0;
-
   }
 }
+
+::selection {
+  background-color: $color-primary;
+  color: $color-white;
+}

Natours/starter/sass/components/_card.scss

@@ -14,6 +14,8 @@
     top: 0;
     left: 0;
     width: 100%;
+
+    -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
 
     border-radius: 3px;

Natours/starter/sass/components/_popup.scss

@@ -15,6 +15,13 @@
 
   transition: all 0.4s;
 
+  @supports (-webkit-backdrop-filter: blur(10px)) or
+    (backdrop-filter: blur(10px)) {
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    background-color: rgba($color-black, 0.3);
+  }
+
   &__content {
     @include absCenter;
 

Natours/starter/sass/layout/_header.scss

@@ -1,41 +1,67 @@
 .header {
-    height: 95vh;
-    background-image: linear-gradient(to right bottom,rgba($color-primary-light, 0.801), rgba($color-primary-dark, 0.808)) , url("../img/hero.jpg");
-    background-size: cover;
-    background-position: top;
-    clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
+  height: 95vh;
+  background-image: linear-gradient(
+      to right bottom,
+      rgba($color-primary-light, 0.801),
+      rgba($color-primary-dark, 0.808)
+    ),
+    url("../img/hero-small.jpg");
+  background-size: cover;
+  background-position: top;
+  clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
 
-    @include respond(phone) {
-      clip-path: polygon(0% 0%, 100% 0%, 100% 85vh, 0% 100%);
-    }
+  @media (min-resolution: 192dpi) and (min-width: 600px),
+    (-webkit-min-device-pixel-ratio: 192dpi) and (min-width: 600px),
+    (min-width: 2000px) {
+    // apple retina screen (high dpi)
+    background-image: linear-gradient(
+        to right bottom,
+        rgba($color-primary-light, 0.801),
+        rgba($color-primary-dark, 0.808)
+      ),
+      url("../img/hero.jpg");
+  }
 
-    position: relative;
+  @media (min-width: 2000px) {
+    background-image: linear-gradient(
+        to right bottom,
+        rgba($color-primary-light, 0.801),
+        rgba($color-primary-dark, 0.808)
+      ),
+      url("../img/hero.jpg");
+  }
 
-    &__logo-box {
-        position: absolute;
-        top: 4rem;
-        left: 4rem;
-    } 
-    &__logo {
-        height: 3.5rem;
-    }
+  @include respond(phone) {
+    clip-path: polygon(0% 0%, 100% 0%, 100% 85vh, 0% 100%);
+  }
 
-    /*
+  position: relative;
+
+  &__logo-box {
+    position: absolute;
+    top: 4rem;
+    left: 4rem;
+  }
+  &__logo {
+    height: 3.5rem;
+  }
+
+  /*
     .logo:hover{
         animation: moveInRight 1s ease-out;
     }
     */
 
-    &__text-box{
-        position: absolute;
-        top: 40%;
-        left: 50%;
-        transform: translate(-50%,-50%);
-        /* 
+  &__text-box {
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    /* 
         * Limpiar animaciones para evitar temblores 
         * No se sabe realmente por qué funciona o de dónde viene el error, pero lo hace
         */
-        backface-visibility: hidden;
-        text-align: center;
-    }
+    backface-visibility: hidden;
+    text-align: center;
+  }
 }