diff --git a/README.md b/README.md index 5f9e97051..9651147f7 100644 --- a/README.md +++ b/README.md @@ -49,7 +49,7 @@ Check font styles. Use [IBM Plex Sans](https://fonts.google.com/specimen/IBM+Ple 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/Museum/). + [DEMO LINK](https://SerhiyDmytruk.github.io/Museum/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. 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/arrow-right.svg b/src/images/arrow-right.svg new file mode 100644 index 000000000..56ae3496a --- /dev/null +++ b/src/images/arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/bg-subsc.jpg b/src/images/bg-subsc.jpg new file mode 100644 index 000000000..26c1e82da Binary files /dev/null and b/src/images/bg-subsc.jpg differ diff --git a/src/images/close.svg b/src/images/close.svg new file mode 100644 index 000000000..eb8f89a79 --- /dev/null +++ b/src/images/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/facebook.svg b/src/images/facebook.svg new file mode 100644 index 000000000..623a12124 --- /dev/null +++ b/src/images/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/favicon.ico b/src/images/favicon.ico new file mode 100644 index 000000000..7d2664d10 Binary files /dev/null and b/src/images/favicon.ico differ diff --git a/src/images/gal-1.jpg b/src/images/gal-1.jpg new file mode 100644 index 000000000..052734f6c Binary files /dev/null and b/src/images/gal-1.jpg differ diff --git a/src/images/gal-2.jpg b/src/images/gal-2.jpg new file mode 100644 index 000000000..520bfa0bf Binary files /dev/null and b/src/images/gal-2.jpg differ diff --git a/src/images/gal-3.jpg b/src/images/gal-3.jpg new file mode 100644 index 000000000..6b0f9f125 Binary files /dev/null and b/src/images/gal-3.jpg differ diff --git a/src/images/gal-4.jpg b/src/images/gal-4.jpg new file mode 100644 index 000000000..f9e784516 Binary files /dev/null and b/src/images/gal-4.jpg differ diff --git a/src/images/hero.jpg b/src/images/hero.jpg new file mode 100644 index 000000000..6b7c83a20 Binary files /dev/null and b/src/images/hero.jpg differ diff --git a/src/images/img1.jpg b/src/images/img1.jpg new file mode 100644 index 000000000..254b55318 Binary files /dev/null and b/src/images/img1.jpg differ diff --git a/src/images/img2.jpg b/src/images/img2.jpg new file mode 100644 index 000000000..eabc00124 Binary files /dev/null and b/src/images/img2.jpg differ diff --git a/src/images/img3.jpg b/src/images/img3.jpg new file mode 100644 index 000000000..abb826c14 Binary files /dev/null and b/src/images/img3.jpg differ diff --git a/src/images/instagram.svg b/src/images/instagram.svg new file mode 100644 index 000000000..829b27f4e --- /dev/null +++ b/src/images/instagram.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/images/logo.png b/src/images/logo.png new file mode 100644 index 000000000..9d20119c8 Binary files /dev/null and b/src/images/logo.png differ diff --git a/src/images/menu.svg b/src/images/menu.svg new file mode 100644 index 000000000..4808d19e1 --- /dev/null +++ b/src/images/menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/index.html b/src/index.html index 8019b83ec..d862bfe01 100644 --- a/src/index.html +++ b/src/index.html @@ -6,14 +6,499 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Title + Na Mu + + + + -

Hello Mate Academy

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

Графік роботи

+
+ 12:00 — 20:00 + середа + 12:00 — 20:00 + четвер + 12:00 — 20:00 + п’ятниця + 11:00 — 19:00 + субота + 11:00 — 19:00 + неділя +
+
+ Вихідні: + понеділок, вівторок +
+ Каса припиняє роботу за 1 годину до закриття музею +
+
+
+
+ +
+
+
+

Художній музей

+ + + КВИТКИ + + + + + + + + Події +
+ +
+ Hero img +
+
+ +
+

Актуальні події

+ + + + +
+ + + +
+

Галерея

+ +
+
+
+ Gal img 1 +
+
+ Gal img 2 +
+
+ Gal img 3 +
+
+ Gal img 4 +
+
+ +
+
+
+ + + + +
+ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..6a68b5c8e 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,64 @@ 'use strict'; + +// Header +const toggle = document.querySelectorAll('.toggle-action'); +const body = document.body; + +function headerToggle() { + if (body.classList.contains('_menu-open')) { + body.classList.remove('_menu-open'); + } else { + body.classList.add('_menu-open'); + } +} + +toggle.forEach((item) => { + item.addEventListener('click', headerToggle); +}); + +// Scroll btn +const btnTop = document.querySelector('.scroll-top'); + +btnTop.addEventListener('click', scrollTop); + +function scrollTop() { + window.scrollTo({ + top: 0, + behavior: 'smooth', + }); +} + +// Form +const form = document.querySelector('#form'); + +form.addEventListener('submit', (e) => { + e.preventDefault(); + + const email = form.email.value.trim(); + + if (!email) { + return false; + } + + form.email.value = ''; + scrollTop(); +}); + +// Gallery +const gallery = document.querySelector('.gallery__container'); +const dots = document.querySelector('.gallery__dots'); + +[...gallery.children].forEach((_, i) => { + const dot = document.createElement('button'); + + dot.classList.add('gallery__dot'); + + dot.addEventListener('click', () => { + gallery.scrollTo({ + left: gallery.offsetWidth * i, + behavior: 'smooth', + }); + }); + + dots.append(dot); +}); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd5400..5addde233 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,5 @@ @font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); + font-family: $ff-ibm, $ff-monserrat; font-weight: normal; font-style: normal; } diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..cb798a566 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,69 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import 'parts/header'; +@import 'parts/hero'; +@import 'parts/events'; +@import 'parts/gallery'; +@import 'parts/subscribe'; +@import 'parts/footer'; + +html { + scroll-behavior: smooth; +} body { - background: $c-gray; + margin: 0; + padding: 0; +} + +* { + box-sizing: border-box; +} + +.section { + @include container; + + &.section--events, + &.section--banner, + &.section--gallery, + &.section--subscribe { + > * { + grid-column: 1 / -1; + } + } + + &.section--banner { + @include on-desktop { + padding: 0; + max-width: 100%; + } + } + + + &.section--subscribe { + padding: 0; + max-width: 100%; + } +} + +.title-h2 { + font-family: $ff-monserrat; + font-size: 36px; + line-height: 1; + color: $dark-grey; + font-weight: 700; + margin-top: 0; + margin-bottom: 20px; + text-align: center; + + @include on-tablet { + text-align: left; + font-size: 48px; + margin-bottom: 13px; + } + + @include on-desktop { + margin-bottom: 56px; + } } diff --git a/src/styles/parts/_events.scss b/src/styles/parts/_events.scss new file mode 100644 index 000000000..eb2ac5696 --- /dev/null +++ b/src/styles/parts/_events.scss @@ -0,0 +1,189 @@ +.section.section--events { + margin-bottom: 30px; +} + +.event { + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: column; + margin-bottom: 20px; + + @include on-tablet { + margin-bottom: 15px; + align-items: flex-start; + } + + @include on-desktop { + align-items: center; + flex-direction: row; + margin-bottom: 104px; + } + + &__img { + width: 100%; + height: 210px; + + @include on-tablet { + margin-bottom: 0; + height: auto; + max-width: 700px; + } + + img { + width: 100%; + height: 95%; + } + } + + &__link { + text-decoration: none; + width: 100%; + + @include on-tablet { + max-width: 470px; + padding-left: 5px; + } + + @include on-desktop { + max-width: 370px; + padding-left: 0; + } + } + + &__details { + margin-bottom: 10px; + display: flex; + justify-content: space-between; + + @include on-tablet { + margin-bottom: 30px; + justify-content: flex-start; + } + } + + &__type { + font-family: $ff-ibm; + font-weight: 500; + font-size: 16px; + color: #687480; + + @include on-tablet { + font-size: 14px; + } + } + + &__date { + font-family: $ff-ibm; + font-weight: 500; + font-size: 16px; + color: #1a5a4c; + margin-left: 25px; + + @include on-tablet { + font-size: 14px; + } + } + + &__title { + font-family: $ff-monserrat; + font-weight: 400; + font-size: 28px; + margin-top: 0; + margin-bottom: 15px; + color: $dark-grey; + + @include on-tablet { + font-size: 36px; + } + + &::after { + content: ''; + display: inline-block; + width: 10px; + height: 10px; + background-color: $tomato; + margin-left: 10px; + transform: translateY(-5px); + + @include on-tablet { + width: 15px; + height: 15px; + margin-left: 20px; + } + } + } + + &__desc { + font-family: $ff-ibm; + font-weight: 300; + font-size: 16px; + line-height: 1.5; + color: #4e4e4e; + } +} + +.event.event--banner { + flex-direction: column; + position: relative; + + @include on-tablet { + margin-top: 45px; + margin-bottom: 0; + } + + .event { + &__img { + max-width: 100%; + + @include on-tablet { + height: 410px; + } + } + + &__link { + max-width: 280px; + background-color: $color-white; + box-shadow: 0 2px 0 0 #1a5a4c40; + padding: 6px 3px 12px; + transform: translateY(-55px); + text-align: center; + margin: 0 auto; + + @include on-tablet { + text-align: left; + max-width: 570px; + padding: 26px 53px 39px; + transform: translateY(-103px); + } + + @include on-desktop { + padding: 20px 100px 50px; + transform: translateY(-88px); + } + } + + &__details { + margin-bottom: 0; + padding: 0 18px; + + @include on-tablet { + padding: 0; + } + } + + &__title { + margin-top: 18px; + margin-bottom: 0; + font-size: 27px; + + &::after { + display: none; + } + + @include on-tablet { + font-size: 36px; + } + } + } +} diff --git a/src/styles/parts/_footer.scss b/src/styles/parts/_footer.scss new file mode 100644 index 000000000..996922e61 --- /dev/null +++ b/src/styles/parts/_footer.scss @@ -0,0 +1,198 @@ +.footer { + padding: 50px 20px 55px; + margin: 0 auto; + + @include on-tablet { + max-width: $tablet-min-width; + padding: 50px 35px 35px; + } + + @include on-desktop { + max-width: $desktop-min-width; + } + + @include on-desktop-wide { + padding: 50px 55px 35px; + max-width: $desktop-wide-min-width; + } + + &__top { + display: grid; + + font-family: $ff-ibm; + font-weight: 400; + font-size: 14px; + line-height: 26px; + + grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); + gap: 20px; + + @include on-tablet { + grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); + } + + @include on-desktop { + grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); + gap: 30px; + } + } + + &__col { + max-width: 170px; + min-width: 100px; + position: relative; + + div { + line-height: 1.5; + } + + &:nth-child(1) { + max-width: 100%; + grid-column: -1 / 1; + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 19px; + + @include on-tablet { + grid-column: span 1; + max-width: 170px; + display: block; + margin-bottom: 0; + } + + @include on-desktop { + grid-column: span 3; + } + + img { + width: 62px; + height: 72px; + } + } + + &:nth-child(2), + &:nth-child(3) { + grid-column: span 1; + + @include on-tablet { + grid-column: span 2; + } + } + + &:nth-child(4) { + grid-column: -1 / 1; + max-width: 500px; + border-top: 1px solid #1a5a4c80; + + padding-top: 35px; + margin-top: 10px; + + @include on-tablet { + grid-column: 2 / 7; + } + + @include on-desktop { + padding-top: 0; + margin-top: 0; + grid-column: 8 / -1; + border-top: 0; + border-left: 1px solid #1a5a4c80; + padding-left: 69px; + } + } + + strong { + display: block; + + @include on-tablet { + display: inline; + } + } + } + + &__address { + text-decoration: none; + color: $dark-grey; + } + + &__menu, + &__social { + list-style: none; + padding: 0; + margin: 0; + } + + &__title { + margin: 0 0 15px; + } + + &__menu { + display: flex; + flex-flow: row wrap; + } + + &__link { + min-width: 140px; + margin-bottom: 8px; + + a { + text-decoration: none; + color: $dark-grey; + } + + @include on-desktop { + min-width: 210px; + } + } + + &__social { + display: flex; + justify-content: space-between; + max-width: 70px; + width: 100%; + + @include on-tablet { + margin-top: 62px; + } + } + + &__copyright { + margin-top: 66px; + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: column-reverse; + + font-family: $ff-ibm; + font-weight: 300; + font-size: 12px; + + color: $dark-grey; + + gap: 11px; + + @include on-tablet { + flex-direction: row; + } + } +} + +.scroll-top { + width: 50; + height: 50; + border-radius: 50%; + border-width: 1px; + border-style: solid; + border-color: #1A5A4C; + position: absolute; + bottom: 0; + right: 0; + display: flex; + align-items: center; + justify-content: center; + + @include on-tablet { + display: none; + } +} diff --git a/src/styles/parts/_gallery.scss b/src/styles/parts/_gallery.scss new file mode 100644 index 000000000..a75a8bc5d --- /dev/null +++ b/src/styles/parts/_gallery.scss @@ -0,0 +1,84 @@ +.section.section--gallery { + margin-top: 26px; + margin-bottom: 145px; + + @include on-tablet { + margin-top: -17px; + } + + @include on-desktop { + margin-top: 0; + margin-bottom: 200px; + } +} + +.gallery { + &__container { + display: flex; + gap: 10px; + scroll-behavior: smooth; + + @media (max-width: 1268px) { + scroll-snap-type: x mandatory; + overflow-x: auto; + } + + @include on-tablet { + min-height: 535px; + } + + @include on-desktop { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); + gap: 30px; + } + } + + &__dots { + width: 70%; + margin: 0 auto; + display: flex; + margin-top: 20px; + justify-content: space-around; + + @include on-tablet { + display: none; + } + } + + &__dot { + @include reset-button; + + width: 9px; + height: 9px; + border-radius: 100%; + background-color: #e0e0e0; + + &:focus, + &:hover { + background-color: #1a5a4c; + } + } + + &__item { + flex: 0 0 80%; + scroll-snap-align: start; + + @include on-tablet { + grid-column: span 4; + } + + &:nth-child(2), + &:nth-child(3) { + @include on-desktop { + grid-column: span 8; + } + } + } + + &__item img { + width: 100%; + + @include hover(transform, scale(1.05)); + } +} diff --git a/src/styles/parts/_header.scss b/src/styles/parts/_header.scss new file mode 100644 index 000000000..07fe7165f --- /dev/null +++ b/src/styles/parts/_header.scss @@ -0,0 +1,159 @@ +.header { + @include container; + + display: flex; + position: relative; + z-index: 5; + align-items: center; + margin-top: 10px; + + @include on-tablet { + margin-top: 15px; + } + + &__toggle { + @include reset-button; + + margin-right: 28px; + + @include on-tablet { + margin-right: 0; + } + } + + &__logo { + margin: 0 auto; + } + + &__overlay { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + background-color: hsl(0deg 0% 0% / 54%); + z-index: 10; + + @include hover(transform, translateY(0)); + } + + &__menu { + position: fixed; + width: 100%; + min-height: 233; + top: 0; + left: 0; + background-color: #1a5a4c; + z-index: 15; + padding: 30px 20px; + display: flex; + color: white; + font-family: $ff-ibm; + flex-direction: column; + + @include hover(transform, translateY(0)); + + @include on-tablet { + padding: 40px; + flex-direction: row; + } + + @include on-desktop { + justify-content: center; + } + } + + &__navigation { + position: relative; + padding-left: 0; + + display: flex; + align-items: flex-start; + + @include on-tablet { + padding-left: 124px; + } + + .header__toggle { + @include on-tablet { + position: absolute; + top: 0; + left: 0; + } + + @include on-desktop { + top: -13px; + left: 51px; + } + } + + ul { + list-style: none; + margin: 0; + padding: 0; + flex-flow: row wrap; + display: flex; + align-items: flex-start; + justify-content: space-between; + + li { + margin-bottom: 30px; + max-width: 100px; + width: 100%; + + @include on-desktop { + max-width: 140px; + } + } + + a { + color: white; + text-decoration: none; + font-weight: 500; + font-size: 18px; + + @include on-desktop { + font-size: 22px; + } + } + } + } + + &__schedule { + border-top: 1px solid $color-white; + + display: flex; + flex-flow: row wrap; + padding-top: 24px; + + @include on-tablet { + border-top: 0; + border-left: 1px solid $color-white; + padding-left: 102px; + margin-left: 102px; + padding-top: 0; + } + + > div { + max-width: 190px; + margin-right: 30px; + margin-bottom: 20px; + } + } + + &__title { + width: 100%; + margin-top: 0; + } +} + +body:not(._menu-open) { + .header__overlay, + .header__menu { + transform: translateY(-100%); + } +} + +._menu-open { + overflow: hidden; +} diff --git a/src/styles/parts/_hero.scss b/src/styles/parts/_hero.scss new file mode 100644 index 000000000..ffb1037b9 --- /dev/null +++ b/src/styles/parts/_hero.scss @@ -0,0 +1,155 @@ +.section.section--hero { + margin-top: -85px; + padding: 0; + margin-bottom: 70px; + + @include on-tablet { + margin-bottom: 115px; + min-height: 390px; + max-width: 100%; + } + + @include on-desktop { + margin-bottom: 200px; + } +} + +.hero { + &__info { + grid-column: -1 / 1; + display: flex; + flex-flow: column wrap; + align-items: center; + justify-content: center; + order: 1; + position: relative; + + @include on-tablet { + grid-column: 1 / 3; + order: 0; + align-items: flex-start; + justify-content: center; + padding-left: 34px; + } + + @include on-desktop { + align-items: self-end; + justify-content: center; + grid-column: 3 / 7; + max-width: 470px; + padding: 0; + } + } + + &__banner { + grid-column: -1 / 1; + order: 0; + height: 303px; + + @include on-tablet { + grid-column: 4 / -1; + height: auto; + } + + @include on-desktop { + grid-column: 8 / -1; + position: relative; + } + + img { + width: 100%; + height: 100%; + } + } + + &__title { + font-family: $ff-monserrat; + font-size: 45px; + line-height: 1; + color: $dark-grey; + font-weight: 700; + text-transform: uppercase; + text-align: center; + margin: 0 0 21px; + + @include on-tablet { + font-size: 54px; + line-height: 1.3; + text-align: left; + margin-bottom: 51px; + } + + @include on-desktop { + font-size: 72px; + } + } + + &__button { + font-family: $ff-ibm; + border: 1px solid #1a5a4c; + text-transform: uppercase; + display: flex; + align-items: center; + justify-content: center; + position: relative; + text-decoration: none; + + span { + height: 50px; + width: 230px; + font-weight: 500; + color: $dark-grey; + + display: flex; + align-items: center; + justify-content: center; + + @include on-tablet { + height: 70px; + width: 200px; + } + } + + .icon-right { + display: flex; + width: 50px; + height: 50px; + background-color: #1a5a4c; + align-items: center; + justify-content: center; + + @include on-tablet { + width: 70px; + height: 70px; + } + } + } + + &__event { + color: #687480; + font-family: $ff-ibm; + font-weight: 700; + font-size: 14px; + text-transform: uppercase; + display: none; + align-items: center; + + position: absolute; + bottom: 32px; + left: -56px; + transform: rotate(-90deg); + + &::before { + content: ''; + display: block; + width: 70px; + height: 1px; + background-color: #1A5A4C; + margin-right: 20px; + } + + @include on-desktop { + display: flex; + } + } +} diff --git a/src/styles/parts/_subscribe.scss b/src/styles/parts/_subscribe.scss new file mode 100644 index 000000000..55e006760 --- /dev/null +++ b/src/styles/parts/_subscribe.scss @@ -0,0 +1,87 @@ +.subscribe { + position: relative; + min-height: 380px; + + &__background { + width: 100%; + height: 100%; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + } + + &__info { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; + text-align: center; + width: 100%; + padding: 0 20px; + max-width: 570px; + + p { + font-family: $ff-ibm; + font-weight: 400; + font-size: 18px; + } + + form { + width: 100%; + margin-top: 54px; + + @include on-desktop { + margin-top: 72px; + } + } + } + + &__title { + font-family: $ff-monserrat; + font-weight: 700; + font-size: 36px; + margin: 0; + + @include on-tablet { + font-size: 38px; + } + + @include on-desktop { + font-size: 48px; + } + } + + &__input { + font-family: $ff-monserrat; + height: 50px; + width: calc(100% - 54px); + padding-left: 32px; + border: none; + display: inline-block; + outline: none; + + @include on-tablet { + height: 70px; + width: calc(100% - 104px); + margin-right: 30px; + } + } + + &__submit { + @include reset-button; + + width: 50px; + height: 50px; + background-color: $tomato; + display: inline-block; + + @include on-tablet { + width: 70px; + height: 70px; + } + } +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..f62e5c616 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,58 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; +@mixin reset-button { + appearance: none; + border: none; + background: none; + padding: 0; + margin: 0; + font: inherit; + color: inherit; + cursor: pointer; + text-align: inherit; +} + +@mixin container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); + gap: 20px; + margin: 0 auto; + padding: 0 20px; + + @media (min-width: $tablet-min-width) { + grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); + max-width: $tablet-min-width; + gap: 30px; + padding: 0 35px; + } + + @media (min-width: $desktop-min-width) { + grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); + max-width: $desktop-min-width; + padding: 0 55px; + } +} + +@mixin hover($property, $value) { + transition: #{$property} $effect-duration; + &:hover { - #{$_property}: $_toValue; + #{$property}: $value; + } +} + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin on-desktop-wide { + @media (min-width: $desktop-wide-min-width) { + @content; } } diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..c0bf2842e 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,10 @@ $c-gray: #eee; +$effect-duration: 300ms; +$tablet-min-width: 768px; +$desktop-min-width: 1280px; +$desktop-wide-min-width: 1440px; +$tomato: #f14a27; +$ff-monserrat: Montserrat, sans-serif; +$ff-ibm: 'IBM Plex Sans', sans-serif; +$dark-grey: #0f0e08; +$color-white: #fff;