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..9c1dfd9b3 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://handsome010.github.io/layout_creativeBakery/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/desktop.ini b/desktop.ini new file mode 100644 index 000000000..58f8d5898 --- /dev/null +++ b/desktop.ini @@ -0,0 +1,6 @@ +[.ShellClassInfo] +IconResource=C:\WINDOWS\System32\SHELL32.dll,41 +[ViewState] +Mode= +Vid= +FolderType=Generic diff --git a/index.html b/index.html index d339e6856..53dbde663 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,608 @@ - + + - Title + Creative Bakery + + + + - -

Hello Mate Academy

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

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

+

Creative bakery

+ + + + + + Learn more + +
+
+ + +
+
+
+

What we bake

+

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

+
+
+ + cake img + +

Cakes

+

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

+ + + + + Order + +
+ +
+ + donuts img + +

Donuts

+

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

+ + + + + Order + +
+ + +
+ + cookies img + +

Cookies

+

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

+ + + + + Order + +
+
+
+ + +
+
+
+

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/Crumbs.png b/src/images/Crumbs.png new file mode 100644 index 000000000..e470d89c9 Binary files /dev/null and b/src/images/Crumbs.png differ diff --git a/src/images/Icon-arrow.svg b/src/images/Icon-arrow.svg new file mode 100644 index 000000000..a1bd54079 --- /dev/null +++ b/src/images/Icon-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Icon-close.svg b/src/images/Icon-close.svg new file mode 100644 index 000000000..866686fd3 --- /dev/null +++ b/src/images/Icon-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Icon-cookie.svg b/src/images/Icon-cookie.svg new file mode 100644 index 000000000..992115b32 --- /dev/null +++ b/src/images/Icon-cookie.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Icon-facebook.svg b/src/images/Icon-facebook.svg new file mode 100644 index 000000000..93b3835e8 --- /dev/null +++ b/src/images/Icon-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Icon-instagram.svg b/src/images/Icon-instagram.svg new file mode 100644 index 000000000..a94faeecf --- /dev/null +++ b/src/images/Icon-instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Icon-menu.svg b/src/images/Icon-menu.svg new file mode 100644 index 000000000..2b82cbfa5 --- /dev/null +++ b/src/images/Icon-menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Icon-phone.svg b/src/images/Icon-phone.svg new file mode 100644 index 000000000..39b157356 --- /dev/null +++ b/src/images/Icon-phone.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Icon-twitter.svg b/src/images/Icon-twitter.svg new file mode 100644 index 000000000..097a19058 --- /dev/null +++ b/src/images/Icon-twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Logo-white.svg b/src/images/Logo-white.svg new file mode 100644 index 000000000..733596f1f --- /dev/null +++ b/src/images/Logo-white.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/Logo.svg b/src/images/Logo.svg new file mode 100644 index 000000000..4eb4c54f3 --- /dev/null +++ b/src/images/Logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/cookie.png b/src/images/cookie.png new file mode 100644 index 000000000..b115788a0 Binary files /dev/null and b/src/images/cookie.png differ diff --git a/src/images/muffin.png b/src/images/muffin.png new file mode 100644 index 000000000..1fe12717c Binary files /dev/null and b/src/images/muffin.png differ diff --git a/src/images/photo-product-01.png b/src/images/photo-product-01.png new file mode 100644 index 000000000..97583e8af 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..27c03fa80 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..270f931b5 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..7888d497d 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..a7db73062 Binary files /dev/null and b/src/images/photo-product-05.png differ diff --git a/src/images/photo-product-06.png b/src/images/photo-product-06.png new file mode 100644 index 000000000..36988c54a Binary files /dev/null and b/src/images/photo-product-06.png differ 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/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 000000000..58dad1dee --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,96 @@ +@use '../utils/text-styles.scss' as styles; +@use '../utils/vars' as vars; +@use './../utils/mixins' as mix; + +.about-us { + &--offset { + margin-bottom: 100px; + } + + &__content { + @include mix.grid-layout; + + background-image: url(../images/Crumbs.png); + background-position: center; + background-size: contain; + background-repeat: no-repeat; + } + + &__headline { + @include mix.grid-layout; + + grid-column: 1 / -1; + margin: 0; + margin-bottom: 64px; + + @include mix.on-tablet { + margin-bottom: 72px; + } + + @include mix.on-desktop { + margin-bottom: 144px; + } + } + + &__title { + @include styles.h2-styles; + + margin: 0; + grid-column: 1 /-1; + margin-bottom: 32px; + + @include mix.on-tablet { + grid-column: span 4; + } + } + + &__description { + @include styles.body-text-styles; + + margin: 0; + grid-column: 1 / -1; + @include mix.on-tablet { + grid-column: span 4; + } + } + + &__stats { + @include mix.grid-layout; + + grid-column: 1 / -1; + row-gap: 48px; + + @include mix.on-tablet { + row-gap: 80px; + } + } + + &__details { + grid-column: 1 / -1; + display: flex; + flex-direction: column; + gap: 8px; + + @include mix.on-tablet { + grid-column: span 4; + } + + @include mix.on-desktop { + grid-column: span 2; + } + } + + &__number { + @include styles.big-text-styles; + @include mix.hover(transform, scale((1.05))); + + margin: 0; + color: vars.$accent-orange; + } + + &__information-type { + margin: 0; + + @include styles.body-text-styles; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..1861771ed --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,159 @@ +@use '../utils/text-styles.scss' as styles; +@use '../utils/vars' as vars; +@use './../utils/mixins' as mix; + +.footer { + background-color: vars.$plain-text; + + &__content { + @include mix.grid-layout; + + grid-row: auto; + row-gap: 40px; + + padding-top: 56px; + padding-bottom: 56px; + + @include mix.on-tablet { + padding-top: 88px; + padding-bottom: 88px; + } + } + + &__logo-link { + grid-column: 1 / -1; + + @include mix.on-tablet { + grid-column: span 4; + grid-row: 1; + } + + @include mix.on-desktop { + grid-column: span 2; + } + } + &__logo { + @include mix.hover(transform, scale(1.2)); + } + + &__menu-title { + @include styles.uppercase-text-styles; + + color: vars.$grey; + padding: 0; + margin: 0; + } + + &__list { + grid-column: 1 / -1; + display: flex; + flex-direction: column; + list-style: none; + margin: 0; + padding: 0; + gap: 16px; + + @include mix.on-tablet { + grid-column: span 4; + } + + &--menu { + @include mix.on-tablet { + grid-row: 2; + } + @include mix.on-desktop { + grid-column: span 2; + } + } + + &--call-us { + @include mix.on-tablet { + grid-row: 2; + } + + @include mix.on-desktop { + grid-column: 5 / 7; + } + } + &--email-us { + @include mix.on-tablet { + grid-column: 5 / -1; + grid-row: 3; + } + @include mix.on-desktop { + grid-column: 7 / -1; + grid-row: 2; + } + } + } + + &__link { + @include mix.link-reset; + + color: #fff; + + @include mix.hover(color, vars.$accent-orange); + } + + &__title { + grid-column: 1 / -1; + + @include styles.h2-styles; + + margin: 0; + padding-top: 24px; + color: #fff; + + @include mix.on-tablet { + grid-column: span 4; + grid-row: 1; + padding-top: 0; + } + + @include mix.on-desktop { + grid-column: 5 / -1; + grid-row: 1; + } + } + + &__icons { + grid-column: 1 / -1; + display: flex; + gap: 32px; + + @include mix.on-tablet { + grid-column: span 4; + grid-row: 4; + } + + @include mix.on-desktop { + grid-column: span 2; + grid-row: 3; + } + } + + &__icon { + text-decoration: none; + + @include mix.hover(transform, scale(1.2)); + @include mix.link-reset; + } + + &__bottom-text { + grid-column: 1 / -1; + @include styles.body-text-styles; + + color: vars.$grey; + margin: 0; + + @include mix.on-tablet { + grid-column: span 4; + grid-row: 4; + } + + @include mix.on-desktop { + grid-column: 5 / 7; + grid-row: 3; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..8aeac69e6 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,3 @@ +.header { + width: 100%; +} diff --git a/src/styles/blocks/hero.scss b/src/styles/blocks/hero.scss new file mode 100644 index 000000000..c01bbcc98 --- /dev/null +++ b/src/styles/blocks/hero.scss @@ -0,0 +1,89 @@ +@use '../utils/text-styles.scss' as styles; +@use '../utils/vars' as vars; +@use './../utils/mixins' as mix; + +.hero { + &__content { + text-align: center; + @include mix.grid-layout; + + grid-template-rows: auto; + } + + &__text { + grid-column: 1 / -1; + @include styles.body-text-styles; + + margin: 0; + margin-top: 32px; + + @include mix.on-tablet { + margin-top: 80px; + grid-column: span 4; + text-align: left; + grid-row: 1; + } + @include mix.on-desktop { + grid-column: 1 / 3; + grid-row: 1; + margin-top: 52%; + align-self: start; + } + } + + &__title { + display: block; + @include styles.h1-styles; + + margin: 0; + grid-column: 1 / -1; + margin-top: 32px; + @include mix.on-tablet { + grid-row: 2; + align-self: center; + } + @include mix.on-desktop { + font-size: clamp(80px, 10vw, 144px); + white-space: preserve nowrap; + margin-top: 8px; + grid-row: 1; + } + } + &__img { + background-image: url(./../images/cookie.png); + background-size: contain; + background-position: center; + background-repeat: no-repeat; + display: block; + z-index: -1; + width: 100%; + aspect-ratio: 1; + grid-column: 1 / -1; + @include mix.on-tablet { + grid-column: 3 / 7; + grid-row: 2; + } + @include mix.on-desktop { + grid-row: 1; + } + } + + &__button { + grid-column: 1 / -1; + + @include mix.on-tablet { + grid-column: 3 / 7; + grid-row: 3; + margin-top: 80px; + } + @include mix.on-desktop { + grid-column: 1 / 3; + grid-row: 1; + align-self: end; + } + } +} + +.cookie-icon { + fill: currentColor; +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..13c3fb26c --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,50 @@ +@use '../utils/text-styles.scss' as styles; +@use '../utils/mixins' as mix; +@use '../utils/vars' as vars; + +.menu { + top: 0; + right: 0; + left: 0; + pointer-events: none; + position: fixed; + transition: transform 1s; + transform: translateX(-100vw); + height: 100vh; + overflow: hidden; + background-color: #fff; + + &__content { + height: 100vh; + display: flex; + flex-direction: column; + position: relative; + } + + &:target { + pointer-events: all; + transform: translateX(0); + } + + &__list { + padding: 0; + margin: 0; + gap: 24px; + position: absolute; + top: 50%; + transform: translateY(-50%); + align-self: center; + list-style: none; + display: flex; + justify-content: space-evenly; + flex-direction: column; + width: 100%; + align-items: center; + } + + &__link { + @include mix.link-reset; + @include styles.body-text-styles; + @include mix.hover(color, vars.$accent-orange); + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..021ee11b9 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,46 @@ +@use '../utils/mixins' as mix; +@use '../utils/vars' as vars; +@use '../utils/text-styles.scss' as styles; + +.nav { + &__content { + margin: 0; + display: flex; + align-items: center; + justify-content: space-between; + } + + &__top { + flex: 1; + } + + &__list { + margin: 0; + padding: 0; + display: none; + list-style: none; + flex-direction: row; + justify-content: space-evenly; + align-items: center; + + gap: 64px; + + @include mix.on-desktop { + display: flex; + } + } + + &__link { + @include mix.link-reset; + @include styles.body-text-styles; + @include mix.hover(color, vars.$accent-orange); + } + + &__item { + padding-block: 30px; + } +} + +.phone-icon { + fill: currentColor; +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..14f9e1d03 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,11 @@ +@use '../utils/text-styles.scss' as styles; + +.page { + scroll-behavior: smooth; + &__body { + @include styles.body-text-styles; + &:has(.menu:target) { + overflow: hidden; /* not to scroll the page */ + } + } +} diff --git a/src/styles/blocks/product-card.scss b/src/styles/blocks/product-card.scss new file mode 100644 index 000000000..c04f09817 --- /dev/null +++ b/src/styles/blocks/product-card.scss @@ -0,0 +1,68 @@ +@use '../utils/mixins' as mix; +@use '../utils/vars' as vars; +@use '../utils/text-styles' as styles; + +.product-card { + grid-column: 1 / -1; + + @include mix.on-tablet { + grid-column: span 4; + } + + @include mix.on-desktop { + &--1 { + grid-column: 1 / 4; + } + + &--2 { + grid-column: 4 / 7; + } + + &--3 { + grid-column: 3 / 6; + } + + &--4 { + grid-column: 6 / -1; + } + + &--5 { + grid-column: 1 / 4; + } + + &--6 { + grid-column: 4 / 7; + } + } + &__link { + @include mix.link-reset; + } + + &__image { + width: 100%; + + @include mix.hover(transform, scale(1.02)); + } + + &__name { + margin: 0; + margin-top: 16px; + } + + &__description { + @include styles.body-text-styles; + + margin: 0; + margin-top: 8px; + } + + &__button { + margin: 0; + margin-top: 16px; + @include mix.link-reset; + } + + &__icon { + fill: vars.$accent-orange; + } +} diff --git a/src/styles/blocks/products.scss b/src/styles/blocks/products.scss new file mode 100644 index 000000000..d8a6787ab --- /dev/null +++ b/src/styles/blocks/products.scss @@ -0,0 +1,48 @@ +@use '../utils/text-styles.scss' as styles; +@use '../utils/mixins' as mix; + +.products { + &--offset { + margin: 104px 0 72px; + + @include mix.on-tablet { + margin-top: 220px; + margin-bottom: 152px; + } + + @include mix.on-tablet { + margin-top: 150px; + margin-bottom: 178px; + } + } + + &__content { + @include mix.grid-layout; + + row-gap: 56px; + + @include mix.on-tablet { + row-gap: 80px; + } + } + + &__heading { + margin: 0; + padding: 0; + grid-column: 1 / -1; + display: flex; + flex-direction: column; + gap: 24px; + } + + &__title { + margin: 0; + @include styles.h2-styles; + } + + &__description { + @include styles.body-text-styles; + + margin: 0; + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..c036b55d9 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,32 @@ +@use '../utils/mixins' as mix; + +.top-bar { + display: flex; + justify-content: space-between; + align-items: center; + &__icon { + @include mix.hover(transform, scale(1.2)); + + display: block; + padding-block: 20px; + height: 24px; + width: 24px; + background-repeat: no-repeat; + background-position: center; + + &--menu { + background-image: url(./../images/Icon-menu.svg); + + @include mix.on-desktop { + display: none; + } + } + + &--close { + background-image: url(../images/Icon-close.svg); + } + } + &__logo-img { + height: 32px; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..2ca80552b 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,98 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; +@use './utils/vars' as vars; +@use './utils/mixins' as mix; +@use './utils/text-styles' as styles; + +@use 'utils'; +@use 'fonts'; +@use './blocks/header'; +@use './blocks/nav'; +@use './blocks/page'; +@use './blocks/hero'; +@use './utils/text-styles'; +@use './blocks/menu'; +@use './blocks/top-bar'; +@use './blocks/products'; +@use './blocks/product-card'; +@use './blocks/about-us'; +@use './blocks/footer'; + +html { + scroll-behavior: smooth; +} body { - background: $c-gray; + margin: 0; +} + +.default-button--bordered { + @include mix.link-reset; + @include styles.uppercase-text-styles; + + display: flex; + align-items: center; + justify-content: center; + gap: 4px; + color: vars.$accent-orange; + height: 56px; + padding: 0; + border: 2px solid currentColor; + border-radius: 32px; + transition: all vars.$transition-duration; + + &:hover { + background-color: vars.$accent-orange; + color: #fff; + } + + &:focus { + background-color: vars.$dark-orange; + } + + &:disabled { + color: vars.$light-orange; + background-color: currentColor; + border-color: currentColor; + } +} + +.default-button--borderless { + @include styles.uppercase-text-styles; + + position: relative; + color: vars.$accent-orange; + width: fit-content; + transition: all vars.$transition-duration; + user-select: none; + display: flex; + align-items: center; + justify-content: center; + gap: 4px; + + &::after { + position: absolute; + content: ''; + display: block; + bottom: -4px; + background-color: currentColor; + width: 100%; + height: 1px; + transition: transform vars.$transition-duration; + transform: scale(0); + } + + &:hover { + cursor: pointer; + &::after { + transform: scale(1); + } + } + + &:focus { + color: vars.$dark-orange; + } + + &:disabled { + color: vars.$light-orange; + border-color: currentColor; + } } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..3681305fe 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,63 @@ +@use './vars' as vars; + @mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; + transition: #{$_property} vars.$transition-duration; &:hover { #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: vars.$tablet-screen) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: vars.$desktop-screen) { + @content; + } +} + +@mixin on-tv { + @media (min-width: vars.$tv-screen) { + @content; + } +} + +@mixin link-reset { + color: vars.$plain-text; + text-decoration: none; + cursor: pointer; +} + +@mixin container-padding { + padding-inline: 16px; + margin: auto; + @include on-tablet { + padding-inline: 44px; + } + + @include on-tv { + max-width: 1200px; + margin-inline: auto; + } +} + +.padding-container { + @include container-padding; +} + +@mixin grid-layout { + --columns: 2; + + display: grid; + column-gap: 16px; + grid-template-columns: repeat(var(--columns), 1fr); + + @include on-tablet { + --columns: 8; + + column-gap: 24px; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..a6c6b28da 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,9 @@ -$c-gray: #eee; +$plain-text: #1c1a26; +$accent-orange: #f9512e; +$dark-orange: #b2341a; +$light-orange: #fba28f; +$grey: #7f8096; +$tablet-screen: 640px; +$desktop-screen: 1024px; +$tv-screen: 1200px; +$transition-duration: 300ms; diff --git a/src/styles/utils/text-styles.scss b/src/styles/utils/text-styles.scss new file mode 100644 index 000000000..a8fd50285 --- /dev/null +++ b/src/styles/utils/text-styles.scss @@ -0,0 +1,139 @@ +@use './mixins' as mix; +@use './vars' as vars; + +@mixin big-text-styles { + /* Big text */ + + font-family: Inter, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 96px; + line-height: 85%; + + /* identical to box height, or 82px */ + + letter-spacing: -0.05em; + text-transform: uppercase; +} + +@mixin body-text-styles { + /* Body text */ + + color: vars.$plain-text; + font-family: Inter, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 150%; + + /* identical to box height, or 24px */ + + letter-spacing: -0.01em; +} + +@mixin uppercase-text-styles { + /* Uppercase */ + + font-family: Inter, sans-serif; + font-style: normal; + font-weight: 500; + font-size: 16px; + line-height: 100%; + + /* identical to box height, or 16px */ + + letter-spacing: 0.02em; + text-transform: uppercase; +} + +@mixin h1-styles { + /* Mobile headings/H1 */ + + color: vars.$accent-orange; + font-family: Inter, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 64px; + line-height: 85%; + + /* or 54px */ + + letter-spacing: -0.05em; + text-transform: uppercase; + + @include mix.on-tablet { + /* Tablet headings/H1 */ + + font-family: Inter, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 80px; + line-height: 85%; + + /* identical to box height, or 68px */ + + letter-spacing: -0.05em; + text-transform: uppercase; + } + + @include mix.on-desktop { + /* Desktop headings/H1 */ + + font-family: Inter, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 144px; + line-height: 85%; + + /* or 122px */ + + letter-spacing: -0.05em; + text-transform: uppercase; + } +} + +@mixin h2-styles { + /* Mobile headings/H2 */ + + color: vars.$accent-orange; + font-family: Inter, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 48px; + line-height: 85%; + + /* identical to box height, or 41px */ + + letter-spacing: -0.05em; + text-transform: uppercase; + + @include mix.on-tablet { + /* Tablet headings/H2 */ + + font-family: Inter, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 56px; + line-height: 85%; + + /* identical to box height, or 48px */ + + letter-spacing: -0.05em; + text-transform: uppercase; + } + + @include mix.on-desktop { + /* Desktop headings/H2 */ + + font-family: Inter, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 72px; + line-height: 85%; + + /* or 61px */ + + letter-spacing: -0.05em; + text-transform: uppercase; + } +}