diff --git a/src/static/sass/components/_modal.scss b/src/static/sass/components/_modal.scss index ab188d8..0d0dd66 100644 --- a/src/static/sass/components/_modal.scss +++ b/src/static/sass/components/_modal.scss @@ -29,7 +29,7 @@ @include responsive(tab_medium) { background: linear-gradient(90deg, rgba(0, 0, 0, 0.966) 65%, transparent); width: 100%; - + } } diff --git a/src/static/sass/components/_movieShowcase.scss b/src/static/sass/components/_movieShowcase.scss index 6c2cca0..7f0067c 100644 --- a/src/static/sass/components/_movieShowcase.scss +++ b/src/static/sass/components/_movieShowcase.scss @@ -18,6 +18,10 @@ grid-template-columns: repeat(20, 1fr); column-gap: 0; + @include responsive(phone) { + width: 98vw; + } + &:hover &--movie { opacity: .3; diff --git a/src/static/sass/layout/_footer.scss b/src/static/sass/layout/_footer.scss index cb041be..bb366e2 100644 --- a/src/static/sass/layout/_footer.scss +++ b/src/static/sass/layout/_footer.scss @@ -5,20 +5,24 @@ grid-column: 1 / 13; text-align: center; - &__copyright { - color: #fff; - font-size: 1.8rem; - - &--link { - text-decoration: none; - color: $color-red-2; - transition: all .3s; + @include responsive(phone) { + padding-top: 10rem; + } - } + &__copyright { + color: #fff; + font-size: 1.8rem; + + &--link { + text-decoration: none; + color: $color-red-2; + transition: all .3s; - &--link:hover { - color: orange; - } - } + } + + &--link:hover { + color: orange; + } + } } \ No newline at end of file diff --git a/src/static/sass/layout/_header.scss b/src/static/sass/layout/_header.scss index b05b8ed..d9d70be 100644 --- a/src/static/sass/layout/_header.scss +++ b/src/static/sass/layout/_header.scss @@ -3,12 +3,20 @@ grid-column: 1 / 13; height: 65rem; display: inline-block; + + @include responsive(phone) { + height: 50rem; + } &__container { padding-top: 20rem; padding-left: 4.5rem; - color: #fff; + color: #fff; + + @include responsive(phone) { + padding-left: 1rem; + } &-heading { font-size: 6rem; @@ -62,6 +70,10 @@ line-height: 1.3; padding-top: 2.5rem; font-size: 1.8rem; + + @include responsive(phone) { + width: 36rem; + } } } diff --git a/src/static/sass/layout/_navigation.scss b/src/static/sass/layout/_navigation.scss index 05da863..621ccfe 100644 --- a/src/static/sass/layout/_navigation.scss +++ b/src/static/sass/layout/_navigation.scss @@ -22,6 +22,10 @@ justify-content: flex-start; align-items: center; + @include responsive(phone) { + margin-left: 1rem; + } + a:first-child { padding-left: .2%; color: $color-red; @@ -35,6 +39,10 @@ width: 2.2rem; padding-right: 2.5rem; + @include responsive(phone) { + display: none; + } + } &--userLogo { @@ -49,6 +57,10 @@ @include responsive(tab_port) { margin-right: 3rem; } + + @include responsive(phone) { + display: none; + } &:hover > .dropdownContent { @@ -84,6 +96,10 @@ display: inline-block; } + @include responsive(phone) { + display: none; + } + } &--logo { @@ -134,15 +150,17 @@ border: 1px solid #fff; transition: width .5s; cursor: pointer; - opacity: 0; - &:focus { padding-left: 4rem; width: 22rem; cursor: text; opacity: 1; + + @include responsive(phone) { + width: 16rem; + } } } }