queries

src/containers/MovieGenreRow/MovieGenreRow.js

@@ -215,7 +215,7 @@ class MovieGenreRow extends Component {
 
       return (  
         <div className="movieShowcase">
-          <h1 className="movieShowcase__heading">Netflix Originals</h1>
+          <h1 className="movieShowcase__heading">NETFLIX ORIGINALS</h1>
           <div className="movieShowcase__container">
             {this.state.netflixOriginalsRow}
           </div>

src/containers/Navbar/Navbar.js

@@ -38,11 +38,13 @@ class navigation extends Component {
       <nav className={"navigation " + (this.state.scrolling ? "black" : "")} >
         <ul className="navigation__container">
           <NavigationItem link="/" exact><img className="navigation__container--logo" src={NetflixLogo} alt=""/></NavigationItem>
-          <NavigationItem link="/">Home</NavigationItem>
+          <DropdownArrow className="navigation__container--downArrow-2"></DropdownArrow>
-          <NavigationItem link="/">TV Shows</NavigationItem>
+          <div className="navigation__container-link pseudo-link">Home</div>
-          <NavigationItem link="/">Movies</NavigationItem>
+          <div className="navigation__container-link pseudo-link">TV Shows</div>
-          <NavigationItem link="/">Recently Added</NavigationItem>
+          <div className="navigation__container-link pseudo-link">Movies</div>
-          <NavigationItem link="/">My List</NavigationItem>
+          <div className="navigation__container-link pseudo-link">Recently Added</div>
+          <div className="navigation__container-link pseudo-link">My List</div>
+      
 
           <div className="navigation__container--left">
             <SearchLogo className="logo" />
@@ -55,12 +57,13 @@ class navigation extends Component {
             
           </div> 
          
-          <NavigationItem link="/">KIDS</NavigationItem>         
+          <div className="navigation__container-link pseudo-link">KIDS</div>
-          <NavigationItem link="/">DVD</NavigationItem>
+          <div className="navigation__container-link pseudo-link">DVD</div>
           <BellLogo className="navigation__container--bellLogo" />  
 
           <DropdownContent />
           <DropdownArrow className="navigation__container--downArrow"/>
+        
         </ul>
       </nav>
     )

src/static/sass/abstracts/_functions.scss

@@ -0,0 +1,28 @@
+
+/* Media query manager */
+@mixin responsive($breakpoint) {
+
+   @if $breakpoint == phone {
+      @media only screen and (max-width: 37.5em) { // 600px --> 600 / 16
+         @content
+      }; 
+   }
+
+   @if $breakpoint == tab_medium {   // 980px 
+      @media only screen and (max-width: 61.25em) {
+         @content
+      }; 
+   }
+
+   @if $breakpoint == tab_port {
+      @media only screen and (max-width: 74em) {   // 1184px 
+         @content
+      }; 
+   }
+
+   @if $breakpoint == lg_desktop {
+      @media only screen and (max-width: 102em) {   // 1633px 
+         @content
+      }; 
+   }
+}

src/static/sass/base/_base.scss

@@ -51,7 +51,11 @@ body {
 
 html {
    // this defines what 1rem is --> font root size 
-   font-size: 62.5%; // 10/16, 1rem = 10px; 
+	 font-size: 62.5%; // 10/16, 1rem = 10px; 
+	 
+	 @include responsive(tab_port) {
+		 font-size: 50%; 
+	 }
 }
 
 // GRID AREA 

src/static/sass/components/_modal.scss

@@ -7,9 +7,12 @@
    color: #fff;
    height: 52rem;
    opacity: 0;
-   // transform: scale(0);
    box-shadow: 0 1.5rem 4rem rgba($color-dark, .15);
-   // transition: all  2s 1s;
+
+   @include responsive(tab_port) {
+      height: 38rem;
+   }
+
      
    &__container {
       background: linear-gradient(90deg, #000 50%, transparent);
@@ -17,6 +20,17 @@
       padding-top: 3rem;
       height: 100%;
       padding-left: 5rem;
+
+      @include responsive(tab_port) {
+         background: linear-gradient(90deg, rgb(0, 0, 0) 55%, rgba(0, 0, 0, 0.733), transparent);
+         width: 88%;
+      }
+
+      @include responsive(tab_medium) {
+         background: linear-gradient(90deg, rgba(0, 0, 0, 0.966) 65%, transparent);
+         width: 100%;
+      
+      }
    }
 
    &__title {
@@ -43,8 +57,22 @@
       padding-top: 2rem;
       font-size: 2rem;
       hyphens: auto;
-      width: 55%;
+      width: 60%;
       line-height: 1.2;
+
+      @include responsive(lg_desktop) {
+         width: 60%;
+         font-size: 1.8rem;
+      }
+
+      @include responsive(tab_port) {
+         width: 80%;
+      }
+
+      @include responsive(tab_medium) {
+         width: 95%;
+         color: rgba(255, 255, 255, 0.877); 
+      }
    }
 
    &__btn {

src/static/sass/components/_movie.scss

@@ -3,6 +3,10 @@
    padding-top: 6rem;
    display: inline-block;
 
+   @include responsive(tab_port) {
+      padding-top: 4rem;
+   }
+
    &__column-poster {
       height: 25rem;
       width: 17.5rem;
@@ -10,8 +14,17 @@
       transition: transform .3s;
       -webkit-transition: transform .3s;
 
+      @include responsive(tab_port) {
+         height: 20rem;
+         width: 14rem;
+      }
+      
        &:hover {
          transform: scale(1.25);
+
+         @include responsive(tab_port) {
+             transform: scale(1.15);
+         }
        }
    }
 

src/static/sass/components/_movieShowcase.scss

@@ -30,10 +30,19 @@
 
       &:hover > *  {
          transform: translate3d(-6rem, 0, 0); 
+
+         @include responsive(tab_port) {
+            transform: translate3d(-5rem, 0, 0);
+         }
       }
 
       &--movie:hover ~ &--movie {
           transform: translate3d(6rem, 0, 0); 
+
+         @include responsive(tab_port) {
+
+            transform: translate3d(4.5rem, 0, 0);
+         }
       }
 
 
@@ -63,6 +72,10 @@
          height: 21.5rem;
          min-height: 0;
 
+         @include responsive(tab_port) {
+            height: 18.5rem;
+         }
+        
          &:not(:last-child) {
             padding-right: .5rem;
          }
@@ -81,6 +94,10 @@
             cursor: pointer;
             transition: all 450ms;
             transform: center left;
+
+            @include responsive(tab_port) {
+               height: 42rem;
+            }
          }
 
       }

src/static/sass/layout/_header.scss

@@ -66,7 +66,7 @@
    }
 
    &--fadeBottom {
-      height: 27.4rem;
+      height: 28.5rem;
       background-image: linear-gradient(180deg, transparent,rgba(37, 37, 37, 0.61), rgb(17, 17, 17));
    }
 }

src/static/sass/layout/_navigation.scss

@@ -46,6 +46,10 @@
          width: 3rem;
          margin-right: .5rem;
 
+         @include responsive(tab_port) {
+             margin-right: 3rem;
+         }
+        
          &:hover > .dropdownContent {
             
             transition: all .4s;
@@ -61,6 +65,25 @@
          width: 1rem;
          margin-right: 5.8rem;
 
+         @include responsive(tab_port) {
+            display: none; 
+         }
+
+      }
+
+      &--downArrow-2 {
+         display: none;
+         cursor: pointer;
+         fill: #fff; 
+         height: 1rem;
+         width: 1rem;
+
+         @include responsive(tab_port) {
+            height: 1.5rem;
+            width: 1.5rem;
+            display: inline-block;
+         }
+
       }
 
       &--logo { 
@@ -68,10 +91,14 @@
          height: 5rem;
          padding-right: 1rem;
 
+         @include responsive(tab_port) {
+            padding-right: .1rem;
+         }
+        
       }
 
       &-link {
-          font-weight: 500;
+         font-weight: 500;
          font-size: 1.5rem;
          color: rgb(221, 221, 221);
          text-decoration: none;
@@ -96,19 +123,19 @@
          justify-content: flex-end;
 
          &__input {
-              font-size: 1.4rem;
+            font-size: 1.4rem;
-              border: none;
+            border: none;
-              color: #fff;
+            color: #fff;
-              outline: none;
+            outline: none;
-              width: 0px;
+            width: 0px;
-              padding: 10px;
+            padding: 10px;
-              padding-right: 2rem;
+            padding-right: 2rem;
-              background: $color-background;
+            background: $color-background;
-               border: 1px solid #fff;
+            border: 1px solid #fff;
-              transition: width .5s;
+            transition: width .5s;
-              cursor: pointer;
+            cursor: pointer;
 
-               opacity: 0;
+            opacity: 0;
              
 
               &:focus {
@@ -116,7 +143,6 @@
                   width: 22rem;
                   cursor: text;
                   opacity: 1;
-                
               }
          }
       }
@@ -210,3 +236,11 @@
       visibility: visible;
    }
 }
+
+.pseudo-link {
+
+   @include responsive(tab_port) {
+      display: none;
+   }
+   
+}