diff --git a/index.html b/index.html index d339e6856..a9550d820 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,465 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Title + NA MU + + + + + + + + + + - -

Hello Mate Academy

+ +
+
+
+ + burger-menu-button + + + logo NaMu + +
+
+
+ + +
+
+
+
+
+

ХУДОЖНІЙ МУЗЕЙ

+ + + + + +
+ ПОДІЇ + +
+
+
+

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

+
+
+ landscape sea +
+
+
+
ВИСТАВКА
+
26.08-29.11.2019
+
+
+

Йду і повертаюсь

+ red square +
+
+ Національний Художній Музей України презентує унікальну частину + колекції Градобанку - українське мистецтво другої половини + 1980-1995 років. +
+
+
+
+
+ landscape girl +
+
+
+
ВИСТАВКА
+
26.08-29.11.2019
+
+
+

І спогади і мрії

+ red square +
+
+ Національний художній музей України до 100 річчя від дня + народження видатної української художниці Тетяни Яблонської + відкриває ретроспективну ювілейну виставку «І спогади і мрії». +
+
+
+
+
+
+ +
+
+
ЛЕКЦІЯ
+ +
26/08/2019 - 11:00
+
+

Від класицизму до романтизму

+
+
+ +
+

Підписка

+
+ Бути в курсі всіх актуальних подій та останніх новин. +
+
+ + +
+
+
+ diff --git a/src/icons/burger-menu-button.svg b/src/icons/burger-menu-button.svg new file mode 100644 index 000000000..473a1f40a --- /dev/null +++ b/src/icons/burger-menu-button.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/icons/button-arrow-black.svg b/src/icons/button-arrow-black.svg new file mode 100644 index 000000000..799b8a91d --- /dev/null +++ b/src/icons/button-arrow-black.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/icons/button-arrow-white.svg b/src/icons/button-arrow-white.svg new file mode 100644 index 000000000..4bd4df415 --- /dev/null +++ b/src/icons/button-arrow-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/facebook-logo.svg b/src/icons/facebook-logo.svg new file mode 100644 index 000000000..4ccaf0aba --- /dev/null +++ b/src/icons/facebook-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/icons/footer-button.png b/src/icons/footer-button.png new file mode 100644 index 000000000..fb5df874c Binary files /dev/null and b/src/icons/footer-button.png differ diff --git a/src/icons/instagram-logo.svg b/src/icons/instagram-logo.svg new file mode 100644 index 000000000..4c9b6ca10 --- /dev/null +++ b/src/icons/instagram-logo.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/icons/red-square.svg b/src/icons/red-square.svg new file mode 100644 index 000000000..2191e58b5 --- /dev/null +++ b/src/icons/red-square.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/NA_MU_logo.svg b/src/images/NA_MU_logo.svg new file mode 100644 index 000000000..07e6290c4 --- /dev/null +++ b/src/images/NA_MU_logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/bg-art-museum.svg b/src/images/bg-art-museum.svg new file mode 100644 index 000000000..78fe63920 --- /dev/null +++ b/src/images/bg-art-museum.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/current-events-painting1.svg b/src/images/current-events-painting1.svg new file mode 100644 index 000000000..96a280966 --- /dev/null +++ b/src/images/current-events-painting1.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/current-events-painting2.svg b/src/images/current-events-painting2.svg new file mode 100644 index 000000000..67059e779 --- /dev/null +++ b/src/images/current-events-painting2.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/from_classicism-painting.svg b/src/images/from_classicism-painting.svg new file mode 100644 index 000000000..8899f6315 --- /dev/null +++ b/src/images/from_classicism-painting.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/gallery-girl.svg b/src/images/gallery-girl.svg new file mode 100644 index 000000000..59d3cc18f --- /dev/null +++ b/src/images/gallery-girl.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/gallery_park.svg b/src/images/gallery_park.svg new file mode 100644 index 000000000..773eea453 --- /dev/null +++ b/src/images/gallery_park.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/gallery_sunset.svg b/src/images/gallery_sunset.svg new file mode 100644 index 000000000..56c819e2a --- /dev/null +++ b/src/images/gallery_sunset.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/gallery_village.svg b/src/images/gallery_village.svg new file mode 100644 index 000000000..849e4a870 --- /dev/null +++ b/src/images/gallery_village.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/subscription-block-bg.svg b/src/images/subscription-block-bg.svg new file mode 100644 index 000000000..9608884c5 --- /dev/null +++ b/src/images/subscription-block-bg.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd5400..5cfc5b4d0 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,6 @@ @font-face { font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; + src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); } diff --git a/src/styles/blocks/art_museum.scss b/src/styles/blocks/art_museum.scss new file mode 100644 index 000000000..13e157505 --- /dev/null +++ b/src/styles/blocks/art_museum.scss @@ -0,0 +1,132 @@ +.art_museum { + position: relative; + top: 0; + right: 0; + left: 0; + + margin: 0; + margin-bottom: 70px; + + @include on-tablet { + display: flex; + flex-direction: row-reverse; + align-items: center; + justify-content: space-around; + } + + &__bg { + grid-column: 1/-1; + + width: 100%; + height: 300px; + + background-image: url(/src/images/bg-art-museum.svg); + background-repeat: no-repeat; + background-size: cover; + + @include on-tablet { + height: 384px; + } + + @include on-desktop { + height: 655px; + } + } + + &__description { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + margin: 0; + + @include on-tablet { + align-items: start; + justify-content: left; + width: 50%; + } + + @include on-desktop { + position: relative; + align-items: end; + } + } + + &__title { + font-family: Montserrat, sans-serif; + font-size: 45px; + font-weight: 700; + line-height: 100%; + text-align: center; + + @include on-tablet { + font-size: 54px; + text-align: left; + } + + @include on-desktop { + margin-bottom: 89px; + font-size: 72px; + } + } + + &__button-buy-tickets { + display: flex; + + box-sizing: border-box; + width: $button-input-width-mobile; + height: $button-input-height-mobile; + border: 1px $bg-aside-color solid; + + text-decoration: none; + + &--description { + width: 230px; + border: none; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 100%; + + background-color: transparent; + } + + &--arrow { + width: 50px; + border: none; + background-color: $bg-aside-color; + } + + @include on-tablet { + width: $button-input-width-tablet; + height: $button-input-height-tablet; + } + } + + &__element-events { + display: none; + + @include on-desktop { + position: absolute; + top: 110%; + right: 80%; + transform: rotate(271deg); + + display: flex; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 700; + color: #687480; + + hr { + width: 70px; + height: 1px; + margin-right: 20px; + color: $bg-aside-color; + } + } + } +} diff --git a/src/styles/blocks/aside.scss b/src/styles/blocks/aside.scss new file mode 100644 index 000000000..53f13c24d --- /dev/null +++ b/src/styles/blocks/aside.scss @@ -0,0 +1,100 @@ +.aside { + position: fixed; + z-index: 3; + top: 0; + right: 0; + left: 0; + transform: translateX(-100%); + + overflow-y: hidden; + + opacity: 0; + background-color: $bg-aside-color; + + transition: all 0.3s; + + &:target { + pointer-events: all; + transform: translateX(0); + opacity: 1; + + &::before { + position: fixed; + z-index: 2; + top: 0; + left: 0; + + display: block; + + width: 100%; + height: 100%; + + opacity: 0.5; + background-color: rgba(211, 197, 197, 0.69); + } + } + + &__container { + box-sizing: border-box; + width: 90%; + padding-block: 27px; + + @include grid-page; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 150%; + color: #fff; + } + + &__menu { + display: flex; + gap: 30px; + align-items: first baseline; + justify-content: space-between; + + margin-bottom: 24px; + + color: #fff; + + @include on-tablet { + grid-column: 1/3; + } + + @include on-desktop { + grid-column: 1/5; + } + + a { + color: #fff; + } + } + + &__work-info { + grid-column: 1/-1; + + @include on-tablet { + display: flex; + grid-column: 4/-1; + flex-direction: column; + } + + @include on-desktop { + grid-column: 7/-1; + } + } + + &__container-info { + display: flex; + gap: 30px; + } + + &__time-info { + font-weight: 600; + } + + &__part-schedule { + white-space: nowrap; + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 000000000..673d96ec3 --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,11 @@ +.container { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 39px; + } + + @include on-desktop { + padding-inline: 55px; + } +} diff --git a/src/styles/blocks/current_events.scss b/src/styles/blocks/current_events.scss new file mode 100644 index 000000000..bede5d503 --- /dev/null +++ b/src/styles/blocks/current_events.scss @@ -0,0 +1,109 @@ +.current_events { + position: relative; + + grid-column: 1/-1; + + box-sizing: border-box; + width: 100vw; + margin-bottom: 60px; + padding-bottom: 0; + + &__part { + display: flex; + flex-direction: column; + + @include on-desktop { + @include grid-page; + + align-items: center; + } + } + + &__part:nth-of-type(1) { + margin-bottom: 60px; + } + + &__container { + display: flex; + flex-direction: column; + + @include on-desktop { + grid-column: 9 / -1; + } + } + + &__container-paint { + overflow: hidden; + width: 100%; + height: 210px; + margin-bottom: 40px; + + @include on-tablet { + grid-column: 1 / 7; + width: 100%; + height: 520px; + margin-bottom: 40px; + } + } + + &__painting { + width: 100%; + margin-bottom: 20px; + + @include on-desktop { + width: 670px; + height: auto; + } + + @include hover(scale, 1.2); + } + + &__painting-info { + @include grid-page; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: $main-font-size; + white-space: nowrap; + } + + &__info-description { + grid-column: span 1; + font-weight: $info-description-fw; + color: rgba(104, 116, 128, 1); + } + + &__info-date { + grid-column: 2/-1; + font-weight: $info-date-fw; + color: $bg-aside-color; + } + + &__part-title { + display: flex; + gap: 11px; + align-items: center; + justify-content: left; + + @include on-desktop { + grid-column: 1/-1; + } + } + + &__part-title-name { + font-family: Montserrat, sans-serif; + font-size: 28px; + font-weight: 400; + + @include on-tablet { + font-size: 36px; + } + } + + &__part-description { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 300; + line-height: 150%; + text-align: left; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..af2d2d774 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,120 @@ +.footer { + &__container { + position: relative; + + @include grid-page; + + padding-bottom: 80px; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 150%; + color: $footer-color-text; + } + + &__top { + display: flex; + grid-column: 1/-1; + gap: 149px; + align-items: center; + justify-content: space-between; + + box-sizing: border-box; + margin-bottom: 40px; + + @include on-tablet { + grid-column: 1/2; + flex-direction: column; + gap: 62px; + align-items: start; + justify-content: start; + } + } + + &__icons { + display: flex; + gap: 20px; + align-items: center; + justify-content: space-between; + + @include on-tablet { + gap: 32px; + } + } + + &__work-schedule { + width: 130px; + margin-bottom: 70px; + + @include on-tablet { + grid-column: 2/4; + width: 220px; + } + + @include on-desktop { + grid-column: 3/4; + } + } + + &__part-schedule { + @include on-tablet { + white-space: nowrap; + } + } + + &__time-info { + font-weight: 600; + } + + &__contacts { + width: 128px; + + @include on-tablet { + grid-column: 4/5; + width: 220px; + } + } + + &__bottom-menu { + grid-column: 1/-1; + + @include grid-page; + + @include on-tablet { + grid-column-start: 2; + color: $footer-color-text; + } + + @include on-desktop { + grid-column: 8/11; + } + + a { + color: $footer-color-text; + } + } + + &__button-up { + position: absolute; + top: 65%; + left: 80%; + + display: flex; + align-items: center; + justify-content: center; + + width: 50px; + height: 50px; + border: 1px solid $bg-aside-color; + border-radius: 50%; + + color: $bg-aside-color; + + background-color: transparent; + + @include on-tablet { + display: none; + } + } +} diff --git a/src/styles/blocks/from_classicism.scss b/src/styles/blocks/from_classicism.scss new file mode 100644 index 000000000..f9166bd82 --- /dev/null +++ b/src/styles/blocks/from_classicism.scss @@ -0,0 +1,84 @@ +.from_classicism { + position: relative; + grid-column: 1/-1; + width: 100vw; + + @include grid-page; + + &__bg { + grid-column: 1/-1; + + width: 100vw; + height: 210px; + + background-image: url(/src/images/from_classicism-painting.svg); + background-repeat: no-repeat; + background-size: cover; + + @include on-tablet { + height: 390px; + } + + @include on-desktop { + height: 550px; + } + } + + &__container { + position: relative; + top: -60px; + + display: flex; + grid-column: 1/-1; + flex-direction: column; + align-items: center; + justify-content: center; + + box-sizing: border-box; + width: 280px; + margin: 0 auto; + padding-block: 24px 20px; + border-bottom: 2px #1a5a4c40 solid; + + text-align: center; + + background-color: #fff; + + @include on-tablet { + width: 570px; + padding-block: 50px; + padding-inline: 55px; + text-align: left; + } + } + + &__info { + display: flex; + align-self: stretch; + justify-content: space-between; + padding-inline: 21px; + } + + &__info-description { + font-weight: $info-description-fw; + color: rgba(104, 116, 128, 1); + } + + &__info-date { + font-weight: $info-date-fw; + color: $bg-aside-color; + } + + &__title { + margin-bottom: 0; + + font-family: Montserrat, sans-serif; + font-size: 28px; + font-weight: 400; + line-height: 100%; + + @include on-tablet { + font-size: 36px; + } + } +} diff --git a/src/styles/blocks/gallery.scss b/src/styles/blocks/gallery.scss new file mode 100644 index 000000000..8e47262ad --- /dev/null +++ b/src/styles/blocks/gallery.scss @@ -0,0 +1,177 @@ +.gallery { + position: relative; + + grid-column: 1/-1; + + box-sizing: border-box; + width: 100vw; + margin-bottom: 100px; + + @include grid-page; + + &__title { + grid-column: span 2; + + @include on-tablet { + grid-column: 2/2; + font-size: 48px; + } + } + + &__wrapper { + position: relative; + + display: flex; + grid-column: span 2; + align-items: center; + justify-content: center; + + height: 410px; + padding: 20px; + + @include on-tablet { + grid-column: span 6; + } + + @include on-desktop { + grid-column: span 12; + height: fit-content; + } + } + + &__slider { + overflow: hidden; + width: 280px; + height: 410px; + + @include on-tablet { + width: 640px; + } + + @include on-desktop { + width: 100%; + height: fit-content; + } + } + + &__slider-nav { + position: absolute; + top: 100%; + left: 50%; + transform: translate(-50%); + + display: flex; + gap: 22px; + + width: 102px; + } + + &__slider-nav label { + cursor: pointer; + + display: inline-block; + + width: 9px; + height: 9px; + border-radius: 50%; + + background-color: $color-label; + + transition: background-color 0.2s; + + &:active { + background-color: $bg-aside-color; + } + + @include on-desktop { + display: none; + } + } + + &__slides { + display: flex; + width: 400%; + height: 100%; + + @include on-tablet { + width: 200%; + } + + @include on-desktop { + width: 100%; + height: fit-content; + + @include grid-page; + } + } + + &__slide { + position: relative; + overflow: hidden; + width: 25%; + margin: 20px; + + @include on-tablet { + width: 50%; + } + + @include on-desktop { + width: 100%; + + &--one { + grid-column: 1/4; + width: 100%; + height: 600px; + } + + &--two { + grid-column: 4/12; + width: 100%; + height: 600px; + } + + &--three { + grid-column: 1/8; + width: 100%; + height: 360px; + } + + &--four { + grid-column: 8/12; + width: 100%; + height: 360px; + } + } + + img { + height: 100%; + object-fit: cover; + + @include on-desktop { + width: 100%; + } + + @include hover(scale, 1.2); + } + } + + .s1:checked ~ &__slides { + transform: translate(0); + } + + .s2:checked ~ &__slides { + transform: translate(-25%); + } + + .s3:checked ~ &__slides { + transform: translate(-50%); + } + + .s4:checked ~ &__slides { + transform: translate(-75%); + } +} + +input[name='control'] { + display: none; +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..a3a3d9392 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,25 @@ +.header { + position: absolute; + z-index: 1; + top: 0; + + width: 100%; + + background-color: transparent; + + &__content { + display: flex; + gap: 88px; + align-items: center; + justify-content: space-between; + + width: 50%; + padding-top: 9px; + + @include on-tablet { + gap: 60vw; + height: 72px; + padding-top: 15px; + } + } +} diff --git a/src/styles/blocks/line.scss b/src/styles/blocks/line.scss new file mode 100644 index 000000000..fcf57b519 --- /dev/null +++ b/src/styles/blocks/line.scss @@ -0,0 +1,36 @@ +.line { + grid-column: 1/-1; + width: 100%; + height: 1px; + border: none; + + &--aside { + margin-bottom: 24px; + background-color: #fff; + + @include on-tablet { + grid-column: 3/3; + width: 1px; + height: 260px; + } + + @include on-desktop { + grid-column: 6/6; + } + } + + &--footer { + margin-bottom: 40px; + background-color: #1a5a4c80; + + @include on-tablet { + grid-column: 2/5; + } + + @include on-desktop { + grid-column: 7/7; + width: 1px; + height: 260px; + } + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 000000000..e7b1da1c9 --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,3 @@ +.main { + @include grid-page; +} diff --git a/src/styles/blocks/overlay.scss b/src/styles/blocks/overlay.scss new file mode 100644 index 000000000..d743d9d2a --- /dev/null +++ b/src/styles/blocks/overlay.scss @@ -0,0 +1,21 @@ +.overlay { + position: fixed; + z-index: 2; + top: 0; + left: 0; + + display: none; + + width: 100%; + height: 100%; + + background-color: rgba(0, 0, 0, 0.5); +} + +.aside:target ~ .overlay { + display: block; +} + +body:has(.aside:target) { + overflow-y: hidden; +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..3ce2f2522 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,17 @@ +.page { + scroll-behavior: smooth; + + position: relative; + + overflow-x: hidden; + + box-sizing: border-box; + margin: 0; + + background-color: #fff; + + a { + color: inherit; + text-decoration: none; + } +} diff --git a/src/styles/blocks/section.scss b/src/styles/blocks/section.scss new file mode 100644 index 000000000..1ea1ce451 --- /dev/null +++ b/src/styles/blocks/section.scss @@ -0,0 +1,18 @@ +.section { + &__title { + font-family: Montserrat, sans-serif; + font-size: 36px; + font-weight: 700; + line-height: 100%; + text-align: center; + + &--wrap { + overflow-wrap: anywhere; + } + + @include on-tablet { + font-size: 48px; + text-align: left; + } + } +} diff --git a/src/styles/blocks/subscription.scss b/src/styles/blocks/subscription.scss new file mode 100644 index 000000000..48178e7c6 --- /dev/null +++ b/src/styles/blocks/subscription.scss @@ -0,0 +1,59 @@ +.subscription { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + width: 100vw; + margin-bottom: 50px; + padding-block: 88px; + + color: #fff; + text-align: center; + + background-image: url(/src/images/subscription-block-bg.svg); + + &__description { + margin-bottom: 50px; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 150%; + overflow-wrap: anywhere; + } + + &__form { + display: flex; + + width: $button-input-width-mobile; + height: $button-input-height-mobile; + margin: 0 auto; + + text-decoration: none; + + @include on-tablet { + gap: 16px; + } + + &--input { + width: 230px; + padding-left: 24px; + border: none; + + font-family: Montserrat, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 100%; + + background-color: #fff; + outline: none; + } + + &--button { + width: 50px; + border: none; + background-color: $bg-input-arrows-subscription; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..3d1fba73f 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,22 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import 'blocks/container'; +@import 'blocks/header'; +@import 'blocks/art_museum'; +@import 'blocks/current_events'; +@import 'blocks/main'; +@import 'blocks/page'; +@import 'blocks/section'; +@import 'blocks/from_classicism'; +@import 'blocks/gallery'; +@import 'blocks/subscription'; +@import 'blocks/footer'; +@import 'blocks/aside'; +@import 'blocks/line'; -body { - background: $c-gray; +@import 'blocks/overlay'; + +html { + scroll-behavior: smooth; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..92db575cd 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,42 @@ @mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; + cursor: pointer; + transition: all 0.4s; &:hover { #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin content-padding-block() { + padding-block: 24px; + + @include on-tablet { + padding-block: 36px; + } +} + +@mixin grid-page { + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 20px; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + column-gap: 30px; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..d845d31b2 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,13 @@ -$c-gray: #eee; +$bg-aside-color: #1a5a4c; +$bg-input-arrows-subscription: #f14a27; +$color-label: #e0e0e0; +$tablet-min-width: 640px; +$desktop-min-width: 1280px; +$info-description-fw: 500; +$info-date-fw: 700; +$main-font-size: 16px; +$button-input-height-mobile: 50px; +$button-input-height-tablet: 70px; +$button-input-width-mobile: 280px; +$button-input-width-tablet: 270px; +$footer-color-text: #0f0e08;