diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 000000000..8b5743ecb --- /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/README.md b/README.md index 3a2fb5928..c9f233166 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ Implement landing page according to [Figma design](https://www.figma.com/file/dY 11. `git push origin develop` - to send you code for PR. 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo. 13. Replace `` with your Github username in the - [DEMO LINK](https://.github.io/layout_creativeBakery/). + [DEMO LINK](https://weuler007.github.io/layout_creativeBakery/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/index.html b/index.html index d339e6856..5961bb65c 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,383 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Title + Creative Bakery + - -

Hello Mate Academy

- + + +
+ + + + + + + +
+ +
+ +
+

+ + We bake your fantasies - croissants, + + + cakes, cookies, and cupcakes. + +

+ +
+

+ Creative + Bakery +

+ + Decorated bakery cookie +
+ + + Learn more + +
+ + +
+
+

What we bake

+

+ We can customize our cookies right for your needs. Just imagine it. +

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

Few words about us

+

+ + Like many design teams, Onfido made the transition from Abstract + + Sketch, + + + to Figma in the last couple of years. One of the common + resistance points + + + internally before making that switch, was Figma's lack of + Git-style branching + + + that Abstract enabled. The design team had come to rely on + branching + + + and had built a lot of our processes around it. + +

+
+ +
+
+
2015
+
Founded in
+
+ +
+
23
+
Stores
+
+ +
+
155
+
Companies
+
+ +
+
10k+
+
Clients
+
+
+
+
+ + + + + diff --git a/package-lock.json b/package-lock.json index d5f989323..b0712f389 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@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", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", @@ -1510,10 +1510,11 @@ "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": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", diff --git a/package.json b/package.json index 2500d08d2..643bf320b 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "creative-bakery", "version": "1.0.0", "description": "Layout Creative Bakery", - "homepage": "layout_creativeBakery", + "homepage": "/layout_creativeBakery/", "scripts": { "init": "mate-scripts init", "start": "mate-scripts start", @@ -23,7 +23,7 @@ "@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", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", diff --git a/src/images/Icon-arrow.png b/src/images/Icon-arrow.png new file mode 100644 index 000000000..d2081b3af Binary files /dev/null and b/src/images/Icon-arrow.png differ diff --git a/src/images/Icon-close.png b/src/images/Icon-close.png new file mode 100644 index 000000000..b17b895a1 Binary files /dev/null and b/src/images/Icon-close.png differ diff --git a/src/images/Icon-cookie.png b/src/images/Icon-cookie.png new file mode 100644 index 000000000..0fc36c09f Binary files /dev/null and b/src/images/Icon-cookie.png differ diff --git a/src/images/Icon-facebook.png b/src/images/Icon-facebook.png new file mode 100644 index 000000000..05c0b247c Binary files /dev/null and b/src/images/Icon-facebook.png differ diff --git a/src/images/Icon-instagram.png b/src/images/Icon-instagram.png new file mode 100644 index 000000000..2d7351a34 Binary files /dev/null and b/src/images/Icon-instagram.png differ diff --git a/src/images/Icon-menu.png b/src/images/Icon-menu.png new file mode 100644 index 000000000..5eaea0f18 Binary files /dev/null and b/src/images/Icon-menu.png differ diff --git a/src/images/Icon-phone.png b/src/images/Icon-phone.png new file mode 100644 index 000000000..93a0e4b8d Binary files /dev/null and b/src/images/Icon-phone.png differ diff --git a/src/images/Icon-twitter.png b/src/images/Icon-twitter.png new file mode 100644 index 000000000..816bc8eba Binary files /dev/null and b/src/images/Icon-twitter.png differ diff --git a/src/images/Icons.png b/src/images/Icons.png new file mode 100644 index 000000000..4c31712c4 Binary files /dev/null and b/src/images/Icons.png differ diff --git a/src/images/Logo.png b/src/images/Logo.png new file mode 100644 index 000000000..5ec861c95 Binary files /dev/null and b/src/images/Logo.png differ diff --git a/src/images/Media.png b/src/images/Media.png new file mode 100644 index 000000000..729da061b Binary files /dev/null and b/src/images/Media.png differ diff --git a/src/images/Product card.png b/src/images/Product card.png new file mode 100644 index 000000000..e36cf6576 Binary files /dev/null and b/src/images/Product card.png differ diff --git a/src/images/bolacha-02.png b/src/images/bolacha-02.png new file mode 100644 index 000000000..392aff9db Binary files /dev/null and b/src/images/bolacha-02.png differ diff --git a/src/images/bolacha.png b/src/images/bolacha.png new file mode 100644 index 000000000..5effcf148 Binary files /dev/null and b/src/images/bolacha.png differ diff --git a/src/images/choc.png b/src/images/choc.png new file mode 100644 index 000000000..4cdf7dbd0 Binary files /dev/null and b/src/images/choc.png differ diff --git a/src/images/photo-product-01.png b/src/images/photo-product-01.png new file mode 100644 index 000000000..80cc6085a Binary files /dev/null and b/src/images/photo-product-01.png differ diff --git a/src/images/photo-product-02.png b/src/images/photo-product-02.png new file mode 100644 index 000000000..9f1eaf6e3 Binary files /dev/null and b/src/images/photo-product-02.png differ diff --git a/src/images/photo-product-03.png b/src/images/photo-product-03.png new file mode 100644 index 000000000..745b6d8ff Binary files /dev/null and b/src/images/photo-product-03.png differ diff --git a/src/images/photo-product-04.png b/src/images/photo-product-04.png new file mode 100644 index 000000000..021572170 Binary files /dev/null and b/src/images/photo-product-04.png differ diff --git a/src/images/photo-product-05.png b/src/images/photo-product-05.png new file mode 100644 index 000000000..019335eb5 Binary files /dev/null and b/src/images/photo-product-05.png differ diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd5400..2b32cf511 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,5 +1,7 @@ +/* stylelint-disable order/properties-order */ + @font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; + font-family: Inter; 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 1837eb46e..490a11105 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,6 @@ -h1 { - @extend %h1; +h1, +h2, +h3, +p { + margin: 0; } diff --git a/src/styles/blocks/_about.scss b/src/styles/blocks/_about.scss new file mode 100644 index 000000000..63eac7407 --- /dev/null +++ b/src/styles/blocks/_about.scss @@ -0,0 +1,93 @@ +/* stylelint-disable order/properties-order */ + +.about { + max-width: 1280px; + margin: 0 auto; + padding: 80px 16px; + background-image: url('../images/bolacha-02.png'); + background-repeat: no-repeat; + background-position: center 120px; + background-size: min(100%, 560px); + + @include on-tablet { + padding: 120px 44px 150px; + } + + @include on-desktop { + padding: 120px 36px 190px; + background-position: center 80px; + } + + &__intro { + display: grid; + grid-template-columns: 1fr; + gap: 32px; + margin-bottom: 64px; + + @include on-tablet { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 24px; + margin-bottom: 72px; + } + } + + &__title { + color: $color-orange; + font-size: 48px; + line-height: 85%; + text-transform: uppercase; + + @include on-tablet { + font-size: 56px; + } + + @include on-desktop { + font-size: 72px; + } + } + + &__text { + max-width: 540px; + font-size: 16px; + line-height: 150%; + } + + &__text-line { + display: inline; + + @include on-tablet { + display: block; + } + } + + &__stats { + display: grid; + grid-template-columns: 1fr; + gap: 48px; + margin: 0; + + @include on-tablet { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 80px 24px; + } + + @include on-desktop { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + } + + &__number { + margin-bottom: 8px; + color: $color-orange; + font-size: 96px; + line-height: 85%; + text-transform: uppercase; + } + + &__label { + margin: 0; + color: $color-gray; + font-size: 16px; + line-height: 150%; + } +} diff --git a/src/styles/blocks/_footer.scss b/src/styles/blocks/_footer.scss new file mode 100644 index 000000000..e77b6f5d8 --- /dev/null +++ b/src/styles/blocks/_footer.scss @@ -0,0 +1,196 @@ +/* stylelint-disable order/properties-order */ + +.footer { + background-color: $color-dark; + color: $color-white; + + &__content { + display: grid; + grid-template-columns: 1fr; + gap: 40px; + max-width: 1280px; + margin: 0 auto; + padding: 56px 16px; + + @include on-tablet { + grid-template-columns: repeat(8, minmax(0, 1fr)); + gap: 40px 24px; + padding: 88px 44px; + } + + @include on-desktop { + grid-template-columns: repeat(12, minmax(0, 1fr)); + min-height: 525px; + padding: 96px 132px 88px; + } + } + + &__logo { + width: fit-content; + font-size: 32px; + font-weight: 700; + line-height: 100%; + + @include on-tablet { + grid-column: 1 / 4; + } + } + + &__nav { + @include on-tablet { + grid-column: 1 / 4; + grid-row: 2; + } + } + + &__contact { + @include on-tablet { + grid-column: 5 / -1; + grid-row: 1 / 3; + } + + @include on-desktop { + grid-column: 6 / -1; + } + } + + &__title { + margin-bottom: 40px; + color: $color-white; + font-size: 48px; + font-weight: 400; + line-height: 85%; + text-transform: uppercase; + + @include on-tablet { + font-size: 56px; + } + + @include on-desktop { + font-size: 72px; + } + } + + &__columns { + display: grid; + gap: 32px; + + @include on-tablet { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 24px; + } + } + + &__column { + display: grid; + gap: 16px; + align-content: start; + } + + &__subtitle { + color: $color-gray; + font-size: 16px; + font-weight: 700; + line-height: 100%; + text-transform: uppercase; + } + + &__link { + color: $color-white; + font-size: 16px; + line-height: 150%; + + @include hover(color, $color-light-orange); + } + + &__bottom { + display: flex; + flex-direction: column; + gap: 40px; + + @include on-tablet { + grid-column: 1 / -1; + flex-direction: row; + align-items: center; + justify-content: space-between; + } + + @include on-desktop { + display: contents; + } + } + + &__socials { + display: flex; + gap: 32px; + align-items: center; + justify-content: flex-start; + width: min(280px, 100%); + height: 24px; + + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-desktop { + grid-column: 1 / 4; + grid-row: 3; + place-self: end start; + } + } + + &__social { + width: 24px; + height: 24px; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + @include hover(transform, scale(1.15)); + } + + &__social--facebook { + background-image: url('../images/Icon-facebook.png'); + } + + &__social--instagram { + background-image: url('../images/Icon-instagram.png'); + } + + &__social--twitter { + background-image: url('../images/Icon-twitter.png'); + } + + &__copy { + color: $color-gray; + font-size: 16px; + line-height: 150%; + + @include on-desktop { + grid-column: 6 / 9; + grid-row: 3; + place-self: end start; + } + } +} + +.footer-nav { + display: grid; + gap: 16px; + + &__title { + color: $color-gray; + font-size: 16px; + font-weight: 700; + line-height: 100%; + text-transform: uppercase; + } + + &__link { + width: fit-content; + font-size: 16px; + line-height: 150%; + + @include hover(color, $color-light-orange); + } +} diff --git a/src/styles/blocks/_header.scss b/src/styles/blocks/_header.scss new file mode 100644 index 000000000..76747aa4d --- /dev/null +++ b/src/styles/blocks/_header.scss @@ -0,0 +1,85 @@ +/* stylelint-disable order/properties-order */ + +.header { + position: relative; + z-index: 2; + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px; + + @include on-tablet { + padding: 24px 32px; + } + + @include on-desktop { + padding-inline: 36px; + } + + &__logo { + display: block; + width: 168px; + height: 40px; + } + + &__logo-image { + width: 100%; + height: 100%; + object-fit: contain; + } + + &__toggle { + position: absolute; + width: 1px; + height: 1px; + opacity: 0; + pointer-events: none; + } + + &__menu-button { + width: 24px; + height: 24px; + background-image: url('../images/Icon-menu.png'); + background-repeat: no-repeat; + background-position: center; + cursor: pointer; + + @include on-desktop { + display: none; + } + } + + &__toggle:checked + &__menu-button { + background-image: url('../images/Icon-close.png'); + } + + &__nav { + position: absolute; + top: 72px; + right: 16px; + left: 16px; + display: none; + padding: 24px; + background-color: $color-white; + box-shadow: 0 20px 40px rgba($color-dark, 0.12); + + @include on-tablet { + right: 32px; + left: auto; + width: 320px; + } + + @include on-desktop { + position: static; + display: flex; + width: auto; + padding: 0; + background-color: transparent; + box-shadow: none; + } + } + + &__toggle:checked ~ &__nav { + display: flex; + } +} diff --git a/src/styles/blocks/_hero.scss b/src/styles/blocks/_hero.scss new file mode 100644 index 000000000..acf7da869 --- /dev/null +++ b/src/styles/blocks/_hero.scss @@ -0,0 +1,137 @@ +/* stylelint-disable order/properties-order */ + +.hero { + position: relative; + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: 32px; + max-width: 1280px; + min-height: calc(100vh - 72px); + margin: 0 auto; + padding: 32px 16px 80px; + + @include on-tablet { + grid-template-columns: repeat(8, 1fr); + gap: 0 24px; + min-height: 720px; + padding: 80px 44px 120px; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + min-height: 780px; + padding: 144px 36px 170px; + } + + &__description { + max-width: 320px; + font-size: 14px; + line-height: 150%; + text-align: center; + + @include on-tablet { + grid-column: 1 / 4; + max-width: 330px; + text-align: left; + } + + @include on-desktop { + grid-column: 2 / 5; + max-width: 390px; + } + } + + &__description-line { + display: block; + } + + &__content { + display: grid; + place-items: center; + + @include on-tablet { + grid-column: 1 / -1; + grid-row: 2; + } + } + + &__title { + z-index: 1; + grid-area: 1 / 1; + color: $color-orange; + font-size: 64px; + line-height: 85%; + text-align: center; + text-transform: uppercase; + + @include on-tablet { + font-size: 80px; + } + + @include on-desktop { + font-size: 136px; + white-space: nowrap; + } + } + + &__title-word { + display: block; + + @include on-desktop { + display: inline; + } + } + + &__image { + grid-area: 1 / 1; + width: min(88vw, 520px); + + @include on-tablet { + width: min(48vw, 544px); + } + + @include on-desktop { + width: 584px; + } + } + + &__button { + display: flex; + gap: 8px; + align-items: center; + justify-content: center; + width: 100%; + height: 56px; + border: 2px solid $color-orange; + border-radius: 32px; + color: $color-orange; + font-weight: 700; + line-height: 100%; + text-transform: uppercase; + + @include hover(background-color, $color-orange); + + @include on-tablet { + grid-column: 3 / 7; + margin-top: 80px; + } + + @include on-desktop { + grid-column: 1 / 3; + margin-top: 64px; + } + } + + &__button:hover { + color: $color-white; + } + + &__button::before { + content: ''; + width: 24px; + height: 24px; + background-image: url('../images/Icon-cookie.png'); + background-repeat: no-repeat; + background-position: center; + } +} diff --git a/src/styles/blocks/_nav.scss b/src/styles/blocks/_nav.scss new file mode 100644 index 000000000..b4d8f179c --- /dev/null +++ b/src/styles/blocks/_nav.scss @@ -0,0 +1,38 @@ +/* stylelint-disable order/properties-order */ + +.nav { + flex-direction: column; + gap: 24px; + align-items: center; + + @include on-desktop { + flex-direction: row; + gap: 64px; + } + + &__link { + font-size: 16px; + line-height: 150%; + color: $color-dark; + + @include hover(color, $color-orange); + } + + &__link--contact { + display: flex; + gap: 8px; + align-items: center; + color: $color-orange; + font-weight: 700; + text-transform: uppercase; + } + + &__link--contact::before { + content: ''; + width: 24px; + height: 24px; + background-image: url('../images/Icon-phone.png'); + background-repeat: no-repeat; + background-position: center; + } +} diff --git a/src/styles/blocks/_page.scss b/src/styles/blocks/_page.scss new file mode 100644 index 000000000..03c8d359a --- /dev/null +++ b/src/styles/blocks/_page.scss @@ -0,0 +1,28 @@ +/* stylelint-disable order/properties-order */ + +.page { + scroll-behavior: smooth; + margin: 0; + color: $color-dark; + background-color: $color-blue; + font-family: Inter, Arial, Helvetica, sans-serif; + + &, + &__main { + min-width: 320px; + } +} + +* { + box-sizing: border-box; +} + +a { + color: inherit; + text-decoration: none; +} + +img { + display: block; + max-width: 100%; +} diff --git a/src/styles/blocks/_product-card.scss b/src/styles/blocks/_product-card.scss new file mode 100644 index 000000000..17687088e --- /dev/null +++ b/src/styles/blocks/_product-card.scss @@ -0,0 +1,77 @@ +/* stylelint-disable order/properties-order */ + +.product-card { + @include on-desktop { + grid-column: span 3; + + &:nth-child(2) { + grid-column: 4 / span 3; + } + + &:nth-child(3) { + grid-column: 3 / span 3; + } + + &:nth-child(4) { + grid-column: 6 / span 3; + } + + &:nth-child(5) { + grid-column: 1 / span 3; + } + + &:nth-child(6) { + grid-column: 4 / span 3; + } + } + + &__image { + width: 100%; + aspect-ratio: 432 / 560; + margin-bottom: 16px; + border-radius: 8px; + object-fit: cover; + } + + &__image--chocolate { + object-position: 48% center; + } + + &__category { + margin-bottom: 8px; + color: $color-gray; + font-size: 16px; + font-weight: 700; + line-height: 100%; + text-transform: uppercase; + } + + &__title { + min-height: 48px; + margin-bottom: 16px; + font-size: 16px; + font-weight: 400; + line-height: 150%; + } + + &__link { + display: inline-flex; + gap: 8px; + align-items: center; + color: $color-orange; + font-weight: 700; + line-height: 100%; + text-transform: uppercase; + + @include hover(gap, 16px); + } + + &__link::before { + content: ''; + width: 24px; + height: 24px; + background-image: url('../images/Icon-arrow.png'); + background-repeat: no-repeat; + background-position: center; + } +} diff --git a/src/styles/blocks/_products.scss b/src/styles/blocks/_products.scss new file mode 100644 index 000000000..b7cd83351 --- /dev/null +++ b/src/styles/blocks/_products.scss @@ -0,0 +1,64 @@ +/* stylelint-disable order/properties-order */ + +.products { + max-width: 1280px; + margin: 0 auto; + padding: 64px 16px 40px; + + @include on-tablet { + padding: 80px 44px; + } + + @include on-desktop { + padding: 90px 36px; + } + + &__heading { + max-width: 520px; + margin-bottom: 56px; + + @include on-desktop { + max-width: 1192px; + margin: 0 auto 56px; + } + } + + &__title { + margin-bottom: 24px; + color: $color-orange; + font-size: 48px; + line-height: 85%; + text-transform: uppercase; + + @include on-tablet { + font-size: 56px; + } + + @include on-desktop { + font-size: 72px; + } + } + + &__text { + font-size: 16px; + line-height: 150%; + } + + &__grid { + display: grid; + grid-template-columns: 1fr; + gap: 56px 24px; + + @include on-tablet { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 80px 24px; + } + + @include on-desktop { + grid-template-columns: repeat(8, minmax(0, 1fr)); + gap: 80px 16px; + max-width: 1192px; + margin: 0 auto; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..470e38ea8 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,11 @@ @import 'utils'; @import 'fonts'; @import 'typography'; - -body { - background: $c-gray; -} +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/nav'; +@import 'blocks/hero'; +@import 'blocks/products'; +@import 'blocks/product-card'; +@import 'blocks/about'; +@import 'blocks/footer'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..890dfdd44 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,4 @@ %h1 { - font-family: Roboto, sans-serif; + font-family: Inter, Arial, Helvetica, sans-serif; font-weight: 400; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..3317e97c1 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,19 @@ @mixin hover($_property, $_toValue) { transition: #{$_property} 0.3s; + &:hover { #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: $tablet-min) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min) { + @content; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..532536ee5 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,8 @@ -$c-gray: #eee; +$color-dark: #1c1a26; +$color-orange: #f9512e; +$color-light-orange: #fba28f; +$color-blue: #eef7ff; +$color-white: #fff; +$color-gray: #7f8096; +$desktop-min: 1280px; +$tablet-min: 640px;