From f747723770ad6aa1c4242af23ec17f4e52243392 Mon Sep 17 00:00:00 2001 From: dqnid Date: Sun, 24 Mar 2024 07:08:50 +0100 Subject: [PATCH] first responsive adjustments done --- Natours/starter/css/style.css | 103 ++++++++++++++- .../starter/node_modules/.bin/color-support | 1 - Natours/starter/node_modules/.bin/mkdirp | 1 - Natours/starter/node_modules/.bin/node-gyp | 1 - Natours/starter/node_modules/.bin/node-sass | 1 - Natours/starter/node_modules/.bin/node-which | 1 - Natours/starter/node_modules/.bin/nopt | 1 - Natours/starter/node_modules/.bin/resolve | 1 - Natours/starter/node_modules/.bin/rimraf | 1 - Natours/starter/node_modules/.bin/sassgraph | 1 - Natours/starter/node_modules/.bin/semver | 1 - Natours/starter/sass/abstracts/_mixins.scss | 43 +++++++ .../starter/sass/abstracts/_variables.scss | 1 + Natours/starter/sass/base/_base.scss | 33 ++++- Natours/starter/sass/base/_typography.scss | 121 ++++++++++-------- Natours/starter/sass/layout/_footer.scss | 18 +++ Natours/starter/sass/layout/_grid.scss | 21 ++- Natours/starter/sass/layout/_header.scss | 4 + Natours/starter/sass/layout/_navigation.scss | 20 ++- Natours/starter/sass/pages/_home.scss | 15 +++ 20 files changed, 317 insertions(+), 72 deletions(-) delete mode 120000 Natours/starter/node_modules/.bin/color-support delete mode 120000 Natours/starter/node_modules/.bin/mkdirp delete mode 120000 Natours/starter/node_modules/.bin/node-gyp delete mode 120000 Natours/starter/node_modules/.bin/node-sass delete mode 120000 Natours/starter/node_modules/.bin/node-which delete mode 120000 Natours/starter/node_modules/.bin/nopt delete mode 120000 Natours/starter/node_modules/.bin/resolve delete mode 120000 Natours/starter/node_modules/.bin/rimraf delete mode 120000 Natours/starter/node_modules/.bin/sassgraph delete mode 120000 Natours/starter/node_modules/.bin/semver diff --git a/Natours/starter/css/style.css b/Natours/starter/css/style.css index 9e92e93..1782bf7 100644 --- a/Natours/starter/css/style.css +++ b/Natours/starter/css/style.css @@ -1,4 +1,19 @@ @charset "UTF-8"; +/* + * 0 - 600px : Phone + * 600 - 900px : Tablet portrait + * 900 - 1200px : Tablet landscape + * 1200 - 1800px : Normal desktop + * 1800px + : Big desktop + + * $breakpoint argument choices + - phone + - tab-port + - tab-land + - big-desktop + + 1em = 16px + */ *, ::after, ::before { @@ -8,10 +23,22 @@ html { font-size: 62.5%; } + @media (min-width: 112.5em) { + html { + font-size: 75%; } } + @media (max-width: 75em) { + html { + font-size: 56.25%; } } + @media (max-width: 56.25em) { + html { + font-size: 50%; } } body { padding: 3rem; box-sizing: border-box; } + @media (max-width: 56.25em) { + body { + padding: 0; } } @keyframes slideLeft { 0% { @@ -42,7 +69,7 @@ body { opacity: 1; } } body { - font-family: "Lato",Verdana, Geneva, Tahoma, sans-serif; + font-family: "Lato", Verdana, Geneva, Tahoma, sans-serif; font-weight: 400; /* font-size: 16px; */ line-height: 1.7; @@ -60,6 +87,10 @@ body { animation-name: slideLeft; animation-duration: 1s; animation-timing-function: ease-in; } + @media (max-width: 37.5em) { + .heading--primary-main { + letter-spacing: 1rem; + font-size: 5rem; } } .heading--primary-sub { display: block; font-size: 2rem; @@ -68,6 +99,9 @@ body { animation-name: slideRight; animation-duration: 1s; animation-timing-function: ease-in; } + @media (max-width: 37.5em) { + .heading--primary-sub { + letter-spacing: .5rem; } } .heading--secondary { font-size: 3.5rem; @@ -79,7 +113,13 @@ body { background-clip: 0; -webkit-background-clip: text; color: transparent; - transition: all .2s; } + transition: all 0.2s; } + @media (max-width: 56.25em) { + .heading--secondary { + font-size: 3rem; } } + @media (max-width: 37.5em) { + .heading--secondary { + font-size: 2.5rem; } } .heading--secondary:hover { transform: skewY(2deg) skewX(15deg) scale(1.1); text-shadow: 0.5rem 1rem 2rem rgba(0, 0, 0, 0.2); } @@ -539,6 +579,9 @@ body { animation: moveInRight 1s ease-out; } */ } + @media (max-width: 37.5em) { + .header { + clip-path: polygon(0% 0%, 100% 0%, 100% 85vh, 0% 100%); } } .header__logo-box { position: absolute; top: 4rem; @@ -562,6 +605,13 @@ body { margin: 0 auto; } .row:not(:last-child) { margin-bottom: 8rem; } + @media (max-width: 56.25em) { + .row:not(:last-child) { + margin-bottom: 6rem; } } + @media (max-width: 56.25em) { + .row { + max-width: 50rem; + padding: 0 3rem; } } .row::after { content: ""; display: table; @@ -570,6 +620,13 @@ body { float: left; } .row [class^='col-']:not(:last-child) { margin-right: 6rem; } + @media (max-width: 56.25em) { + .row [class^='col-']:not(:last-child) { + margin-right: 0; + margin-bottom: 6rem; } } + @media (max-width: 56.25em) { + .row [class^='col-'] { + width: 100% !important; } } .row .col-1-of-2 { width: calc((100% - 6rem) / 2); } .row .col-1-of-3 { @@ -588,9 +645,15 @@ body { padding: 10rem 0; font-size: 1.4rem; color: #f7f7f7; } + @media (max-width: 56.25em) { + .footer { + padding: 8rem 0; } } .footer__logo-box { text-align: center; margin-bottom: 8rem; } + @media (max-width: 56.25em) { + .footer__logo-box { + margin-bottom: 6rem; } } .footer__logo { width: 15rem; height: auto; } @@ -598,6 +661,10 @@ body { border-top: 1px solid #777; padding-top: 2rem; display: inline-block; } + @media (max-width: 56.25em) { + .footer__navigation { + width: 100%; + text-align: center; } } .footer__list { list-style: none; } .footer__item { @@ -621,6 +688,10 @@ body { display: inline-block; width: 80%; float: right; } + @media (max-width: 56.25em) { + .footer__copyright { + width: 100%; + float: none; } } .navigation__checkbox { display: none; } @@ -637,6 +708,14 @@ body { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1); text-align: center; cursor: pointer; } + @media (max-width: 56.25em) { + .navigation__button { + top: 4rem; + right: 4rem; } } + @media (max-width: 37.5em) { + .navigation__button { + top: 2.5rem; + right: 2.5rem; } } .navigation__background { height: 6rem; @@ -648,6 +727,14 @@ body { background-image: radial-gradient(#7ed56f, #28b485); z-index: 1000; transition: transform 0.8s cubic-bezier(0.83, 0, 0.17, 1); } + @media (max-width: 56.25em) { + .navigation__background { + top: 4.5rem; + right: 4.5rem; } } + @media (max-width: 37.5em) { + .navigation__background { + top: 3rem; + right: 3rem; } } .navigation__nav { height: 100vh; @@ -737,6 +824,9 @@ body { background-color: #f7f7f7; padding: 25rem 0; margin-top: -20vh; } + @media (max-width: 56.25em) { + .section-about { + padding: 20rem 0; } } .section-features { padding: 20rem 0; @@ -746,15 +836,24 @@ body { transform: skewY(-7deg); } .section-features > * { transform: skewY(7deg); } + @media (max-width: 56.25em) { + .section-features { + padding: 15rem 0; } } .section-tours { background-color: #f7f7f7; padding: 25rem 0 15rem 0; margin-top: -10rem; } + @media (max-width: 56.25em) { + .section-tours { + padding: 20rem 0 10rem 0; } } .section-stories { position: relative; padding: 15rem 0; } + @media (max-width: 56.25em) { + .section-stories { + padding: 10rem 0; } } .section-book { padding: 15rem 0; diff --git a/Natours/starter/node_modules/.bin/color-support b/Natours/starter/node_modules/.bin/color-support deleted file mode 120000 index fcbcb28..0000000 --- a/Natours/starter/node_modules/.bin/color-support +++ /dev/null @@ -1 +0,0 @@ -../color-support/bin.js \ No newline at end of file diff --git a/Natours/starter/node_modules/.bin/mkdirp b/Natours/starter/node_modules/.bin/mkdirp deleted file mode 120000 index 017896c..0000000 --- a/Natours/starter/node_modules/.bin/mkdirp +++ /dev/null @@ -1 +0,0 @@ -../mkdirp/bin/cmd.js \ No newline at end of file diff --git a/Natours/starter/node_modules/.bin/node-gyp b/Natours/starter/node_modules/.bin/node-gyp deleted file mode 120000 index 9b31a4f..0000000 --- a/Natours/starter/node_modules/.bin/node-gyp +++ /dev/null @@ -1 +0,0 @@ -../node-gyp/bin/node-gyp.js \ No newline at end of file diff --git a/Natours/starter/node_modules/.bin/node-sass b/Natours/starter/node_modules/.bin/node-sass deleted file mode 120000 index a4b0134..0000000 --- a/Natours/starter/node_modules/.bin/node-sass +++ /dev/null @@ -1 +0,0 @@ -../node-sass/bin/node-sass \ No newline at end of file diff --git a/Natours/starter/node_modules/.bin/node-which b/Natours/starter/node_modules/.bin/node-which deleted file mode 120000 index 6f8415e..0000000 --- a/Natours/starter/node_modules/.bin/node-which +++ /dev/null @@ -1 +0,0 @@ -../which/bin/node-which \ No newline at end of file diff --git a/Natours/starter/node_modules/.bin/nopt b/Natours/starter/node_modules/.bin/nopt deleted file mode 120000 index 6b6566e..0000000 --- a/Natours/starter/node_modules/.bin/nopt +++ /dev/null @@ -1 +0,0 @@ -../nopt/bin/nopt.js \ No newline at end of file diff --git a/Natours/starter/node_modules/.bin/resolve b/Natours/starter/node_modules/.bin/resolve deleted file mode 120000 index b6afda6..0000000 --- a/Natours/starter/node_modules/.bin/resolve +++ /dev/null @@ -1 +0,0 @@ -../resolve/bin/resolve \ No newline at end of file diff --git a/Natours/starter/node_modules/.bin/rimraf b/Natours/starter/node_modules/.bin/rimraf deleted file mode 120000 index 4cd49a4..0000000 --- a/Natours/starter/node_modules/.bin/rimraf +++ /dev/null @@ -1 +0,0 @@ -../rimraf/bin.js \ No newline at end of file diff --git a/Natours/starter/node_modules/.bin/sassgraph b/Natours/starter/node_modules/.bin/sassgraph deleted file mode 120000 index 901ada9..0000000 --- a/Natours/starter/node_modules/.bin/sassgraph +++ /dev/null @@ -1 +0,0 @@ -../sass-graph/bin/sassgraph \ No newline at end of file diff --git a/Natours/starter/node_modules/.bin/semver b/Natours/starter/node_modules/.bin/semver deleted file mode 120000 index 5aaadf4..0000000 --- a/Natours/starter/node_modules/.bin/semver +++ /dev/null @@ -1 +0,0 @@ -../semver/bin/semver.js \ No newline at end of file diff --git a/Natours/starter/sass/abstracts/_mixins.scss b/Natours/starter/sass/abstracts/_mixins.scss index f5cde3a..1923fb7 100644 --- a/Natours/starter/sass/abstracts/_mixins.scss +++ b/Natours/starter/sass/abstracts/_mixins.scss @@ -12,3 +12,46 @@ left: 50%; transform: translate(-50%, -50%); } + +// MEDIA QUERY MANAGER +/* + * 0 - 600px : Phone + * 600 - 900px : Tablet portrait + * 900 - 1200px : Tablet landscape + * 1200 - 1800px : Normal desktop + * 1800px + : Big desktop + + * $breakpoint argument choices + - phone + - tab-port + - tab-land + - big-desktop + + 1em = 16px + */ +@mixin respond($breakpoint) { + @if $breakpoint == phone { + @media (max-width: 37.5em) { + //600px + @content; + } + } + @if $breakpoint == tab-port { + @media (max-width: 56.25em) { + //900px + @content; + } + } + @if $breakpoint == tab-land { + @media (max-width: 75em) { + //1200px + @content; + } + } + @if $breakpoint == big-desktop { + @media (min-width: 112.5em) { + //1800px + @content; + } + } +} diff --git a/Natours/starter/sass/abstracts/_variables.scss b/Natours/starter/sass/abstracts/_variables.scss index 134e29a..1105dc5 100644 --- a/Natours/starter/sass/abstracts/_variables.scss +++ b/Natours/starter/sass/abstracts/_variables.scss @@ -22,6 +22,7 @@ $color-black: #000; //Grid Spacing $grid-width: 114rem; $gutter-vertical: 8rem; +$gutter-vertical-small: 6rem; $gutter-horizontal: 6rem; //Font sizing diff --git a/Natours/starter/sass/base/_base.scss b/Natours/starter/sass/base/_base.scss index e813b8c..994d421 100644 --- a/Natours/starter/sass/base/_base.scss +++ b/Natours/starter/sass/base/_base.scss @@ -1,16 +1,35 @@ *, ::after, ::before { - margin: 0; - padding: 0; - box-sizing: inherit; + margin: 0; + padding: 0; + box-sizing: inherit; } html { - font-size: 62.5%; + font-size: 62.5%; // 1rem = 10px; 10px/16px = 62.5% + + @include respond(big-desktop) { + font-size: 75%; + } + @include respond(tab-land) { + font-size: 56.25%; + } + @include respond(tab-port) { + font-size: 50%; //1rem = 8px + } + // not needes as it would be the same as tab-port + // @include respond(phone) { + // font-size: 50%; + // } } body { - padding: 3rem; - box-sizing: border-box; -} \ No newline at end of file + padding: 3rem; + box-sizing: border-box; + + @include respond(tab-port) { + padding: 0; + + } +} diff --git a/Natours/starter/sass/base/_typography.scss b/Natours/starter/sass/base/_typography.scss index bdcf206..cfd32ca 100644 --- a/Natours/starter/sass/base/_typography.scss +++ b/Natours/starter/sass/base/_typography.scss @@ -1,70 +1,91 @@ body { - font-family: "Lato",Verdana, Geneva, Tahoma, sans-serif; - font-weight: 400; - /* font-size: 16px; */ - line-height: 1.7; - color: $color-gray-dark; + font-family: "Lato", Verdana, Geneva, Tahoma, sans-serif; + font-weight: 400; + /* font-size: 16px; */ + line-height: 1.7; + color: $color-gray-dark; } .heading--primary { - color: $color-white; - text-transform: uppercase; - margin-bottom: 6rem; + color: $color-white; + text-transform: uppercase; + margin-bottom: 6rem; - &-main { - display: block; - font-size: 6rem; - font-weight: 400; - letter-spacing: 3.5rem; - - animation-name: slideLeft; - animation-duration: 1s; - animation-timing-function: ease-in; - } + &-main { + display: block; + font-size: 6rem; + font-weight: 400; + letter-spacing: 3.5rem; - &-sub { - display: block; - font-size: 2rem; - font-weight: 700; - letter-spacing: 1.75rem; - - animation-name: slideRight; - animation-duration: 1s; - animation-timing-function: ease-in; + animation-name: slideLeft; + animation-duration: 1s; + animation-timing-function: ease-in; + + @include respond(phone) { + letter-spacing: 1rem; + font-size: 5rem; } + } + + &-sub { + display: block; + font-size: 2rem; + font-weight: 700; + letter-spacing: 1.75rem; + + animation-name: slideRight; + animation-duration: 1s; + animation-timing-function: ease-in; + + @include respond(phone) { + letter-spacing: .5rem; + } + } } .heading--secondary { - font-size: 3.5rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 2px; + font-size: 3.5rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 2px; - display: inline-block; + display: inline-block; - background-image: linear-gradient(to right, $color-primary-light, $color-primary-dark); - - background-clip: floor($number: 0); - -webkit-background-clip: text; - color: transparent; + background-image: linear-gradient( + to right, + $color-primary-light, + $color-primary-dark + ); - transition: all .2s; + background-clip: floor($number: 0); + -webkit-background-clip: text; + color: transparent; - &:hover { - transform: skewY(2deg) skewX(15deg) scale(1.1); - text-shadow: .5rem 1rem 2rem rgba($color-black, .2); - } + 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: 0.5rem 1rem 2rem rgba($color-black, 0.2); + } } .heading--terciary { - font-size: $default-font-size; - font-weight: 700; - text-transform: capitalize; + font-size: $default-font-size; + font-weight: 700; + text-transform: capitalize; } .paragraph { - font-size: $default-font-size; - &:not(:last-child) { - margin-bottom: 3rem; - } -} \ No newline at end of file + font-size: $default-font-size; + &:not(:last-child) { + margin-bottom: 3rem; + } +} diff --git a/Natours/starter/sass/layout/_footer.scss b/Natours/starter/sass/layout/_footer.scss index 77161d5..458f51f 100644 --- a/Natours/starter/sass/layout/_footer.scss +++ b/Natours/starter/sass/layout/_footer.scss @@ -4,9 +4,17 @@ font-size: 1.4rem; color: $color-grey-light-1; + @include respond(tab-port) { + padding: 8rem 0; + } + &__logo-box { text-align: center; margin-bottom: 8rem; + + @include respond(tab-port) { + margin-bottom: 6rem; + } } &__logo { @@ -18,6 +26,11 @@ border-top: 1px solid $color-gray-dark; padding-top: 2rem; display: inline-block; + + @include respond(tab-port) { + width: 100%; + text-align: center; + } } &__list { @@ -56,5 +69,10 @@ display: inline-block; width: 80%; float: right; + + @include respond(tab-port) { + width: 100%; + float: none; + } } } diff --git a/Natours/starter/sass/layout/_grid.scss b/Natours/starter/sass/layout/_grid.scss index b707c10..0110af2 100644 --- a/Natours/starter/sass/layout/_grid.scss +++ b/Natours/starter/sass/layout/_grid.scss @@ -4,6 +4,15 @@ &:not(:last-child) { margin-bottom: $gutter-vertical; + + @include respond(tab-port) { + margin-bottom: $gutter-vertical-small; + } + } + + @include respond(tab-port) { + max-width: 50rem; + padding: 0 3rem; } @include clearfix; @@ -13,7 +22,15 @@ float: left; &:not(:last-child) { - margin-right: $gutter-horizontal; + margin-right: $gutter-horizontal; + @include respond(tab-port) { + margin-right: 0; + margin-bottom: $gutter-vertical-small; + } + } + + @include respond(tab-port) { + width: 100% !important; } } @@ -40,4 +57,4 @@ .col-3-of-4 { width: calc(3 * ((100% - 3 * #{$gutter-horizontal}) / 4) + 2 * #{$gutter-horizontal}); } -} \ No newline at end of file +} diff --git a/Natours/starter/sass/layout/_header.scss b/Natours/starter/sass/layout/_header.scss index a44fbca..79dcd0d 100644 --- a/Natours/starter/sass/layout/_header.scss +++ b/Natours/starter/sass/layout/_header.scss @@ -5,6 +5,10 @@ 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%); + } + position: relative; &__logo-box { diff --git a/Natours/starter/sass/layout/_navigation.scss b/Natours/starter/sass/layout/_navigation.scss index 5b68bf6..5ac8c82 100644 --- a/Natours/starter/sass/layout/_navigation.scss +++ b/Natours/starter/sass/layout/_navigation.scss @@ -14,6 +14,16 @@ z-index: 2000; box-shadow: 0 1rem 3rem rgba($color-black, 0.1); + @include respond(tab-port) { + top: 4rem; + right: 4rem; + } + + @include respond(phone) { + top: 2.5rem; + right: 2.5rem; + } + text-align: center; cursor: pointer; @@ -33,7 +43,15 @@ z-index: 1000; transition: transform 0.8s cubic-bezier(0.83, 0, 0.17, 1); - // transform: scale(80); + @include respond(tab-port) { + top: 4.5rem; + right: 4.5rem; + } + + @include respond(phone) { + top: 3rem; + right: 3rem; + } } &__nav { diff --git a/Natours/starter/sass/pages/_home.scss b/Natours/starter/sass/pages/_home.scss index 77b5cd6..f243b79 100644 --- a/Natours/starter/sass/pages/_home.scss +++ b/Natours/starter/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,28 @@ & > * { transform: skewY(7deg); } + + @include respond(tab-port) { + padding: 15rem 0; + } } .section-tours { background-color: $color-grey-light-1; padding: 25rem 0 15rem 0; margin-top: -10rem; + @include respond(tab-port) { + padding: 20rem 0 10rem 0; + } } .section-stories { position: relative; padding: 15rem 0; + + @include respond(tab-port) { + padding: 10rem 0; + } } .section-book {