diff --git a/src/containers/MovieGenreRow/MovieGenreRow.js b/src/containers/MovieGenreRow/MovieGenreRow.js index 7de849f..7d5a283 100644 --- a/src/containers/MovieGenreRow/MovieGenreRow.js +++ b/src/containers/MovieGenreRow/MovieGenreRow.js @@ -215,7 +215,7 @@ class MovieGenreRow extends Component { return (
-

Netflix Originals

+

NETFLIX ORIGINALS

{this.state.netflixOriginalsRow}
diff --git a/src/containers/Navbar/Navbar.js b/src/containers/Navbar/Navbar.js index 15eac13..ef1f816 100644 --- a/src/containers/Navbar/Navbar.js +++ b/src/containers/Navbar/Navbar.js @@ -38,11 +38,13 @@ class navigation extends Component { ) diff --git a/src/static/sass/abstracts/_functions.scss b/src/static/sass/abstracts/_functions.scss index e69de29..9984829 100644 --- a/src/static/sass/abstracts/_functions.scss +++ b/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 + }; + } +} \ No newline at end of file diff --git a/src/static/sass/base/_base.scss b/src/static/sass/base/_base.scss index e3ce14f..544ce91 100644 --- a/src/static/sass/base/_base.scss +++ b/src/static/sass/base/_base.scss @@ -51,12 +51,16 @@ 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 .container { - + display: grid; grid-template-rows: min-content min-content min-content min-content; grid-template-columns: 4% repeat(10, 1fr) 4%; diff --git a/src/static/sass/components/_modal.scss b/src/static/sass/components/_modal.scss index ad997ad..ab188d8 100644 --- a/src/static/sass/components/_modal.scss +++ b/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 { diff --git a/src/static/sass/components/_movie.scss b/src/static/sass/components/_movie.scss index 3303b03..2ef82de 100644 --- a/src/static/sass/components/_movie.scss +++ b/src/static/sass/components/_movie.scss @@ -3,15 +3,28 @@ padding-top: 6rem; display: inline-block; + @include responsive(tab_port) { + padding-top: 4rem; + } + &__column-poster { height: 25rem; width: 17.5rem; cursor: pointer; 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); + } } } diff --git a/src/static/sass/components/_movieShowcase.scss b/src/static/sass/components/_movieShowcase.scss index 3582e99..6c2cca0 100644 --- a/src/static/sass/components/_movieShowcase.scss +++ b/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); + } } @@ -62,6 +71,10 @@ padding-bottom: 4rem; 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; + } } } diff --git a/src/static/sass/layout/_header.scss b/src/static/sass/layout/_header.scss index fd4ab58..b05b8ed 100644 --- a/src/static/sass/layout/_header.scss +++ b/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)); } } diff --git a/src/static/sass/layout/_navigation.scss b/src/static/sass/layout/_navigation.scss index 0c0bd7c..05da863 100644 --- a/src/static/sass/layout/_navigation.scss +++ b/src/static/sass/layout/_navigation.scss @@ -45,6 +45,10 @@ height: 3rem; width: 3rem; margin-right: .5rem; + + @include responsive(tab_port) { + margin-right: 3rem; + } &:hover > .dropdownContent { @@ -61,17 +65,40 @@ 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 { margin-top: 1rem; 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; - border: none; - color: #fff; - outline: none; - width: 0px; - padding: 10px; - padding-right: 2rem; - background: $color-background; - border: 1px solid #fff; - transition: width .5s; - cursor: pointer; + font-size: 1.4rem; + border: none; + color: #fff; + outline: none; + width: 0px; + padding: 10px; + padding-right: 2rem; + background: $color-background; + border: 1px solid #fff; + transition: width .5s; + 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; + } + +} \ No newline at end of file