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..97f356c3c 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://notbelievable.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..277f7bdd2 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,348 @@ - + - Title + Creative Bakery + + + + - -

Hello Mate Academy

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

We bake your fantasies — croissants, cakes, cookies, and cupcakes.

+

Creative bakery

+ cookie-img + + cokie-icon + Learn more + +
+ +
+
+

What we bake

+

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

+
+ +
+ Photo1 +

Cakes

+

+ Oatmeal cookies with golden raisins, + orange zest and chocolate chips +

+ + arrow-rightOrder + +
+
+ Photo2 +

Cakes

+

+ Chocolate biscuit coffee cake topped with + a buttercream and powder +

+ + arrow-rightOrder + +
+
+ Photo3 +

Donuts

+

+ Light multi-layered croissant strewn with + cinammon and almond “petals” +

+ + arrow-rightOrder + +
+
+ Photo4 +

Donuts

+

+ Light multi-layered croissant strewn with + coconut and nuts +

+ + arrow-rightOrder + +
+
+ Photo5 +

Cakes

+

+ Chocolate salted caramel, Vanilla frutti pebbles +

+ + arrow-rightOrder + +
+
+ Photo6 +

cookies

+

+ Oatmeal cookies with golden raisins, + orange zest and chocolate chips +

+ + arrow-rightOrder + +
+
+ +
+

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 +

Foundation year

+
+
+ 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..946d86d78 100644 --- a/package.json +++ b/package.json @@ -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/Bakerlab.png b/src/images/Bakerlab.png new file mode 100644 index 000000000..debfd8872 Binary files /dev/null and b/src/images/Bakerlab.png differ diff --git a/src/images/Bakerlab2.png b/src/images/Bakerlab2.png new file mode 100644 index 000000000..53f15a930 Binary files /dev/null and b/src/images/Bakerlab2.png differ diff --git a/src/images/Cookie.png b/src/images/Cookie.png new file mode 100644 index 000000000..7a71cd105 Binary files /dev/null and b/src/images/Cookie.png differ diff --git a/src/images/Crumbs.png b/src/images/Crumbs.png new file mode 100644 index 000000000..13eb1a3a5 Binary files /dev/null and b/src/images/Crumbs.png differ diff --git a/src/images/Icon-cookie.png b/src/images/Icon-cookie.png new file mode 100644 index 000000000..8104cd930 Binary files /dev/null and b/src/images/Icon-cookie.png differ diff --git a/src/images/Menu-burger.png b/src/images/Menu-burger.png new file mode 100644 index 000000000..314d305cf Binary files /dev/null and b/src/images/Menu-burger.png differ diff --git a/src/images/Photo1.png b/src/images/Photo1.png new file mode 100644 index 000000000..0cba1afee Binary files /dev/null and b/src/images/Photo1.png differ diff --git a/src/images/Photo2.png b/src/images/Photo2.png new file mode 100644 index 000000000..2a22e1246 Binary files /dev/null and b/src/images/Photo2.png differ diff --git a/src/images/Photo3.png b/src/images/Photo3.png new file mode 100644 index 000000000..b41560ef2 Binary files /dev/null and b/src/images/Photo3.png differ diff --git a/src/images/Photo4.png b/src/images/Photo4.png new file mode 100644 index 000000000..7e6dc5b37 Binary files /dev/null and b/src/images/Photo4.png differ diff --git a/src/images/Photo5.png b/src/images/Photo5.png new file mode 100644 index 000000000..d41492213 Binary files /dev/null and b/src/images/Photo5.png differ diff --git a/src/images/Photo6.png b/src/images/Photo6.png new file mode 100644 index 000000000..fb8a129dc Binary files /dev/null and b/src/images/Photo6.png differ diff --git a/src/images/arrow-right.png b/src/images/arrow-right.png new file mode 100644 index 000000000..49b116616 Binary files /dev/null and b/src/images/arrow-right.png differ diff --git a/src/images/close.png b/src/images/close.png new file mode 100644 index 000000000..30c3b154a Binary files /dev/null and b/src/images/close.png differ diff --git a/src/images/f.png b/src/images/f.png new file mode 100644 index 000000000..8dd4fcf5c Binary files /dev/null and b/src/images/f.png differ diff --git a/src/images/i.png b/src/images/i.png new file mode 100644 index 000000000..6961123a3 Binary files /dev/null and b/src/images/i.png differ diff --git a/src/images/phone-icon.png b/src/images/phone-icon.png new file mode 100644 index 000000000..2e03e38a3 Binary files /dev/null and b/src/images/phone-icon.png differ diff --git a/src/images/t.png b/src/images/t.png new file mode 100644 index 000000000..3a2abdef3 Binary files /dev/null and b/src/images/t.png differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..2fba2d9e2 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,37 @@ 'use strict'; + + +const btnBurger = document.querySelector('.top-bar__btn--menu'); +const asideMenu = document.querySelector('.aside-menu'); +const btnClose = document.querySelector('.aside-menu__btn--close') + +function menuOpen() { + asideMenu.classList.add('aside-menu--open'); + document.body.style.overflow = 'hidden'; +} + +function menuClose() { + asideMenu.classList.remove('aside-menu--open'); + document.body.style.overflow = ''; +} + +btnBurger.addEventListener('click', menuOpen); +btnClose.addEventListener('click', menuClose); + +const linkMenu = document.querySelectorAll('.nav__link'); + +window.addEventListener('resize', () => { + if (window.innerWidth >= 1024) { + menuClose(); + } +}); + +linkMenu.forEach(link => { + link.addEventListener('click', (e) => { + const href = link.getAttribute('href'); + + if (href && href.startsWith('#')) { + menuClose(); + } + }); +}); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 45cdd5400..000000000 --- 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 deleted file mode 100644 index 1837eb46e..000000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss deleted file mode 100644 index 3280c3fe1..000000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/about-us.scss b/src/styles/about-us.scss new file mode 100644 index 000000000..26c0e476a --- /dev/null +++ b/src/styles/about-us.scss @@ -0,0 +1,86 @@ +@use './utils/mixins' as *; +@use './utils/vars' as *; + +.about-us { + @include padd; + + max-width: 1200px; + margin-inline: auto; + box-sizing: border-box; + padding-bottom: 72px; + background-image: url(../images/Crumbs.png); + background-position: 0 68%; + background-repeat: no-repeat; + background-size: contain; + + @include tablet { + @include grid; + + padding-bottom: 102px; + background-position: 121px 51px; + background-size: 526px 493px; + } + + @include desktop { + padding-bottom: 350px; + background-size: 718px 673px; + background-position: top; + } + + &__title { + grid-column: 1 / span 4; + } + + &__text { + margin-block: 32px 64px; + + @include tablet { + grid-column: 5 / -1; + margin: 0 0 42px; + } + + @include desktop { + margin-bottom: 146px; + } + } + + &__item { + display: flex; + flex-direction: column; + gap: 48px; + + @include tablet { + @include grid; + + grid-column: span 8; + } + } + + &__box { + display: flex; + flex-direction: column; + gap: 8px; + + @include tablet { + grid-column: span 4; + padding-bottom: 50px; + } + + @include desktop { + grid-column: span 2; + } + + &-num { + font-size: 96px; + font-weight: 400; + letter-spacing: -5px; + line-height: 85%; + text-transform: uppercase; + color: $red; + } + + &-description { + margin: 0; + } + } +} diff --git a/src/styles/aside.scss b/src/styles/aside.scss new file mode 100644 index 000000000..ea2af4542 --- /dev/null +++ b/src/styles/aside.scss @@ -0,0 +1,24 @@ +@use './utils/mixins' as *; +@use './utils/vars' as *; + +.aside-menu { + position: absolute; + box-sizing: border-box; + height: 100vh; + width: 100vw; + top: 0; + left: 0; + background-color: $light-pinc; + + transform: translateX(-100%); + transition: all 0.3s ease; + + &--open { + transform: translateX(0); + } + + &__btn--close { + background-image: url(../images/close.png); + background-size: 13px 13px; + } +} diff --git a/src/styles/base.scss b/src/styles/base.scss new file mode 100644 index 000000000..6a6edea15 --- /dev/null +++ b/src/styles/base.scss @@ -0,0 +1,35 @@ +@use './utils/mixins' as *; +@use './utils/vars' as *; + +.html { + scroll-behavior: smooth; + font-family: Inter, sans-serif; + font-size: 16px; + line-height: 150%; + font-weight: 400; + color: $black; + letter-spacing: -1%; +} + +.body { + margin: 0; + background-color: $light-pinc; +} + +.title { + font-size: 48px; + line-height: 85%; + letter-spacing: -5%; + text-transform: uppercase; + font-weight: 400; + color: $red; + margin: 0; + + @include tablet { + font-size: 56px; + } + + @include desktop { + font-size: 72px; + } +} diff --git a/src/styles/creative.scss b/src/styles/creative.scss new file mode 100644 index 000000000..8348d5ce0 --- /dev/null +++ b/src/styles/creative.scss @@ -0,0 +1,148 @@ +@use './utils/mixins' as *; +@use './utils/vars' as *; + +.creative { + @include padd; + + max-width: 1200px; + margin-inline: auto; + padding-block: 32px 60px; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + + @include tablet { + @include grid; + + padding-block: 80px 228px; + } + + @include desktop { + padding-block: 0 66px; + justify-content: space-between; + } + + &__text { + margin: 0 0 32px; + text-align: center; + + @include tablet { + grid-column: 1 / span 4; + text-align: start; + margin: 0; + } + + @include desktop { + align-self: end; + grid-column: 1 / 3; + grid-row: 1; + transform: translateY(50px); + } + + @include desktop-b { + transform: translateY(30px); + width: 280px; + } + } + + &__title { + margin: 0; + font-size: 64px; + line-height: 85%; + letter-spacing: -5%; + text-align: center; + text-transform: uppercase; + font-weight: 400; + color: $red; + + @include tablet { + font-size: 80px; + line-height: 85%; + grid-row: 2; + grid-column: 1 / -1; + } + + @include desktop { + font-size: 116px; + align-items: center; + } + + @include desktop-b { + font-size: 120px; + } + } + + &__image { + height: 290px; + width: 100%; + object-fit: contain; + z-index: -1; + + @include tablet { + grid-column: 3 / span 4; + grid-row: 2; + height: 328px; + } + + @include desktop { + grid-column: 3 / span 4; + height: 100%; + } + + @include desktop { + grid-row: 1 / span 3; + } + } + + &__link-btn { + height: 56px; + width: 100%; + text-decoration: none; + display: flex; + justify-content: center; + align-items: center; + gap: 4px; + border-radius: 32px; + border: 2px solid $red; + line-height: 100%; + text-transform: uppercase; + color: $red; + font-weight: 500; + + @include tablet { + grid-column: 3 / span 4; + margin-top: 50px; + } + + @include desktop { + grid-column: 1 / span 2; + grid-row: 3; + margin-top: 0; + align-self: flex-start; + + &:hover { + @include hover(null, $red); + + color: $white; + .creative__link-img { + filter: brightness(0) invert(1); + } + } + + &:focus { + background-color: rgba(178, 52, 26, 1); + color: $white; + .creative__link-img { + filter: brightness(0) invert(1); + } + } + } + } + + &__link-img { + height: 20px; + width: 20px; + object-fit: contain; + } +} diff --git a/src/styles/footer.scss b/src/styles/footer.scss new file mode 100644 index 000000000..bc73db568 --- /dev/null +++ b/src/styles/footer.scss @@ -0,0 +1,171 @@ +@use './utils/mixins' as *; +@use './utils/vars' as *; + +.footer { + @include padd; + + padding-block: 56px; + box-sizing: border-box; + display: flex; + flex-direction: column; + gap: 40px; + background-color: $black; + + @include tablet { + @include grid; + + padding-block: 88px; + } + + &__logo { + height: 30px; + width: 158px; + + @include hover(1.1); + @include tablet { + grid-column: span 4; + } + + &-img { + display: block; + height: 100%; + width: 100%; + object-fit: contain; + } + } + + &__nav { + padding: 0; + + @include tablet { + margin-top: 10px; + grid-column: 1 / 5; + grid-row: 2; + } + + &-list { + align-items: flex-start; + margin: 0; + gap: 16px; + } + + &-link { + color: $white; + } + + &-item { + &:nth-child(1) { + text-transform: uppercase; + + .footer__nav-link { + color: $gray; + } + } + } + } + + &__contact-us { + display: flex; + flex-direction: column; + gap: 40px; + + @include tablet { + grid-column: 5 / -1; + grid-row: 2; + margin-block: 10px 18px; + } + + @include desktop { + display: grid; + grid-template-columns: 1fr 1fr; + } + } + + .contact-us__title { + font-size: 48px; + line-height: 85%; + letter-spacing: -5%; + color: $white; + text-transform: uppercase; + font-weight: 400; + margin: 0; + width: 270px; + + @include tablet { + font-size: 56px; + grid-column: 5 / -1; + grid-row: 1; + } + + @include desktop { + font-size: 72px; + width: 100%; + } + } + + .contact-us__list { + display: flex; + flex-direction: column; + gap: 16px; + } + + .type { + color: $gray; + line-height: 100%; + text-transform: uppercase; + letter-spacing: 2%; + font-weight: 500; + margin: 0; + } + + .contact-us__link { + color: $white; + text-decoration: none; + display: block; + + @include hover(1.05, null, 0 0 8px $red); + } + + &__social { + display: flex; + align-items: center; + gap: 34px; + + @include tablet { + grid-column: 1 / 5; + } + + @include desktop { + margin-top: 10px; + } + + &-link { + display: flex; + align-items: center; + justify-content: center; + height: 24px; + width: 24px; + + @include hover(1.3); + } + + &-img { + display: block; + width: 20px; + height: 20px; + object-fit: contain; + } + } + + &__bakerlab { + color: $gray; + + @include tablet { + grid-column: 5 / -1; + } + + @include desktop { + margin-top: 10px; + } + } +} diff --git a/src/styles/header.scss b/src/styles/header.scss new file mode 100644 index 000000000..16e9763cd --- /dev/null +++ b/src/styles/header.scss @@ -0,0 +1,62 @@ +@use './utils/mixins' as *; +@use './utils/vars' as *; + +.top-bar { + box-sizing: border-box; + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + padding-block: 20px; + padding-inline: 20px; + + @include desktop { + padding: 28px 32px; + } + + &__logo-img { + display: block; + object-fit: contain; + height: 25px; + width: 128px; + + @include hover(1.1); + } + + &__btn { + height: 24px; + width: 24px; + background-size: 20px 8px; + background-position: center; + background-color: transparent; + background-repeat: no-repeat; + border: none; + cursor: pointer; + + @include hover(1.1); + @include desktop { + display: none; + } + + &--menu { + background-image: url(../images/Menu-burger.png); + + @include hover(1.1); + } + } + + &__nav.nav { + padding: 0; + display: none; + + @include desktop { + display: flex; + } + } + + &__nav-list.nav__list { + margin: 0; + flex-direction: row; + gap: 64px; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..7c1fae055 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,8 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@use './base'; +@use './header'; +@use './aside'; +@use './nav'; +@use './creative'; +@use './products'; +@use './about-us'; +@use './footer'; diff --git a/src/styles/nav.scss b/src/styles/nav.scss new file mode 100644 index 000000000..a5f63a4b0 --- /dev/null +++ b/src/styles/nav.scss @@ -0,0 +1,42 @@ +@use './utils/mixins' as *; +@use './utils/vars' as *; + +.nav { + @include padd; + + &__list { + box-sizing: border-box; + padding: 0; + margin: 0; + list-style: none; + display: flex; + flex-direction: column; + align-items: center; + gap: 24px; + margin-top: 132px; + } + + &__link { + display: inline-block; + text-decoration: none; + color: $black; + margin: 0; + + @include hover(1.05, null, 0 0 8px $red); + + &--call { + display: flex; + align-items: center; + gap: 4px; + color: $red; + text-transform: uppercase; + font-weight: 500; + + img { + height: 18px; + width: 18px; + object-fit: contain; + } + } + } +} diff --git a/src/styles/products.scss b/src/styles/products.scss new file mode 100644 index 000000000..710ec5d5b --- /dev/null +++ b/src/styles/products.scss @@ -0,0 +1,107 @@ +@use './utils/mixins' as *; +@use './utils/vars' as *; + +.products { + @include padd; + + max-width: 1200px; + margin-inline: auto; + padding-block: 64px 72px; + box-sizing: border-box; + display: flex; + flex-direction: column; + gap: 56px; + + @include tablet { + @include grid; + + padding-block: 0 152px; + } + + @include desktop { + row-gap: 80px; + padding-bottom: 178px; + } + + &__title-box { + display: flex; + flex-direction: column; + gap: 24px; + + @include tablet { + grid-column: span 8; + } + } + + &__title { + @include hover(null, null, 0 0 8px $red); + } + + &__text { + margin: 0; + } + + &-card { + display: flex; + flex-direction: column; + gap: 16px; + + @include hover(1.1); + @include tablet { + padding-top: 50px; + grid-column: span 4; + } + + @include desktop { + padding: 0; + grid-column: span 3; + + &:nth-child(4) { + grid-column: 3 / 6; + } + + &:nth-child(5) { + grid-column: 6 / -1; + } + } + + &__name { + margin: 0; + color: $gray; + text-transform: uppercase; + letter-spacing: 2%; + line-height: 100%; + font-weight: 500; + } + + &__text { + margin: 0; + margin-top: -8px; + + @include hover(null, null, 0 0 8px $red); + } + + &__link { + height: 32px; + width: 84px; + color: $red; + text-decoration: none; + display: flex; + align-items: center; + justify-content: space-between; + text-transform: uppercase; + line-height: 100%; + letter-spacing: 2%; + font-weight: 500; + + @include hover(null, null, 0 0 8px $red); + + &-img { + width: 16px; + height: 16px; + object-fit: contain; + display: block; + } + } + } +} diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index d7201e7b3..000000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%h1 { - font-family: Roboto, sans-serif; - font-weight: 400; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..5a6057bfe 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,62 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; +@mixin tablet() { + @media (min-width: 768px) { + @content; + } +} + +@mixin desktop() { + @media (min-width: 1024px) { + @content; + } +} + +@mixin desktop-b() { + @media (min-width: 1200px) { + @content; + } +} + +@mixin padd() { + padding-inline: 16px; + + @include tablet { + padding-inline: 44px; + } + + @include desktop-b { + padding-inline: 124px; + } +} + +@mixin grid() { + @include tablet { + display: grid; + grid-template-columns: repeat(8, 1fr); + gap: 24px; + } + + @include desktop { + grid-template-columns: repeat(8, 1fr); + } +} + +@mixin hover($scale: null, $color: null, $shadow: null) { + transition: + transform 0.3s ease, + background-color 0.3s ease, + text-shadow 0.3s ease; + &:hover { - #{$_property}: $_toValue; + @if $scale { + transform: scale($scale); + } + + @if $color { + background-color: $color; + } + + @if $shadow { + text-shadow: $shadow; + } } } diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..921d15e4b 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,5 @@ -$c-gray: #eee; +$light-pinc: rgba(255, 238, 252, 1); +$black: rgba(28, 26, 38, 1); +$red: rgba(249, 81, 46, 1); +$gray: rgba(127, 128, 150, 1); +$white: rgba(255, 255, 255, 1);