From 301b509eda3d7137527fe963569b3a953644a512 Mon Sep 17 00:00:00 2001 From: bazz Date: Tue, 15 Nov 2022 10:30:23 +0100 Subject: [PATCH] Added Styles to project --- isrc/index.css | 648 +++++++++++++++++++++ isrc/index.css.map | 1 + package.json | 6 +- src/index.css | 670 ++++++++++++++++++++-- src/index.css.map | 1 + src/styles/_media.scss | 0 src/styles/_reset.scss | 78 +++ src/styles/_utilities.scss | 29 + src/styles/component/_all-components.scss | 3 + src/styles/component/_button.scss | 17 + src/styles/component/_modal.scss | 70 +++ src/styles/component/_nftcard.scss | 54 ++ src/styles/layout/_allLayout.scss | 3 + src/styles/layout/_container.scss | 13 + src/styles/layout/_footer.scss | 83 +++ src/styles/layout/_nav.scss | 86 +++ src/styles/pages/_home.scss | 165 ++++++ src/styles/pages/_nftPage.scss | 48 ++ src/styles/pages/_pages.scss | 2 + src/styles/style.scss | 65 +++ yarn.lock | 113 +++- 21 files changed, 2106 insertions(+), 49 deletions(-) create mode 100644 isrc/index.css create mode 100644 isrc/index.css.map create mode 100644 src/index.css.map create mode 100644 src/styles/_media.scss create mode 100644 src/styles/_reset.scss create mode 100644 src/styles/_utilities.scss create mode 100644 src/styles/component/_all-components.scss create mode 100644 src/styles/component/_button.scss create mode 100644 src/styles/component/_modal.scss create mode 100644 src/styles/component/_nftcard.scss create mode 100644 src/styles/layout/_allLayout.scss create mode 100644 src/styles/layout/_container.scss create mode 100644 src/styles/layout/_footer.scss create mode 100644 src/styles/layout/_nav.scss create mode 100644 src/styles/pages/_home.scss create mode 100644 src/styles/pages/_nftPage.scss create mode 100644 src/styles/pages/_pages.scss create mode 100644 src/styles/style.scss diff --git a/isrc/index.css b/isrc/index.css new file mode 100644 index 0000000..a05018c --- /dev/null +++ b/isrc/index.css @@ -0,0 +1,648 @@ +@import url("https://fonts.googleapis.com/css2?family=Red+Rose:wght@300;400;500;600;700&display=swap"); /* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Remove default margin */ +body, +h1, +h2, +h3, +h4, +p, +figure, +blockquote, +dl, +dd { + margin: 0; +} + +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul, +ol { + list-style: none; + padding: 0; +} + +/* Set core root defaults */ +html:focus-within { + scroll-behavior: smooth; +} + +/* Set core body defaults */ +body { + min-height: 100vh; + text-rendering: optimizeSpeed; + line-height: 1.5; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; +} + +a { + text-decoration: none; +} + +/* Make images easier to work with */ +img, +picture { + max-width: 100%; + display: block; +} + +/* Inherit fonts for inputs and buttons */ +input, +button, +textarea, +select { + font: inherit; +} + +/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ +@media (prefers-reduced-motion: reduce) { + html:focus-within { + scroll-behavior: auto; + } + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} +.btn { + all: unset; + background-color: #a02279; + color: #ffffff; + padding: 0.875rem 1.625rem; + border-radius: 0.625rem; + cursor: pointer; +} +.btn:active { + background-color: #761959; +} +.btn:hover { + transition: background-color 0.2s ease-in-out; + background-color: #ca2b99; +} + +.modal { + background-color: #F8F9FA; + width: min(100%, 37.5rem); + border: 0; + border-radius: 1rem; + padding: 0; +} +.modal__body { + padding: 2rem; +} +.modal__body > * + * { + margin-top: 1rem; +} +.modal__header { + display: flex; + justify-content: space-between; + align-items: center; + padding-inline: 2rem; + padding-block: 1.5rem; + border-bottom: 0.125rem solid #CFD8DC; +} +.modal__header .close { + font-size: 1.5rem; + cursor: pointer; + aspect-ratio: 1/1; + width: min(100%, 1.5rem); + display: grid; + place-items: center; +} +.modal__header .close:hover { + animation: rotate 0.4s ease-out; +} + +.link-btn { + width: min(100%, 33.5rem); + margin-inline: auto; + padding: 0.75rem 1.25rem; + border: 0.125rem solid #CFD8DC; + border-radius: 0.75rem; + background-color: #F8F9FA; + display: flex; + justify-content: space-between; + align-items: center; +} +.link-btn:hover { + background-color: #e9ecef; + cursor: pointer; +} +.link-btn p { + font-weight: 600; + font-size: 1.125rem; +} +.link-btn .link-title { + display: flex; + align-items: center; + gap: 1rem; +} + +@keyframes rotate { + to { + rotate: 180deg; + } +} +.NFT { + width: min(100%, 18.25rem); + border: 1px solid #d7d7d7; + border-radius: 0.875rem; + padding: 1rem; +} +.NFT__card { + background-color: #ffffff; +} +.NFT__card .img--container { + position: relative; +} +.NFT__card .img--container > *:nth-child(1) { + position: absolute; + top: 0.5rem; + right: 0.5rem; + font-size: 1.5rem; +} +.NFT__card .title { + margin-top: 1rem; + display: flex; + justify-content: space-between; + font-size: 0.78125rem; +} +.NFT__card .title > *:nth-child(2) { + font-weight: bold; +} +.NFT__card .da { + margin-top: 0.625rem; + display: flex; + justify-content: space-between; + font-size: 0.78125rem; +} +.NFT__card .rating { + margin-top: 0.625rem; + display: flex; + gap: 0.5rem; +} + +.heart { + fill: #d7d7d7; + cursor: pointer; +} +.heart:hover { + fill: white; + transition: fill 0.2s ease-in-out; +} +.heart--checked { + fill: #e279c2; + cursor: pointer; +} + +.nav { + margin-top: 2.75rem; + background-color: #ffffff; +} +.nav-container { + display: flex; + align-items: center; + justify-content: space-between; + position: relative; +} +.nav-main { + display: flex; + justify-content: space-between; + width: 70%; + align-items: center; + align-items: center; + top: 0; + z-index: 10; + inset-block: 0; + right: 0; +} +.nav-main > svg { + display: none; +} +@media (max-width: 900px) { + .nav-main { + translate: 364px 0; + display: none; + } +} +@media (max-width: 900px) { + .nav-main.active { + display: flex; + position: fixed; + flex-direction: column; + background-color: rgb(247, 247, 247); + justify-content: flex-start; + align-items: center; + top: 0; + z-index: 10; + inset-block: 0; + right: 0; + width: 100vw; + padding-top: 6.25rem; + translate: 0 0; + transition: translate 0.3s ease-in-out; + } + .nav-main.active > svg { + display: inline; + position: absolute; + top: 1.5rem; + right: 1.5rem; + } + .nav-main.active .btn { + margin-top: 2.75em; + } +} +.nav .nav-link__list { + display: flex; + margin-block: 0; + gap: 3rem; +} +@media (max-width: 900px) { + .nav .nav-link__list { + flex-direction: column; + } +} +.nav .nav-link__list li { + font-size: 1.25rem; +} +.nav .nav-link__list li a { + color: #434343; +} +.nav .nav-link__list li a:active { + color: #a02279; +} +.nav .mobile { + display: none; +} +@media (max-width: 900px) { + .nav .mobile { + display: block; + } +} + +.container--global { + width: min(100%, 78.5rem); + margin-inline: auto; + padding-inline: 1rem; +} + +.footer { + color: #ffffff; + background-color: #000000; + padding-block: 3.625rem; +} +.footer--wrapper { + display: flex; + gap: 11.625rem; + align-items: first baseline; + flex-wrap: wrap-reverse; +} +.footer-group:nth-child(1) { + display: flex; + flex-direction: column; +} +@media (max-width: 710px) { + .footer-group:nth-child(1) { + flex-direction: row; + align-items: center; + justify-content: space-between; + width: 100%; + } + .footer-group:nth-child(1) .lower { + display: flex; + gap: 1.25rem; + align-items: center; + } +} +@media (max-width: 510px) { + .footer-group:nth-child(1) { + flex-direction: column; + } + .footer-group:nth-child(1) .lower { + padding-block: 1.875rem; + } +} +.footer-group:nth-child(1) > *:nth-child(2) { + margin-top: 6rem; +} +@media (max-width: 710px) { + .footer-group:nth-child(1) > *:nth-child(2) { + flex-direction: row; + margin-top: 0; + justify-content: space-between; + } +} +.footer-group:nth-child(1) > *:nth-child(2) .social { + display: flex; + gap: 2rem; +} +.footer-group:nth-child(1) > *:nth-child(2) > *:nth-child(2) { + margin-top: 3.5rem; +} +@media (max-width: 710px) { + .footer-group:nth-child(1) > *:nth-child(2) > *:nth-child(2) { + flex-direction: row; + margin-top: 0; + justify-content: space-between; + } +} +.footer-group:nth-child(2) { + display: flex; + flex-wrap: wrap; + gap: 13.5rem; +} +@media (max-width: 456px) { + .footer-group:nth-child(2) { + flex-direction: column; + margin-inline: auto; + justify-content: flex-start; + align-items: flex-start; + } +} +.footer-group:nth-child(2) h6 { + font-size: 1.125rem; + font-weight: bold; +} +.footer-group:nth-child(2) li { + color: #f1f3f9; + font-size: 0.875rem; +} +.footer-group:nth-child(2) li + li { + margin-top: 1rem; +} + +.hero { + margin-top: 7.5rem; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + gap: 1rem; +} +@media (max-width: 1199.98px) { + .hero { + justify-content: center; + flex-direction: column; + align-items: center; + } +} +.hero--search { + width: min(100%, 38.669375rem); + display: flex; + justify-content: space-between; +} +.hero--search > *:nth-child(1) { + flex: 2 1 0; + width: 100%; + padding-inline: 1rem; + border: 1px solid #a3a3a3; + border-radius: 0.5rem 0 0 0.5rem; + border-right: 0; +} +.hero--search > *:nth-child(1):focus-within { + outline: 1px solid #d94fae; +} +.hero--search > *:nth-child(2) { + border-radius: 0 0.5rem 0.5rem 0; + flex: 1 1 0; + width: min(100%, 14.375rem); + text-align: center; +} +.hero--title { + font-size: 3.4375rem; + font-weight: 400; + color: #434343; + line-height: 140%; +} +@media (max-width: 900px) { + .hero--title { + text-align: center; + } +} +.hero--title span { + font-weight: bold; + color: #a02279; +} +.hero--msg { + font-size: 1.5rem; + color: #434343; +} +.hero .container--wrapper:nth-child(1) { + margin-top: 1.75rem; + width: min(100%, 39.75rem); +} +.hero .container--wrapper:nth-child(1) > * + * { + margin-top: 3rem; +} +.hero .container--wrapper:nth-child(2) { + width: min(100%, 29.75rem); +} + +.brands { + background-color: #a02279; + margin-top: 3.875rem; + padding-block: 0.625rem; +} +.brands--wrapper { + display: flex; + justify-content: space-between; + align-items: center; +} +@media (max-width: 630px) { + .brands--wrapper { + font-size: 0.5rem; + } +} + +.meta-section { + color: #ffffff; + background-color: #a02279; + padding-block: 6.25rem; +} +.meta-section .meta-wrapper { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + align-content: center; +} +@media (max-width: 1179px) { + .meta-section .meta-wrapper { + flex-direction: column; + align-items: center; + } + .meta-section .meta-wrapper h2 { + margin-inline: auto; + text-align: center; + } + .meta-section .meta-wrapper .info { + display: flex; + flex-flow: column wrap; + align-items: center; + } + .meta-section .meta-wrapper p { + width: min(100%, 50ch) !important; + text-align: center; + margin-inline: auto; + } +} +.meta-section .meta-wrapper h2 { + font-size: 3rem; + margin-top: 5.625rem; +} +.meta-section .meta-wrapper p { + font-size: 1.125rem; + width: 40ch; + line-height: 2; + margin-top: 2.1875rem; +} +.meta-section .meta-wrapper > *:nth-child(2) { + width: min(100%, 44rem); +} +@media (max-width: 1172px) { + .meta-section .meta-wrapper > *:nth-child(2) { + margin-top: 4rem; + } +} +.meta-section .meta-wrapper > *:nth-child(1) > * + * { + all: unset; + margin-top: 3.5rem; + color: #a02279; + background-color: #ffffff; + padding: 0.875rem 2.125rem; + border-radius: 0.5rem; + cursor: pointer; +} +.meta-section .meta-wrapper > *:nth-child(1) > * + *:active { + background-color: #e6e6e6; +} + +.inspiration { + padding-block: 2.625rem; +} +.inspiration h2 { + text-align: center; + font-size: 3rem; +} +.inspiration ul { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(18.25rem, 1fr)); + gap: 1rem; + place-items: center; +} + +.nft-page { + margin-bottom: 5.625rem; +} +.nft-page .nav-list { + display: flex; + justify-content: space-between; + width: min(100%, 57.5625rem); +} +@media (max-width: 1120px) { + .nft-page .nav-list { + display: none; + } +} +.nft-page .top { + display: flex; + justify-content: space-between; + margin-top: 7.5rem; + align-items: center; +} +.nft-page .top .location { + display: flex; + justify-content: space-between; + align-items: center; + width: min(100%, 10.0625rem); + cursor: pointer; + border: 1px solid #d7d7d7; + border-radius: 0.5rem; + padding: 0.875rem; +} +.nft-page .top .location-list { + display: none; + background-color: white; + margin-right: 1.5rem; + margin-left: auto; +} +@media (max-width: 1120px) { + .nft-page .top .location-list { + display: inline; + } +} +.nft-page .top .location-list > * { + font-family: "Red Rose"; +} +.nft-page .nft-list { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(18.25rem, 1fr)); + gap: 1rem; + place-items: center; +} + +:root { + font-family: "Red Rose", cursive; + line-height: 24px; + font-weight: 400; + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} + +body { + background-color: #ffffff; + -ms-overflow-style: none; + scrollbar-width: none; +} +body::-webkit-scrollbar { + display: none; +} +body::-moz-selection { + background-color: #a02279 !important; + color: white !important; +} +body::selection { + background-color: #a02279 !important; + color: white !important; +} + +@media (max-width: 991.98px) { + :root { + font-size: 14px; + } +} +@media (max-width: 767.98px) { + :root { + font-size: 12px; + } +} +@media (max-width: 367.98px) { + :root { + font-size: 8px; + } +} +@media (max-width: 160.98px) { + :root { + font-size: 4px; + } +} +@media (max-width: 100.98px) { + :root { + font-size: 2px; + } +} + +/*# sourceMappingURL=index.css.map */ diff --git a/isrc/index.css.map b/isrc/index.css.map new file mode 100644 index 0000000..969c86e --- /dev/null +++ b/isrc/index.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../src/styles/_utilities.scss","../src/styles/_reset.scss","../src/styles/component/_button.scss","../src/styles/component/_modal.scss","../src/styles/component/_nftcard.scss","../src/styles/layout/_nav.scss","../src/styles/layout/_container.scss","../src/styles/layout/_footer.scss","../src/styles/pages/_home.scss","../src/styles/pages/_nftPage.scss","../src/styles/style.scss"],"names":[],"mappings":"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","file":"index.css"} \ No newline at end of file diff --git a/package.json b/package.json index 67b3d5a..11d1f8f 100644 --- a/package.json +++ b/package.json @@ -4,13 +4,15 @@ "version": "0.0.0", "type": "module", "scripts": { + "watchSass": "sass -w src/styles/style.scss src/index.css ", "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "sass": "^1.56.1" }, "devDependencies": { "@types/react": "^18.0.24", @@ -18,4 +20,4 @@ "@vitejs/plugin-react": "^2.2.0", "vite": "^3.2.3" } -} \ No newline at end of file +} diff --git a/src/index.css b/src/index.css index 917888c..a05018c 100644 --- a/src/index.css +++ b/src/index.css @@ -1,70 +1,648 @@ -:root { - font-family: Inter, Avenir, Helvetica, Arial, sans-serif; - font-size: 16px; - line-height: 24px; - font-weight: 400; +@import url("https://fonts.googleapis.com/css2?family=Red+Rose:wght@300;400;500;600;700&display=swap"); /* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: border-box; +} - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; +/* Remove default margin */ +body, +h1, +h2, +h3, +h4, +p, +figure, +blockquote, +dl, +dd { + margin: 0; +} - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul, +ol { + list-style: none; + padding: 0; +} + +/* Set core root defaults */ +html:focus-within { + scroll-behavior: smooth; +} + +/* Set core body defaults */ +body { + min-height: 100vh; + text-rendering: optimizeSpeed; + line-height: 1.5; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; } a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; + text-decoration: none; } -a:hover { - color: #535bf2; + +/* Make images easier to work with */ +img, +picture { + max-width: 100%; + display: block; } -body { - margin: 0; +/* Inherit fonts for inputs and buttons */ +input, +button, +textarea, +select { + font: inherit; +} + +/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ +@media (prefers-reduced-motion: reduce) { + html:focus-within { + scroll-behavior: auto; + } + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} +.btn { + all: unset; + background-color: #a02279; + color: #ffffff; + padding: 0.875rem 1.625rem; + border-radius: 0.625rem; + cursor: pointer; +} +.btn:active { + background-color: #761959; +} +.btn:hover { + transition: background-color 0.2s ease-in-out; + background-color: #ca2b99; +} + +.modal { + background-color: #F8F9FA; + width: min(100%, 37.5rem); + border: 0; + border-radius: 1rem; + padding: 0; +} +.modal__body { + padding: 2rem; +} +.modal__body > * + * { + margin-top: 1rem; +} +.modal__header { display: flex; + justify-content: space-between; + align-items: center; + padding-inline: 2rem; + padding-block: 1.5rem; + border-bottom: 0.125rem solid #CFD8DC; +} +.modal__header .close { + font-size: 1.5rem; + cursor: pointer; + aspect-ratio: 1/1; + width: min(100%, 1.5rem); + display: grid; place-items: center; - min-width: 320px; - min-height: 100vh; +} +.modal__header .close:hover { + animation: rotate 0.4s ease-out; } -h1 { - font-size: 3.2em; - line-height: 1.1; +.link-btn { + width: min(100%, 33.5rem); + margin-inline: auto; + padding: 0.75rem 1.25rem; + border: 0.125rem solid #CFD8DC; + border-radius: 0.75rem; + background-color: #F8F9FA; + display: flex; + justify-content: space-between; + align-items: center; +} +.link-btn:hover { + background-color: #e9ecef; + cursor: pointer; +} +.link-btn p { + font-weight: 600; + font-size: 1.125rem; +} +.link-btn .link-title { + display: flex; + align-items: center; + gap: 1rem; +} + +@keyframes rotate { + to { + rotate: 180deg; + } +} +.NFT { + width: min(100%, 18.25rem); + border: 1px solid #d7d7d7; + border-radius: 0.875rem; + padding: 1rem; +} +.NFT__card { + background-color: #ffffff; +} +.NFT__card .img--container { + position: relative; +} +.NFT__card .img--container > *:nth-child(1) { + position: absolute; + top: 0.5rem; + right: 0.5rem; + font-size: 1.5rem; +} +.NFT__card .title { + margin-top: 1rem; + display: flex; + justify-content: space-between; + font-size: 0.78125rem; +} +.NFT__card .title > *:nth-child(2) { + font-weight: bold; +} +.NFT__card .da { + margin-top: 0.625rem; + display: flex; + justify-content: space-between; + font-size: 0.78125rem; +} +.NFT__card .rating { + margin-top: 0.625rem; + display: flex; + gap: 0.5rem; } -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; +.heart { + fill: #d7d7d7; cursor: pointer; - transition: border-color 0.25s; } -button:hover { - border-color: #646cff; +.heart:hover { + fill: white; + transition: fill 0.2s ease-in-out; } -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; +.heart--checked { + fill: #e279c2; + cursor: pointer; } -@media (prefers-color-scheme: light) { +.nav { + margin-top: 2.75rem; + background-color: #ffffff; +} +.nav-container { + display: flex; + align-items: center; + justify-content: space-between; + position: relative; +} +.nav-main { + display: flex; + justify-content: space-between; + width: 70%; + align-items: center; + align-items: center; + top: 0; + z-index: 10; + inset-block: 0; + right: 0; +} +.nav-main > svg { + display: none; +} +@media (max-width: 900px) { + .nav-main { + translate: 364px 0; + display: none; + } +} +@media (max-width: 900px) { + .nav-main.active { + display: flex; + position: fixed; + flex-direction: column; + background-color: rgb(247, 247, 247); + justify-content: flex-start; + align-items: center; + top: 0; + z-index: 10; + inset-block: 0; + right: 0; + width: 100vw; + padding-top: 6.25rem; + translate: 0 0; + transition: translate 0.3s ease-in-out; + } + .nav-main.active > svg { + display: inline; + position: absolute; + top: 1.5rem; + right: 1.5rem; + } + .nav-main.active .btn { + margin-top: 2.75em; + } +} +.nav .nav-link__list { + display: flex; + margin-block: 0; + gap: 3rem; +} +@media (max-width: 900px) { + .nav .nav-link__list { + flex-direction: column; + } +} +.nav .nav-link__list li { + font-size: 1.25rem; +} +.nav .nav-link__list li a { + color: #434343; +} +.nav .nav-link__list li a:active { + color: #a02279; +} +.nav .mobile { + display: none; +} +@media (max-width: 900px) { + .nav .mobile { + display: block; + } +} + +.container--global { + width: min(100%, 78.5rem); + margin-inline: auto; + padding-inline: 1rem; +} + +.footer { + color: #ffffff; + background-color: #000000; + padding-block: 3.625rem; +} +.footer--wrapper { + display: flex; + gap: 11.625rem; + align-items: first baseline; + flex-wrap: wrap-reverse; +} +.footer-group:nth-child(1) { + display: flex; + flex-direction: column; +} +@media (max-width: 710px) { + .footer-group:nth-child(1) { + flex-direction: row; + align-items: center; + justify-content: space-between; + width: 100%; + } + .footer-group:nth-child(1) .lower { + display: flex; + gap: 1.25rem; + align-items: center; + } +} +@media (max-width: 510px) { + .footer-group:nth-child(1) { + flex-direction: column; + } + .footer-group:nth-child(1) .lower { + padding-block: 1.875rem; + } +} +.footer-group:nth-child(1) > *:nth-child(2) { + margin-top: 6rem; +} +@media (max-width: 710px) { + .footer-group:nth-child(1) > *:nth-child(2) { + flex-direction: row; + margin-top: 0; + justify-content: space-between; + } +} +.footer-group:nth-child(1) > *:nth-child(2) .social { + display: flex; + gap: 2rem; +} +.footer-group:nth-child(1) > *:nth-child(2) > *:nth-child(2) { + margin-top: 3.5rem; +} +@media (max-width: 710px) { + .footer-group:nth-child(1) > *:nth-child(2) > *:nth-child(2) { + flex-direction: row; + margin-top: 0; + justify-content: space-between; + } +} +.footer-group:nth-child(2) { + display: flex; + flex-wrap: wrap; + gap: 13.5rem; +} +@media (max-width: 456px) { + .footer-group:nth-child(2) { + flex-direction: column; + margin-inline: auto; + justify-content: flex-start; + align-items: flex-start; + } +} +.footer-group:nth-child(2) h6 { + font-size: 1.125rem; + font-weight: bold; +} +.footer-group:nth-child(2) li { + color: #f1f3f9; + font-size: 0.875rem; +} +.footer-group:nth-child(2) li + li { + margin-top: 1rem; +} + +.hero { + margin-top: 7.5rem; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + gap: 1rem; +} +@media (max-width: 1199.98px) { + .hero { + justify-content: center; + flex-direction: column; + align-items: center; + } +} +.hero--search { + width: min(100%, 38.669375rem); + display: flex; + justify-content: space-between; +} +.hero--search > *:nth-child(1) { + flex: 2 1 0; + width: 100%; + padding-inline: 1rem; + border: 1px solid #a3a3a3; + border-radius: 0.5rem 0 0 0.5rem; + border-right: 0; +} +.hero--search > *:nth-child(1):focus-within { + outline: 1px solid #d94fae; +} +.hero--search > *:nth-child(2) { + border-radius: 0 0.5rem 0.5rem 0; + flex: 1 1 0; + width: min(100%, 14.375rem); + text-align: center; +} +.hero--title { + font-size: 3.4375rem; + font-weight: 400; + color: #434343; + line-height: 140%; +} +@media (max-width: 900px) { + .hero--title { + text-align: center; + } +} +.hero--title span { + font-weight: bold; + color: #a02279; +} +.hero--msg { + font-size: 1.5rem; + color: #434343; +} +.hero .container--wrapper:nth-child(1) { + margin-top: 1.75rem; + width: min(100%, 39.75rem); +} +.hero .container--wrapper:nth-child(1) > * + * { + margin-top: 3rem; +} +.hero .container--wrapper:nth-child(2) { + width: min(100%, 29.75rem); +} + +.brands { + background-color: #a02279; + margin-top: 3.875rem; + padding-block: 0.625rem; +} +.brands--wrapper { + display: flex; + justify-content: space-between; + align-items: center; +} +@media (max-width: 630px) { + .brands--wrapper { + font-size: 0.5rem; + } +} + +.meta-section { + color: #ffffff; + background-color: #a02279; + padding-block: 6.25rem; +} +.meta-section .meta-wrapper { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + align-content: center; +} +@media (max-width: 1179px) { + .meta-section .meta-wrapper { + flex-direction: column; + align-items: center; + } + .meta-section .meta-wrapper h2 { + margin-inline: auto; + text-align: center; + } + .meta-section .meta-wrapper .info { + display: flex; + flex-flow: column wrap; + align-items: center; + } + .meta-section .meta-wrapper p { + width: min(100%, 50ch) !important; + text-align: center; + margin-inline: auto; + } +} +.meta-section .meta-wrapper h2 { + font-size: 3rem; + margin-top: 5.625rem; +} +.meta-section .meta-wrapper p { + font-size: 1.125rem; + width: 40ch; + line-height: 2; + margin-top: 2.1875rem; +} +.meta-section .meta-wrapper > *:nth-child(2) { + width: min(100%, 44rem); +} +@media (max-width: 1172px) { + .meta-section .meta-wrapper > *:nth-child(2) { + margin-top: 4rem; + } +} +.meta-section .meta-wrapper > *:nth-child(1) > * + * { + all: unset; + margin-top: 3.5rem; + color: #a02279; + background-color: #ffffff; + padding: 0.875rem 2.125rem; + border-radius: 0.5rem; + cursor: pointer; +} +.meta-section .meta-wrapper > *:nth-child(1) > * + *:active { + background-color: #e6e6e6; +} + +.inspiration { + padding-block: 2.625rem; +} +.inspiration h2 { + text-align: center; + font-size: 3rem; +} +.inspiration ul { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(18.25rem, 1fr)); + gap: 1rem; + place-items: center; +} + +.nft-page { + margin-bottom: 5.625rem; +} +.nft-page .nav-list { + display: flex; + justify-content: space-between; + width: min(100%, 57.5625rem); +} +@media (max-width: 1120px) { + .nft-page .nav-list { + display: none; + } +} +.nft-page .top { + display: flex; + justify-content: space-between; + margin-top: 7.5rem; + align-items: center; +} +.nft-page .top .location { + display: flex; + justify-content: space-between; + align-items: center; + width: min(100%, 10.0625rem); + cursor: pointer; + border: 1px solid #d7d7d7; + border-radius: 0.5rem; + padding: 0.875rem; +} +.nft-page .top .location-list { + display: none; + background-color: white; + margin-right: 1.5rem; + margin-left: auto; +} +@media (max-width: 1120px) { + .nft-page .top .location-list { + display: inline; + } +} +.nft-page .top .location-list > * { + font-family: "Red Rose"; +} +.nft-page .nft-list { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(18.25rem, 1fr)); + gap: 1rem; + place-items: center; +} + +:root { + font-family: "Red Rose", cursive; + line-height: 24px; + font-weight: 400; + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} + +body { + background-color: #ffffff; + -ms-overflow-style: none; + scrollbar-width: none; +} +body::-webkit-scrollbar { + display: none; +} +body::-moz-selection { + background-color: #a02279 !important; + color: white !important; +} +body::selection { + background-color: #a02279 !important; + color: white !important; +} + +@media (max-width: 991.98px) { + :root { + font-size: 14px; + } +} +@media (max-width: 767.98px) { + :root { + font-size: 12px; + } +} +@media (max-width: 367.98px) { :root { - color: #213547; - background-color: #ffffff; + font-size: 8px; } - a:hover { - color: #747bff; +} +@media (max-width: 160.98px) { + :root { + font-size: 4px; } - button { - background-color: #f9f9f9; +} +@media (max-width: 100.98px) { + :root { + font-size: 2px; } } + +/*# sourceMappingURL=index.css.map */ diff --git a/src/index.css.map b/src/index.css.map new file mode 100644 index 0000000..7096180 --- /dev/null +++ b/src/index.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["styles/_utilities.scss","styles/_reset.scss","styles/component/_button.scss","styles/component/_modal.scss","styles/component/_nftcard.scss","styles/layout/_nav.scss","styles/layout/_container.scss","styles/layout/_footer.scss","styles/pages/_home.scss","styles/pages/_nftPage.scss","styles/style.scss"],"names":[],"mappings":"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","file":"index.css"} \ No newline at end of file diff --git a/src/styles/_media.scss b/src/styles/_media.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss new file mode 100644 index 0000000..e27c782 --- /dev/null +++ b/src/styles/_reset.scss @@ -0,0 +1,78 @@ +/* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Remove default margin */ +body, +h1, +h2, +h3, +h4, +p, +figure, +blockquote, +dl, +dd { + margin: 0; +} + +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul, +ol { + list-style: none; + padding: 0; +} + +/* Set core root defaults */ +html:focus-within { + scroll-behavior: smooth; +} + +/* Set core body defaults */ +body { + min-height: 100vh; + text-rendering: optimizeSpeed; + line-height: 1.5; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; +} +a { + text-decoration: none; +} + +/* Make images easier to work with */ +img, +picture { + max-width: 100%; + display: block; +} + +/* Inherit fonts for inputs and buttons */ +input, +button, +textarea, +select { + font: inherit; +} + +/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ +@media (prefers-reduced-motion: reduce) { + html:focus-within { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss new file mode 100644 index 0000000..70a5109 --- /dev/null +++ b/src/styles/_utilities.scss @@ -0,0 +1,29 @@ +@import url("https://fonts.googleapis.com/css2?family=Red+Rose:wght@300;400;500;600;700&display=swap"); + +// Convert Pixel to Rem/Em +@function pix-rem($pixel, $suffix: rem) { + $calculate: calc($pixel/16px); + @return #{$calculate}#{$suffix}; +} +//Mixin + +// Variable: colors and font +$font: ( + "fontFamily": "Red Rose", +); + +$colors: ( + "major": #a02279, + "black": #000000, + "white": #ffffff, + "text-black": #434343, + "grey": #d7d7d7, + "very-light-grey": #F8F9FA, + "light-grey": #CFD8DC +); + +@mixin media-query($size) { + @media (max-width: $size) { + @content; + } +} diff --git a/src/styles/component/_all-components.scss b/src/styles/component/_all-components.scss new file mode 100644 index 0000000..3545610 --- /dev/null +++ b/src/styles/component/_all-components.scss @@ -0,0 +1,3 @@ +@forward './button'; +@forward './modal'; +@forward './nftcard'; \ No newline at end of file diff --git a/src/styles/component/_button.scss b/src/styles/component/_button.scss new file mode 100644 index 0000000..4475a55 --- /dev/null +++ b/src/styles/component/_button.scss @@ -0,0 +1,17 @@ +@use '../utilities' as *; + +.btn { + all: unset; + background-color: map-get($colors, 'major'); + color: map-get($colors, 'white'); + padding: pix-rem(14px) pix-rem(26px); + border-radius: pix-rem(10px, rem); + cursor: pointer; + &:active{ + background-color: darken( map-get($colors, 'major'), $amount: 10); + } + &:hover{ + transition: background-color .2s ease-in-out; + background-color: lighten( map-get($colors, 'major'), $amount: 10); + } +} \ No newline at end of file diff --git a/src/styles/component/_modal.scss b/src/styles/component/_modal.scss new file mode 100644 index 0000000..c32b426 --- /dev/null +++ b/src/styles/component/_modal.scss @@ -0,0 +1,70 @@ +@use "../utilities" as *; + +.modal { + background-color: map-get($colors, "very-light-grey"); + width: min(100%, pix-rem(600px)); + border: 0; + border-radius: pix-rem(16px); + padding: 0; + + &__body { + padding: pix-rem(32px); + & > * + * { + margin-top: pix-rem(16px); + } + } + + &__header { + display: flex; + justify-content: space-between; + align-items: center; + padding-inline: pix-rem(32px); + padding-block: pix-rem(24px); + border-bottom: pix-rem(2px) solid map-get($colors, "light-grey"); + + .close { + font-size: pix-rem(24px); + cursor: pointer; + aspect-ratio: 1/1; + width: min(100%, pix-rem(24px)); + display: grid; + place-items: center; + &:hover { + animation: rotate 0.4s ease-out; + } + } + } +} + +.link-btn { + width: min(100%, pix-rem(536px)); + margin-inline: auto; + padding: pix-rem(12px) pix-rem(20px); + border: pix-rem(2px) solid map-get($colors, "light-grey"); + border-radius: pix-rem(12px); + background-color: map-get($colors, "very-light-grey"); + display: flex; + justify-content: space-between; + align-items: center; + &:hover { + background-color: darken(map-get($colors, "very-light-grey"), 5); + cursor: pointer; + } + + p { + font-weight: 600; + font-size: pix-rem(18px); + } + + .link-title { + display: flex; + align-items: center; + gap: pix-rem(16px); + } +} + +@keyframes rotate { + to { + rotate: 180deg; + } +} diff --git a/src/styles/component/_nftcard.scss b/src/styles/component/_nftcard.scss new file mode 100644 index 0000000..c86840e --- /dev/null +++ b/src/styles/component/_nftcard.scss @@ -0,0 +1,54 @@ +@use "../utilities" as *; + +.NFT { + width: min(100%, pix-rem(292px)); + border: 1px solid map-get($colors, "grey"); + border-radius: pix-rem(14px); + padding: pix-rem(16px); + &__card { + background-color: map-get($colors, "white"); + .img--container { + position: relative; + & > *:nth-child(1) { + position: absolute; + top: pix-rem(8px); + right: pix-rem(8px); + font-size: pix-rem(24px); + } + } + .title { + margin-top: pix-rem(16px); + display: flex; + justify-content: space-between; + font-size: pix-rem(12.5px); + & > *:nth-child(2) { + font-weight: bold; + } + } + .da { + margin-top: pix-rem(10px); + display: flex; + justify-content: space-between; + font-size: pix-rem(12.5px); + } + + .rating { + margin-top: pix-rem(10px); + display: flex; + gap: pix-rem(8px); + } + } +} + +.heart { + fill: #d7d7d7; + cursor: pointer; + &:hover{ + fill: white; + transition: fill .2s ease-in-out; + } + &--checked { + fill: lighten(map-get($colors, "major"), $amount: 30); + cursor: pointer; + } +} diff --git a/src/styles/layout/_allLayout.scss b/src/styles/layout/_allLayout.scss new file mode 100644 index 0000000..068d2aa --- /dev/null +++ b/src/styles/layout/_allLayout.scss @@ -0,0 +1,3 @@ +@forward './nav'; +@forward './container'; +@forward './footer'; \ No newline at end of file diff --git a/src/styles/layout/_container.scss b/src/styles/layout/_container.scss new file mode 100644 index 0000000..9a8a18a --- /dev/null +++ b/src/styles/layout/_container.scss @@ -0,0 +1,13 @@ +@use "../utilities" as *; + +$container: ( + "global": 1256px, +); + +.container { + &--global { + width: min(100%, pix-rem(map-get($container, "global"),rem) ); + margin-inline: auto; + padding-inline: pix-rem(16px); + } +} diff --git a/src/styles/layout/_footer.scss b/src/styles/layout/_footer.scss new file mode 100644 index 0000000..7a52054 --- /dev/null +++ b/src/styles/layout/_footer.scss @@ -0,0 +1,83 @@ +@use "../utilities" as *; + +.footer { + color: map-get($colors, "white"); + background-color: map-get($colors, "black"); + padding-block: pix-rem(58px); + // margin-top: pix-rem(92px); + + &--wrapper { + display: flex; + gap: pix-rem(186px); + align-items: first baseline; + flex-wrap: wrap-reverse; + } + + &-group:nth-child(1) { + display: flex; + flex-direction: column; + @include media-query(710px) { + flex-direction: row; + align-items: center; + justify-content: space-between; + width: 100%; + .lower { + display: flex; + gap: pix-rem(20px); + align-items: center; + } + } + @include media-query(510px) { + flex-direction: column; + .lower { + padding-block: pix-rem(30px); + } + } + + & > * { + &:nth-child(2) { + @include media-query(710px) { + flex-direction: row; + margin-top: 0; + justify-content: space-between; + } + margin-top: pix-rem(96px); + .social { + display: flex; + gap: pix-rem(32px); + } + & > *:nth-child(2) { + margin-top: pix-rem(56px); + @include media-query(710px) { + flex-direction: row; + margin-top: 0; + justify-content: space-between; + } + } + } + } + } + &-group:nth-child(2) { + display: flex; + flex-wrap: wrap; + gap: pix-rem(216px); + + @include media-query(456px){ + flex-direction: column; + margin-inline: auto; + justify-content: flex-start; + align-items: flex-start; + } + h6 { + font-size: pix-rem(18px); + font-weight: bold; + } + li { + color: #f1f3f9; + font-size: pix-rem(14px); + } + li + li { + margin-top: pix-rem(16px); + } + } +} diff --git a/src/styles/layout/_nav.scss b/src/styles/layout/_nav.scss new file mode 100644 index 0000000..95e0d23 --- /dev/null +++ b/src/styles/layout/_nav.scss @@ -0,0 +1,86 @@ +@use "../utilities" as *; +.nav { + margin-top: pix-rem(44px); + background-color: map-get($colors, "white"); + &-container { + display: flex; + align-items: center; + justify-content: space-between; + position: relative; + } + &-main { + + display: flex; + justify-content: space-between; + width: 70%; + align-items: center; + + align-items: center; + top: 0; + z-index: 10; + inset-block: 0; + right: 0; + & > svg { + display: none; + } + @include media-query(900px){ + translate: 364px 0; + display: none; + } + } + + &-main.active { + + @include media-query(900px) { + + display: flex; + position: fixed; + flex-direction: column; + background-color: rgb(247, 247, 247); + justify-content: flex-start; + align-items: center; + top: 0; + z-index: 10; + inset-block: 0; + right: 0; + width: 100vw; + padding-top: pix-rem(100px); + translate: 0 0; + transition: translate 0.3s ease-in-out; + & > svg { + display: inline; + position: absolute; + top: pix-rem(24px); + right: pix-rem(24px); + } + .btn { + margin-top: pix-rem(44px, em); + } + } + } + .nav-link__list { + display: flex; + margin-block: 0; + gap: pix-rem(48px); + + @include media-query(900px) { + flex-direction: column; + } + + li { + font-size: pix-rem(20px, rem); + a { + color: map-get($colors, "text-black"); + &:active { + color: map-get($colors, "major"); + } + } + } + } + .mobile { + display: none; + @include media-query(900px) { + display: block; + } + } +} diff --git a/src/styles/pages/_home.scss b/src/styles/pages/_home.scss new file mode 100644 index 0000000..117bbeb --- /dev/null +++ b/src/styles/pages/_home.scss @@ -0,0 +1,165 @@ +@use "../utilities" as *; +.hero { + margin-top: pix-rem(120px, rem); + display: flex; + justify-content: space-between; + flex-wrap: wrap; + gap: pix-rem(16px, rem); + @include media-query(1199.98px) { + justify-content: center; + flex-direction: column; + align-items: center; + } + + &--search { + width: min(100%, pix-rem(618.71px)); + display: flex; + justify-content: space-between; + & > * { + &:nth-child(1) { + flex: 2 1 0; + width: 100%; + padding-inline: pix-rem(16px); + border: 1px solid #a3a3a3; + border-radius: pix-rem(8px) 0 0 pix-rem(8px); + border-right: 0; + &:focus-within { + outline: 1px solid lighten(map-get($colors, "major"), $amount: 20); + } + } + &:nth-child(2) { + border-radius: 0 pix-rem(8px) pix-rem(8px) 0; + flex: 1 1 0; + width: min(100%, pix-rem(230px)); + text-align: center; + } + } + } + + &--title { + font-size: pix-rem(55px, rem); + font-weight: 400; + color: map-get($colors, "text-black"); + line-height: 140%; + @include media-query(900px){ + text-align: center; + } + span { + font-weight: bold; + color: map-get($colors, "major"); + } + } + &--msg { + font-size: pix-rem(24px, rem); + color: map-get($colors, "text-black"); + } + + .container--wrapper { + &:nth-child(1) { + margin-top: pix-rem(28px, rem); + width: min(100%, pix-rem(636px, rem)); + + & > * + * { + margin-top: pix-rem(48px, rem); + } + } + &:nth-child(2) { + width: min(100%, pix-rem(476px, rem)); + } + } +} +.brands { + background-color: map-get($colors, "major"); + margin-top: pix-rem(62px); + padding-block: pix-rem(10px); + &--wrapper { + display: flex; + justify-content: space-between; + align-items: center; + @include media-query(630px){ + font-size: pix-rem(8px); + } + + } +} +.meta-section { + color: map-get($colors, "white"); + background-color: map-get($colors, "major"); + padding-block: pix-rem(100px); + + .meta-wrapper { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + align-content: center; + @include media-query(1179px){ + flex-direction: column; + + align-items: center; + h2{ + margin-inline: auto; + text-align: center; + } + + .info{ + display: flex ; + flex-flow: column wrap; + align-items: center; + } + p{ + width: min(100%, 50ch) !important; + text-align: center; + margin-inline: auto; + } + } + + h2 { + font-size: pix-rem(48px); + margin-top: pix-rem(90px); + } + p { + font-size: pix-rem(18px); + width: 40ch; + line-height: 2; + margin-top: pix-rem(35px); + } + & > * { + &:nth-child(2) { + width: min(100%, pix-rem(704px)); + @include media-query(1172px){ + margin-top: pix-rem(64px); + } + } + &:nth-child(1) { + & > * + * { + all: unset; + margin-top: pix-rem(56px); + color: map-get($colors, 'major' ); + background-color: map-get($colors, 'white'); + padding: pix-rem(14px) pix-rem(34px); + border-radius: pix-rem(8px); + cursor: pointer; + &:active{ + background-color: darken(map-get($colors, 'white'), 10); + } + } + } + } + } +} + +.inspiration{ + padding-block: pix-rem(42px); + h2{ + text-align: center; + font-size: pix-rem(48px); + } + ul{ + display: grid; + grid-template-columns: repeat(auto-fit,minmax(pix-rem(292px), 1fr)); + gap: pix-rem(16px); + place-items: center; + + + } +} diff --git a/src/styles/pages/_nftPage.scss b/src/styles/pages/_nftPage.scss new file mode 100644 index 0000000..4f3e859 --- /dev/null +++ b/src/styles/pages/_nftPage.scss @@ -0,0 +1,48 @@ +@use "../utilities" as *; +.nft-page { + margin-bottom: pix-rem(90px); + .nav-list { + display: flex; + justify-content: space-between; + width: min(100%, pix-rem(921px)); + @include media-query(1120px){ + display: none; + } + } + + .top { + display: flex; + justify-content: space-between; + margin-top: pix-rem(120px); + align-items: center; + + .location { + display: flex; + justify-content: space-between; + align-items: center; + width: min(100%, pix-rem(161px)); + cursor: pointer; + border: 1px solid map-get($colors, "grey"); + border-radius: pix-rem(8px); + padding: pix-rem(14px); + &-list{ + display: none; + @include media-query(1120px){ + display: inline; + } + background-color: white; + margin-right: pix-rem(24px); + margin-left: auto; + &> * { + font-family: map-get($font, 'fontFamily' ); + } + } + } + } + .nft-list { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(pix-rem(292px), 1fr)); + gap: pix-rem(16px); + place-items: center; + } +} diff --git a/src/styles/pages/_pages.scss b/src/styles/pages/_pages.scss new file mode 100644 index 0000000..25b1fdb --- /dev/null +++ b/src/styles/pages/_pages.scss @@ -0,0 +1,2 @@ +@forward './home'; +@forward './nftPage'; \ No newline at end of file diff --git a/src/styles/style.scss b/src/styles/style.scss new file mode 100644 index 0000000..0ee79c2 --- /dev/null +++ b/src/styles/style.scss @@ -0,0 +1,65 @@ +@use "./reset"; +@use "./utilities" as *; + +@use "./component/all-components"; +@use "./layout/allLayout"; +@use "./pages/pages"; +@use "./media"; + +:root { + font-family: map-get($font, "fontFamily"), cursive; + line-height: 24px; + font-weight: 400; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} +body { + background-color: map-get($colors, "white"); + &::-webkit-scrollbar { + display: none; + } + -ms-overflow-style: none; + scrollbar-width: none; + &::-moz-selection { + background-color: map-get($colors, "major") !important; + color: white !important; + } + &::selection { + background-color: map-get($colors, "major") !important; + color: white !important; + } +} + + + +@media (max-width: 991.98px){ + :root{ + font-size:14px + } +} + +@media (max-width: 767.98px){ + :root{ + font-size: 12px; + } +} +@media (max-width: 367.98px){ + :root{ + font-size: 8px; + } +} +@media (max-width: 160.98px){ + :root{ + font-size: 4px; + } +} + +@media (max-width: 100.98px){ + :root{ + font-size: 2px; + } +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index faf6924..ba84238 100644 --- a/yarn.lock +++ b/yarn.lock @@ -336,6 +336,26 @@ ansi-styles@^3.2.1: dependencies: color-convert "^1.9.0" +anymatch@~3.1.2: + version "3.1.2" + resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716" + integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg== + dependencies: + normalize-path "^3.0.0" + picomatch "^2.0.4" + +binary-extensions@^2.0.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d" + integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA== + +braces@~3.0.2: + version "3.0.2" + resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107" + integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A== + dependencies: + fill-range "^7.0.1" + browserslist@^4.21.3: version "4.21.4" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.4.tgz#e7496bbc67b9e39dd0f98565feccdcb0d4ff6987" @@ -360,6 +380,21 @@ chalk@^2.0.0: escape-string-regexp "^1.0.5" supports-color "^5.3.0" +"chokidar@>=3.0.0 <4.0.0": + version "3.5.3" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd" + integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw== + 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" + optionalDependencies: + fsevents "~2.3.2" + color-convert@^1.9.0: version "1.9.3" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" @@ -532,6 +567,13 @@ escape-string-regexp@^1.0.5: resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg== +fill-range@^7.0.1: + version "7.0.1" + resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40" + integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ== + dependencies: + to-regex-range "^5.0.1" + fsevents@~2.3.2: version "2.3.2" resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" @@ -547,6 +589,13 @@ gensync@^1.0.0-beta.2: resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0" integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg== +glob-parent@~5.1.2: + version "5.1.2" + resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4" + integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow== + dependencies: + is-glob "^4.0.1" + globals@^11.1.0: version "11.12.0" resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e" @@ -564,6 +613,18 @@ has@^1.0.3: dependencies: function-bind "^1.1.1" +immutable@^4.0.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.1.0.tgz#f795787f0db780183307b9eb2091fcac1f6fafef" + integrity sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ== + +is-binary-path@~2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09" + integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw== + dependencies: + binary-extensions "^2.0.0" + is-core-module@^2.9.0: version "2.11.0" resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144" @@ -571,6 +632,23 @@ is-core-module@^2.9.0: dependencies: has "^1.0.3" +is-extglob@^2.1.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2" + integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ== + +is-glob@^4.0.1, is-glob@~4.0.1: + version "4.0.3" + resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084" + integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg== + dependencies: + is-extglob "^2.1.1" + +is-number@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b" + integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng== + "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" @@ -615,6 +693,11 @@ node-releases@^2.0.6: resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.6.tgz#8a7088c63a55e493845683ebf3c828d8c51c5503" integrity sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg== +normalize-path@^3.0.0, normalize-path@~3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65" + integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA== + path-parse@^1.0.7: version "1.0.7" resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735" @@ -625,6 +708,11 @@ picocolors@^1.0.0: resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== +picomatch@^2.0.4, picomatch@^2.2.1: + version "2.3.1" + resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" + integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA== + postcss@^8.4.18: version "8.4.19" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.19.tgz#61178e2add236b17351897c8bcc0b4c8ecab56fc" @@ -654,6 +742,13 @@ react@^18.2.0: dependencies: loose-envify "^1.1.0" +readdirp@~3.6.0: + version "3.6.0" + resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7" + integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA== + dependencies: + picomatch "^2.2.1" + resolve@^1.22.1: version "1.22.1" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177" @@ -670,6 +765,15 @@ rollup@^2.79.1: optionalDependencies: fsevents "~2.3.2" +sass@^1.56.1: + version "1.56.1" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.56.1.tgz#94d3910cd468fd075fa87f5bb17437a0b617d8a7" + integrity sha512-VpEyKpyBPCxE7qGDtOcdJ6fFbcpOM+Emu7uZLxVrkX8KVU/Dp5UF7WLvzqRuUhB6mqqQt1xffLoG+AndxTZrCQ== + dependencies: + chokidar ">=3.0.0 <4.0.0" + immutable "^4.0.0" + source-map-js ">=0.6.2 <2.0.0" + scheduler@^0.23.0: version "0.23.0" resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe" @@ -682,7 +786,7 @@ semver@^6.3.0: resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d" integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw== -source-map-js@^1.0.2: +"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== @@ -709,6 +813,13 @@ to-fast-properties@^2.0.0: resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e" integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog== +to-regex-range@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4" + integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ== + dependencies: + is-number "^7.0.0" + update-browserslist-db@^1.0.9: version "1.0.10" resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz#0f54b876545726f17d00cd9a2561e6dade943ff3"