diff --git a/.eslintignore b/.eslintignore index c925c21d56..89f52aaca4 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,2 +1,2 @@ +/backstop_data /dist -/node_modules diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 0000000000..8b5743ecb4 --- /dev/null +++ b/.github/workflows/test.yml-template @@ -0,0 +1,29 @@ +name: Test + +on: + pull_request: + branches: [ master ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [20.x] + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - run: npm install + - run: npm test + - name: Upload HTML report(backstop data) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: backstop_data diff --git a/.gitignore b/.gitignore index 885c5fa6a4..1558091fd7 100644 --- a/.gitignore +++ b/.gitignore @@ -1,15 +1,15 @@ +# IDE .idea .vscode -build -dist + +# Node node_modules -.DS_Store -npm-debug.log* -yarn-debug.log* -yarn-error.log* +# MacOS +.DS_Store -raw_reports -reports -cypress/screenshots -cypress/videos +# Generated files +backstop_data +dist +.cache +.parcel-cache diff --git a/README.md b/README.md index 97d3c9060a..c18cf50331 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,6 @@ In this task, you will learn how to implement a landing page. To do that: - [Nothing](https://www.figma.com/file/DtkQmQ797hk0nI4KfMi2Uq/BOSE-New-Version?type=design&node-id=6802-139&t=L7eKz5YKLN0m5WxR-0) - watch the lesson videos and implement your page blocks similarly to the videos; - **DON'T** try to do it `Pixel Perfect` - implement it the most `simple` way so it looks similar; -- when you finish the first block of your page deploy it and create a Pull Request with a [DEMO LINK](https://.github.io/layout_miami/) +- when you finish the first block of your page deploy it and create a Pull Request with a [DEMO LINK](https://ArkadiuszBalakier.github.io/layout_miami/) - after each next block do the same (add, commit and push the changes, and deploy the updated demo; - check yourself using the [CHECKLIST](https://github.com/mate-academy/layout_miami/blob/master/checklist.md) when finished; diff --git a/dist/assets/Favicon-h6M9vi5t.png b/dist/assets/Favicon-h6M9vi5t.png new file mode 100644 index 0000000000..7861be0499 Binary files /dev/null and b/dist/assets/Favicon-h6M9vi5t.png differ diff --git a/dist/assets/Image-CVnJMALD.jpg b/dist/assets/Image-CVnJMALD.jpg new file mode 100644 index 0000000000..b6769968cd Binary files /dev/null and b/dist/assets/Image-CVnJMALD.jpg differ diff --git a/dist/assets/earphones--1-Cij4RGNY.jpg b/dist/assets/earphones--1-Cij4RGNY.jpg new file mode 100644 index 0000000000..18e585a2cd Binary files /dev/null and b/dist/assets/earphones--1-Cij4RGNY.jpg differ diff --git a/dist/assets/earphones--2-BpyU09fz.jpg b/dist/assets/earphones--2-BpyU09fz.jpg new file mode 100644 index 0000000000..887c566930 Binary files /dev/null and b/dist/assets/earphones--2-BpyU09fz.jpg differ diff --git a/dist/assets/index-BLoneS-8.css b/dist/assets/index-BLoneS-8.css new file mode 100644 index 0000000000..99bd5afffe --- /dev/null +++ b/dist/assets/index-BLoneS-8.css @@ -0,0 +1 @@ +html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}h1{font-weight:700;line-height:100%;font-size:36px}@media (min-width: 744px){h1{font-size:48px}}@media (min-width: 1260px){h1{font-size:56px}}h2{font-size:32px;line-height:100%;letter-spacing:0;font-weight:700}@media (min-width: 744px){h2{font-size:40px}}@media (min-width: 1260px){h2{font-size:48px}}h3{font-weight:700;font-size:18px;line-height:140%;letter-spacing:0}:root{font-family:Manrope,sans-serif;font-size:16px;line-height:140%;font-weight:400;letter-spacing:.15px}html{color:#1b2129;scroll-behavior:smooth}html:has([id=menu]:target){overflow:hidden}*,*:before,*:after{box-sizing:border-box}.tablet-break{display:inline}@media (min-width: 744px){.tablet-break{display:block}}@media (min-width: 1260px){.tablet-break{display:inline}}.desktop-break{display:inline}@media (min-width: 1260px){.desktop-break{display:block}}.title{line-height:100%;letter-spacing:0;vertical-align:middle;color:#fff}.header{background-color:#deb887;background-image:url(/layout_miami/assets/Image-CVnJMALD.jpg);background-repeat:no-repeat;background-size:cover;background-position:center;min-height:100vh;padding:0 20px;margin-bottom:64px}@media (min-width: 744px){.header{padding:0 72px}}@media (min-width: 1260px){.header{padding:0 120px}}.header{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media (min-width: 744px){.header{grid-template-columns:repeat(6,1fr);gap:24px}}@media (min-width: 1260px){.header{grid-template-columns:repeat(12,1fr);gap:24px}}.header{grid-template-rows:1fr 1fr}.header__title{margin-bottom:40px}.header__title-content{grid-area:2/1/3/3;align-self:end}@media (min-width: 744px){.header__title-content{grid-template-rows:1fr 1fr;grid-column:1/4;grid-row:2/-1;align-self:end}}@media (min-width: 1260px){.header__title-content{grid-column:1/7}}.navigation{display:flex;justify-content:space-between;place-items:center;align-self:start;padding-top:24px;grid-area:1/1/2/-1}.navigation__content-wrapper{display:flex;align-items:center;gap:24px}.navigation__call-number{visibility:hidden}.main{padding:0 20px}@media (min-width: 744px){.main{padding:0 76px}}@media (min-width: 1260px){.main{padding:0 120px}}.main h2{margin-bottom:48px}.card{display:flex;flex-direction:column;width:auto}.card__img-container{width:100%;position:relative;padding-top:100%}.card__img{top:0;max-width:100%;height:100%;position:absolute;object-fit:cover;padding-bottom:16px}@media (min-width: 744px){.card__img{padding-bottom:24px}}.card__product-name{padding-bottom:8px}.card__description{padding-bottom:12px}.recommended{justify-content:center;padding-bottom:96px}.recommended__title{grid-column:1/-1;margin:0}.recommended__items{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media (min-width: 744px){.recommended__items{grid-template-columns:repeat(6,1fr);gap:24px}}@media (min-width: 1260px){.recommended__items{grid-template-columns:repeat(12,1fr);gap:24px}}.recommended__item{grid-column:1/-1;justify-self:center;width:100%}@media (min-width: 744px){.recommended__item{grid-column:span 6}}@media (min-width: 1260px){.recommended__item{grid-column:span 4}}.categories__category-name{padding-top:16px;padding-bottom:40px}.categories__cta{padding-top:40px;padding-bottom:96px;display:grid;grid-template-columns:1fr 1fr;gap:20px}@media (min-width: 744px){.categories__cta{grid-template-columns:repeat(6,1fr);gap:24px}}@media (min-width: 1260px){.categories__cta{grid-template-columns:repeat(12,1fr);gap:24px}}.categories__button{grid-column:span 6}.pictures{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media (min-width: 744px){.pictures{grid-template-columns:repeat(6,1fr);gap:24px}}@media (min-width: 1260px){.pictures{grid-template-columns:repeat(12,1fr);gap:24px}}.pictures__img-container{width:100%;position:relative;padding-top:100%;overflow:hidden}@media (min-width: 744px){.pictures__img-container{grid-column:span 3}}@media (min-width: 1260px){.pictures__img-container{grid-column:span 6}}.pictures__img{top:0;max-width:100%;height:100%;position:absolute;object-fit:cover}.pictures__img-container:hover .pictures__img{transform:scale(1.05);transition:transform .3s ease-in-out}.button{font-family:Manrope,sans-serif;font-weight:700;font-style:Bold;font-size:16px;line-height:27px;letter-spacing:0;text-align:center;text-decoration:none;color:#fff;background-color:#f98921;border-radius:8px;padding:15px 0;width:100%;display:inline-block;border:none}.button:hover{cursor:pointer;background-color:#1b2129}.button:active{background-color:#010810}.legacy__img-container{max-width:100%}.legacy__img{height:auto;width:100%;display:block}@media (min-width: 1260px){.legacy__img{object-fit:cover;object-position:center;height:clamp(460px,36.5vw,800px)}}.legacy__content-container{padding:48px 20px}@media (min-width: 744px){.legacy__content-container{padding:120px 76px;display:grid;grid-template-columns:1fr 1fr;gap:20px}}@media (min-width: 744px) and (min-width: 744px){.legacy__content-container{grid-template-columns:repeat(6,1fr);gap:24px}}@media (min-width: 744px) and (min-width: 1260px){.legacy__content-container{grid-template-columns:repeat(12,1fr);gap:24px}}@media (min-width: 1260px){.legacy__content-container{padding:120px}}.legacy__content-container{background-color:#fcfaef}.legacy__title{grid-column:1/4}@media (min-width: 744px){.legacy__title{grid-column:1/span 3}}@media (min-width: 1260px){.legacy__title{grid-column:1/span 6}}.legacy__content{padding-top:24px;line-height:140%;letter-spacing:.15px;grid-column:4/-1}@media (min-width: 744px){.legacy__content{grid-column:auto/span 3;padding-top:0}}@media (min-width: 1260px){.legacy__content{grid-column:8/-1;padding-top:0}}.contact-us{padding:64px 20px;display:grid;grid-template-columns:1fr 1fr;gap:20px}@media (min-width: 744px){.contact-us{grid-template-columns:repeat(6,1fr);gap:24px}}@media (min-width: 1260px){.contact-us{grid-template-columns:repeat(12,1fr);gap:24px}}@media (min-width: 744px){.contact-us{padding:120px 76px}}@media (min-width: 1260px){.contact-us{padding:120px}}.contact-us__address-info{font-style:normal}@media (min-width: 1260px){.contact-us__address-info{grid-column:8/-1}}.contact-us__form{grid-column:1/-1}@media (min-width: 1260px){.contact-us__form{grid-column:1/span 6}}.contact-us__title{margin-bottom:48px;grid-column:1/-1}.contact-us__info-group{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.contact-us__info-label{color:#7e7e83;font-size:14px}.contact-us__info-value{text-decoration:none;color:#1b2129}.contact-us__info-value:hover{color:#f98921}.contact-us__address{line-height:140%;text-decoration:none;color:inherit;display:block}.contact-us__address:hover{color:#f98921}.contact-form{margin-bottom:48px;color:#7e7e83;position:relative}.contact-form__input,.contact-form__textarea{width:100%;background-color:#f9f9f9;border-radius:8px;border:1px solid transparent;padding:14px 16px;font-size:14px}.contact-form__input{margin-bottom:16px}.contact-form__input::placeholder{font-family:Manrope,sans-serif;font-weight:400;font-size:14px;line-height:140%;letter-spacing:.15px;transition:color .2s}.contact-form__input:hover{border:1px solid rgb(219,219,219);box-shadow:none}.contact-form__input:hover::placeholder{color:#1b2129}.contact-form__input:focus{outline:none;-webkit-tap-highlight-color:transparent;-moz-appearance:none;appearance:none;-webkit-appearance:none;box-shadow:0 0 0 2px #f98921}.contact-form__textarea{margin-bottom:32px;resize:none}.contact-form__textarea:focus{outline:none;-webkit-tap-highlight-color:transparent;-moz-appearance:none;appearance:none;-webkit-appearance:none}.contact-form__label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.contact-form__success-msg{display:none;color:#2e7d32;background:#e8f5e9;padding:10px;margin-top:15px;border-radius:4px;text-align:center}.contact-form__success-msg.is-visible{display:block}.menu{position:fixed;top:0;left:0;right:0;transform:translate(-100%);transition:transform .3s ease-in-out;background-color:#f9f9f9;min-height:100vh;z-index:100;overflow-y:hidden;padding:0 20px}@media (min-width: 744px){.menu{padding:0 76px}}@media (min-width: 1260px){.menu{padding:0 120px}}.menu:target{transform:translate(0)}.menu__nav{padding:28px 0;display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}.menu__img-container{width:100%}.menu__paragraph{font-family:Manrope,sans-serif;font-weight:700;font-size:16px;line-height:140%;letter-spacing:2px;vertical-align:middle;text-transform:uppercase;padding-bottom:16px}.menu__call-link{display:inline-block;color:#1b2129;font-family:Manrope,sans-serif;font-weight:700;font-size:16px;line-height:140%;letter-spacing:2px;vertical-align:middle;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgb(27,33,41);padding-bottom:4px}:has(.menu__call-link:hover) .menu__paragraph{color:#f98921}.links{padding-bottom:48px}.links__item{padding-bottom:32px}.links__link{font-family:Manrope,sans-serif;font-weight:700;font-size:22px;line-height:22px;letter-spacing:0;vertical-align:middle;text-decoration:none;display:inline-block;border:1px solid transparent;color:#1b2129}.links__link:hover{border-bottom:1px solid rgb(27,33,41)}.burger:before{content:"";display:inline-block;width:24px;height:24px;background-image:url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_6817_384)'%3e%3cpath%20d='M3%2017C3%2017.5523%203.44772%2018%204%2018H20C20.5523%2018%2021%2017.5523%2021%2017C21%2016.4477%2020.5523%2016%2020%2016H4C3.44772%2016%203%2016.4477%203%2017ZM3%2012C3%2012.5523%203.44772%2013%204%2013H20C20.5523%2013%2021%2012.5523%2021%2012C21%2011.4477%2020.5523%2011%2020%2011H4C3.44772%2011%203%2011.4477%203%2012ZM4%206C3.44772%206%203%206.44772%203%207C3%207.55228%203.44772%208%204%208H20C20.5523%208%2021%207.55228%2021%207C21%206.44772%2020.5523%206%2020%206H4Z'%20fill='%23292929'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_6817_384'%3e%3crect%20width='24'%20height='24'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");background-size:cover}.burger:after{display:none;content:"";width:24px;height:24px;background-image:url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_6817_385)'%3e%3cpath%20d='M3%2017C3%2017.5523%203.44772%2018%204%2018H11C11.5523%2018%2012%2017.5523%2012%2017C12%2016.4477%2011.5523%2016%2011%2016H4C3.44772%2016%203%2016.4477%203%2017ZM3%2012C3%2012.5523%203.44772%2013%204%2013H20C20.5523%2013%2021%2012.5523%2021%2012C21%2011.4477%2020.5523%2011%2020%2011H4C3.44772%2011%203%2011.4477%203%2012ZM4%206C3.44772%206%203%206.44772%203%207C3%207.55228%203.44772%208%204%208H15C15.5523%208%2016%207.55228%2016%207C16%206.44772%2015.5523%206%2015%206H4Z'%20fill='%23292929'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_6817_385'%3e%3crect%20width='24'%20height='24'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");background-size:cover}.burger:hover:before{display:none}.burger:hover:after{display:inline-block}.burger__label{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.phone{display:flex;align-items:center;text-decoration:none;color:#1b2129}.phone__label{font-family:Inter,sans-serif;font-weight:700;font-size:12px;line-height:16px;letter-spacing:2px;text-align:right;vertical-align:middle;text-transform:uppercase;position:absolute;transform:translate(calc(-100% - 20px));color:inherit;transition:color .3s ease-in-out}.phone:hover{cursor:pointer;color:#f98921}.phone:not(:hover) .phone__label{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px} diff --git a/dist/assets/portable--1-BBBi5Lqc.jpg b/dist/assets/portable--1-BBBi5Lqc.jpg new file mode 100644 index 0000000000..a4ba94f287 Binary files /dev/null and b/dist/assets/portable--1-BBBi5Lqc.jpg differ diff --git a/dist/assets/portable--2-BWw4wgWH.jpg b/dist/assets/portable--2-BWw4wgWH.jpg new file mode 100644 index 0000000000..763ede55f6 Binary files /dev/null and b/dist/assets/portable--2-BWw4wgWH.jpg differ diff --git a/dist/assets/recommended--1-BW3eekNw.jpg b/dist/assets/recommended--1-BW3eekNw.jpg new file mode 100644 index 0000000000..485cfe1aa7 Binary files /dev/null and b/dist/assets/recommended--1-BW3eekNw.jpg differ diff --git a/dist/assets/recommended--2-mfh5lIBI.jpg b/dist/assets/recommended--2-mfh5lIBI.jpg new file mode 100644 index 0000000000..2ab7793e56 Binary files /dev/null and b/dist/assets/recommended--2-mfh5lIBI.jpg differ diff --git a/dist/assets/recommended--3-CmGhaney.jpg b/dist/assets/recommended--3-CmGhaney.jpg new file mode 100644 index 0000000000..08a41c5dd2 Binary files /dev/null and b/dist/assets/recommended--3-CmGhaney.jpg differ diff --git a/dist/assets/smart-home--1-BqNzsOX9.jpg b/dist/assets/smart-home--1-BqNzsOX9.jpg new file mode 100644 index 0000000000..d71161ba0c Binary files /dev/null and b/dist/assets/smart-home--1-BqNzsOX9.jpg differ diff --git a/dist/assets/smart-home--2-CALSQmGj.jpg b/dist/assets/smart-home--2-CALSQmGj.jpg new file mode 100644 index 0000000000..176e371e0a Binary files /dev/null and b/dist/assets/smart-home--2-CALSQmGj.jpg differ diff --git a/dist/assets/vinyl-5DZImJcg.jpg b/dist/assets/vinyl-5DZImJcg.jpg new file mode 100644 index 0000000000..362879c367 Binary files /dev/null and b/dist/assets/vinyl-5DZImJcg.jpg differ diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 0000000000..4223b03cdf --- /dev/null +++ b/dist/index.html @@ -0,0 +1,420 @@ + + + + + + + + + Miami + + + + + + + + + +
+ + +
+

+ Sound. Vision. +
+ It’s your pick. +

+
+
+
+ portable speaker with cylinder shape and brown string +
+
+ portable speaker with cylinder shape and brown string +
+
+

Portable speakers

+
+
+
+
+ earphones with rounded square container +
+
+ earphones with rounded rectangle container +
+
+

Earphones

+
+
+
+
+ rounded, white smarthome speaker +
+
+ cylinder, black smarthome device +
+
+

Smart Home

+
+
+ + Wszystkie kategorie + +
+
+
+ +
+
+ Elegant, retro-inspired record player blending classic design with modern audio technology. +
+
+

+ Timeless, for + + 50 + + years and + + counting +

+

+ Bang & Olufsen is expanding its Recreated Classics Program with the + launch of Beosystems – a limited edition music system that transcends + time by bridging the gap between one of our iconic designs from 1972 + and today’s cutting-edge digital technology. +

+
+
+ +
+

Contact us

+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +

Message sent successfully!

+
+
+
+ Phone + + +1 234 5555-55-55 + +
+
+ Email + + hello@bang&olufsen.com + +
+
+ Address + + 400 first ave. +
+ suite 700 +
+ Minneapolis, MN 55401 + +
+
+
+ + diff --git a/index.html b/index.html index 06bcd7773a..5628ec52aa 100644 --- a/index.html +++ b/index.html @@ -6,17 +6,435 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> + + + Miami + -

Miami

+ + + + +
+ + +
+

+ Sound. Vision. +
+ It’s your pick. +

+
+
+
+ portable speaker with cylinder shape and brown string +
+
+ portable speaker with cylinder shape and brown string +
+
+

Portable speakers

+
+
+
+
+ earphones with rounded square container +
+
+ earphones with rounded rectangle container +
+
+

Earphones

+
+
+
+
+ rounded, white smarthome speaker +
+
+ cylinder, black smarthome device +
+
+

Smart Home

+
+
+ + Wszystkie kategorie + +
+
+
+ +
+
+ Elegant, retro-inspired record player blending classic design with modern audio technology. +
+
+

+ Timeless, for + + 50 + + years and + + counting +

+

+ Bang & Olufsen is expanding its Recreated Classics Program with the + launch of Beosystems – a limited edition music system that transcends + time by bridging the gap between one of our iconic designs from 1972 + and today’s cutting-edge digital technology. +

+
+
+ +
+

Contact us

+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +

Message sent successfully!

+
+
+
+ Phone + + +1 234 5555-55-55 + +
+
+ Email + + hello@bang&olufsen.com + +
+
+ Address + + 400 first ave. +
+ suite 700 +
+ Minneapolis, MN 55401 + +
+
+
+ + diff --git a/package-lock.json b/package-lock.json index 5cfe8293fe..18368717ae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,8 +13,9 @@ "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.2", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", + "cross-env": "^10.1.0", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "prettier": "^3.3.2", @@ -64,6 +65,7 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.9.tgz", "integrity": "sha512-5e3FI4Q3M3Pbr21+5xJwCv6ZT6KmGkI0vw3Tozy5ODAQFTIWe37iT8Cr7Ice2Ntb+M3iSKCEWMB1MBgKrW3whg==", "dev": true, + "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.24.7", @@ -617,6 +619,7 @@ "url": "https://opencollective.com/csstools" } ], + "peer": true, "engines": { "node": "^14 || ^16 || >=18" }, @@ -639,6 +642,7 @@ "url": "https://opencollective.com/csstools" } ], + "peer": true, "engines": { "node": "^14 || ^16 || >=18" } @@ -698,6 +702,13 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/@epic-web/invariant": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@epic-web/invariant/-/invariant-1.0.0.tgz", + "integrity": "sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA==", + "dev": true, + "license": "MIT" + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.25.10", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.10.tgz", @@ -1572,9 +1583,9 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.2.tgz", - "integrity": "sha512-gUXFdqqOfYzF9R3RSx2pCa5GLdOkxB9bFbF+dpUpzucdgGAANqOGdqpmNnMj+e3xA9YHraUWq3xo9cwe5vD9pQ==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz", + "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==", "dev": true, "license": "MIT", "dependencies": { @@ -1636,22 +1647,19 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", - "dev": true, - "peer": true + "dev": true }, "node_modules/@mate-academy/stylelint-config/node_modules/balanced-match": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz", "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==", - "dev": true, - "peer": true + "dev": true }, "node_modules/@mate-academy/stylelint-config/node_modules/camelcase": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz", "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==", "dev": true, - "peer": true, "engines": { "node": ">=10" }, @@ -1664,7 +1672,6 @@ "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-7.0.2.tgz", "integrity": "sha512-Rjs1H+A9R+Ig+4E/9oyB66UC5Mj9Xq3N//vcLf2WzgdTi/3gUu3Z9KoqmlrEG4VuuLK8wJHofxzdQXz/knhiYg==", "dev": true, - "peer": true, "dependencies": { "camelcase": "^6.3.0", "map-obj": "^4.1.0", @@ -1683,7 +1690,6 @@ "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz", "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==", "dev": true, - "peer": true, "dependencies": { "import-fresh": "^3.3.0", "js-yaml": "^4.1.0", @@ -1710,7 +1716,6 @@ "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-5.0.1.tgz", "integrity": "sha512-VfxadyCECXgQlkoEAjeghAr5gY3Hf+IKjKb+X8tGVDtveCjN+USwprd2q3QXBR9T1+x2DG0XZF5/w+7HAtSaXA==", "dev": true, - "peer": true, "engines": { "node": ">=10" }, @@ -1723,7 +1728,6 @@ "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-7.0.2.tgz", "integrity": "sha512-TfW7/1iI4Cy7Y8L6iqNdZQVvdXn0f8B4QcIXmkIbtTIe/Okm/nSlHb4IwGzRVOd3WfSieCgvf5cMzEfySAIl0g==", "dev": true, - "peer": true, "dependencies": { "flat-cache": "^3.2.0" }, @@ -1736,7 +1740,6 @@ "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==", "dev": true, - "peer": true, "dependencies": { "locate-path": "^6.0.0", "path-exists": "^4.0.0" @@ -1753,7 +1756,6 @@ "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz", "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==", "dev": true, - "peer": true, "dependencies": { "flatted": "^3.2.9", "keyv": "^4.5.3", @@ -1768,7 +1770,6 @@ "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-5.0.0.tgz", "integrity": "sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==", "dev": true, - "peer": true, "engines": { "node": ">=12" }, @@ -1781,7 +1782,6 @@ "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", "dev": true, - "peer": true, "dependencies": { "argparse": "^2.0.1" }, @@ -1800,7 +1800,6 @@ "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", "dev": true, - "peer": true, "dependencies": { "p-locate": "^5.0.0" }, @@ -1816,7 +1815,6 @@ "resolved": "https://registry.npmjs.org/meow/-/meow-10.1.5.tgz", "integrity": "sha512-/d+PQ4GKmGvM9Bee/DPa8z3mXs/pkvJE2KEThngVNOqtmljC6K7NMPxtc2JeZYTmpWb9k/TmxjeL18ez3h7vCw==", "dev": true, - "peer": true, "dependencies": { "@types/minimist": "^1.2.2", "camelcase-keys": "^7.0.0", @@ -1843,7 +1841,6 @@ "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", "dev": true, - "peer": true, "dependencies": { "p-limit": "^3.0.2" }, @@ -1859,7 +1856,6 @@ "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz", "integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==", "dev": true, - "peer": true, "engines": { "node": ">=12.0" }, @@ -1876,7 +1872,6 @@ "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz", "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==", "dev": true, - "peer": true, "engines": { "node": ">=10" }, @@ -1889,7 +1884,6 @@ "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-6.0.0.tgz", "integrity": "sha512-X1Fu3dPuk/8ZLsMhEj5f4wFAF0DWoK7qhGJvgaijocXxBmSToKfbFtqbxMO7bVjNA1dmE5huAzjXj/ey86iw9Q==", "dev": true, - "peer": true, "dependencies": { "@types/normalize-package-data": "^2.4.0", "normalize-package-data": "^3.0.2", @@ -1908,7 +1902,6 @@ "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-8.0.0.tgz", "integrity": "sha512-snVCqPczksT0HS2EC+SxUndvSzn6LRCwpfSvLrIfR5BKDQQZMaI6jPRC9dYvYFDRAuFEAnkwww8kBBNE/3VvzQ==", "dev": true, - "peer": true, "dependencies": { "find-up": "^5.0.0", "read-pkg": "^6.0.0", @@ -1926,7 +1919,6 @@ "resolved": "https://registry.npmjs.org/redent/-/redent-4.0.0.tgz", "integrity": "sha512-tYkDkVVtYkSVhuQ4zBgfvciymHaeuel+zFKXShfDnFP5SyVEP7qo70Rf1jTOTCx3vGNAbnEi/xFkcfQVMIBWag==", "dev": true, - "peer": true, "dependencies": { "indent-string": "^5.0.0", "strip-indent": "^4.0.0" @@ -1943,7 +1935,6 @@ "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", "dev": true, - "peer": true, "engines": { "node": ">=14" }, @@ -1956,7 +1947,6 @@ "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-4.0.0.tgz", "integrity": "sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==", "dev": true, - "peer": true, "dependencies": { "min-indent": "^1.0.1" }, @@ -2113,7 +2103,6 @@ "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-4.1.1.tgz", "integrity": "sha512-jRKj0n0jXWo6kh62nA5TEh3+4igKDXLvzBJcPpiizP7oOolUrYIxmVBG9TOtHYFHoddUk6YvAkGeGoSVTXfQXQ==", "dev": true, - "peer": true, "engines": { "node": ">=12" }, @@ -2126,7 +2115,6 @@ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz", "integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==", "dev": true, - "peer": true, "engines": { "node": ">=10" }, @@ -2139,7 +2127,6 @@ "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz", "integrity": "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==", "dev": true, - "peer": true, "dependencies": { "imurmurhash": "^0.1.4", "signal-exit": "^4.0.1" @@ -2189,7 +2176,6 @@ "integrity": "sha512-P4YJBPdPSpWTQ1NU4XYdvHvXJJDxM6YwpS0FZHRgP7YFkdVxsWcpWGy/NVqlAA7PcPCnMacXlRm1y2PFZRWL/w==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">= 20" } @@ -2220,7 +2206,6 @@ "integrity": "sha512-hoYicJZaqISMAI3JfaDr1qMNi48OctWuOih1m80bkYow/ayPw6Jj52tqWJ6GEoFTk1gBqfanSoI1iY99Z5+ekQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@octokit/types": "^14.0.0", "universal-user-agent": "^7.0.2" @@ -2234,8 +2219,7 @@ "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-25.1.0.tgz", "integrity": "sha512-idsIggNXUKkk0+BExUn1dQ92sfysJrje03Q0bv0e+KPLrvyqZF8MnBpFz8UNfYDwB3Ie7Z0TByjWfzxt7vseaA==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@octokit/endpoint/node_modules/@octokit/types": { "version": "14.1.0", @@ -2243,7 +2227,6 @@ "integrity": "sha512-1y6DgTy8Jomcpu33N+p5w58l6xyt55Ar2I91RPiIA0xCJBXyUAhXCcmZaDWSANiha7R9a6qJJ2CRomGPZ6f46g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@octokit/openapi-types": "^25.1.0" } @@ -2254,7 +2237,6 @@ "integrity": "sha512-j1nQNU1ZxNFx2ZtKmL4sMrs4egy5h65OMDmSbVyuCzjOcwsHq6EaYjOTGXPQxgfiN8dJ4CriYHk6zF050WEULg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@octokit/request": "^10.0.2", "@octokit/types": "^14.0.0", @@ -2269,8 +2251,7 @@ "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-25.1.0.tgz", "integrity": "sha512-idsIggNXUKkk0+BExUn1dQ92sfysJrje03Q0bv0e+KPLrvyqZF8MnBpFz8UNfYDwB3Ie7Z0TByjWfzxt7vseaA==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@octokit/graphql/node_modules/@octokit/types": { "version": "14.1.0", @@ -2278,7 +2259,6 @@ "integrity": "sha512-1y6DgTy8Jomcpu33N+p5w58l6xyt55Ar2I91RPiIA0xCJBXyUAhXCcmZaDWSANiha7R9a6qJJ2CRomGPZ6f46g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@octokit/openapi-types": "^25.1.0" } @@ -2288,8 +2268,7 @@ "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-26.0.0.tgz", "integrity": "sha512-7AtcfKtpo77j7Ts73b4OWhOZHTKo/gGY8bB3bNBQz4H+GRSWqx2yvj8TXRsbdTE0eRmYmXOEY66jM7mJ7LzfsA==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@octokit/plugin-paginate-rest": { "version": "2.21.3", @@ -2358,7 +2337,6 @@ "integrity": "sha512-V6jhKokg35vk098iBqp2FBKunk3kMTXlmq+PtbV9Gl3TfskWlebSofU9uunVKhUN7xl+0+i5vt0TGTG8/p/7HA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@octokit/endpoint": "^11.0.0", "@octokit/request-error": "^7.0.0", @@ -2376,7 +2354,6 @@ "integrity": "sha512-KRA7VTGdVyJlh0cP5Tf94hTiYVVqmt2f3I6mnimmaVz4UG3gQV/k4mDJlJv3X67iX6rmN7gSHCF8ssqeMnmhZg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@octokit/types": "^14.0.0" }, @@ -2389,8 +2366,7 @@ "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-25.1.0.tgz", "integrity": "sha512-idsIggNXUKkk0+BExUn1dQ92sfysJrje03Q0bv0e+KPLrvyqZF8MnBpFz8UNfYDwB3Ie7Z0TByjWfzxt7vseaA==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@octokit/request-error/node_modules/@octokit/types": { "version": "14.1.0", @@ -2398,7 +2374,6 @@ "integrity": "sha512-1y6DgTy8Jomcpu33N+p5w58l6xyt55Ar2I91RPiIA0xCJBXyUAhXCcmZaDWSANiha7R9a6qJJ2CRomGPZ6f46g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@octokit/openapi-types": "^25.1.0" } @@ -2408,8 +2383,7 @@ "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-25.1.0.tgz", "integrity": "sha512-idsIggNXUKkk0+BExUn1dQ92sfysJrje03Q0bv0e+KPLrvyqZF8MnBpFz8UNfYDwB3Ie7Z0TByjWfzxt7vseaA==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@octokit/request/node_modules/@octokit/types": { "version": "14.1.0", @@ -2417,7 +2391,6 @@ "integrity": "sha512-1y6DgTy8Jomcpu33N+p5w58l6xyt55Ar2I91RPiIA0xCJBXyUAhXCcmZaDWSANiha7R9a6qJJ2CRomGPZ6f46g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@octokit/openapi-types": "^25.1.0" } @@ -2622,7 +2595,6 @@ "integrity": "sha512-8o6yDfmoGJUIeR9OfYU0/TUJTnMPG2r68+1yEdUeG2Fdqpj8Qetg0ziKIgcBm0RW/j29H41WP37CYCEhp6GoHQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@octokit/openapi-types": "^26.0.0" } @@ -3781,8 +3753,7 @@ "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-4.0.0.tgz", "integrity": "sha512-q6tR3RPqIB1pMiTRMFcZwuG5T8vwp+vUvEG0vuI6B+Rikh5BfPp2fQ82c925FOs+b0lcFQ8CFrL+KbilfZFhOQ==", "dev": true, - "license": "Apache-2.0", - "peer": true + "license": "Apache-2.0" }, "node_modules/bl": { "version": "4.1.0", @@ -3836,6 +3807,7 @@ "url": "https://github.com/sponsors/ai" } ], + "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001640", "electron-to-chromium": "^1.4.820", @@ -4204,6 +4176,24 @@ "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } }, + "node_modules/cross-env": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-10.1.0.tgz", + "integrity": "sha512-GsYosgnACZTADcmEyJctkJIoqAhHjttw7RsFrVoJNXbsWWqaq6Ym+7kZjq6mS45O0jij6vtiReppKQEtqWy6Dw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@epic-web/invariant": "^1.0.0", + "cross-spawn": "^7.0.6" + }, + "bin": { + "cross-env": "dist/bin/cross-env.js", + "cross-env-shell": "dist/bin/cross-env-shell.js" + }, + "engines": { + "node": ">=20" + } + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -4810,8 +4800,7 @@ "url": "https://opencollective.com/fastify" } ], - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/fast-deep-equal": { "version": "3.1.3", @@ -5391,7 +5380,6 @@ "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-4.0.0.tgz", "integrity": "sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==", "dev": true, - "peer": true, "engines": { "node": ">=8" } @@ -7248,6 +7236,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -7326,6 +7315,7 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz", "integrity": "sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==", "dev": true, + "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -7704,7 +7694,6 @@ "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", "deprecated": "Rimraf versions prior to v4 are no longer supported", "dev": true, - "peer": true, "dependencies": { "glob": "^7.1.3" }, @@ -7830,6 +7819,7 @@ "integrity": "sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", @@ -8160,8 +8150,7 @@ "version": "0.1.0", "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz", "integrity": "sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==", - "dev": true, - "peer": true + "dev": true }, "node_modules/stylelint": { "version": "16.7.0", @@ -8500,6 +8489,7 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -8648,8 +8638,7 @@ "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-7.0.3.tgz", "integrity": "sha512-TmnEAEAsBJVZM/AADELsK76llnwcf9vMKuPz8JflO1frO8Lchitr0fNaN9d+Ap0BjKtqWqd/J17qeDnXh8CL2A==", "dev": true, - "license": "ISC", - "peer": true + "license": "ISC" }, "node_modules/universalify": { "version": "2.0.1", @@ -8830,6 +8819,7 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -9178,21 +9168,6 @@ "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", "dev": true }, - "node_modules/yaml": { - "version": "2.8.1", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz", - "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==", - "dev": true, - "license": "ISC", - "optional": true, - "peer": true, - "bin": { - "yaml": "bin.mjs" - }, - "engines": { - "node": ">= 14.6" - } - }, "node_modules/yargs": { "version": "17.7.2", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", diff --git a/package.json b/package.json index e1ec547e1a..ec1c2ca491 100644 --- a/package.json +++ b/package.json @@ -23,8 +23,9 @@ "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.2", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", + "cross-env": "^10.1.0", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "prettier": "^3.3.2", diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff deleted file mode 100755 index 8aa07d7310..0000000000 Binary files a/src/fonts/Roboto-Regular-webfont.woff and /dev/null differ diff --git a/src/images/categories/earphones--1.jpg b/src/images/categories/earphones--1.jpg new file mode 100644 index 0000000000..18e585a2cd Binary files /dev/null and b/src/images/categories/earphones--1.jpg differ diff --git a/src/images/categories/earphones--2.jpg b/src/images/categories/earphones--2.jpg new file mode 100644 index 0000000000..887c566930 Binary files /dev/null and b/src/images/categories/earphones--2.jpg differ diff --git a/src/images/categories/portable--1.jpg b/src/images/categories/portable--1.jpg new file mode 100644 index 0000000000..a4ba94f287 Binary files /dev/null and b/src/images/categories/portable--1.jpg differ diff --git a/src/images/categories/portable--2.jpg b/src/images/categories/portable--2.jpg new file mode 100644 index 0000000000..763ede55f6 Binary files /dev/null and b/src/images/categories/portable--2.jpg differ diff --git a/src/images/categories/smart-home--1.jpg b/src/images/categories/smart-home--1.jpg new file mode 100644 index 0000000000..d71161ba0c Binary files /dev/null and b/src/images/categories/smart-home--1.jpg differ diff --git a/src/images/categories/smart-home--2.jpg b/src/images/categories/smart-home--2.jpg new file mode 100644 index 0000000000..176e371e0a Binary files /dev/null and b/src/images/categories/smart-home--2.jpg differ diff --git a/src/images/cross.svg b/src/images/cross.svg deleted file mode 100644 index 08f1f27cea..0000000000 --- a/src/images/cross.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/crown.svg b/src/images/crown.svg deleted file mode 100644 index 962d90e9ca..0000000000 --- a/src/images/crown.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/favicon.png b/src/images/favicon.png deleted file mode 100644 index 0e04c361e1..0000000000 Binary files a/src/images/favicon.png and /dev/null differ diff --git a/src/images/favicon/Favicon.png b/src/images/favicon/Favicon.png new file mode 100644 index 0000000000..7861be0499 Binary files /dev/null and b/src/images/favicon/Favicon.png differ diff --git a/src/images/icons/Icon-Burger-menu-hover.png b/src/images/icons/Icon-Burger-menu-hover.png new file mode 100644 index 0000000000..e428692354 Binary files /dev/null and b/src/images/icons/Icon-Burger-menu-hover.png differ diff --git a/src/images/icons/Icon-Burger-menu-hover.svg b/src/images/icons/Icon-Burger-menu-hover.svg new file mode 100644 index 0000000000..6e12572898 --- /dev/null +++ b/src/images/icons/Icon-Burger-menu-hover.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/Icon-Burger-menu.png b/src/images/icons/Icon-Burger-menu.png new file mode 100644 index 0000000000..596f3d3009 Binary files /dev/null and b/src/images/icons/Icon-Burger-menu.png differ diff --git a/src/images/icons/Icon-Burger-menu.svg b/src/images/icons/Icon-Burger-menu.svg new file mode 100644 index 0000000000..d771acdc82 --- /dev/null +++ b/src/images/icons/Icon-Burger-menu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/Icon-Close.png b/src/images/icons/Icon-Close.png new file mode 100644 index 0000000000..a80045d470 Binary files /dev/null and b/src/images/icons/Icon-Close.png differ diff --git a/src/images/icons/Icon-Phone-call.svg b/src/images/icons/Icon-Phone-call.svg new file mode 100644 index 0000000000..fbf121a8cb --- /dev/null +++ b/src/images/icons/Icon-Phone-call.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/Phone-number.png b/src/images/icons/Phone-number.png new file mode 100644 index 0000000000..614a07fb70 Binary files /dev/null and b/src/images/icons/Phone-number.png differ diff --git a/src/images/icons/brand-name.png b/src/images/icons/brand-name.png new file mode 100644 index 0000000000..c8f842c568 Binary files /dev/null and b/src/images/icons/brand-name.png differ diff --git a/src/images/logo.png b/src/images/logo.png deleted file mode 100644 index 9b6a4dd7d4..0000000000 Binary files a/src/images/logo.png and /dev/null differ diff --git a/src/images/menu.svg b/src/images/menu.svg deleted file mode 100644 index 5d6b5a0b38..0000000000 --- a/src/images/menu.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/menu_hover.svg b/src/images/menu_hover.svg deleted file mode 100644 index 39263b75bc..0000000000 --- a/src/images/menu_hover.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/phone.svg b/src/images/phone.svg deleted file mode 100644 index 0c2c52cb54..0000000000 --- a/src/images/phone.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/photos/1.jpg b/src/images/photos/1.jpg deleted file mode 100644 index f796f55605..0000000000 Binary files a/src/images/photos/1.jpg and /dev/null differ diff --git a/src/images/photos/2.jpg b/src/images/photos/2.jpg deleted file mode 100644 index d9053b6a20..0000000000 Binary files a/src/images/photos/2.jpg and /dev/null differ diff --git a/src/images/photos/3.jpg b/src/images/photos/3.jpg deleted file mode 100644 index 5e40be94d2..0000000000 Binary files a/src/images/photos/3.jpg and /dev/null differ diff --git a/src/images/photos/4.jpg b/src/images/photos/4.jpg deleted file mode 100644 index de64313343..0000000000 Binary files a/src/images/photos/4.jpg and /dev/null differ diff --git a/src/images/photos/5.jpg b/src/images/photos/5.jpg deleted file mode 100644 index aad06bff54..0000000000 Binary files a/src/images/photos/5.jpg and /dev/null differ diff --git a/src/images/photos/6.jpg b/src/images/photos/6.jpg deleted file mode 100644 index 104ff18faa..0000000000 Binary files a/src/images/photos/6.jpg and /dev/null differ diff --git a/src/images/photos/Image.jpg b/src/images/photos/Image.jpg new file mode 100644 index 0000000000..b6769968cd Binary files /dev/null and b/src/images/photos/Image.jpg differ diff --git a/src/images/photos/vinyl.jpg b/src/images/photos/vinyl.jpg new file mode 100644 index 0000000000..362879c367 Binary files /dev/null and b/src/images/photos/vinyl.jpg differ diff --git a/src/images/recommended/recommended--1.jpg b/src/images/recommended/recommended--1.jpg new file mode 100644 index 0000000000..485cfe1aa7 Binary files /dev/null and b/src/images/recommended/recommended--1.jpg differ diff --git a/src/images/recommended/recommended--2.jpg b/src/images/recommended/recommended--2.jpg new file mode 100644 index 0000000000..2ab7793e56 Binary files /dev/null and b/src/images/recommended/recommended--2.jpg differ diff --git a/src/images/recommended/recommended--3.jpg b/src/images/recommended/recommended--3.jpg new file mode 100644 index 0000000000..08a41c5dd2 Binary files /dev/null and b/src/images/recommended/recommended--3.jpg differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c1..a16e47d610 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,15 @@ 'use strict'; +document.addEventListener('DOMContentLoaded', () => { + const form = document.querySelector('.contact-form'); + const successMsg = document.querySelector('.contact-form__success-msg'); + + if (form) { + form.addEventListener('submit', (event) => { + event.preventDefault(); + if (form.checkValidity()) { + successMsg.classList.add('is-visible'); + form.reset(); + } + }); + } +}); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 45cdd54008..0000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e2..907a0638de 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,57 @@ +@use './utils/extends' as *; +@use './utils/vars' as *; +@use './utils/mixins' as *; + +:root { + font-family: Manrope, sans-serif; + font-size: 16px; + line-height: 140%; + font-weight: 400; + letter-spacing: 0.15px; +} + +html { + color: $text-color-primary; + scroll-behavior: smooth; + &:has([id='menu']:target) { + overflow: hidden; + } +} + +*, +*::before, +*::after { + box-sizing: border-box; +} + h1 { @extend %h1; } + +h2 { + @extend %h2; +} + +h3 { + @extend %h3; +} + +.tablet-break { + display: inline; + + @include for-tablets { + display: block; + } + + @include for-desktop { + display: inline; + } +} + +.desktop-break { + display: inline; + + @include for-desktop { + display: block; + } +} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index 3280c3fe10..d5c508d847 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,4 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; +@use './utils/extends'; +@use './utils/mixins'; +@use './utils/reset'; +@use './utils/vars'; diff --git a/src/styles/blocks/burger.scss b/src/styles/blocks/burger.scss new file mode 100644 index 0000000000..eca0858599 --- /dev/null +++ b/src/styles/blocks/burger.scss @@ -0,0 +1,34 @@ +@use '../utils/mixins' as *; + +.burger { + &::before { + content: ''; + display: inline-block; + width: 24px; + height: 24px; + background-image: url(../images/icons/Icon-Burger-menu.svg); + background-size: cover; + } + + &::after { + display: none; + content: ''; + width: 24px; + height: 24px; + background-image: url(../images/icons/Icon-Burger-menu-hover.svg); + background-size: cover; + } + + &:hover { + &::before { + display: none; + } + &::after { + display: inline-block; + } + } + + &__label { + @include visiually-hidden; + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 0000000000..2d6bd8422e --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,28 @@ +@use '../utils/vars' as *; + +.button { + font-family: Manrope, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 16px; + line-height: 27px; + letter-spacing: 0; + text-align: center; + text-decoration: none; + color: white; + background-color: $button-color-primary; + border-radius: 8px; + padding: 15px 0; + width: 100%; + display: inline-block; + border: none; + + &:hover { + cursor: pointer; + background-color: $button-color-secondary; + } + + &:active { + background-color: $button-color-pressed; + } +} diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss new file mode 100644 index 0000000000..d616844fb8 --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,34 @@ +@use '../utils/mixins' as *; + +.card { + display: flex; + flex-direction: column; + width: auto; + + &__img-container { + width: 100%; + position: relative; + padding-top: 100%; + } + + &__img { + top: 0; + max-width: 100%; + height: 100%; + position: absolute; + object-fit: cover; + padding-bottom: 16px; + + @include for-tablets { + padding-bottom: 24px; + } + } + + &__product-name { + padding-bottom: 8px; + } + + &__description { + padding-bottom: 12px; + } +} diff --git a/src/styles/blocks/categories.scss b/src/styles/blocks/categories.scss new file mode 100644 index 0000000000..03a6ceac79 --- /dev/null +++ b/src/styles/blocks/categories.scss @@ -0,0 +1,19 @@ +@use '../utils/mixins' as *; + +.categories { + &__category-name { + padding-top: 16px; + padding-bottom: 40px; + } + + &__cta { + padding-top: 40px; + padding-bottom: 96px; + + @include grid; + } + + &__button { + grid-column: span 6; + } +} diff --git a/src/styles/blocks/contact-form.scss b/src/styles/blocks/contact-form.scss new file mode 100644 index 0000000000..1b05e4ed81 --- /dev/null +++ b/src/styles/blocks/contact-form.scss @@ -0,0 +1,84 @@ +@use '../utils/vars' as *; + +.contact-form { + margin-bottom: 48px; + color: $text-color-secondary; + position: relative; + &__input, + &__textarea { + width: 100%; + background-color: $form-bg-color; + border-radius: 8px; + border: 1px solid transparent; + padding: 14px 16px; + font-size: 14px; + } + + &__input { + margin-bottom: 16px; + + &::placeholder { + font-family: Manrope, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 140%; + letter-spacing: 0.15px; + transition: color 0.2s; + } + + &:hover { + border: 1px solid rgba(219, 219, 219, 1); + box-shadow: none; + } + + &:hover::placeholder { + color: $text-color-primary; + } + + &:focus { + outline: none; + -webkit-tap-highlight-color: transparent; + appearance: none; + -webkit-appearance: none; + box-shadow: 0 0 0 2px $button-color-primary; + } + } + + &__textarea { + margin-bottom: 32px; + resize: none; + + &:focus { + outline: none; + -webkit-tap-highlight-color: transparent; + appearance: none; + -webkit-appearance: none; + } + } + + &__label { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; + } + + &__success-msg { + display: none; + color: #2e7d32; + background: #e8f5e9; + padding: 10px; + margin-top: 15px; + border-radius: 4px; + text-align: center; + + &.is-visible { + display: block; + } + } +} diff --git a/src/styles/blocks/contact-us.scss b/src/styles/blocks/contact-us.scss new file mode 100644 index 0000000000..59fc4310fe --- /dev/null +++ b/src/styles/blocks/contact-us.scss @@ -0,0 +1,69 @@ +@use '../utils/vars' as *; +@use '../utils/mixins' as *; + +.contact-us { + padding: 64px 20px; + + @include grid; + + @include for-tablets { + padding: 120px 76px; + } + + @include for-desktop { + padding: 120px; + } + + &__address-info { + font-style: normal; + + @include for-desktop { + grid-column: 8 /-1; + } + } + + &__form { + grid-column: 1/-1; + + @include for-desktop { + grid-column: 1 / span 6; + } + } + + &__title { + margin-bottom: 48px; + grid-column: 1/-1; + } + + &__info-group { + display: flex; + flex-direction: column; + gap: 8px; + margin-bottom: 24px; + } + + &__info-label { + color: $text-color-secondary; + font-size: 14px; + } + + &__info-value { + text-decoration: none; + color: $text-color-primary; + + &:hover { + color: $button-color-primary; + } + } + + &__address { + line-height: 140%; + text-decoration: none; + color: inherit; + display: block; + + &:hover { + color: $button-color-primary; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..be8eea6511 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,44 @@ +@use '../utils/mixins' as *; +@use '../utils/vars' as *; + +.header { + background-color: burlywood; + background-image: url(../images/photos/Image.jpg); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + min-height: 100vh; + padding: 0 20px; + margin-bottom: 64px; + + @include for-tablets { + padding: 0 72px; + } + + @include for-desktop { + padding: 0 120px; + } + + @include grid; + + grid-template-rows: 1fr 1fr; + &__title { + margin-bottom: 40px; + } + + &__title-content { + grid-area: 2/1/3/3; + align-self: end; + + @include for-tablets { + grid-template-rows: 1fr 1fr; + grid-column: 1/4; + grid-row: 2/-1; + align-self: end; + } + + @include for-desktop { + grid-column: 1/7; + } + } +} diff --git a/src/styles/blocks/legacy.scss b/src/styles/blocks/legacy.scss new file mode 100644 index 0000000000..bea395127b --- /dev/null +++ b/src/styles/blocks/legacy.scss @@ -0,0 +1,65 @@ +@use '../utils/vars' as *; +@use '../utils/mixins' as *; + +.legacy { + &__img-container { + max-width: 100%; + } + + &__img { + height: auto; + width: 100%; + display: block; + + @include for-desktop { + object-fit: cover; + object-position: center; + height: clamp(460px, 36.5vw, 800px); + } + } + + &__content-container { + padding: 48px 20px; + + @include for-tablets { + padding: 120px 76px; + + @include grid; + } + + @include for-desktop { + padding: 120px; + } + + background-color: $bg-color-secondary; + } + + &__title { + grid-column: 1/4; + + @include for-tablets { + grid-column: 1 / span 3; + } + + @include for-desktop { + grid-column: 1 / span 6; + } + } + + &__content { + padding-top: 24px; + line-height: 140%; + letter-spacing: 0.15px; + grid-column: 4/-1; + + @include for-tablets { + grid-column: auto / span 3; + padding-top: 0; + } + + @include for-desktop { + grid-column: 8 / -1; + padding-top: 0; + } + } +} diff --git a/src/styles/blocks/links.scss b/src/styles/blocks/links.scss new file mode 100644 index 0000000000..091ac43637 --- /dev/null +++ b/src/styles/blocks/links.scss @@ -0,0 +1,26 @@ +@use '../utils/vars' as *; + +.links { + padding-bottom: 48px; + + &__item { + padding-bottom: 32px; + } + + &__link { + font-family: Manrope, sans-serif; + font-weight: 700; + font-size: 22px; + line-height: 22px; + letter-spacing: 0; + vertical-align: middle; + text-decoration: none; + display: inline-block; + border: 1px solid transparent; + + color: $button-color-secondary; + &:hover { + border-bottom: 1px solid $button-color-secondary; + } + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 0000000000..a30ca23c49 --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,9 @@ +@use '../utils/mixins' as *; + +.main { + @include padding; + + h2 { + margin-bottom: 48px; + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..6e52f7c510 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,63 @@ +@use '../utils/vars' as *; +@use '../utils/mixins' as *; + +.menu { + position: fixed; + top: 0; + left: 0; + right: 0; + transform: translateX(-100%); + transition: transform 0.3s ease-in-out; + background-color: $form-bg-color; + min-height: 100vh; + z-index: 100; + overflow-y: hidden; + + @include padding; + + &:target { + transform: translateX(0); + } + + &__nav { + padding: 28px 0; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 32px; + } + + &__img-container { + width: 100%; + } + + &__paragraph { + font-family: Manrope, sans-serif; + font-weight: 700; + font-size: 16px; + line-height: 140%; + letter-spacing: 2px; + vertical-align: middle; + text-transform: uppercase; + padding-bottom: 16px; + } + + &__call-link { + display: inline-block; + color: $button-color-secondary; + font-family: Manrope, sans-serif; + font-weight: 700; + font-size: 16px; + line-height: 140%; + letter-spacing: 2px; + vertical-align: middle; + text-transform: uppercase; + text-decoration: none; + border-bottom: 1px solid $button-color-secondary; + padding-bottom: 4px; + } + + :has(&__call-link:hover) &__paragraph { + color: $button-color-primary; + } +} diff --git a/src/styles/blocks/navigation.scss b/src/styles/blocks/navigation.scss new file mode 100644 index 0000000000..6ea405b138 --- /dev/null +++ b/src/styles/blocks/navigation.scss @@ -0,0 +1,19 @@ +.navigation { + display: flex; + justify-content: space-between; + place-items: center; + align-self: start; + padding-top: 24px; + + grid-area: 1 / 1 / 2 / -1; + + &__content-wrapper { + display: flex; + align-items: center; + gap: 24px; + } + + &__call-number { + visibility: hidden; + } +} diff --git a/src/styles/blocks/phone.scss b/src/styles/blocks/phone.scss new file mode 100644 index 0000000000..fc2688f225 --- /dev/null +++ b/src/styles/blocks/phone.scss @@ -0,0 +1,32 @@ +@use '../utils/vars' as *; +@use '../utils/mixins' as *; + +.phone { + display: flex; + align-items: center; + text-decoration: none; + color: $text-color-primary; + &__label { + font-family: Inter, sans-serif; + font-weight: 700; + font-size: 12px; + line-height: 16px; + letter-spacing: 2px; + text-align: right; + vertical-align: middle; + text-transform: uppercase; + position: absolute; + transform: translateX(calc(-100% - 20px)); + color: inherit; + transition: color 0.3s ease-in-out; + } + + &:hover { + cursor: pointer; + color: $button-color-primary; + } + + &:not(:hover) .phone__label { + @include visiually-hidden; + } +} diff --git a/src/styles/blocks/pictures.scss b/src/styles/blocks/pictures.scss new file mode 100644 index 0000000000..dfe43d3ded --- /dev/null +++ b/src/styles/blocks/pictures.scss @@ -0,0 +1,33 @@ +@use '../utils/mixins' as *; + +.pictures { + @include grid; + + &__img-container { + width: 100%; + position: relative; + padding-top: 100%; + overflow: hidden; + + @include for-tablets { + grid-column: span 3; + } + + @include for-desktop { + grid-column: span 6; + } + } + + &__img { + top: 0; + max-width: 100%; + height: 100%; + position: absolute; + object-fit: cover; + } + + &__img-container:hover .pictures__img { + transform: scale(1.05); + transition: transform 0.3s ease-in-out; + } +} diff --git a/src/styles/blocks/recommended.scss b/src/styles/blocks/recommended.scss new file mode 100644 index 0000000000..97051c9ca8 --- /dev/null +++ b/src/styles/blocks/recommended.scss @@ -0,0 +1,32 @@ +@use '../utils/mixins' as *; + +.recommended { + justify-content: center; + padding-bottom: 96px; + + &__title { + grid-column: 1/-1; + margin: 0; + } + + &__items { + @include grid; + } + + &__item { + grid-column: 1/-1; + + justify-self: center; + width: 100%; + + // max-width: 600px; + + @include for-tablets { + grid-column: span 6; + } + + @include for-desktop { + grid-column: span 4; + } + } +} diff --git a/src/styles/blocks/title.scss b/src/styles/blocks/title.scss new file mode 100644 index 0000000000..e7fb6a6f73 --- /dev/null +++ b/src/styles/blocks/title.scss @@ -0,0 +1,8 @@ +@use '../utils/mixins' as *; + +.title { + line-height: 100%; + letter-spacing: 0; + vertical-align: middle; + color: rgba(255, 255, 255, 1); +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..f4151da891 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,19 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@use './utils/reset'; +@use './utils'; +@use './typography'; +@use './blocks/title.scss'; +@use './blocks/header.scss'; +@use './blocks/navigation.scss'; +@use './blocks/main.scss'; +@use './blocks/card.scss'; +@use './blocks/recommended.scss'; +@use './blocks/categories.scss'; +@use './blocks/pictures.scss'; +@use './blocks/button.scss'; +@use './blocks/legacy.scss'; +@use './blocks/contact-us.scss'; +@use './blocks/contact-form.scss'; +@use './blocks/menu.scss'; +@use './blocks/links.scss'; +@use './blocks/burger.scss'; +@use './blocks/phone.scss'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3e..2223d6b962 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,44 @@ +@use './mixins' as *; + %h1 { - font-family: Roboto, sans-serif; - font-weight: 400; + font-weight: 700; + line-height: 100%; + font-size: 36px; + + @include for-tablets { + font-size: 48px; + } + + @include for-desktop { + font-size: 56px; + } +} + +%h2 { + font-size: 32px; + line-height: 100%; + letter-spacing: 0; + font-weight: 700; + + @include for-tablets { + font-size: 40px; + } + + @include for-desktop { + font-size: 48px; + } +} + +%h3 { + font-weight: 700; + font-size: 18px; + line-height: 140%; + letter-spacing: 0; +} + +%h4 { + font-weight: 700; + font-size: 16px; + line-height: 140%; + letter-spacing: 0; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780dc..5d6ceaf99e 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,53 @@ #{$_property}: $_toValue; } } + +@mixin for-desktop { + @media (min-width: 1260px) { + @content; + } +} + +@mixin for-tablets { + @media (min-width: 744px) { + @content; + } +} + +@mixin grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + + @include for-tablets { + grid-template-columns: repeat(6, 1fr); + gap: 24px; + } + + @include for-desktop { + grid-template-columns: repeat(12, 1fr); + gap: 24px; + } +} + +@mixin visiually-hidden { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +@mixin padding { + padding: 0 20px; + + @include for-tablets { + padding: 0 76px; + } + + @include for-desktop { + padding: 0 120px; + } +} diff --git a/src/styles/utils/_reset.scss b/src/styles/utils/_reset.scss new file mode 100644 index 0000000000..2f1a2e9528 --- /dev/null +++ b/src/styles/utils/_reset.scss @@ -0,0 +1,134 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +body { + line-height: 1; +} + +ol, +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote::before, +blockquote::after, +q::before, +q::after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffbb..92fb6f8614 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,7 @@ -$c-gray: #eee; +$bg-color-secondary: rgba(252, 250, 239, 1); +$button-color-primary: rgba(249, 137, 33, 1); +$button-color-secondary: rgba(27, 33, 41, 1); +$button-color-pressed: rgba(1, 8, 16, 1); +$form-bg-color: rgba(249, 249, 249, 1); +$text-color-primary: rgba(27, 33, 41, 1); +$text-color-secondary: rgba(126, 126, 131, 1);