diff --git a/index.html b/index.html index 765311a..c673d8b 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,54 @@ Title - + + + + +
+ + +
+ +
+ +
+ + +
+
+
+ + + +
+
+ Coloured hue +
+
diff --git a/package-lock.json b/package-lock.json index 9647adb..e49ac55 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1252,20 +1252,6 @@ "linux" ] }, - "node_modules/@rollup/rollup-linux-riscv64-gnu": { - "version": "4.30.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.30.0.tgz", - "integrity": "sha512-U0xcC80SMpEbvvLw92emHrNjlS3OXjAM0aVzlWfar6PR0ODWCTQtKeeB+tlAPGfZQXicv1SpWwRz9Hyzq3Jx3g==", - "cpu": [ - "riscv64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ] - }, "node_modules/@rollup/rollup-linux-s390x-gnu": { "version": "4.30.0", "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.30.0.tgz", @@ -1449,20 +1435,6 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/anymatch": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", - "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", - "dev": true, - "license": "ISC", - "dependencies": { - "normalize-path": "^3.0.0", - "picomatch": "^2.0.4" - }, - "engines": { - "node": ">= 8" - } - }, "node_modules/argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", @@ -1484,19 +1456,6 @@ "dev": true, "license": "MIT" }, - "node_modules/binary-extensions": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", - "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/boolbase": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", @@ -1600,35 +1559,10 @@ "dev": true, "license": "MIT", "dependencies": { - "anymatch": "~3.1.2", - "braces": "~3.0.2", - "glob-parent": "~5.1.2", - "is-binary-path": "~2.1.0", - "is-glob": "~4.0.1", - "normalize-path": "~3.0.0", - "readdirp": "~3.6.0" - }, - "engines": { - "node": ">= 8.10.0" - }, - "funding": { - "url": "https://paulmillr.com/funding/" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - } - }, - "node_modules/chokidar/node_modules/glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, - "license": "ISC", - "dependencies": { - "is-glob": "^4.0.1" + "has-flag": "^4.0.0" }, "engines": { - "node": ">= 6" + "node": ">=8" } }, "node_modules/clean-css": { @@ -2650,19 +2584,6 @@ "dev": true, "license": "MIT" }, - "node_modules/is-binary-path": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", - "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", - "dev": true, - "license": "MIT", - "dependencies": { - "binary-extensions": "^2.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", @@ -3164,16 +3085,6 @@ "he": "1.2.0" } }, - "node_modules/normalize-path": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", - "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/npm-run-path": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz", @@ -3476,19 +3387,6 @@ ], "license": "MIT" }, - "node_modules/readdirp": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", - "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "dev": true, - "license": "MIT", - "dependencies": { - "picomatch": "^2.2.1" - }, - "engines": { - "node": ">=8.10.0" - } - }, "node_modules/relateurl": { "version": "0.2.7", "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz", @@ -3599,6 +3497,20 @@ "fsevents": "~2.3.2" } }, + "node_modules/rollup/node_modules/@rollup/rollup-linux-riscv64-gnu": { + "version": "4.30.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.30.0.tgz", + "integrity": "sha512-U0xcC80SMpEbvvLw92emHrNjlS3OXjAM0aVzlWfar6PR0ODWCTQtKeeB+tlAPGfZQXicv1SpWwRz9Hyzq3Jx3g==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, "node_modules/run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", diff --git a/public/content.json b/public/content.json index 60a4b3a..ec7df10 100644 --- a/public/content.json +++ b/public/content.json @@ -1,6 +1,6 @@ { "header": { - "nav": ["home", "discover", "special deals", "contact"], + "nav": ["contact", "special deals", "discover", "home"], "buttons": ["log in", "sign up"] }, "section-1": { diff --git a/src/script/index.js b/src/script/index.js index e69de29..3983f8c 100644 --- a/src/script/index.js +++ b/src/script/index.js @@ -0,0 +1,65 @@ +import '../styles/main.scss'; + +//get data from context.json +let data; +try { + const response = await fetch('./content.json'); + data = await response.json(); +} catch { + alert('Error while fetching data from backend'); +} + +const navLinks = data.header.nav; +const navBox = document.querySelector('.container__nav-box'); +const navLink = document.querySelector('.container__nav-link'); +const buttonLinksPrimary = data.header.buttons[0]; +const buttonLinksSecondary = data.header.buttons[1]; +const btnPrimary = document.querySelectorAll('.button--primary'); +const btnSecondary = document.querySelectorAll('.button--secondary'); + +/** fetch required data and append it to necessary container + * + * @param {Array} arr + * @param {HTMLElement} element + * @param {Container} container + */ +function append(arr, element, container) { + arr.forEach((link) => { + let a = document.createElement(element); + a.setAttribute('tabindex', '1'); + a.innerHTML = link; + container.prepend(a); + }); +} + +//using append() to create nav links +append(navLinks, 'a', navLink); +append(navLinks, 'a', navBox); + +//adding button text +btnPrimary.forEach((btnBox) => { + btnBox.innerHTML = buttonLinksPrimary; +}); +btnSecondary.forEach((btnBox) => { + btnBox.innerHTML = buttonLinksSecondary; +}); + +//making navBox and Button appear upon clicking on menu +const menu = document.querySelector('.container__hamburger'); +const btnBox = document.querySelector('.container__nav-box-btn'); +menu.addEventListener('click', () => { + navBox.classList.toggle('container__nav-box--active'); + btnBox.classList.toggle('container__nav-box-btn--active'); + let expand = menu.getAttribute('aria-expanded'); + let ans; + let ariaLabel; + if (expand == 'true') { + ans = false; + ariaLabel = 'Menu Closed'; + } else { + ans = true; + ariaLabel = 'Menu Opened'; + } + menu.setAttribute('aria-expanded', ans); + menu.setAttribute('aria-label', ariaLabel); +}); diff --git a/src/styles/main.scss b/src/styles/main.scss index e69de29..ace1b16 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -0,0 +1,6 @@ +@use './scss/abstract' as abs; +@use './scss/base'; +@use './scss/components' as comp; +@use './scss/layouts'; +@use './scss/themes'; +@use './scss/vendors'; diff --git a/src/styles/scss/abstract/_index.scss b/src/styles/scss/abstract/_index.scss new file mode 100644 index 0000000..904e127 --- /dev/null +++ b/src/styles/scss/abstract/_index.scss @@ -0,0 +1,4 @@ +@forward './breakpoint'; +@forward './function'; +@forward './mixin'; +@forward './color'; diff --git a/src/styles/scss/base/_index.scss b/src/styles/scss/base/_index.scss new file mode 100644 index 0000000..d67fb47 --- /dev/null +++ b/src/styles/scss/base/_index.scss @@ -0,0 +1,2 @@ +@forward './reset'; +@forward './typography'; diff --git a/src/styles/scss/components/_button.scss b/src/styles/scss/components/_button.scss index a7cf71c..985c7a0 100644 --- a/src/styles/scss/components/_button.scss +++ b/src/styles/scss/components/_button.scss @@ -1,8 +1,21 @@ @use '../base/typography' as typo; @use '../abstract/mixin' as mix; +@use '../abstract/color' as c; +@use '../themes/light' as th; +@use '../abstract/function' as f; .button { @include mix.flex($gap: 0.5rem, $space: center); - border-radius: 6.25rem; + border-radius: f.px-to-rem(100); + padding: 0.5rem 1rem; + max-width: f.px-to-rem(115); @include mix.use-typo(typo.$nav-link-2); + &--primary { + background-color: th.$bg-primary; + color: c.$black-900; + } + &--secondary { + background-color: th.$bg-secondary; + color: c.$white-200; + } } diff --git a/src/styles/scss/components/_icon.scss b/src/styles/scss/components/_icon.scss index 94a6497..641f808 100644 --- a/src/styles/scss/components/_icon.scss +++ b/src/styles/scss/components/_icon.scss @@ -3,7 +3,7 @@ .icon { width: 2.05rem; height: 2.05rem; - @include mix.flex($gap: 0.25rem, $align-items: flex-start); + @include mix.flex($gap: 0.25rem, $align-item: flex-start); padding: 0.5rem; border-radius: 3.2rem; &__primary { diff --git a/src/styles/scss/components/_index.scss b/src/styles/scss/components/_index.scss new file mode 100644 index 0000000..c15b9d4 --- /dev/null +++ b/src/styles/scss/components/_index.scss @@ -0,0 +1,4 @@ +@forward './button'; +@forward './cards'; +@forward './chip'; +@forward './icon'; diff --git a/src/styles/scss/layouts/_header.scss b/src/styles/scss/layouts/_header.scss new file mode 100644 index 0000000..b45596d --- /dev/null +++ b/src/styles/scss/layouts/_header.scss @@ -0,0 +1,149 @@ +//import all necessary files with appropriate namespace +@use '../abstract/function' as f; +@use '../themes/light' as th; +@use '../abstract/mixin' as mix; +@use '../abstract/color' as c; +@use 'sass:color'; +@use '../base/typography' as typo; + +//defining styling for parent header container +.container { + width: 90vw; + margin: 0 auto; + padding: 2rem 1rem; + @include mix.flex($direction: row-reverse); + //dimension of logo remain same throughout screen + &__logo { + width: f.px-to-rem(40); + height: f.px-to-rem(40); + } + //remain hidden until screen size switches to desktop view + &__nav-link { + display: none; + @include mix.use-typo(typo.$nav-link-2); + color: color.change(c.$black-800, $alpha: 0.5); + } + //remain visible until screen size switches to desktop view + &__hamburger { + width: f.px-to-rem(40); + height: f.px-to-rem(40); + font-size: 1.9rem; + border-radius: 30%; + color: c.$white-100; + background-color: th.$bg-secondary; + transition: all 150ms ease; + &:hover { + background-color: color.adjust(th.$bg-secondary, $lightness: -6%); + @include mix.shadow( + 0px, + 6px, + 16px, + color.change(c.$purple-200, $alpha: 0.25) + ); + } + } + //hamburger pop-up menu + &__nav-box { + position: absolute; + @include mix.flex(column, space-between, 1rem, stretch); + flex-wrap: wrap; + @include mix.use-typo(typo.$nav-link-2); + width: 7rem; + right: 4rem; + top: f.px-to-rem(60); + padding: 0.75rem; + color: color.change(c.$black-800, $alpha: 0.5); + background-color: color.change(c.$white-100, $alpha: 0.98); + border: 1px solid color.change(c.$black-800, $alpha: 0.1); + border-radius: f.px-to-rem(16); + @include mix.shadow( + 0px, + 16px, + 40px, + color.change(c.$black-800, $alpha: 0.16) + ); + opacity: 0; + visibility: hidden; + pointer-events: none; + transform: translateY(f.px-to-rem(-8)) scale(0.98); + transform-origin: top right; + transition: all 180ms ease; + + //hamburger menu pop up on click of button + &--active { + opacity: 1; + visibility: visible; + pointer-events: auto; + transform: translateY(0) scale(1); + } + } + //button inside hamburger pop up menu + &__nav-box-btn { + display: none; + //button remain hidden until hamburger icon is clicked + &--active { + @include mix.flex($gap: 1rem); + flex-wrap: wrap; + } + } + // button inside header container + //become visible when view enters tablet or higher view + &__btn { + display: none; + } +} + +//Tablet view +@include mix.responsive-up(md) { + .container { + flex-direction: row; + //button inside header container + &__btn { + max-width: f.px-to-rem(220); + @include mix.flex($gap: f.px-to-rem(8)); + flex-wrap: wrap; + } + //the navigation link box that pop up when hamburger icon is clicked + &__nav-box { + width: 90%; + top: f.px-to-rem(75); + left: 7%; + padding-right: 0.75rem; + @include mix.flex($gap: 1.5rem); + flex-wrap: wrap; + } + //buttons inside navBox remain hidden in tablet or higher view + &__nav-box-btn { + display: none; + } + } +} + +//Desktop view +@include mix.responsive-up(lg) { + .container { + width: 95vw; + //navigation links + &__nav-link { + max-width: f.px-to-rem(428); + @include mix.flex($gap: f.px-to-rem(64)); + } + //hamburger become hidden in desktop view + &__hamburger { + display: none; + } + //navBox remain hidden in desktop view + &__nav-box { + display: none; + } + } +} + +//adding orange hue +.orangeHue { + position: absolute; + top: 0; + left: 0; + z-index: -1; + pointer-events: none; +} diff --git a/src/styles/scss/layouts/_index.scss b/src/styles/scss/layouts/_index.scss new file mode 100644 index 0000000..d35742b --- /dev/null +++ b/src/styles/scss/layouts/_index.scss @@ -0,0 +1 @@ +@forward './header'; diff --git a/src/styles/scss/themes/_index.scss b/src/styles/scss/themes/_index.scss new file mode 100644 index 0000000..6ccc267 --- /dev/null +++ b/src/styles/scss/themes/_index.scss @@ -0,0 +1 @@ +@forward './light'; diff --git a/src/styles/scss/themes/_light.scss b/src/styles/scss/themes/_light.scss index c5f667b..031a73c 100644 --- a/src/styles/scss/themes/_light.scss +++ b/src/styles/scss/themes/_light.scss @@ -8,11 +8,11 @@ $brand-primary: $pink-100; $brand-secondary: $orange-100; $brand-tertiary: $yellow-200; -/*Background tokens*/ +//Background tokens $bg-primary: $white-100; $bg-secondary: $purple-200; -/*Text Token*/ +//Text Token $text-primary: $black-900; $text-secondary: $pink-100; $text-tertiary: $orange-100; diff --git a/src/styles/scss/vendors/_index.scss b/src/styles/scss/vendors/_index.scss new file mode 100644 index 0000000..d78831f --- /dev/null +++ b/src/styles/scss/vendors/_index.scss @@ -0,0 +1 @@ +@forward './icomoon';