diff --git a/index.html b/index.html index 06bcd7773a..8f5e57da9e 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,11 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Miami + Bose | Headphones, speakers + -

Miami

+
+ + +
+
+ +

+ The world shades. + Your music shines. +

+
+
+

Recommended

+
+
+ bose portable smart speaker +

Bose portable Smart speaker

+

Smart home

+

$ 149.00

+
+
+ soundlink flex bluetooth speaker +

+ SoundLink Flex Bluetooth speaker +

+

Portable bluetooth

+

$ 149.00

+
+
+ soundlink color bluetooth speaker +

+ SoundLink Color Bluetooth speaker II +

+

Portable bluetooth

+

$ 129.00

+
+
+
+
+

+ Browse Bose products by +
+ category +

+
+ +
+ + +
+

Headphones & earbuds

+ + +
+ + +
+

Speakers

+ + +
+ + +
+

Audio sunglasses

+ +
+ + View all + +
+
+

+ Why buy direct +
+ from Bose +

+
+
    +
  • Free 2-day shipping and returns
    • +
  • 90-day risk-free trial
    • +
  • World class customer service
    • +
  • My Bose account management
    • +
+

+ A great product is more than what’s in the box. It’s a promise of + premium performance, world-class support, and everything you + expect from a trusted brand. It’s just one of many reasons why + you’ll shop with confidence on Bose.com. +

+
+
+
+

Contact us

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

Phone

+ + +1 234 5555-55-55 + +
+
+

Email

+ + hello@miami.com + +
+
+

Address

+ + 400 first ave. +
+ suite 700 +
+ Minneapolis, MN 55401 + +
+
+
+
+ +
+
diff --git a/src/blocks/_base.scss b/src/blocks/_base.scss new file mode 100644 index 0000000000..cc1c72cc48 --- /dev/null +++ b/src/blocks/_base.scss @@ -0,0 +1,3 @@ +html { + scroll-behavior: smooth; +} diff --git a/src/blocks/_benefits.scss b/src/blocks/_benefits.scss new file mode 100644 index 0000000000..ba9a96426c --- /dev/null +++ b/src/blocks/_benefits.scss @@ -0,0 +1,43 @@ +@use '../styles/utils/' as *; + +.benefits { + display: grid; + gap: 32px; + + .title { + text-align: left; + } + + &__content { + display: grid; + gap: 40px; + } + + &__list { + display: flex; + flex-direction: column; + gap: 16px; + list-style: none; + padding-left: 0; + } + + &__item { + font-family: Inter, sans-serif; + font-weight: $font-weight-bold; + font-size: $font-size-base; + line-height: 1.4; + color: #292929; + } + + &__text { + font-family: Inter, sans-serif; + font-weight: $font-weight-regular; + font-size: $font-size-base; + line-height: 27px; + max-width: 40ch; + } + + @include respond-up(744px) { + grid-template-columns: repeat(2, 1fr); + } +} diff --git a/src/blocks/_button.scss b/src/blocks/_button.scss new file mode 100644 index 0000000000..17cca4e8e4 --- /dev/null +++ b/src/blocks/_button.scss @@ -0,0 +1,33 @@ +@use '../styles/utils/' as *; + +.button { + box-sizing: border-box; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + padding: 16px 48px; + border-radius: 40px; + background-color: black; + color: white; + margin-inline: auto; + + font-family: Inter, sans-serif; + font-weight: $font-weight-bold; + font-size: $font-size-base; + line-height: 1.4; + text-decoration: none; + border: 3px solid transparent; + + &:hover { + background-color: #fff; + color: #292929; + border-color: #292929; + } + + &:active { + background-color: black; + color: white; + border-color: transparent; + } +} diff --git a/src/blocks/_category-card.scss b/src/blocks/_category-card.scss new file mode 100644 index 0000000000..e74f39d981 --- /dev/null +++ b/src/blocks/_category-card.scss @@ -0,0 +1,70 @@ +@use '../styles/utils/' as *; + +.category-card { + display: block; + text-decoration: none; + color: #000; + + &__images { + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 20px; + overflow: hidden; + } + + &__image { + width: 100%; + aspect-ratio: 1 / 1; + object-fit: cover; + display: block; + transition: transform 0.3s; + + &:hover { + transform: scale(1.05); + } + } + + &--offset-left .category-card__image:first-child { + object-position: 75% 50%; + } + + &--offset-right .category-card__image:last-child { + object-position: 93% 50%; + } + + &__title { + font-family: Inter, sans-serif; + font-weight: $font-weight-bold; + font-size: $font-size-base; + line-height: 1.4; + margin-top: 16px; + } + + @include respond-up(744px) { + &__images { + grid-template-columns: 2fr 1fr; + } + + &__image:first-child { + aspect-ratio: 2 / 1; + } + + &__title { + font-size: $font-size-lg; + } + + &--reverse-grid { + .category-card__images { + grid-template-columns: 1fr 2fr; + } + + .category-card__image:first-child { + aspect-ratio: 1 / 1; + } + + .category-card__image:last-child { + aspect-ratio: 2 / 1; + } + } + } +} diff --git a/src/blocks/_category.scss b/src/blocks/_category.scss new file mode 100644 index 0000000000..6f7dc1a151 --- /dev/null +++ b/src/blocks/_category.scss @@ -0,0 +1,9 @@ +.category { + &__list { + margin-top: 48px; + margin-bottom: 40px; + display: flex; + flex-direction: column; + gap: 40px; + } +} diff --git a/src/blocks/_contact.scss b/src/blocks/_contact.scss new file mode 100644 index 0000000000..32b6eb7b7e --- /dev/null +++ b/src/blocks/_contact.scss @@ -0,0 +1,60 @@ +@use '../styles/utils/' as *; + +.contact { + display: grid; + gap: 48px; + + &__content { + display: grid; + gap: 48px; + + @include respond-up(744px) { + grid-template-columns: repeat(2, 1fr); + gap: 24px; + } + + @include respond-up(1260px) { + grid-template-columns: repeat(2, 1fr); + gap: 198px; + } + } + + &__info { + display: grid; + gap: 24px; + align-self: start; + font-style: normal; + } + + &__item { + display: grid; + gap: 8px; + } + + &__label { + font-family: Inter, sans-serif; + font-weight: $font-weight-regular; + font-size: $font-size-sm; + line-height: 1.4; + color: #9fadc2; + } + + &__address { + cursor: pointer; + } + + &__link, + &__address { + font-family: Inter, sans-serif; + font-weight: $font-weight-regular; + font-size: $font-size-base; + line-height: 1.4; + text-decoration: none; + color: #3e3e3e; + } + + &__link:hover, + &__address:hover { + color: #00aaef; + } +} diff --git a/src/blocks/_footer.scss b/src/blocks/_footer.scss new file mode 100644 index 0000000000..809f5457bb --- /dev/null +++ b/src/blocks/_footer.scss @@ -0,0 +1,24 @@ +@use '../styles/utils' as *; + +.footer { + &__image { + display: block; + width: 100%; + min-height: 250px; + object-fit: cover; + object-position: center; + } + + @include respond-up(744px) { + &__image { + min-height: 400px; + object-position: top; + } + } + + @include respond-up(1260px) { + &__image { + height: 460px; + } + } +} diff --git a/src/blocks/_form-contact.scss b/src/blocks/_form-contact.scss new file mode 100644 index 0000000000..c1f114eb99 --- /dev/null +++ b/src/blocks/_form-contact.scss @@ -0,0 +1,42 @@ +@use '../styles/utils' as *; + +.form-contact { + display: grid; + gap: 16px; + + font-family: Inter, sans-serif; + font-weight: $font-weight-regular; + font-size: $font-size-sm; + line-height: 20px; + + &__label { + &:not(:focus, :active) { + @include visually-hidden; + } + } + + &__input, + &__textarea { + width: 100%; + background-color: #f8f8fa; + color: #7e7e83; + border-style: none; + } + + &__input { + padding-block: 14px; + padding-inline: 16px; + border-radius: 40px; + } + + &__textarea { + padding: 10px; + border-radius: 16px; + min-height: 148px; + } + + &__button { + margin-top: 16px; + cursor: pointer; + } +} diff --git a/src/blocks/_header.scss b/src/blocks/_header.scss new file mode 100644 index 0000000000..cf4fe5797e --- /dev/null +++ b/src/blocks/_header.scss @@ -0,0 +1,113 @@ +@use '../styles/utils/' as *; + +.header { + position: absolute; + top: 0; + left: 0; + right: 0; + display: flex; + align-items: center; + justify-content: space-between; + padding: 24px 20px; + + &__logo { + width: 125px; + } + + &__actions { + display: flex; + gap: 24px; + position: relative; + } + + &__phone-number { + position: absolute; + right: 100%; + white-space: nowrap; + pointer-events: none; + opacity: 0; + transform: translateX(0); + transition: + transform 0.3s, + opacity 0.3s; + + font-family: Inter, sans-serif; + font-weight: $font-weight-bold; + font-size: $font-size-xs; + line-height: 16px; + letter-spacing: 2px; + color: #292929; + } + + &__menu-toggle { + background: none; + padding: 0; + border: none; + + &::before, + &::after { + width: 24px; + height: 24px; + } + + &::before { + content: ''; + background-image: url(../images/menu-icon.svg); + background-size: cover; + display: inline-flex; + } + &::after { + content: ''; + background-image: url(../images/menu-hover-icon.svg); + background-size: cover; + display: none; + } + } + + @include respond-up(744px) { + padding-block: 36px; + padding-inline: 72px; + + &__logo { + width: 188px; + } + + &__actions { + gap: 32px; + } + + &__menu-toggle { + &::before, + &::after { + width: 32px; + height: 32px; + } + } + + &__call-icon, + &__menu-icon, + &__menu-icon-hover { + width: 32px; + } + + @include respond-up(1260px) { + padding-inline: 120px; + + &__call { + &:hover .header__phone-number { + transform: translateX(-10px); + opacity: 1; + } + } + + &__menu-toggle:hover { + &::before { + display: none; + } + &::after { + display: inline-flex; + } + } + } + } +} diff --git a/src/blocks/_hero.scss b/src/blocks/_hero.scss new file mode 100644 index 0000000000..43386be5d1 --- /dev/null +++ b/src/blocks/_hero.scss @@ -0,0 +1,30 @@ +@use '../styles/utils/' as *; + +.hero { + height: 100vh; + background-image: url(../images/woman-listening-to-music.jpg); + background-size: cover; + background-position: center; + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: flex-start; + gap: 16px; + padding-inline: 20px; + padding-bottom: 40px; + + @include respond-up(744px) { + padding-inline: 72px; + padding-bottom: 64px; + background-position: 50% 60%; + + &__sound-waves-pic { + width: 63px; + height: 76px; + } + } + + @include respond-up(1260px) { + padding-inline: 120px; + } +} diff --git a/src/blocks/_index.scss b/src/blocks/_index.scss new file mode 100644 index 0000000000..407896ba13 --- /dev/null +++ b/src/blocks/_index.scss @@ -0,0 +1,16 @@ +@forward 'base'; +@forward 'page-content'; +@forward 'header'; +@forward 'navigation'; +@forward 'hero'; +@forward 'section'; +@forward 'title'; +@forward 'recommended'; +@forward 'product-card'; +@forward 'category'; +@forward 'category-card'; +@forward 'button'; +@forward 'benefits'; +@forward 'contact'; +@forward 'form-contact'; +@forward 'footer'; diff --git a/src/blocks/_navigation.scss b/src/blocks/_navigation.scss new file mode 100644 index 0000000000..b0f8ed25ac --- /dev/null +++ b/src/blocks/_navigation.scss @@ -0,0 +1,141 @@ +@use '../styles/utils' as *; + +.navigation { + position: fixed; + inset: 0; + min-height: 100vh; + z-index: 1; + background-color: #e8eff9; + padding-block: 28px; + padding-inline: 20px; + transform: translateX(-100%); + transition: transform 0.3s ease; + + display: flex; + flex-direction: column; + gap: 32px; + + &:target { + transform: translateX(0); + } + + &__actions-wrapper { + display: flex; + justify-content: space-between; + align-items: center; + } + + &__logo-img { + width: 125px; + } + + &__list { + padding-left: 0; + display: grid; + gap: 24px; + list-style: none; + + font-family: Inter, sans-serif; + font-weight: $font-weight-bold; + font-size: $font-size-md; + line-height: 1; + letter-spacing: 2px; + text-transform: uppercase; + } + + &__link { + display: inline-grid; + &::after { + content: ''; + display: block; + height: 1px; + margin-top: 8px; + background-color: #292929; + opacity: 0; + } + } + + &__link, + &__phone, + &__order-link { + text-decoration: none; + color: #292929; + } + + &__order-info { + display: grid; + gap: 16px; + justify-items: start; + } + + &__phone { + font-family: Inter, sans-serif; + font-weight: $font-weight-bold; + font-size: $font-size-base; + line-height: 27px; + vertical-align: middle; + } + + &__order-link { + display: inline-block; + font-family: Inter, sans-serif; + font-weight: $font-weight-bold; + font-size: $font-size-xs; + line-height: 16px; + letter-spacing: 2px; + vertical-align: middle; + text-transform: uppercase; + &::after { + content: ''; + display: block; + height: 1px; + margin-top: 8px; + background-color: #292929; + } + } + + @include respond-up(744px) { + padding-block: 36px; + padding-inline: 72px; + + &__logo-img { + width: 190px; + } + + &__close-icon { + width: 32px; + } + + &__link:hover { + &::after { + opacity: 1; + } + } + } + + @include respond-up(744px) { + padding-block: 36px; + padding-inline: 72px; + gap: 56px; + &__logo-img { + width: 190px; + } + + &__close-icon { + width: 32px; + } + + &__order-info { + margin-top: -16px; + } + } + + @include respond-up(1260px) { + padding-inline: 120px; + &__link:hover { + &::after { + opacity: 1; + } + } + } +} diff --git a/src/blocks/_page-content.scss b/src/blocks/_page-content.scss new file mode 100644 index 0000000000..1cac852e75 --- /dev/null +++ b/src/blocks/_page-content.scss @@ -0,0 +1,3 @@ +.page-content { + position: relative; +} diff --git a/src/blocks/_product-card.scss b/src/blocks/_product-card.scss new file mode 100644 index 0000000000..453c28fbe1 --- /dev/null +++ b/src/blocks/_product-card.scss @@ -0,0 +1,41 @@ +@use '../styles/utils/' as *; + +.product-card { + width: 100%; + max-width: 280px; + + &__title { + font-family: Inter, sans-serif; + font-weight: $font-weight-bold; + font-size: $font-size-base; + line-height: 140%; + letter-spacing: 0; + margin-top: 32px; + } + + &__type { + font-family: Inter, sans-serif; + font-weight: $font-weight-regular; + font-size: $font-size-base; + line-height: 140%; + letter-spacing: 0; + margin-top: 8px; + } + + &__price { + font-family: Inter, sans-serif; + font-weight: $font-weight-bold; + font-size: $font-size-base; + line-height: 140%; + letter-spacing: 0; + margin-top: 12px; + } + + @include respond-up(744px) { + max-width: 392px; + } + + @include respond-up(1260px) { + max-width: 324px; + } +} diff --git a/src/blocks/_recommended.scss b/src/blocks/_recommended.scss new file mode 100644 index 0000000000..edc00126cf --- /dev/null +++ b/src/blocks/_recommended.scss @@ -0,0 +1,25 @@ +@use '../styles/utils/' as *; + +.recommended { + display: flex; + flex-direction: column; + align-items: center; + gap: 48px; + + &__cards { + display: flex; + flex-direction: column; + gap: 40px; + } + + @include respond-up(744px) { + gap: 64px; + } + + @include respond-up(1260px) { + &__cards { + display: grid; + grid-template-columns: repeat(3, 1fr); + } + } +} diff --git a/src/blocks/_section.scss b/src/blocks/_section.scss new file mode 100644 index 0000000000..263af6aa1c --- /dev/null +++ b/src/blocks/_section.scss @@ -0,0 +1,31 @@ +@use '../styles/utils/' as *; + +.section { + padding-top: 96px; + padding-inline: 20px; + + &--first { + padding-top: 64px; + } + + &--last { + padding-inline: 0; + } + + @include respond-up(744px) { + padding-top: 120px; + padding-inline: 72px; + + &--last { + padding-inline: 0; + } + } + + @include respond-up(1260px) { + padding-inline: 120px; + + &--last { + padding-inline: 0; + } + } +} diff --git a/src/blocks/_title.scss b/src/blocks/_title.scss new file mode 100644 index 0000000000..a67b23c13f --- /dev/null +++ b/src/blocks/_title.scss @@ -0,0 +1,34 @@ +@use '../styles/utils/' as *; + +.title { + font-family: Inter, sans-serif; + font-weight: 800; + font-style: Italic; + font-size: $font-size-xl; + line-height: 1; + letter-spacing: -1.5px; + vertical-align: middle; + + &__line { + display: flex; + flex-direction: column; + } + + &--secondary { + font-family: Inter, sans-serif; + font-weight: $font-weight-bold; + font-style: normal; + font-size: $font-size-xl; + line-height: 1; + letter-spacing: -1.5px; + text-align: center; + } + + @include respond-up(744px) { + font-size: $font-size-2xl; + } + + @include respond-up(1260px) { + font-size: $font-size-3xl; + } +} diff --git a/src/images/bose-logo-icon.svg b/src/images/bose-logo-icon.svg new file mode 100644 index 0000000000..85ff9d7c1c --- /dev/null +++ b/src/images/bose-logo-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/call-icon.svg b/src/images/call-icon.svg new file mode 100644 index 0000000000..0d66c9f71e --- /dev/null +++ b/src/images/call-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/close-menu-icon.svg b/src/images/close-menu-icon.svg new file mode 100644 index 0000000000..8590db1515 --- /dev/null +++ b/src/images/close-menu-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/cross.svg b/src/images/cross.svg deleted file mode 100644 index 08f1f27cea..0000000000 --- a/src/images/cross.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/crown.svg b/src/images/crown.svg deleted file mode 100644 index 962d90e9ca..0000000000 --- a/src/images/crown.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/favicon.ico b/src/images/favicon.ico new file mode 100644 index 0000000000..5233b87aa8 Binary files /dev/null and b/src/images/favicon.ico differ diff --git a/src/images/favicon.png b/src/images/favicon.png deleted file mode 100644 index 0e04c361e1..0000000000 Binary files a/src/images/favicon.png and /dev/null differ diff --git a/src/images/logo.png b/src/images/logo.png deleted file mode 100644 index 9b6a4dd7d4..0000000000 Binary files a/src/images/logo.png and /dev/null differ diff --git a/src/images/menu-hover-icon.svg b/src/images/menu-hover-icon.svg new file mode 100644 index 0000000000..d69ca09050 --- /dev/null +++ b/src/images/menu-hover-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/menu-icon.svg b/src/images/menu-icon.svg new file mode 100644 index 0000000000..f8b47d8168 --- /dev/null +++ b/src/images/menu-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/menu.svg b/src/images/menu.svg deleted file mode 100644 index 5d6b5a0b38..0000000000 --- a/src/images/menu.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/menu_hover.svg b/src/images/menu_hover.svg deleted file mode 100644 index 39263b75bc..0000000000 --- a/src/images/menu_hover.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/phone.svg b/src/images/phone.svg deleted file mode 100644 index 0c2c52cb54..0000000000 --- a/src/images/phone.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/photos/1.jpg b/src/images/photos/1.jpg deleted file mode 100644 index f796f55605..0000000000 Binary files a/src/images/photos/1.jpg and /dev/null differ diff --git a/src/images/photos/2.jpg b/src/images/photos/2.jpg deleted file mode 100644 index d9053b6a20..0000000000 Binary files a/src/images/photos/2.jpg and /dev/null differ diff --git a/src/images/photos/3.jpg b/src/images/photos/3.jpg deleted file mode 100644 index 5e40be94d2..0000000000 Binary files a/src/images/photos/3.jpg and /dev/null differ diff --git a/src/images/photos/4.jpg b/src/images/photos/4.jpg deleted file mode 100644 index de64313343..0000000000 Binary files a/src/images/photos/4.jpg and /dev/null differ diff --git a/src/images/photos/5.jpg b/src/images/photos/5.jpg deleted file mode 100644 index aad06bff54..0000000000 Binary files a/src/images/photos/5.jpg and /dev/null differ diff --git a/src/images/photos/6.jpg b/src/images/photos/6.jpg deleted file mode 100644 index 104ff18faa..0000000000 Binary files a/src/images/photos/6.jpg and /dev/null differ diff --git a/src/images/picture-1.jpg b/src/images/picture-1.jpg new file mode 100644 index 0000000000..4219d2149f Binary files /dev/null and b/src/images/picture-1.jpg differ diff --git a/src/images/picture-2.jpg b/src/images/picture-2.jpg new file mode 100644 index 0000000000..a9bd11b262 Binary files /dev/null and b/src/images/picture-2.jpg differ diff --git a/src/images/picture-3.jpg b/src/images/picture-3.jpg new file mode 100644 index 0000000000..5e1c50b039 Binary files /dev/null and b/src/images/picture-3.jpg differ diff --git a/src/images/picture-4.jpg b/src/images/picture-4.jpg new file mode 100644 index 0000000000..e70b1207ff Binary files /dev/null and b/src/images/picture-4.jpg differ diff --git a/src/images/picture-5.jpg b/src/images/picture-5.jpg new file mode 100644 index 0000000000..dbcd9cec42 Binary files /dev/null and b/src/images/picture-5.jpg differ diff --git a/src/images/picture-6.jpg b/src/images/picture-6.jpg new file mode 100644 index 0000000000..b96fc3a726 Binary files /dev/null and b/src/images/picture-6.jpg differ diff --git a/src/images/portable-smart-speaker.png b/src/images/portable-smart-speaker.png new file mode 100644 index 0000000000..e4d0e94b77 Binary files /dev/null and b/src/images/portable-smart-speaker.png differ diff --git a/src/images/sound-waves.png b/src/images/sound-waves.png new file mode 100644 index 0000000000..da9d1c2bf8 Binary files /dev/null and b/src/images/sound-waves.png differ diff --git a/src/images/soundlink-color-speaker.png b/src/images/soundlink-color-speaker.png new file mode 100644 index 0000000000..70493b40d6 Binary files /dev/null and b/src/images/soundlink-color-speaker.png differ diff --git a/src/images/soundlink-flex-speaker.png b/src/images/soundlink-flex-speaker.png new file mode 100644 index 0000000000..9a18c53923 Binary files /dev/null and b/src/images/soundlink-flex-speaker.png differ diff --git a/src/images/woman-laying-down-and-listening.jpg b/src/images/woman-laying-down-and-listening.jpg new file mode 100644 index 0000000000..62e4ce155e Binary files /dev/null and b/src/images/woman-laying-down-and-listening.jpg differ diff --git a/src/images/woman-listening-to-music.jpg b/src/images/woman-listening-to-music.jpg new file mode 100644 index 0000000000..c5ce29a782 Binary files /dev/null and b/src/images/woman-listening-to-music.jpg differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c1..1265665726 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,15 @@ 'use strict'; +function handleFormSubmit(e) { + e.preventDefault(); +} + +const form = document.querySelector('.form-contact'); +form.addEventListener('submit', handleFormSubmit); + +window.addEventListener('hashchange', () => { + if (window.location.hash === '#menu') { + document.body.classList.add('page-content--with-menu'); + } else { + document.body.classList.remove('page-content--with-menu'); + } +}); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 45cdd54008..0000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb46e2..0000000000 --- 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 3280c3fe10..0000000000 --- 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/main.scss b/src/styles/main.scss index fb9195d128..a51feaa323 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,3 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@use './utils'; +@use '../blocks'; +@import 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'; diff --git a/src/styles/utils/_base.scss b/src/styles/utils/_base.scss new file mode 100644 index 0000000000..7a265d5e97 --- /dev/null +++ b/src/styles/utils/_base.scss @@ -0,0 +1,7 @@ +body { + font-family: Inter, sans-serif; +} + +.page-content--with-menu { + overflow: hidden; +} diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index d7201e7b3e..0000000000 --- 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/_index.scss b/src/styles/utils/_index.scss new file mode 100644 index 0000000000..3613e3a432 --- /dev/null +++ b/src/styles/utils/_index.scss @@ -0,0 +1,5 @@ +@forward 'reset'; +@forward 'mixins'; +@forward 'vars'; +@forward 'base'; +@forward 'typography'; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780dc..9a4755954a 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,19 @@ #{$_property}: $_toValue; } } + +@mixin respond-up($width) { + @media (min-width: $width) { + @content; + } +} + +@mixin visually-hidden() { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} diff --git a/src/styles/utils/_reset.scss b/src/styles/utils/_reset.scss new file mode 100644 index 0000000000..4dd0503ed1 --- /dev/null +++ b/src/styles/utils/_reset.scss @@ -0,0 +1,77 @@ +/* stylelint-disable */ + +/* 1. Use a more-intuitive box-sizing model */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* 2. Remove default margin */ +*:not(dialog) { + margin: 0; +} + +/* 3. Enable keyword animations */ +@media (prefers-reduced-motion: no-preference) { + html { + interpolate-size: allow-keywords; + } +} + +body { + /* 4. Add accessible line-height */ + line-height: 1.5; + /* 5. Improve text rendering */ + -webkit-font-smoothing: antialiased; +} + +/* 6. Improve media defaults */ +img, +picture, +video, +canvas, +svg { + display: block; + max-width: 100%; +} + +/* 7. Inherit fonts for form controls */ +input, +button, +textarea, +select { + font: inherit; +} + +/* 8. Avoid text overflows */ +p, +h1, +h2, +h3, +h4, +h5, +h6 { + overflow-wrap: break-word; +} + +/* 9. Improve line wrapping */ +p { + text-wrap: pretty; +} +h1, +h2, +h3, +h4, +h5, +h6 { + text-wrap: balance; +} + +/* + 10. Create a root stacking context +*/ +#root, +#__next { + isolation: isolate; +} diff --git a/src/styles/utils/_typography.scss b/src/styles/utils/_typography.scss new file mode 100644 index 0000000000..6a080ab99c --- /dev/null +++ b/src/styles/utils/_typography.scss @@ -0,0 +1,11 @@ +$font-family-primary: 'Inter', sans-serif; +$font-weight-regular: 400; +$font-weight-bold: 700; +$font-size-xs: 12px; +$font-size-sm: 14px; +$font-size-base: 16px; +$font-size-md: 22px; +$font-size-lg: 24px; +$font-size-xl: 32px; +$font-size-2xl: 40px; +$font-size-3xl: 48px; diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffbb..eba58c2ca6 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1 @@ -$c-gray: #eee; +/* stylelint-disable */