From 9eee80c625c420315c16957e75f67c884aa50a81 Mon Sep 17 00:00:00 2001 From: Yusuf Ipek Date: Wed, 5 May 2021 15:53:37 +0300 Subject: [PATCH] created media queries for nav, sections, grid, footer, typography, utilities and for the base --- src/sass/base/_base.scss | 5 +++++ src/sass/base/_typography.scss | 18 +++++++++++++++++- src/sass/base/_utilities.scss | 8 ++++++++ src/sass/components/_composition.scss | 25 +++++++++++++++++++++++++ src/sass/components/_feature-box.scss | 8 ++++++++ src/sass/layout/_footer.scss | 18 ++++++++++++++++++ src/sass/layout/_grid.scss | 18 ++++++++++++++++++ src/sass/layout/_header.scss | 4 ++++ src/sass/layout/_navigation.scss | 21 +++++++++++++++++++++ src/sass/pages/_home.scss | 20 ++++++++++++++++++++ 10 files changed, 144 insertions(+), 1 deletion(-) diff --git a/src/sass/base/_base.scss b/src/sass/base/_base.scss index c3b74ad..840c546 100644 --- a/src/sass/base/_base.scss +++ b/src/sass/base/_base.scss @@ -24,4 +24,9 @@ html { body { box-sizing: border-box; + padding: 3rem; + + @include respond(tab-port) { + padding: 0; + } } diff --git a/src/sass/base/_typography.scss b/src/sass/base/_typography.scss index 0cfd6d5..e29e078 100644 --- a/src/sass/base/_typography.scss +++ b/src/sass/base/_typography.scss @@ -12,6 +12,11 @@ letter-spacing: 3.5rem; animation: moveInLeft 1s ease-out; + + @include respond(phone) { + letter-spacing: 1rem; + font-size: 5rem; + } } &--sub { @@ -21,6 +26,10 @@ letter-spacing: 1.75rem; animation: moveInRight 1s ease-out; + + @include respond(phone) { + letter-spacing: 0.5rem; + } } } @@ -29,7 +38,6 @@ body { font-weight: 400; line-height: 1.7; color: $color-grey-dark; - padding: 3rem; } .heading-secondary { @@ -47,6 +55,14 @@ body { letter-spacing: 0.2rem; transition: all 0.2s; + @include respond(tab-port) { + font-size: 3rem; + } + + @include respond(phone) { + font-size: 2.5rem; + } + &:hover { transform: skewY(2deg) skewX(15deg) scale(1.1); text-shadow: $shadow-light; diff --git a/src/sass/base/_utilities.scss b/src/sass/base/_utilities.scss index dc1bebd..5afee2a 100644 --- a/src/sass/base/_utilities.scss +++ b/src/sass/base/_utilities.scss @@ -4,9 +4,17 @@ .u-margin-bottom-big { margin-bottom: 8rem !important; + + @include respond(tab-port) { + margin-bottom: 5rem !important; + } } .u-margin-bottom-medium { margin-bottom: 4rem !important; + + @include respond(tab-port) { + margin-bottom: 3rem !important; + } } .u-margin-bottom-small { margin-bottom: 1.5rem !important; diff --git a/src/sass/components/_composition.scss b/src/sass/components/_composition.scss index 6557a7c..f1e3e04 100644 --- a/src/sass/components/_composition.scss +++ b/src/sass/components/_composition.scss @@ -8,17 +8,42 @@ z-index: 10; transition: all 0.2s; + @include respond(tab-port) { + float: left; + position: relative; + width: 33.33333333%; + box-shadow: $shadow-light; + } + &--p1 { left: 0; top: -2rem; + + @include respond(tab-port) { + top: 0; + transform: scale(1.2); + } } &--p2 { right: 0; top: 2rem; + + @include respond(tab-port) { + top: -1rem; + left: 0; + transform: scale(1.3); + z-index: 15; + } } &--p3 { left: 20%; top: 10rem; + + @include respond(tab-port) { + top: 1rem; + left: 0; + transform: scale(1.1); + } } &:hover { diff --git a/src/sass/components/_feature-box.scss b/src/sass/components/_feature-box.scss index 56e5adb..4832aef 100644 --- a/src/sass/components/_feature-box.scss +++ b/src/sass/components/_feature-box.scss @@ -7,6 +7,10 @@ box-shadow: $shadow-default; transition: transform 0.3s; + @include respond(tab-port) { + padding: 2rem; + } + &__icon { font-size: 6rem; margin-bottom: 0.5rem; @@ -18,6 +22,10 @@ ); background-clip: text; color: transparent; + + @include respond(tab-port) { + margin-bottom: 0; + } } &:hover { diff --git a/src/sass/layout/_footer.scss b/src/sass/layout/_footer.scss index d52c79a..2586880 100644 --- a/src/sass/layout/_footer.scss +++ b/src/sass/layout/_footer.scss @@ -3,9 +3,17 @@ padding: 10rem 0; font-size: $normal-font-size; + @include respond(tab-port) { + padding: 8rem 0; + } + &__logo-box { text-align: center; margin-bottom: 8rem; + + @include respond(tab-port) { + margin-bottom: 6rem; + } } &__logo { @@ -17,6 +25,11 @@ border-top: 1px solid $color-grey-dark; padding-top: 2rem; display: inline-block; + + @include respond(tab-port) { + width: 100%; + text-align: center; + } } &__list { @@ -56,5 +69,10 @@ float: right; color: $color-grey-dark; color: $color-grey-light-1; + + @include respond(tab-port) { + width: 100%; + float: none; + } } } diff --git a/src/sass/layout/_grid.scss b/src/sass/layout/_grid.scss index beac6df..004ce8c 100644 --- a/src/sass/layout/_grid.scss +++ b/src/sass/layout/_grid.scss @@ -4,6 +4,15 @@ &:not(:last-child) { margin-bottom: $gutter-vertical; + + @include respond(tab-port) { + margin-bottom: $gutter-horizontal; + } + } + + @include respond(tab-port) { + max-width: 50rem; + padding: 0 3rem; } @include clearfix; @@ -13,6 +22,15 @@ &:not(:last-child) { margin-right: $gutter-horizontal; + + @include respond(tab-port) { + margin-right: 0; + margin-bottom: $gutter-horizontal; + } + } + + @include respond(tab-port) { + width: 100% !important; } } diff --git a/src/sass/layout/_header.scss b/src/sass/layout/_header.scss index 900d05d..4c1481e 100644 --- a/src/sass/layout/_header.scss +++ b/src/sass/layout/_header.scss @@ -11,6 +11,10 @@ clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%); position: relative; + @include respond(phone) { + clip-path: polygon(0 0, 100% 0, 100% 85vh, 0 100%); + } + &__logo-box { position: absolute; top: 4rem; diff --git a/src/sass/layout/_navigation.scss b/src/sass/layout/_navigation.scss index dee20b1..eb97af8 100644 --- a/src/sass/layout/_navigation.scss +++ b/src/sass/layout/_navigation.scss @@ -25,6 +25,15 @@ &--times { opacity: 0; } + + @include respond(tab-port) { + top: 4rem; + right: 4rem; + } + @include respond(phone) { + top: 3rem; + right: 3rem; + } } &__background { @@ -40,6 +49,16 @@ ); z-index: 1000; transition: all 0.8s cubic-bezier(0.85, 0, 0.15, 1); + + @include respond(tab-port) { + top: 4.5rem; + right: 4rem; + } + + @include respond(phone) { + top: 3.5rem; + right: 3rem; + } } &__nav { @@ -50,6 +69,7 @@ left: 0; z-index: 1500; + visibility: hidden; opacity: 0; width: 0; transition: all 0.8s cubic-bezier(0.68, -0.6, 0.32, 1.6); @@ -104,6 +124,7 @@ } &__checkbox:checked ~ &__nav { + visibility: visible; opacity: 1; width: 100%; } diff --git a/src/sass/pages/_home.scss b/src/sass/pages/_home.scss index d8328d5..60e8e5d 100644 --- a/src/sass/pages/_home.scss +++ b/src/sass/pages/_home.scss @@ -2,6 +2,10 @@ background-color: $color-grey-light-1; padding: 25rem 0; margin-top: -20vh; + + @include respond(tab-port) { + padding: 20rem 0; + } } .section-features { @@ -20,17 +24,29 @@ & > * { transform: skewY(7deg); } + + @include respond(tab-port) { + padding: 10rem 0; + } } .section-tours { background-color: $color-grey-light-1; padding: 25rem 0 15rem 0; margin-top: -12rem; + + @include respond(tab-port) { + padding: 20rem 0 10rem 0; + } } .section-stories { padding: 15rem 0; position: relative; + + @include respond(tab-port) { + padding: 10rem 0; + } } .section-book { @@ -40,6 +56,10 @@ $color-primary-light, $color-primary-dark ); + + @include respond(tab-port) { + padding: 10rem 0; + } } .book {