diff --git a/src/fonts/Inter18pt-Regular.woff b/src/fonts/Inter18pt-Regular.woff new file mode 100644 index 000000000..b5f09cfa3 Binary files /dev/null and b/src/fonts/Inter18pt-Regular.woff differ diff --git a/src/fonts/Inter18pt-Regular.woff2 b/src/fonts/Inter18pt-Regular.woff2 new file mode 100644 index 000000000..3d7a45ce5 Binary files /dev/null and b/src/fonts/Inter18pt-Regular.woff2 differ diff --git a/src/fonts/Inter_18pt-Bold.woff2 b/src/fonts/Inter_18pt-Bold.woff2 new file mode 100644 index 000000000..32ab0a139 Binary files /dev/null and b/src/fonts/Inter_18pt-Bold.woff2 differ diff --git a/src/fonts/Inter_18pt-Medium.woff2 b/src/fonts/Inter_18pt-Medium.woff2 new file mode 100644 index 000000000..78d954f48 Binary files /dev/null and b/src/fonts/Inter_18pt-Medium.woff2 differ diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff deleted file mode 100755 index 8aa07d731..000000000 Binary files a/src/fonts/Roboto-Regular-webfont.woff and /dev/null differ diff --git a/src/images/bakerlab-logo-dark.svg b/src/images/bakerlab-logo-dark.svg new file mode 100644 index 000000000..733596f1f --- /dev/null +++ b/src/images/bakerlab-logo-dark.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/bakerlab-logo-light.svg b/src/images/bakerlab-logo-light.svg new file mode 100644 index 000000000..4eb4c54f3 --- /dev/null +++ b/src/images/bakerlab-logo-light.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/crumbs.png b/src/images/crumbs.png new file mode 100644 index 000000000..b314081aa Binary files /dev/null and b/src/images/crumbs.png differ diff --git a/src/images/donut-coconut.png b/src/images/donut-coconut.png new file mode 100644 index 000000000..8db1a4db0 Binary files /dev/null and b/src/images/donut-coconut.png differ diff --git a/src/images/donuts-cinammon.png b/src/images/donuts-cinammon.png new file mode 100644 index 000000000..850058ffc Binary files /dev/null and b/src/images/donuts-cinammon.png differ diff --git a/src/images/icons/icon-arrow.svg b/src/images/icons/icon-arrow.svg new file mode 100644 index 000000000..a1bd54079 --- /dev/null +++ b/src/images/icons/icon-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-close.svg b/src/images/icons/icon-close.svg new file mode 100644 index 000000000..866686fd3 --- /dev/null +++ b/src/images/icons/icon-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-cookie-active.svg b/src/images/icons/icon-cookie-active.svg new file mode 100644 index 000000000..abda195d1 --- /dev/null +++ b/src/images/icons/icon-cookie-active.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-cookie.svg b/src/images/icons/icon-cookie.svg new file mode 100644 index 000000000..992115b32 --- /dev/null +++ b/src/images/icons/icon-cookie.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-facebook-active.svg b/src/images/icons/icon-facebook-active.svg new file mode 100644 index 000000000..5acf2f0c8 --- /dev/null +++ b/src/images/icons/icon-facebook-active.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-facebook.svg b/src/images/icons/icon-facebook.svg new file mode 100644 index 000000000..93b3835e8 --- /dev/null +++ b/src/images/icons/icon-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-favicon.svg b/src/images/icons/icon-favicon.svg new file mode 100644 index 000000000..5fe88444b --- /dev/null +++ b/src/images/icons/icon-favicon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/icons/icon-instagram-active.svg b/src/images/icons/icon-instagram-active.svg new file mode 100644 index 000000000..e7b754a2a --- /dev/null +++ b/src/images/icons/icon-instagram-active.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-instagram.svg b/src/images/icons/icon-instagram.svg new file mode 100644 index 000000000..a94faeecf --- /dev/null +++ b/src/images/icons/icon-instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-menu.svg b/src/images/icons/icon-menu.svg new file mode 100644 index 000000000..2b82cbfa5 --- /dev/null +++ b/src/images/icons/icon-menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-phone.svg b/src/images/icons/icon-phone.svg new file mode 100644 index 000000000..39b157356 --- /dev/null +++ b/src/images/icons/icon-phone.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-twitter-active.svg b/src/images/icons/icon-twitter-active.svg new file mode 100644 index 000000000..6fa6118b0 --- /dev/null +++ b/src/images/icons/icon-twitter-active.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-twitter.svg b/src/images/icons/icon-twitter.svg new file mode 100644 index 000000000..097a19058 --- /dev/null +++ b/src/images/icons/icon-twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/oatmeal-cookies.png b/src/images/oatmeal-cookies.png new file mode 100644 index 000000000..c3545936c Binary files /dev/null and b/src/images/oatmeal-cookies.png differ diff --git a/src/images/orange-cake.png b/src/images/orange-cake.png new file mode 100644 index 000000000..1f29e4091 Binary files /dev/null and b/src/images/orange-cake.png differ diff --git a/src/images/salted-caramel-cake.png b/src/images/salted-caramel-cake.png new file mode 100644 index 000000000..1c654cf47 Binary files /dev/null and b/src/images/salted-caramel-cake.png differ diff --git "a/src/images/\321\201hocolate\342\200\223coffee-cake.png" "b/src/images/\321\201hocolate\342\200\223coffee-cake.png" new file mode 100644 index 000000000..0798eff48 Binary files /dev/null and "b/src/images/\321\201hocolate\342\200\223coffee-cake.png" differ diff --git "a/src/images/\321\201ookie.png" "b/src/images/\321\201ookie.png" new file mode 100644 index 000000000..d6817b2d3 Binary files /dev/null and "b/src/images/\321\201ookie.png" differ diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd5400..e1c0f97e4 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,22 @@ @font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; + font-family: Inter; + src: + url('../fonts/Inter18pt-Regular.woff2') format('woff2'), + url('../fonts/Inter18pt-Regular.woff') format('woff'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: Inter; + src: url('../fonts/Inter_18pt-Medium.woff2') format('woff2'); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: Inter; + src: url('../fonts/Inter_18pt-Bold.woff2') format('woff2'); + font-weight: 700; font-style: normal; } diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index 3280c3fe1..1216b6c46 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,4 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; +@import './utils/reset'; +@import './utils/vars'; +@import './utils/mixins'; +@import './utils/extends'; diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 000000000..1214c92c3 --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,86 @@ +.about-us { + background-image: url(../images/crumbs.png); + background-repeat: no-repeat; + background-position: center 75%; + background-size: contain; + + @include on-tablet { + background-size: 75%; + } + + @include on-desktop { + padding-bottom: 293px; + background-size: contain; + background-position: 75% center; + } + + &__wrapper { + display: grid; + grid-template-columns: 1fr; + + @include on-tablet { + @include grid-8-columns; + } + } + + &__title { + margin: 0; + font-size: 48px; + color: $accent-color; + margin-bottom: 32px; + @extend %title-large; + + @include on-tablet { + font-size: 56px; + margin-bottom: 0; + grid-column: span 4; + } + + @include on-desktop { + font-size: 72px; + } + } + + &__description { + margin: 0; + margin-bottom: 64px; + + @include on-tablet { + grid-column: span 4; + margin-bottom: 72px; + } + + @include on-desktop { + margin-bottom: 144px; + } + } + + &__stat { + display: flex; + flex-direction: column; + row-gap: 8px; + margin-bottom: 48px; + &:last-child { + margin-bottom: 0; + } + + @include on-tablet { + grid-column: span 4; + margin-bottom: 0; + &:nth-of-type(-n + 2) { + margin-bottom: 80px; + } + } + + @include on-desktop { + grid-column: span 2; + margin-bottom: 0; + } + } + + &__number { + font-size: 96px; + color: $accent-color; + @extend %title-large; + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 000000000..5a61087e0 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,29 @@ +.button { + position: relative; + width: fit-content; + display: flex; + column-gap: 4px; + align-items: center; + @extend %uppercase-label; + + &::after { + content: ''; + position: absolute; + display: block; + height: 1px; + background-color: $accent-color; + width: 100%; + bottom: 0; + transform: scale(0); + transition: transform $effect-duration; + } + + &:hover::after { + transform-origin: left; + transform: scale(1); + } + + &__text { + color: $accent-color; + } +} diff --git a/src/styles/blocks/contact-link.scss b/src/styles/blocks/contact-link.scss new file mode 100644 index 000000000..6a2cda0aa --- /dev/null +++ b/src/styles/blocks/contact-link.scss @@ -0,0 +1,14 @@ +.contact-link { + display: flex; + color: $accent-color; + text-transform: uppercase; + align-items: center; + column-gap: 4px; + position: relative; + + &:hover { + .icon--phone { + transform: scale(1.3); + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..9142da311 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,137 @@ +.footer { + background-color: $main-text-color; + padding-block: 56px; + + @include on-tablet { + padding-block: 88px; + } + + &__wrapper { + display: grid; + grid-template-columns: 1fr; + row-gap: 40px; + + @include on-tablet { + @include grid-8-columns; + } + } + + &__nav { + margin-bottom: 24px; + + @include on-tablet { + grid-column: 1 / 5; + grid-row: 2 / 4; + margin-bottom: 0; + } + + @include on-desktop { + grid-column: 1 / 3; + grid-row: 2; + margin-bottom: 8px; + } + } + + &__nav-list { + display: flex; + flex-direction: column; + row-gap: 16px; + } + + &__nav-link { + color: $text-color-light; + @include underline($text-color-light); + } + + &__subtitle { + color: $secondary-text-color; + margin-bottom: 16px; + @extend %uppercase-label; + } + + &__title { + color: $text-color-light; + font-size: 48px; + @extend %title-large; + + @include on-tablet { + font-size: 56px; + grid-column: 5 / 9; + grid-row: 1; + } + + @include on-desktop { + font-size: 72px; + } + } + + &__contacts { + @include on-tablet { + grid-column: 5 / 9; + grid-row: 2; + } + + @include on-desktop { + grid-column: 5 / 7; + } + } + + &__phones { + display: flex; + flex-direction: column; + row-gap: 16px; + } + + &__phone, + &__email-link { + color: $text-color-light; + transition: color $effect-duration; + + &:hover { + color: $secondary-text-color; + } + } + + &__email { + @include on-tablet { + grid-column: 5 / 9; + grid-row: 3; + margin-bottom: 8px; + } + + @include on-desktop { + grid-column: 7 / 9; + grid-row: 2; + margin-bottom: 0; + } + } + + &__socials { + display: flex; + column-gap: 32px; + + @include on-tablet { + grid-column: 1 / 5; + grid-row: 4; + } + + @include on-desktop { + grid-column: 1 / 3; + grid-row: 3; + } + } + + &__copyright { + color: $secondary-text-color; + + @include on-tablet { + grid-column: 5 / 9; + grid-row: 4; + } + + @include 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..a03108097 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,29 @@ +.header { + &__inner { + @extend %top-bar-base; + @include on-desktop { + padding: 28px 32px; + } + @include on-desktop { + max-width: 1280px; + margin-inline: auto; + } + } + + &__nav { + display: none; + + @include on-desktop { + display: block; + } + } + + &__nav-list { + display: flex; + column-gap: 64px; + } + + &__nav-link { + @include underline($main-text-color); + } +} diff --git a/src/styles/blocks/hero.scss b/src/styles/blocks/hero.scss new file mode 100644 index 000000000..3e34db9ff --- /dev/null +++ b/src/styles/blocks/hero.scss @@ -0,0 +1,127 @@ +.hero { + &__content { + box-sizing: border-box; + display: grid; + grid-template-columns: 1fr; + padding-block: 32px 40px; + min-height: calc(100vh - $header-height-mobile); + + @include on-tablet { + @include grid-8-columns; + + padding-block: 80px 0; + grid-template-rows: auto auto auto; + align-content: start; + } + + @include on-desktop { + min-height: calc(100vh - $header-height-desktop); + padding-block: 0; + grid-template-rows: 1fr auto 1fr; + } + } + + &__description { + margin-bottom: 32px; + text-align: center; + + @include on-tablet { + text-align: left; + grid-column: 1 / 5; + grid-row: 1; + margin-bottom: 16px; + } + + @include on-desktop { + grid-row: 1; + grid-column: 1 / 3; + align-self: end; + margin-bottom: 8px; + } + } + + &__title { + font-size: 64px; + color: $accent-color; + text-align: center; + @extend %title-large; + + @include on-tablet { + font-size: 80px; + grid-column: 1 / -1; + grid-row: 2; + align-self: center; + } + + @include on-desktop { + font-size: 136px; + grid-row: 2; + } + } + + &__img { + width: 100%; + max-width: 288px; + justify-self: center; + + @include on-tablet { + max-width: 326px; + z-index: -1; + grid-row: 2; + grid-column: 3 / 7; + } + + @include on-desktop { + max-width: 544px; + grid-row: 1 / -1; + grid-column: 3 / 7; + align-self: center; + } + } + + &__link { + display: flex; + place-self: start center; + justify-content: center; + align-items: center; + column-gap: 4px; + color: $accent-color; + border: 2px solid $accent-color; + border-radius: 32px; + padding-block: 16px; + width: 100%; + max-width: 288px; + @extend %uppercase-label; + + &:hover { + background-color: $accent-color; + color: $text-color-light; + .icon--cookie { + background-image: url(../images/icons/icon-cookie-active.svg); + } + } + + &:focus { + outline: none; + background-color: $accent-color-dark; + color: $text-color-light; + border-color: $accent-color-dark; + .icon--cookie { + background-image: url(../images/icons/icon-cookie-active.svg); + } + } + + @include on-tablet { + grid-column: 3 / 7; + grid-row: 3; + max-width: 326px; + margin-top: 80px; + } + + @include on-desktop { + grid-column: 1 / 3; + grid-row: 3; + margin-top: 64px; + } + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 000000000..c7133f692 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,60 @@ +.icon { + display: block; + height: 24px; + width: 24px; + background-repeat: no-repeat; + background-size: contain; + transition: transform $effect-duration; + + &--phone { + background-image: url(../images/icons/icon-phone.svg); + } + + &--menu { + background-image: url(../images/icons/icon-menu.svg); + + @include scale-hover(1.2); + + @include on-desktop { + display: none; + } + } + + &--close { + background-image: url(../images/icons/icon-close.svg); + + @include scale-hover(1.2); + } + + &--cookie { + background-image: url(../images/icons/icon-cookie.svg); + } + + &--arrow { + background-image: url(../images/icons/icon-arrow.svg); + } + + &--instagram { + background-image: url(../images/icons/icon-instagram.svg); + + &:hover { + background-image: url(../images/icons/icon-instagram-active.svg); + } + } + + &--facebook { + background-image: url(../images/icons/icon-facebook.svg); + + &:hover { + background-image: url(../images/icons/icon-facebook-active.svg); + } + } + + &--twitter { + background-image: url(../images/icons/icon-twitter.svg); + + &:hover { + background-image: url(../images/icons/icon-twitter-active.svg); + } + } +} diff --git a/src/styles/blocks/item.scss b/src/styles/blocks/item.scss new file mode 100644 index 000000000..71b8a0a03 --- /dev/null +++ b/src/styles/blocks/item.scss @@ -0,0 +1,33 @@ +.item { + &__img { + width: 100%; + border-radius: 8px; + margin-bottom: 16px; + transition: transform $effect-duration; + } + + &__link { + display: block; + overflow: hidden; + &:hover { + .item__img { + transform: scale(1.03); + } + .icon--arrow { + transform: translateX(3px); + } + } + } + + &__title { + color: $secondary-text-color; + font-size: 16px; + margin-bottom: 8px; + @extend %uppercase-label; + } + + &__description { + color: $main-text-color; + margin-bottom: 16px; + } +} diff --git a/src/styles/blocks/logo.scss b/src/styles/blocks/logo.scss new file mode 100644 index 000000000..acc83e169 --- /dev/null +++ b/src/styles/blocks/logo.scss @@ -0,0 +1,22 @@ +.logo { + display: flex; + + @include on-tablet { + grid-row: 1; + grid-column: 1 / 3; + } + + &__img { + transition: transform $effect-duration; + + @include scale-hover(1.1); + } + + &__img--light { + height: 32px; + } + + &__img--dark { + height: 40px; + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 000000000..71f9464c4 --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,37 @@ +.main { + &__hero { + margin-bottom: 64px; + + @include on-tablet { + margin-bottom: 0; + } + + @include on-desktop { + margin-bottom: 152px; + } + } + + &__products { + margin-bottom: 72px; + + @include on-tablet { + margin-bottom: 152px; + } + + @include on-desktop { + margin-bottom: 178px; + } + } + + &__about-us { + margin-bottom: 72px; + + @include on-tablet { + margin-bottom: 152px; + } + + @include on-desktop { + margin-bottom: 56px; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..25329de38 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,25 @@ +.menu { + height: 100vh; + background-color: $background-color; + overflow: auto; + + &__top-bar { + position: sticky; + top: 0; + z-index: 1; + margin-bottom: 132px; + @extend %top-bar-base; + } + + &__nav-list { + display: flex; + flex-direction: column; + gap: 24px; + align-items: center; + padding-inline: $layout-inline-offset-mobile; + } + + &__nav-link { + @include underline($main-text-color); + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..c8e88a44c --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,35 @@ +.page { + font-family: Inter, sans-serif; + font-size: 16px; + color: $main-text-color; + scroll-behavior: smooth; + line-height: 1.5; + letter-spacing: -0.01em; + + &:has(.page__menu:target) { + overflow: hidden; + } + + &__body { + background-color: $background-color; + min-width: 320px; + margin: 0; + } + + &__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + transform: translateX(-100%); + opacity: 0; + pointer-events: none; + transition: all $effect-duration; + + &:target { + transform: translateX(0); + opacity: 1; + pointer-events: all; + } + } +} diff --git a/src/styles/blocks/products.scss b/src/styles/blocks/products.scss new file mode 100644 index 000000000..fdc1a4a12 --- /dev/null +++ b/src/styles/blocks/products.scss @@ -0,0 +1,58 @@ +.products { + &__title { + font-size: 48px; + color: $accent-color; + margin-bottom: 24px; + @extend %title-large; + + @include on-tablet { + font-size: 56px; + } + + @include on-desktop { + font-size: 72px; + } + } + + &__description { + margin-bottom: 56px; + + @include on-tablet { + margin-bottom: 80px; + } + } + + &__items { + display: grid; + row-gap: 56px; + grid-template-columns: 1fr; + + @include on-tablet { + @include grid-8-columns; + } + } + + &__item { + justify-self: center; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + grid-column: span 3; + } + + &--center-left { + @include on-desktop { + grid-column: 3 / 6; + } + } + + &--center-right { + @include on-desktop { + grid-column: 6 / 9; + } + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..031799288 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,22 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} + @import 'utils'; @import 'fonts'; +@import 'blocks/page'; @import 'typography'; - -body { - background: $c-gray; -} +@import 'blocks/header'; +@import 'blocks/icon'; +@import 'blocks/logo'; +@import 'blocks/menu'; +@import 'blocks/contact-link'; +@import 'blocks/main'; +@import 'blocks/hero'; +@import 'blocks/products'; +@import 'blocks/item'; +@import 'blocks/button'; +@import 'blocks/about-us'; +@import 'blocks/footer'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..17771a8b0 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,25 @@ %h1 { - font-family: Roboto, sans-serif; + font-family: Inter, sans-serif; font-weight: 400; } + +%top-bar-base { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px; +} + +%title-large { + font-weight: 400; + line-height: 0.85; + letter-spacing: -0.05em; + text-transform: uppercase; +} + +%uppercase-label { + font-weight: 500; + line-height: 1; + letter-spacing: 0.02em; + text-transform: uppercase; +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..e04c2372f 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,68 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; +@mixin hover($property, $toValue) { + transition: #{$property} $effect-duration; &:hover { - #{$_property}: $_toValue; + #{$property}: $toValue; + } +} + +@mixin on-tablet { + @media (min-width: $tablet) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop) { + @content; + } +} + +@mixin content-padding-inline { + padding-inline: $layout-inline-offset-mobile; + + @include on-tablet { + padding-inline: $layout-inline-offset-tablet; + } + + @include on-desktop { + padding-inline: $layout-inline-offset-desktop; + max-width: 1200px; + margin-inline: auto; + } +} + +.container { + @include content-padding-inline; +} + +@mixin grid-8-columns { + grid-template-columns: repeat(8, 1fr); + column-gap: 24px; +} + +@mixin underline($color) { + position: relative; + + &::after { + content: ''; + position: absolute; + display: block; + height: 1px; + background-color: $color; + width: 100%; + bottom: -5px; + transform: scale(0); + transition: transform $effect-duration; + } + + &:hover::after { + transform-origin: left; + transform: scale(1); + } +} + +@mixin scale-hover($scale) { + &:hover { + transform: scale($scale); } } diff --git a/src/styles/utils/_reset.scss b/src/styles/utils/_reset.scss new file mode 100644 index 000000000..63c3b90da --- /dev/null +++ b/src/styles/utils/_reset.scss @@ -0,0 +1,20 @@ +h1, +h2, +h3, +h4, +h5, +h6, +p, +ul { + margin: 0; +} + +ul { + padding: 0; + list-style: none; +} + +a { + color: inherit; + text-decoration: none; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..03dde95d8 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,14 @@ -$c-gray: #eee; +$background-color: #ffeefc; +$main-text-color: #1c1a26; +$accent-color: #f9512e; +$secondary-text-color: #7f8096; +$text-color-light: #fff; +$accent-color-dark: #b2341a; +$tablet: 640px; +$desktop: 1280px; +$layout-inline-offset-mobile: 16px; +$layout-inline-offset-tablet: 44px; +$layout-inline-offset-desktop: 44px; +$effect-duration: 0.3s; +$header-height-mobile: 64px; +$header-height-desktop: 88px;